Jump to content

Water shader approach?


Recommended Posts

I'm struggling with an approach to add a water effect to an area of container. I'd like to have the area in green distort the area below it via a shader, but also have the ability for this water area to "rise/fall". 

The rise/fall is of no problem when it's just a sprite I can move up and down as necessary - but being able to apply a shader to just that specific area is throwing me for a loop. Adding a filter directly to the sprite won't distort anything since it's not accounting for the pixels behind it..

Is there are way to capture this particular area, save it to a buffer, and apply a filter, and put it back in place? RenderTexture seems like it might be in the right direction, but I can't see where I can grab an area of an existing container... 


Any help would be much appreciated!


Link to comment
Share on other sites

you need a sprite with 0x808080 border, and use it as a sprite, then apply displacementFilter with that sprite to stage. Specify filterArea as whole `renderer.screen` or `app.screen`. Upper part wont be distorted because upper border is 0x808080 (wrapMode = CLAMP)

The performance will be same as if sprite covers whole screen, regardless of sprite position. Its possible to use a trick with renderTexture later to solve if that becomes a problem.

Link to comment
Share on other sites


Thanks so much - that's pretty clever!   

The clamp on the top border works exactly as specified, the trouble I'm running in to at this point is animating the displacement by moving the displacement sprite over time. Because of using CLAMP instead of REPEAT, you can't easily offset X and have it warp over time repeatedly. Ideally, I could CLAMP in one direction (Y) and REPEAT in another (X), giving the best of both worlds.


It appears in WebGL you can do this via TEXTURE_WRAP_S and TEXTURE_WRAP_T:


PIXI docs don't mention anything about being able to change the wrap per axis, not sure if it's a hidden feature or not.. any thoughts?

Link to comment
Share on other sites

its actually possible, but you need a hack. Lets force pixi to bind texture to location 0 and change the clamping manually. I dont remember which one is S and which one is T :)

Make sure that texture is loaded at that point.


renderer.bindTexture(myTexture, 0, true);
var gl = renderer.gl;
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);


Link to comment
Share on other sites

Awesome - thanks again for the help - here's what I came up with:




This is using the displacement shader trick on the root container, along with two other animated displacement shaders on the actual water sprite itself - it give a great rough seas effect.


Just a few days ago I didn't think any of this would be possible - thanks for pointing me in the right direction! 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...