WebGL / Three.js - 由纹理着色的粒子在移动相机时不规则地闪烁

WebGL / Three.js - Particles colored by texture flicker erratically while moving camera

本文关键字：移动 粒子 相机 闪烁 不规则 js Three 纹理 WebGL      更新时间：2023-09-26

这是我整理的一个jsfiddle，显示了在使用纹理着色和相机移动时粒子"闪烁"的问题。

更新：粒子上不应发生动画或运动。如果在视口上单击并拖动时，粒子正在闪烁或改变颜色，那么您会看到问题所在。这是我在 mac OS 10.9 和 Windows 7 的 Firefox 和 chrome 上测试并看到的问题。

粒子不会以任何方式重叠或剪切。如果使用常规着色器对粒子进行动画处理，则不会发生闪烁。只有当使用纹理对粒子进行着色时(在本例中为 THREE.WebGLRenderTarget(，是闪烁的明显。这样做是为了捕获以前的帧并将它们存储在缓冲区中(然后可以以 jsfiddle 示例中未显示的更高级的方式使用(。

实际上，片段着色器似乎可能错误地抓取了相邻像素，而不是目标，但我不确定 - 这没有多大意义，因为目标坐标仅在 init(( 上生成，之后它们不会改变。

每个粒子的目标像素坐标作为顶点属性传递到片段着色器 1-1，保持不变(作为变化但没有变化的值(。 

uniform sampler2D colorMap; // The texture being used to color each particle
varying float v_geoX; // x,y coordinates passed as varyings
varying float v_geoY;
void main() {
    // Normally pulling the correct color, but this seems to get confused during camera movement.
    gl_FragColor = texture2D(colorMap, vec2(v_geoX, v_geoY));
}

有人对如何在不闪烁的情况下做到这一点有任何想法吗？当我将此技术应用于更大更快的动画时，问题似乎只会变得更糟。到目前为止，它发生在我检查过的所有浏览器上。

问题是你指向纹素之间的边缘。

这些线条

   geoX.push(tx / imageSize);
   geoY.push(1.0 - ty / imageSize); // flip y

计算纹素之间的精确边缘。我的意思是，假设imageSize是 4 个纹素，让我们说tx，ty从 0 到 3

您的纹理坐标是这样的

   0    0.25  0.5   0.75       <- texture coords you're computing
   |     |     |     |     
   V     V     V     V     
   +-----+-----+-----+-----+
   |     |     |     |     |
   |     |     |     |     |   <- texels
   +-----+-----+-----+-----+

但是你想要的纹理坐标是这样的

     0.125 0.375 0.625 0.875   
      |     |     |     |   
      V     V     V     V  
   +-----+-----+-----+-----+
   |     |     |     |     |
   |     |     |     |     |   <- texels
   +-----+-----+-----+-----+

最简单的解决方法是添加 1/2 个纹素

   geoX.push(tx / imageSize       + 0.5 / imageSize);
   geoY.push(1.0 - ty / imageSize + 0.5 / imageSize); // flip y

问题在于您的数学直接指向纹素之间的舍入误差，使其选择一个纹素或另一个纹素。选择纹素的中心将解决这个问题。如果图像在相邻纹素之间没有太大的对比度，您可能没有注意到。

相关文章：