WebGL drawArrays가 흰색 배경을 생성합니다.

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는 ok) 디버깅하는 동안 drawArrays 메서드가 호출되면 흰색 배경이 렌더링된다는 것을 알게되었습니다. 그러나 그것이 왜 검은 색인지 이해할 수 없습니다.

귀하의 편의를 위해 여기에 jsFiddle이 있습니다.

Answer 1

예제에서 모든 "프레임"마다 색상 버퍼를 지워야합니다. 당신의 배경은 처음에는 검은 색이고, 당신이 언급 한 것처럼 삼각형 (그 정점 버퍼)에 의해 "덮어 쓰기"됩니다. 실제로 시작시 초기화 함수에서 하나만 삭제하면됩니다.

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 업데이트를 참조하십시오.