I’m looking for an existing playground that demonstrates a power warp transition effect similar to the one in the linked video. If none exists, I’d like to get some guidance to make it work.
I am interested in studying the code/shader used to achieve this effect.
Example - Babylon.js Playground
Some threads - How to achieve scanning effect - #7 by PatrickRyan
Volumetric Heatmap
Thanks for sharing this! I saw it earlier, but the effect I’m referring to applies directly to the screen, I think, not the objects (not %100 sure tho).
The effect at Youtube video is done with After Effects as transition between 2 images or videos.
For Babylon one needs to decide what actually the transition will be: on meshes, as postprocess, as scene change etc.
@ertugrulcetin, I don’t have anything offhand showing an effect like this, but if I were to approach it, I would do it with a post process node material. If you render out scene depth as your mask, you can push that to a post process node material. Setting the mode at the top of the General section to Post Process will get you to the mode you need for creating custom post processes.
You can then do whatever you like to the render and load the node material like you see in this example. In your case you would add a distortion to the UVs of the screen space render based on a smoothStep range of your depth map. You can see a simple distortion using some animated voronoi noise in this version of the previous PG
You should be able to animate the values of the smoothstep using either a Babylon animation or just a plain math function passing the new values every frame and getting the “ripple through the scene depth” effect in your example. I hope this helps break down the problem for you with a possible direction for a solution. Feel free to ping back with questions.
Thank you so much @PatrickRyan I think this could be a great starting point, I’ll ping you if I have any more guidance!
A simpler option would be to look on shadertoy for edge detection shaders, so you can avoid using depth buffer for cases like video or photo transitions. Then instead of fading by depth, do it from bottom to top like in your video example. There is also a library on github called gl transitions that’ll be a great reference, but u’ll have to do some minimal work to get it working with babylon.
