Basic Feedback and Buffer Implementation with GLSL Shaders

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

At a quick glance I’d say it’s something to do with the line uv *= 0.998;. Have you tried setting it to different values in your three.js version?

By the way you don’t need to set the type in uniforms anymore. So

bufferTexture: { type: "t", value: textureA.texture }

can just be

bufferTexture: { value: textureA.texture }

Oops sorry, I see that you already referenced that line as the probable issue! Cool effect btw.

I figured this out, the problem was the use of THREE.NearestFilter for my MagFilter, I switched to THREE.LinearFilter and its working fine.

1 Like