Animated displacement

Sorry for the delay, I’m ill in bed, but better today and better enough to be able to read your messages.
Thank you @carolhmj @PatrickRyan and @Blake for your inputs, they are super helpfull.
In order to see the final (kind of) effect we want to achieve, I create a mockup scene in MAYA that you can check here:
AnimatedDisplacement_andOpacity_Test
AnimatedDisplacement_andOpacity.zip (12.5 KB)
So you can see we need to displace the geometry with one texture AND use another texture for opacity, both of them with different texture coordinates but with the same animation.
Hope that makes sense.
Cheers.

Oh no, hope you feel better soon D: This effect is pretty straightforward to achieve on NME, take a look at this mockup: Babylon.js Node Material Editor (babylonjs.com)

3 Likes

I also hope you feel better quickly, @joie! And @carolhmj is right on the money with her NME graph. There is one addition that I would add for performance reasons, which is a discard node. What this node does is to throw out any pixel that’s value falls beneath the cutoff value. The reason that this is important is that if you have a lot of chunks of mesh that are invisible, you still have to pay to render those pixels even though they render nothing. What happens is that the pixel behind any pixel with an alpha value are rendered first, then a second pass is done to render the pixel with alpha on top. For a pixel with an alpha of 0, we don’t render anything, but still have to go through all of the pixels that have an alpha value whether we render anything or not.

What the discard block is doing is saying “skip rendering for any pixels that are below 0.0001” which should largely be the pixels that have a value of 0 in the alpha channel. In that way we don’t even consider those pixels on the second pass of rendering. This is a way to limit overdraw on meshes where you don’t need much in the way of translucency but are focused on eliminating unwanted pixels. This helps you render faster and use that performance on other calculations in your frame.

2 Likes