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

单击鼠标后WebGL绘图失败

1 个答案: