WebGL2扁平型使颜色“闪烁”

Question

我正在尝试用低地形制作一个简单的WebGL2场景。当我让着色器在三种顶点颜色之间插值时，一切都按预期运行。但只要我添加平的输入整件事中断，每个三角形开始“闪烁”。

顶点着色器

#版本300 es精密介质浮子；在vec3 in_vertexPosition中；vec3颜色；统一mat4 u_projectionMatrix；统一mat4 u_viewMatrix；展开vec3 pass_fragColor；空main（）{gl_Position=u_projectionMatrix*u_viewMatrix*vec4（in_vertexPosition，1.0）；pass_fragColor=in_color；}

片段着色器

#版本300 es精密介质浮子；vec3 pass_fragColor中的平面；输出vec4 out_fragColor；空main（）{out_fragColor=vec4（pass_fragColor，1.0）；}

顶点、索引和颜色：

常量顶点=[0、0、0，//左下角1、0、0、//右下角1、1、0、//右上角0、1、0//左上];常量颜色=[0.3、0.3、0.8，//左下角0.3、0.3、0.6，//右下角0.3、0.3、0.4，//右上角0.3、0.3、0.2//左上角];常数指数=[0、1、3、//bl、br、tl3、1、2//tl、br、tr];

我尝试了不同的方法来使用索引和其他类型的顶点，但似乎没有什么效果。使用VBO可以获得更好的结构。

我确实注意到，当三角形中的所有三个顶点都具有相同的颜色时，闪烁明显停止。我读到的是平的type使三角形中的所有三个顶点都使用激发顶点的颜色（默认情况下，三角形中的最后一个顶点）。不幸的是，这使得三角形“闪烁”，我不明白为什么。

使用我的NVIDIA GTX 1060显卡。

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

Answer 1

也许你有一个驱动程序错误？或者您的代码可能有其他错误？发布一些工作代码？它对我来说没有闪烁。

常数vs=`#版本300 es精密中型浮子；在vec3中的_vertexPosition；vec3颜色；统一mat4 u_projectionMatrix；统一mat4 u_viewMatrix；展开vec3 pass_fragColor；空main（）{gl_Position=u_projectionMatrix*u_viewMatrix*vec4（in_vertexPosition，1.0）；pass_fragColor=in_color；}`常数fs=`#版本300 es精密介质浮子；vec3 pass_fragColor中的平面；输出vec4 out_fragColor；空main（）{out_fragColor=vec4（pass_fragColor，1.0）；}`;常数m4=twgl.m4；const gl=document.querySelector（'canvas'）.getContext（'webgl2'）；常量顶点=[0、0、0，//左下角1、0、0、//右下角1、1、0、//右上角0、1、0//左上];常量颜色=[0.3、0.3、0.8，//左下角0.3、0.3、0.6，//右下角0.3、0.3、0.4，//右上角0.3、0.3、0.2//左上];常数指数=[0、1、3、//bl、br、tl3、1、2//tl、br、tr];const bufferInfo=twgl.createBufferInfoFromArrays（gl{in_vertexPosition：顶点，颜色（_C）：{num组件：3，数据：颜色，},指数，});const programInfo=twgl.createProgramInfo（gl，[vs，fs]）；函数呈现（时间）{时间*=0.001；twgl.resizeCanvasToDisplaySize（gl.cavas）；gl.视口（0，0，gl.canvas.width，gl.cavas.height）；gl.清除颜色（0,0,0,1）；全局清除（全局COLOR_BUFFER_BIT）；gl.useProgram（programInfo.program）；twgl.setBuffersAndAttributes（gl，programInfo，bufferInfo）；const fov=数学。PI*.25；const方面=gl.canvas.client宽度/gl.canvas.clientHeight；twgl.setUniforms（程序信息{u_projectionMatrix:m4.透视图（视角，方面，0.1，50），u_viewMatrix:m4.逆（m4.lookAt([//眼睛，数学sin（时间*1.2）*2，数学cos（时间*1.1）*2，数学sin（时间*1.3）*-3], [0，0，0]，//目标，[Math.cos（时间），Math.sin（时间）)),});gl.drawElements（gl.TRIANGLES，6，gl.UNSIGNED_SHORT，0）；requestAnimationFrame（渲染）；}requestAnimationFrame（渲染）；

正文｛边距：0；｝画布{宽度：100vw；高度：100vh；显示：块；}

<script src=“https://twgljs.org/dist/4.x/twgl-full.min.js“></script><画布>