three.jsglslshaderfbo

Texture lookup inside FBO simulation shader


I'm trying to make FBO-particle system by calculating positions in separate pass.
Using code from this post now http://barradeau.com/blog/?p=621. I render sphere of particles, without any movement:

The only thing i'm adding so far is a texture in simulation fragment shader:

void main() {
    vec3 pos = texture2D( texture, vUv ).xyz;
    //THIS LINE, pos is approx in -200..200 range
    float map = texture2D(texture1, abs(pos.xy/200.)).r;
    ...
    // save map value in ping-pong texture as alpha
    gl_FragColor = vec4( pos, map );

texture1 is: half black half white.

Then in render vertex shader i read this map parameter:

map = texture2D( positions, position.xy ).a;

and use it in render fragment shader to see the color:

vec3 finalColor = mix(vec3(1.,0.,0.),vec3(0.,1.,0.),map);
gl_FragColor = vec4( finalColor, .2 );

So what i hope to see is: (made by setting same texture in render shaders)

But what i really see is: (by setting texture in simulation shaders)

Colors are mixed up, though mostly you can see more red ones where they should be, but there are a lot of green particles in between.
Also tried to make my own demo with simplified texture and same idea and i got this:

Also mixed up, but you can still guess image. Same error.
I think i am missing something obvious. But i was struggling with this a couple of days now, not able to find a mistake by myself.

Would be very grateful for someone to point me in the right direction. Thank you in advance!

Demo with error: http://cssing.org.ua/examples/fbo-error/
Full code i'm referring: https://github.com/akella/fbo-test


Solution

  • You should disable texture filtering by using GL_NEAREST min/mag filters.