顶点着色器中的值稳定，使用 webgl 渲染时片段中的值不稳定

Question

我正在处理一个不熟悉的场景并尝试渲染点数组。

在顶点着色器中，我有这个 if/else 块，它每第 6 个点和最后 3 个点调整一次大小。这按预期工作，点以不同大小渲染，并且在我导航场景时它们保持一致。

然而，当我运行相同的 if/else 在片段着色器中测试以不同的方式着色点时它会融化：

垂直块：

  gl_PointSize = uPointSize;

  if(int(vIndex) == uTrajectoryCount - 1){
    gl_PointSize = uPointSize * 2.0;
  } 
  else if(int(vIndex) == uTrajectoryCount - 2){
    gl_PointSize = uPointSize * 1.6;
  }
  else if(int(vIndex) == uTrajectoryCount - 3){
    gl_PointSize = uPointSize * 1.3;
  }
  else if( 
    abs(mod(vIndex,6.0)) < 0.01 
  ) {
    gl_PointSize = uPointSize * 2.0;
  }

片段块

  if(int(vIndex) == uTrajectoryCount - 1){
    gl_FragColor = vec4(1.,0.,0.,1.);
  } 
  else if(int(vIndex) == uTrajectoryCount - 2){
    gl_FragColor = vec4(0.,1.,0.,1.);
  }
  else if(int(vIndex) == uTrajectoryCount - 3){
    gl_FragColor = vec4(0.,0.,1.,1.);
  }
  else if( 
    abs(mod(vIndex,6.0)) < 0.01 
  ) {
    gl_FragColor = vec4(1.,1.,0.,1.);
  }

我可以寻找什么使它“稳定”，我希望较大的点不会闪烁并保持黄色，最后三个是 r g b。

Answer 1

这似乎是一个与浮点相关的舍入问题 imprecision.Why 您从 float 值构造了一个 int被截断。使用 floor(vIndex+0.5) 或 round(vIndex) 代替 int(vIndex).

舍入值

顶点着色器中的值稳定，使用 webgl 渲染时片段中的值不稳定

Stable values in vertex shader, unstable in fragment when rendered with webgl

glsl

webgl