snapshot as paint input?

Solar2D Advanced Graphics
#61

Argh, I must retract what I wrote.  :slight_smile:

This much smaller test

-- do local kernel = { category = "generator", group = "custom", name = "vtf\_test" } kernel.vertex = [[uniform sampler2D u\_FillSampler0; P\_UV varying vec3 v\_uv; P\_POSITION vec2 VertexKernel (P\_POSITION vec2 p) { v\_uv = texture2DLod(u\_FillSampler0, CoronaTexCoord, 0.).rgb; return p; }]] kernel.fragment = [[P\_UV varying vec3 v\_uv; P\_COLOR vec4 FragmentKernel (P\_UV vec2 \_) { return vec4(v\_uv, 1.); }]] graphics.defineEffect(kernel) end local r = display.newImage("Image1.jpg") r.x, r.y = display.contentCenterX, display.contentCenterY r.fill.effect = "generator.custom.vtf\_test"

is giving me exactly what I would expect (a blend of the four corner colors) for a variety of images, so apparently it DOES work. Time to restore some earlier code!

(Actually, it doesn’t even seem picky about the name, only that there’s a sampler there… and their order, I suppose, with two? I’ll dig into the spec, when I have a chance.)

Would another option to system.getInfo() that returns  GL_MAX_VERTEX_TEXTURE_IMAGE_UNITS be possible?

#62

@vlads thanks for the help. I managed to achieve what I wanted, and more. Ive just up a post about it here https://forums.coronalabs.com/topic/61473-mode-7-3d-at-60fps/

#63

@ vlads  Well, I’ve got a good proof of concept going for what I was after: mesh test

It seems to be working well on Windows desktop but on somebody else’s OSX machine it’s not.  :frowning: (On the latest daily build, too.) His screenshots from OSX were consistent with the texture not being read. I haven’t attempted on a device.

This basically tests two approaches. In the first, when vertex texture fetch is available, positions and uvs are stored in a texture. Otherwise, positions (which must change) are stored in vertex userdata and uvs plus offsets-to-uvs are stored in the texture. Both techniques are used to sculpt some boring stock triangles into arbitrary ones dynamically.

Actually, if anybody else reading this would care to give the linked code a spin on Windows and / or OSX desktop (or device, I guess, though I’m not sure it’s ready) and confirm (or not) what I said above, it’d be most appreciated!

#64

Here you go, latest OSX.  Untitled_3.png

#65

This is what I got

#66

@ 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:

#67

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.  :stuck_out_tongue:

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!

#68

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.

#69

@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.)

#70

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!

#71

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

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

-Tom

#72

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.

#73

@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 )
#74

I’m not sure what are you trying to do…

Setting canvases as masks wouldn’t work for now.

#75

@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.

#76

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

#77

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

#78

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

#79

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!