WebGL drawArrays生成白色背景

我有一个简单的WebGL应用程序。它有帆布和一对简单的着色器：WebGL drawArrays生成白色背景

<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);

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

问题是，它有时会在白色背景上呈现三角形，尽管清晰颜色设置为不透明的黑色。（in latest Google Chrome，Firefox is ok）在调试过程中，我发现调用drawArrays方法时呈现白色背景。但我不明白为什么它不是黑色的。

这是一个jsFiddle为了您的方便。

来源

2014-02-14 Just_Mad

在你的例子中，你只需要清除每个“帧”的颜色缓冲区。你的背景首先是黑色的，然后被你的三角形（顶点缓冲区）“覆盖”，就像你提到的那样。你实际上只是在启动时在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。

来源

2014-02-14 10:19:35 ztirom

谢谢！但为什么它呈现三角形周围的白色背景？我认为在'drawArrays'被调用后，只有三角形边框和内部空间被重绘... –

@Just_Mad你的画布背景是默认的白色，所以在第一帧（在'initContext'）你将画布设置为黑色，然后在你的'Interval'中渲染一个三角形，然后改变你的框架。在最后一次更改之后，您不会设置新的“背景”，因为它在CSS中的默认设置会变成白色。将你的CSS文件中的id改为'background：black;'，你的画布将保持黑色。看到这[jsFiddle]（http://jsfiddle.net/k8f7Q/7/）。但这只是一个快速和肮脏的解决方案。 – ztirom

WebGL drawArrays生成白色背景

回答

相关问题