Mikal's Recent Forum Activity

  • Ashley thanks for the reply. I do think it could be an issue with my understanding, so I made a very simple effect using pixelSize, shifting the texture using a variable amount passed through as a uniform. I expect to have the same result regardless of effect stacking or opacity. Should I not expect that, or am I using pixelSize incorrectly?

    Here's the simple shader. 

    void main(void)
{
 mediump vec4 c = texture2D(samplerFront, vTex);
	c += texture2D(samplerFront, vTex + (pixelSize * shiftAmount))/2.0;
	gl_FragColor = c;
}

    Here's the simple project with the simple effect bundled.

    kindeyegames.com/forumfiles/ShiftTest.c3p

    Thanks for the help in understanding this.

    Here are the results (I expected them all to match. It looks like the Y axis inverts and the relative amount also changes in terms of the distance of the shift.)

  • I am not looking for a destination size.

    I was looking to have effects that use pixelSize to have the same behavior regardless if there is only one effect applied to a sprite or if there are multiple effects applied to sprite (e.g. requires multiple webgl draws, some to the intermediate surface and the final one to the canvas surface.) From my experimenting it seems to have different behavior. For example for bur if I offset a texture sample by widthScale * pixelSize.x, I seem to get a different visual result depending on whether only one effect is used or if multiple effects are used (e.g. set opacity to 99%). I will work on creating an example and experimenting more to see if it's an issue in my effect or something else that I don't expect.

    Another question, while I work on that. How do you suggest clamping texture samples to stay within the sprite's image? Originally I was using clamp(uv, srcOriginStart, srcOriginEnd) which works when only one effect is used, but that does not seem to work on all platforms when doing multiple effects and the Y axis for SrcOrigin* gets flipped for using the framebuffer as texture vs the image as texture (in particular on iOS it fails.)

    My workaround, for now, is to use: 

    newTex.x = clamp(newTex.x,min(srcOriginStart.x, srcOriginEnd.x),max(srcOriginStart.x, srcOriginEnd.x));
newTex.y = clamp(newTex.y,min(srcOriginStart.y, srcOriginEnd.y),max(srcOriginStart.y, srcOriginEnd.y));

    Do you have other suggestions?

  • Adding must-predraw 'true' seemed to do the trick - now I have consistent behavior and another draw is required.

    I would be interested to hear if this is the right approach Ashley

  • In working on the port of the h & v big Blur, I have found interesting behavior with the effect uniform pixelSize. I am wondering about the best way to handle this.

    The first effect and second effect have different 'relative' pixelSize, so it's not possible to use the same value multiplied by pixelSize to blur each. The first effect renders to offscreen FB from source texture from spritesheet, the second effect renders to Canvas FB from the offscreen FB. It seems like due to differences between the two, the pixelSize is relatively different (e.g. between spritesheet texture and offscreen FB texture.) What's the best method to make these similar?

    I am going to experiment with using must-predraw to see if it would make the behavior consistent (then both will render to offscreen FB first and use that texture.)

    Here's an example of the uniforms from one frame of render (captured by Spector.js):

    Another interesting thing for me was how srcOriginEnd and srcOriginStart can be flipped in terms of which one is higher (at least for the Y value), so I cannot just use clamp (vTex, srcOriginStart, srcOriginEnd) to clamp to vTex to the texture bounds, I had to create a 'new' clamp function which uses min and max of the two. 

    	mediump vec2 newTex = vTex + vec2(halfPixelHeight, pos * realSizeH);
	newTex.x = clamp(newTex.x,min(srcOriginStart.x, srcOriginEnd.x),max(srcOriginStart.x, srcOriginEnd.x));
	newTex.y = clamp(newTex.y,min(srcOriginStart.y, srcOriginEnd.y),max(srcOriginStart.y, srcOriginEnd.y));

    Here's the example plugins:

    construct.net/en/make-games/addons/347/bigblurh

    construct.net/en/make-games/addons/346/bigblurv

    Note the example project has opacity set to 99% to add yet another effect to the stack and make the behavior consistent. Set the opacity to 100% to see similar results as above.

  • rraffo I updated the clamp function, so it should handle effect stacks across platforms more consistently. Please try again with the new versions (1.1.0.0).

    It now also works for me on iOS.

    For others with this issue here's what I changed: 

    	mediump vec2 newTex = vTex + vec2(halfPixelHeight, pos * realSizeH);
	newTex.x = clamp(newTex.x,min(srcOriginStart.x, srcOriginEnd.x),max(srcOriginStart.x, srcOriginEnd.x));
	newTex.y = clamp(newTex.y,min(srcOriginStart.y, srcOriginEnd.y),max(srcOriginStart.y, srcOriginEnd.y));

    Also, it seems like pixelSize is not relatively consistent across an effect stack, one way around this is to set the opacity of the object to 99%, so the effects in the effect stack then have consistent pixelSize. Otherwise you may need to use different H and V scaling for the blur.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • rraffo Interesting - what platform are you running your test on? I see something similar on iOS.

    I have an idea that it may have to do with using glsl function clamp with srcOriginStart and srcOriginEnd. When I stack effects, I think C3 may do interesting things with srcOriginStart and srcOriginEnd (like flip the Y axis or something, so I cannot rely srcOriginEnd.y to be bigger than srcOriginStart.y.) I observe this using Spector.js and my test project.

    Ashley does that make sense - srcOriginStart.* will not always be less than srcOriginEnd.* depending on whether intermediate rendering is required to a different FB, because of effect stacking? So, I would not be able to use clamp(vTexNew,srcOriginStart, srcOriginEnd) instead to do a clamp on y for a texture sample address, I would need to use min(srcOriginStart.y, srcOriginEnd.y) and max(srcOriginStart.y, srcOriginEnd.y) and do separate compares to 'clamp' a texture sample to the edge of the image (original texture or texture used as FB?)

  • You can try adding the pixellate effect to the Spine object. Also perhaps try low quality upscaling.

    Also - when you export, what is the resolution used for the Spine render? It's an interesting issue, thanks for the sample project, I will take a look.

    I also just checked, in the example project, the spine render is being done into a width: 214, height: 353 texture and the rendering from the atlas into the texture is being done using nearest.

    Try scaling the Spine object to 214, 353 it will match the original character in terms of size. There are still some differences, still not as sharp, but looks pretty close.

  • WackyToaster

    Check out these for Blur, they use a fair bit of GPU to do a big blur.

    You need to use both H blur and V blur (this is typically more efficient for texture fetch than doing one common blur filter. However the way C3 stacks effects and uses multiple rendering passes, it may not matter much.)

    construct.net/en/make-games/addons/346/bigblurv

    construct.net/en/make-games/addons/347/bigblurh

  • Nice demo on shadertoy!

  • Enjoy and Happy Holidays to all, happy game dev!

    construct.net/en/make-games/addons/344/melt

  • Thanks sizcoz! Miner Mole has been added to the Stirring Creatures and is now live at kindeyegames.itch.io/yule-log Don't forget to turn up the audio for the nice crackling sounds of the fire.

Mikal's avatar

Mikal

Early Adopter

Member since 22 Apr, 2016

Twitter
Mikal has 103 followers

Trophy Case

  • 8-Year Club
  • Entrepreneur Sold something in the asset store
  • Forum Contributor Made 100 posts in the forums
  • Forum Patron Made 500 posts in the forums
  • Forum Hero Made 1,000 posts in the forums
  • Popular Game One of your games has over 1,000 players
  • Regular Visitor Visited Construct.net 7 days in a row
  • Steady Visitor Visited Construct.net 30 days in a row
  • RTFM Read the fabulous manual
  • x10
    Great Comment One of your comments gets 3 upvotes
  • Delicious Comment One of your comments gets 10 upvotes
  • Email Verified

Progress

19/44
How to earn trophies