Hey!
Have just started playing round with ThreeJS and I’m trying to set up a basic example of a ThreeJS project with GLSL shaders and a Frame Buffer so that I can start experimenting with Feedback effects.
The basic idea is simple enough to me, render the shader to a texture and then pass that texture back into the shader.
I did a shadertoy implementation of the minimal, feedback shader I’m trying to implement in ThreeJS:
https://www.shadertoy.com/view/MdlBDn
And I’m trying to get it working in ThreeJS/WebGL. Here is my implementation - It is a really simple!
(based on Omar Shehata’s tutorial on writing a smoke shader https://gamedevelopment.tutsplus.com/tutorials/how-to-write-a-smoke-shader--cms-25587)!
The problem is that something is going wrong with my implementation of the buffer which is not allowing the trails effect in the shader to run properly. I am left with a strange rectangle in the bottom left corner of the screen that is ruins everything!:
You’ll notice the shadertoy implementation doesnt have those weird rectangular lines in the effect… Looks much better. Smoother! :
The shader is the same across both implementations, so I am assuming it must be something to do with the Buffer implementation rather than the shader itself.
It seems like the UV zoom (line 7 of Buffer A in the shadertoy) that creates the trails effect is ‘stopping’ at a certain point, rather than continuing to zoom all the way down into the first pixel in that bottom left corner (which would create that smooth, continuous trail effect).
Any ideas on why this might be happening?
Thanks!!
Sam