Question

我有一个简单的WebGL应用程序。它有画布和一对简单的着色器：

<canvas id="render" width="320" height="240">
<div id="vertexShader" class="shader">  
    attribute vec4 position;
    void main()
    {
        gl_Position = position;
    }
</div>
<div id="fragmentShader" class="shader">
    precision mediump float;
    void main()
    {
        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
</div>

应用程序代码如下所示：

function getContext() {
    var canvas = document.getElementById("render");
    return canvas.getContext("webgl");
}

function initContext(context) {
    context.clearColor(0.0, 0.0, 0.0, 1.0);
    context.clear(context.COLOR_BUFFER_BIT);
}

function getShader(shaderId, type, context) {
    var shaderSource = document.getElementById(shaderId).innerHTML;
    var shader = context.createShader(type);
    context.shaderSource(shader, shaderSource);
    context.compileShader(shader);
    if (!context.getShaderParameter(shader, context.COMPILE_STATUS)) {
      console.log(context.getShaderInfoLog(shader));
      return null;
    }
    return shader;
}

function initShaders(context) {
    var program = context.createProgram();
    context.attachShader(program, getShader("vertexShader", context.VERTEX_SHADER, context));
    context.attachShader(program, getShader("fragmentShader", context.FRAGMENT_SHADER, context));
    context.linkProgram(program);
    if (!context.getProgramParameter(program, context.LINK_STATUS)) {
      console.log("Could not initialise shaders");
    }
    return program;
}

function renderTile(context, program) {
    var tileBuffer = context.createBuffer();
    var tile = [
        1.0, 1.0, 0, 1.0,
        -1.0, 0, 0, 1.0,
        1.0, -1.0, 0, 1.0
    ];
    context.bindBuffer(context.ARRAY_BUFFER, tileBuffer);
    context.bufferData(context.ARRAY_BUFFER, new Float32Array(tile), context.STATIC_DRAW);
    positionLocation = context.getAttribLocation(program, "position");
    context.enableVertexAttribArray(positionLocation);
    context.vertexAttribPointer(positionLocation, 4, context.FLOAT, false, 0, 0);
    context.drawArrays(context.TRIANGLES, 0, 3);
}

var context = getContext();
initContext(context);
var program = initShaders(context);
context.useProgram(program);
setTimeout(function() {
    renderTile(context, program);
}, 100);

它在画布上呈现一个简单的三角形。

问题在于它有时在白色背景上呈现三角形，尽管清晰的颜色设置为不透明的黑色。（在最新的谷歌浏览器中，Firefox还可以）在调试时，我发现在调用drawArrays方法时会呈现白色背景。但我无法理解为什么它不是黑色。

为方便起见，这是jsFiddle。

Answer 1

在您的示例中，您只需清除每个“帧”的颜色缓冲区。你的背景最初是黑色的，然后被你的三角形（那个顶点缓冲区）“覆盖”，就像你提到的那样。实际上，你只需在启动时在init函数中清除一个。

function initContext(context) {
    context.clearColor(0.0, 0.0, 0.0, 1.0);
    context.clear(context.COLOR_BUFFER_BIT);
}

只需将context.clear(context.COLOR_BUFFER_BIT);添加到您的更新功能，例如：

setInterval(function() {
    context.clear(context.COLOR_BUFFER_BIT);
    renderTile(context, program);
}, 100);

请参阅此更新jsFiddle。

WebGL drawArrays生成白色背景

1 个答案: