Water shader approach?

[Saltallica]

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!

[ivan.popelyshev]

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.

[Saltallica]

Ivan,

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:

https://webglfundamentals.org/webgl/webgl-3d-textures-repeat-clamp.html

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?

[ivan.popelyshev]

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);

 

[Saltallica]

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!