WebGL drawArrays生成白色背景

时间:2014-02-14 09:08:38

标签: javascript webgl

我有一个简单的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

1 个答案:

答案 0 :(得分:3)

在您的示例中,您只需清除每个“帧”的颜色缓冲区。你的背景最初是黑色的,然后被你的三角形(那个顶点缓冲区)“覆盖”,就像你提到的那样。 实际上,你只需在启动时在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