WebGL2扁平字体使颜色“闪光”

Question

我正在尝试创建一个具有低多边形地形的简单WebGL2场景。当我让着色器在三种顶点颜色之间进行插值时，一切都像预期的那样工作。但是，一旦我添加了flat类型，整个代码就会崩溃，每个三角形都会开始“闪烁”。

顶点着色器

#version 300 es
precision mediump float;

in vec3 in_vertexPosition;
in vec3 in_color;

uniform mat4 u_projectionMatrix;
uniform mat4 u_viewMatrix;

flat out vec3 pass_fragColor;

void main() {
    gl_Position = u_projectionMatrix * u_viewMatrix * vec4(in_vertexPosition, 1.0);

    pass_fragColor = in_color;
}

片段着色器

#version 300 es
precision mediump float;

flat in vec3 pass_fragColor;

out vec4 out_fragColor;

void main() {
     out_fragColor = vec4(pass_fragColor, 1.0);
}

顶点、索引和颜色：

 const vertices = [
      0, 0, 0, // bottom left
      1, 0, 0, // bottom right
      1, 1, 0, // top right
      0, 1, 0 // top left
 ];

 const colors = [
      0.3, 0.3, 0.8, // bottom left
      0.3, 0.3, 0.6, // bottom right
      0.3, 0.3, 0.4, // top right
      0.3, 0.3, 0.2 // top left
 ];

 const indices = [
      0, 1, 3, // bl, br, tl
      3, 1, 2 // tl, br, tr
 ];

我尝试了使用索引和其他类型的顶点的不同方法，但似乎都不起作用。使用VBO以获得更好的结构。

我确实注意到，当三角形中的所有三个顶点都具有相同的颜色时，闪烁显然会停止。我读到的是flat类型使得三角形中的所有三个顶点都使用挑衅顶点的颜色(默认情况下是三角形中的最后一个顶点)。不幸的是，这使得三角形变得“闪光”，我不明白为什么。

使用我的NVIDIA GTX 1060显卡。

显示“闪烁”的GIF：https://gyazo.com/7d3ba42afe1ba1458cd2820729490e47

Answer 1

也许你有一个驱动程序的bug？或者可能你的代码有其他问题？发布一些工作代码？它对我来说不是闪烁的。

​

const vs = `
#version 300 es
precision mediump float;

in vec3 in_vertexPosition;
in vec3 in_color;

uniform mat4 u_projectionMatrix;
uniform mat4 u_viewMatrix;

flat out vec3 pass_fragColor;

void main() {
    gl_Position = u_projectionMatrix * u_viewMatrix * vec4(in_vertexPosition, 1.0);

    pass_fragColor = in_color;
}
`
const fs = `
#version 300 es
precision mediump float;

flat in vec3 pass_fragColor;

out vec4 out_fragColor;

void main() {
     out_fragColor = vec4(pass_fragColor, 1.0);
}
`;

const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl2');

const vertices = [
     0, 0, 0, // bottom left
     1, 0, 0, // bottom right
     1, 1, 0, // top right
     0, 1, 0 // top left
];

const colors = [
     0.3, 0.3, 0.8, // bottom left
     0.3, 0.3, 0.6, // bottom right
     0.3, 0.3, 0.4, // top right
     0.3, 0.3, 0.2 // top left
];

const indices = [
     0, 1, 3, // bl, br, tl
     3, 1, 2 // tl, br, tr
];
 
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
   in_vertexPosition: vertices,
   in_color: {
     numComponents: 3,
     data: colors,
   },
   indices,
});

const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

function render(time) {
  time *= 0.001;
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  const fov = Math.PI * .25;
  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  twgl.setUniforms(programInfo, {
    u_projectionMatrix: m4.perspective(fov, aspect, 0.1, 50),
    u_viewMatrix: m4.inverse(m4.lookAt(
      [ // eye,
        Math.sin(time * 1.2) * 2, 
        Math.cos(time * 1.1) * 2, 
        Math.sin( time * 1.3) * -3
      ], 
      [0, 0, 0], // target,
      [Math.cos(time), Math.sin(time), 0], // up
    )),
  });
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

​