FBO 模拟着色器中的纹理查找

Question

我试图通过在单独的通道中计算位置来制作 FBO 粒子系统。
现在 http://barradeau.com/blog/?p=621 使用此 post 中的代码。我渲染粒子球体，没有任何移动：

到目前为止我唯一添加的是模拟片段着色器中的纹理：

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是：一半黑一半白。

然后在 render vertex shader 中我读取了这个贴图参数：

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

并在渲染片段着色器中使用它来查看颜色：

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

所以我希望看到的是：（通过在 render 着色器中设置相同的纹理来制作）

但我真正看到的是：（通过在模拟着色器中设置纹理）

颜色混合了，虽然大多数情况下你可以看到更多的红色，但它们之间有很多绿色颗粒。
还尝试用简化的纹理和相同的想法制作我自己的演示，我得到了这个：

也搞混了，不过还是可以猜图的。同样的错误。
我想我错过了一些明显的东西。但是我已经为此苦苦挣扎了几天，无法自己找出错误。

非常感谢有人为我指出正确的方向。提前致谢！

有错误的演示：http://cssing.org.ua/examples/fbo-error/
我指的是完整代码：https://github.com/akella/fbo-test

Answer 1

我的猜测是 THREE.TextureLoader() 使用 mipmap 加载纹理，并且 texture2D 在顶点着色器中调用使用最低分辨率的 mipmap。在顶点着色器中，您应该使用 texture2DLod(texture, texCoord, 0.0) - 注意第三个参数，lod，它指定 0 mipmap 级别。

Answer 2

您应该使用 GL_NEAREST min/mag 过滤器禁用纹理过滤。

FBO 模拟着色器中的纹理查找

Texture lookup inside FBO simulation shader

three.js

glsl

shader

fbo