單擊鼠標後WebGL繪製失敗

Question

我有一個幫助方法drawRect(p1, p2)，它繪製了一個矩形（在正交投影中）。代碼工作正常，如果我這樣做：

function webGLStart() { 
    // initialization code 

    gl.clear(gl.COLOR_BUFFER_BIT); 
    gl.uniformMatrix4fv(shaderProgram.pMatrixLoc, false, pMatrix); 

    drawRect(new Point(10, 10), new Point(50, 50)); 
} 

現在假設我想在每次單擊鼠標後呈現一個新的矩形。所以我清除了畫布，設置了投影矩陣，並在鼠標下移處理程序中調用了drawRect調用。它不工作。

function webGLStart() { 
    // initialization code 

    gl.clear(gl.COLOR_BUFFER_BIT); 
    gl.uniformMatrix4fv(shaderProgram.pMatrixLoc, false, pMatrix); 

    canvas.onmousedown = handleMouseDown; 
} 

function handleMouseDown(event) { 
    // x, y depends on click coordinate 
    drawRect(new Point(x, y), new Point(x + 20, y + 20)); 
} 

鼠標單擊後整個畫布消失。但是，如果我將所有矩形的信息存儲在數組和鼠標處理程序中，則清除畫布，然後從數組中繪製所有矩形，然後就沒有問題了。換句話說，如果我重新渲染完整的場景，那麼就沒有問題了。

所以我的問題是：如果不清除整個畫布並刷新所有內容，是不是可以一個接一個畫？

Answer 1

如果你想 「保護」 的背景，那麼你必須使用preserveDrawingBuffer標誌：

gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer:true}); 

看到這些最新的答案：

When WebGL decide to update the display?

Webgl update region using viewport+scissor