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生成白色背景

回答

相關問題