Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

snapshot as paint input?
Started by roboward Oct 19 2013 01:44 PM

39 replies to this topic
[TOPIC CONTROLS]
Page 2 of 2 1 2
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#26

vlads

[GLOBAL: userInfoPane.html]
vlads
  • Contributor

  • 657 posts
  • Corona Staff

This is what I got

Attached File  Screen Shot 2016-02-02 at 8.11.50 PM.png   174.85KB   3 downloads



[TOPIC: post.html]
#27

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 796 posts
  • Corona SDK

@vlads Yours is what I'm hoping to get. Probably a dumb question, but that's also the simulator? (Just noting the differences at the top from Matthew's shot.)

 

What Matthew has matches what I was shown earlier. The vertices in that case come from userdata, whereas the uvs should be in the texture but seem to resolve to 0. (I think.) If the same thing's happening with the other triangles, the vertex information is all 0 too and so we have a zero area triangle.

 

I'm stumped.  :huh:



[TOPIC: post.html]
#28

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 796 posts
  • Corona SDK

I got around to working on this on Android and was running into the same problems. On investigation, it looks like the shader compiler on Windows was overly lenient about the ordering of certain keywords, namely varying and the precision qualifier. (When it comes to out params, the others are the offenders. Go figure.) With that I have it running on an older tablet.

 

Could I get another couple tests on OSX, to see if this fixed the issues? I'd be interested in any iOS results, as well. (Same link as before.)

 

There are now three instances of the mesh showing at once, though the right-hand one should gracefully go transparent when vertex texture fetch is unavailable. This is probably unlikely on desktop, but a decent possibility on mobile.

 

Each of these three implements a different technique. The newest is a fairly brute force approach, but its vertices are able to go offscreen. The other two use some encodings that depend on coordinates being in the range [0, 1024)... to fix that I either need to write a ton of shaders for the corner cases or perform clipping, which would really complicate the internals. For now I'm just clamping in these cases.  :P

 

I've added some touch controls to move the vertices around (the blue circles on one of the meshes) as well as the texture coordinates (the red ones, below).

 

Thanks for any help!



[TOPIC: post.html]
#29

sirmania

[GLOBAL: userInfoPane.html]
sirmania
  • Contributor

  • 154 posts
  • Corona SDK

Hi Steve!

 

I can´t begin to explain how excited I am about this!

 

 

I tested the mesh_test and here is what I got running Version 2015.2802 (2015.12.31) on my brand new iMac:

 

Simulator:

Only two "meshes" and the one that I can edit is grey (like Matthew had). The other one is not grey.

 

iPhone 6 plus:

Three meshes and none of them are grey. It seems to work!!!

 

OSX:

Same as simulator.

 

-Tom

 

I downloaded latest daily build 2824 and tested again with the same results.



[TOPIC: post.html]
#30

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 796 posts
  • Corona SDK

@sirmania

 

Well, it sounds like there's at least enough to work with.  :)  In practice, there could be noticeable speed differences among the techniques; for now, all I have is this tiny program, so I can't say.

 

I have some vague ideas where the problem might be happening, but will need to do some digging.

 

If you add

mesh.DoTest(100, 100, 1, 0, 0, -- Look for a red pixel at (100, 100)
            function(vtf)
              print("Supports VTF?", vtf)
            end)

do you get true or false? If false, that will explain the missing parts. (I'm getting mixed results trying to learn which architectures support vertex texture fetch, sometimes blaming the driver as well.)



[TOPIC: post.html]
#31

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 796 posts
  • Corona SDK

The new public release gave me the same issues on Windows, which seem to have been fixed by amending my half-texel offsets (these were my "some vague ideas").

 

This might have fixed the issues on OSX. If I could get another set of eyes on it, that'd be great!



[TOPIC: post.html]
#32

sirmania

[GLOBAL: userInfoPane.html]
sirmania
  • Contributor

  • 154 posts
  • Corona SDK

It works now both in the mac simulator and as an osX app :D

I used the latest build AND a previous build (2808) and it worked on both...Great stuff!

 

-Tom



[TOPIC: post.html]
#33

vlads

[GLOBAL: userInfoPane.html]
vlads
  • Contributor

  • 657 posts
  • Corona Staff

Hey guys! I really appreciated your feedback on TextureResourceCanvas. I have small request - I added several features to it, can you provide your feedback for them? They aren't documented yet, because I'm not sure if they're final. So, give it a try:

 

1. basically, new feature is anchorX and anchorY properties of TextureResourceCanvas. With them you can change origin of Canvas' viewport / pan

2. width and height for Canvases (only) are now modifiable. It can be used to change size of Canvas' viewport / zoom.

 

I attached updated Canvas Demo example. I would be very grateful for your feedback.

Attached Files



[TOPIC: post.html]
#34

redninjacat

[GLOBAL: userInfoPane.html]
redninjacat
  • Contributor

  • 196 posts
  • Corona SDK

I should had mentioned. Yes, for technical reasons you can not use TextureResourceCanvas as a mask (at this point). But you can set mask to objects using it as a fill without a problem.

 

@vlads, I tried two different approaches to this but without success. Perhaps I am misunderstanding something that you can help me with. I am using Build 2866.

 

I took the existing Flashlight demo that comes in the Samples folder of Corona SDK and made the following tweaks:

 

I added this texture:

local tex = graphics.newTexture( { type="canvas", width=200, height=200 } )

local blackRect = display.newRect(0,0,200,200)
blackRect:setFillColor(0)
tex:draw( blackRect )

-- Create a circle and draw/render it to the texture
local glow = display.newCircle( 0, 0, 90 )
glow.fill.effect = "generator.radialGradient"
glow.fill.effect.color1 = { 1, 1, 1, 1 }
glow.fill.effect.color2 = { 0, 0, 0, 0 }
glow.fill.effect.center_and_radiuses  =  { 0.5, 0.5, 0.3, 0.9 }
glow.fill.effect.aspectRatio  = 1
tex:draw( glow )

-- Schedule texture objects to be rendered to texture before next frame
tex:invalidate()

Then I tried each of the following methods in an attempt to set the mask from the texture. (Besides this, I also tried to create a Mask directly from the canvas file but that blows up as previously indicated StarCrunch.)

local mask = display.newRect(0, 0, 200, 200)
mask.fill = { type="image", filename=tex.filename, baseDir = tex.baseDir}
image:setMask( mask )
local mask = display.newImageRect(tex.filename, tex.baseDir, 200, 200)
image:setMask( mask )

In both these cases, the "mask" is simply displayed at the top left corner of the game.

 

Below is my full main.lua. The resources from the Flashlight sample app are required to make it run.

-- Abstract: Flashlight sample project
-- Demonstrates masking an image. The flashlight skews depending 
-- on location from center.
--
-- Version: 1.0 (September 1, 2010)
-- 
-- Sample code is MIT licensed, see https://www.coronalabs.com/links/code/license
-- Copyright (C) 2010 Corona Labs Inc. All Rights Reserved.
--
-- Supports Graphics 2.0
------------------------------------------------------------

display.setStatusBar( display.HiddenStatusBar )

local centerX = display.contentCenterX
local centerY = display.contentCenterY

-- Black background
local bkg = display.newRect( centerX, centerY, 768, 1024 )
bkg:setFillColor( 0 )

-- Image to be masked
local image = display.newImageRect( "image.png", 768, 1024 )
image:translate( centerX, centerY )


--Texture for mask??
local tex = graphics.newTexture( { type="canvas", width=200, height=200 } )

local blackRect = display.newRect(0,0,200,200)
blackRect:setFillColor(0)
tex:draw( blackRect )

-- Create a circle and draw/render it to the texture
local glow = display.newCircle( 0, 0, 90 )
glow.fill.effect = "generator.radialGradient"
glow.fill.effect.color1 = { 1, 1, 1, 1 }
glow.fill.effect.color2 = { 0, 0, 0, 0 }
glow.fill.effect.center_and_radiuses  =  { 0.5, 0.5, 0.3, 0.9 }
glow.fill.effect.aspectRatio  = 1
tex:draw( glow )

-- Schedule texture objects to be rendered to texture before next frame
tex:invalidate()

-- Masks
local mask = graphics.newMask( "circlemask.png" )
--image:setMask( mask )

local mask2 = display.newRect(0, 0, 200, 200)
mask2.fill = { type="image", filename=tex.filename, baseDir = tex.baseDir}
image:setMask( mask2 )

-- Create display object with texture as contents
local mask3 = display.newImageRect(tex.filename, tex.baseDir, 200, 200)
mask3.x = display.contentCenterX
mask3.y = display.contentCenterY
--image:setMask( mask3 )

local radiusMax = math.sqrt( centerX*centerX + centerY*centerY )

function onTouch( event )
	local t = event.target

	local phase = event.phase
	if "began" == phase then
		display.getCurrentStage():setFocus( t )

		-- Spurious events can be sent to the target, e.g. the user presses 
		-- elsewhere on the screen and then moves the finger over the target.
		-- To prevent this, we add this flag. Only when it's true will "move"
		-- events be sent to the target.
		t.isFocus = true

		-- Store initial position
		t.x0 = event.x - t.maskX
		t.y0 = event.y - t.maskY
	elseif t.isFocus then
		if "moved" == phase then
			-- Make object move (we subtract t.x0,t.y0 so that moves are
			-- relative to initial grab point, rather than object "snapping").
			local maskX = event.x - t.x0
			local maskY = event.y - t.y0
			t.maskX = maskX
			t.maskY = maskY

			-- Stretch the flashlight as it moves further away 
			-- from the screen's center
			local radius = math.sqrt( maskX*maskX + maskY*maskY )
			local scaleDelta = radius/radiusMax
			t.maskScaleX = 1 + scaleDelta
			t.maskScaleY = 1 + 0.2 * scaleDelta

			-- Rotate it appropriately about screen center
			local rotation = math.deg( math.atan2( maskY, maskX ) )
			t.maskRotation = rotation

		elseif "ended" == phase or "cancelled" == phase then
			display.getCurrentStage():setFocus( nil )
			t.isFocus = false
		end
	end

	return true
end
image:addEventListener( "touch", onTouch )

-- By default, the mask will limit the touch region to areas that lie inside 
-- both the mask and the image being masked.  We can override this by setting the
-- isHitTestMasked property to false, so the touch region lies inside the entire image. 
image.isHitTestMasked = false

-- Display instructions
local labelFont = native.systemFont
local myLabel = display.newText( "Touch circle to move flashlight", centerX, 200, labelFont, 34 )
myLabel:setFillColor( 1, 1, 1, 180/255 )




[TOPIC: post.html]
#35

vlads

[GLOBAL: userInfoPane.html]
vlads
  • Contributor

  • 657 posts
  • Corona Staff

I'm not sure what are you trying to do...

Setting canvases as masks wouldn't work for now.



[TOPIC: post.html]
#36

redninjacat

[GLOBAL: userInfoPane.html]
redninjacat
  • Contributor

  • 196 posts
  • Corona SDK

@vlads I am trying to dynamically create a mask by using the texture canvas. My sample code as-is does not work as I want. (I want the flashlight effect.) If you comment out "image:setMask( mask2 )" and uncomment "image:setMask( mask )", the flashlight works just like in the original flashlight demo since it using the png. What I want is for the canvas texture to be used ("mask2" or "mask3"). Your prior comment says "But you can set mask to objects using it as a fill without a problem." but I must not be doing that correctly.



[TOPIC: post.html]
#37

vlads

[GLOBAL: userInfoPane.html]
vlads
  • Contributor

  • 657 posts
  • Corona Staff

As I wrote, you can not use canvases as mask images for now.



[TOPIC: post.html]
#38

redninjacat

[GLOBAL: userInfoPane.html]
redninjacat
  • Contributor

  • 196 posts
  • Corona SDK

Bummer. Okay. So what did you mean by "But you can set mask to objects using it as a fill without a problem."?



[TOPIC: post.html]
#39

vlads

[GLOBAL: userInfoPane.html]
vlads
  • Contributor

  • 657 posts
  • Corona Staff

you can not use canvas in graphics.newMask(filename=canvas.filename, baseDir=canvas.baseDir). This wouldn't work



[TOPIC: post.html]
#40

redninjacat

[GLOBAL: userInfoPane.html]
redninjacat
  • Contributor

  • 196 posts
  • Corona SDK

Hey Vlads, I just wanted to express my gratitude for these new features! Being able to draw to a texture is incredible! I had been using snapshots to develop a game that uses entirely procedurally generated graphics. I was having performance problems though so I had to implement object caching. Once this new feature came out, I converted my code to use textures and discovered that my objects were created so quickly that I no longer needed object caching! Texture canvases rock!




[topic_controls]
Page 2 of 2 1 2
 
[/topic_controls]