javascript - 使用 nvidia GPU 在 Windows x64 上的 Chrome 中 Webgl 闪烁

Question

我在带有 nVidia 芯片的 Windows 10 x64 上看到一些渲染几何体 Chrome 出现奇怪的闪烁。我还在适用于 Linux 的 Chrome、适用于两个平台的 Firefox、Android 和 Intel GPU 中进行了测试。它在任何地方都可以正常工作，除了提到的一个平台。

最小的例子是这样的:

顶点着色器:

precision mediump float;
smooth out vec2 pointCoord;

const vec2 vertexCoord[] = vec2[](
    vec2(0.0, 0.0),
    vec2(1.0, 0.0),
    vec2(1.0, 1.0),
    vec2(0.0, 0.0),
    vec2(1.0, 1.0),
    vec2(0.0, 1.0)
);

void main()
{
    gl_Position = vec4(vertexCoord[gl_VertexID], 0.0, 1.0);
    pointCoord = vertexCoord[gl_VertexID];
}

片段着色器:

precision mediump float;

out vec4 outFragColor;
smooth in vec2 pointCoord;

void main()
{
    outFragColor = vec4(pointCoord, 0.0, 1.0);
}

GL 状态:

gl.clearColor(0, 0, 0, 1);
gl.disable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);
gl.depthMask(gl.FALSE);
gl.stencilMask(gl.FALSE);

渲染代码:

var mainLoop = function()
{
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
    window.requestAnimationFrame(mainLoop);
}
window.requestAnimationFrame(mainLoop);

具有完整代码的工作网页可用 here .

我在受影响的平台上看到的:

我尝试了带有顶点属性的 webgl1 上下文，因为在 glsl 100es 中没有 gl_VertexID 变量，它产生相同的结果。我还尝试在主循环结束时添加 glFinish 或 glFlush。它降低了闪烁频率，但没有解决问题。

问题是什么？这段代码中是否有任何未定义的行为，因此它在不同平台上以不同的方式工作？还是 Chrome 或 Angle 中的错误？

更新:

根据 Nabr 的回答，我添加了一个 VBO 绑定(bind)到启用的顶点属性，并构建了 another example在我的机器上闪烁。

UPD2:

向 Chromium 项目报告了一个错误: https://bugs.chromium.org/p/chromium/issues/detail?id=836788

Answer 1

不，这里闪烁。四边形根本没有显示。

• Chrome 65
• window 10
• 英伟达 GTX 1050

几个月以来我一直在关注这个，从浏览器(发布)到浏览器及其平台的实现是不同的。你不能有一个无缓冲的“形状”跨平台，我的经验。

如果你使用 bindBuffer，你就处于保存状态，请看这里: https://stackoverflow.com/a/44448514

// added a buffer array 
// note: commented some consolelogs out, it looks nicer on stackoverflow


var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl2");
if (!gl) {
  console.log("Could not get context.");
  throw new Error();
}
var checkError = function() {
  if (gl.getError() != gl.NO_ERROR) {
    console.log("Webgl error.");
    throw new Error();
  }
}

// GL setup
gl.clearColor(0, 0, 0, 1);
gl.disable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);
gl.depthMask(gl.FALSE);
gl.stencilMask(gl.FALSE);

// Shader
var vertexSource = document.getElementById("vertexShader").text;
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexSource);
gl.compileShader(vertexShader);
// console.log("Vertex log: " + gl.getShaderInfoLog(vertexShader));

var fragmentSource = document.getElementById("fragmentShader").text;
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentSource);
gl.compileShader(fragmentShader);
// console.log("Fragment log: " + gl.getShaderInfoLog(fragmentShader));

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// console.log("Link log: " + gl.getProgramInfoLog(program));
checkError();
gl.useProgram(program);
var time_loc = gl.getUniformLocation(program, "time");

// CHANGED
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  0.0, 0.0,
  1.0, 0.0,
  1.0, 1.0,
  0.0, 0.0,
  1.0, 1.0,
  0.0, 1.0
]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
gl.bindVertexArray(null);

var tick = 0;

var mainLoop = function(tick) {
  tick *= 0.001;

  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 6);
  gl.uniform1f(time_loc, tick);
  window.requestAnimationFrame(mainLoop);
}

window.requestAnimationFrame(mainLoop);

<style>canvas {
  width: 100%;
  height: 500px;
}

</style>

<script id="vertexShader" type="x-shader/x-vertex">#version 300 es 
precision mediump float; 
in vec2 vertexCoord; 
uniform float time; 
smooth out vec2 pointCoord; 
void main() { 

gl_Position = vec4(vec2[](vertexCoord)[ gl_VertexID ], 0.0, 1.0); 

// for testig purposes suffix likely to fail in the past on firefox 56 windows 7 
pointCoord = vec3[3u](vec3(1.f, 1.f*sin(time), 0.f), vec3(0.0), vec3(0.0))[gl_VertexID%int(mod(time,3.))].xy; 

}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es 
precision mediump float; 
out vec4 outFragColor; 
smooth in vec2 pointCoord; void main() { 
outFragColor = vec4(pointCoord,0.0, 1.0); 
}
</script>
<canvas id="canvas" style="width:100vw;height:100vh;display:block"></canvas>