Question

更新：我做了jsbin来说明问题。为什么右边的矩形与左边的矩形颜色不一样？哇。我刚刚意识到它在不同的浏览器中有所不同：在Windows上，在Chrome 50.0.2661.102和Firefox 46.0.1中，左边的矩形是正确的，右边的矩形是不正确的，在Edge 20.10240.16384.0中它们都是正确的。请注意，在Linux上，Chrome（版本49.0.2623.108）和Firefox（版本46.0）都是正确的。变异是怎么回事？

我有以下顶点着色器：

varying vec2 vUV;
varying vec3 vPosition;
varying vec3 vLightFront;
uniform float isCloud;

void main() {
  vUV = uv;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  if (isCloud == 1.0) {
    // gl_PointSize = 1.0;
  }
}

一旦我在行中发表评论gl_PointSize vUV就不再正确传递给片段着色器，即使isCloud == 0.0。我假设这是因为纹理在渲染的屏幕上消失，我通过尝试使用gl_FragCoord作为索引而不是vUV来验证它们仍可用于纹理查找。为什么甚至在提到gl_PointSize时vUV不再通过？我想在三维中使用相同的着色器和三维中的点云，在着色器中只有一个if子句，但是只要提到gl_PointSize，uv就不能用于普通几何体。

Answer 1

An acceptable workaround is to split the vertex shader into two vertex shaders, one for the point cloud and one for the regular geometry and avoid the conditionals. However, I filed a Chrome bug and a Firefox bug so we will see whether it is important enough to fix, or whether the WebGL ES specification says undefined behaviour or similar (I couldn't find anything).

UPDATE: I've filed a bug with ANGLE and a PR with Khronos for a new WebGL conformance test. You can run the test here.

RESOLVED: The test PR was merged into Khronos WebGL and ANGLE seems to have confirmed the bug and resolve to fix it, unless they change the WebGL spec to avoid the issue.

Answer 2

闪烁和随机行为是因为我认为：

if (isCloud == 1.0) {
  gl_PointSize = 15.0;
} else {
  vUV = uv;
}

您没有为变化的vUV分配任何内容，并且结果在不同平台上有所不同。在Windows上（ANGLE？）它实际上会填充我相信的零，而我在osx上看到chrome中的垃圾。

解决方法是将一些值发送到片段着色器

if (isCloud == 1.0) {
  gl_PointSize = 15.0;
  vUV = uv; //the same way you send a position attribute, you send the uv to a point cloud 
} else {
  vUV = uv;
}

输出：

gl_FragColor = vec4(vUV,0., a);

产生您的圆圈和相应的UV值。 -1,0,-1属性中position处的点在0,0属性中具有对应的值uv。

在着色器和代码中，这会产生一个圆圈网格，左下角为黑色，右上角为黄色。

您没有看到这个，因为您没有将uv属性传递给片段着色器。

同样，不要期望您可以使用它将纹理映射到栅格化点上。您可以使用varying vec2 vUV从单个UV样本中完全为每个点着色。要剪切此圆，并在栅格化点上映射纹理，您应使用gl_PointCoord.xy。您已经是哪个，所以我不确定您要做什么。

在我的顶点着色器中设置gl_PointSize可防止传递uv

2 个答案: