为什么gl.clear(gl.COLOR_BUFFER_BIT)和requestAnimationFrame会清除我之前

Question

大家好，我一直在学习WebGL，并试图用它制作一个俄罗斯方块游戏。

我有几个问题想问：

1. 对于这个游戏，我想首先绘制网格作为背景。然而，我注意到，在我画完线之后，如果我在之后使用gl.clear(gl.COLOR_BUFFER_BIT );，它会清除我之前画的所有线。我知道gl.clear(gl.COLOR_BUFFER_BIT );是关于清除颜色缓冲区的(你可能会问我为什么要这么做。请耐心等待。)。然后我尝试使用gl.uniform4f( uColor, 0, 0, 0, 1);再次将颜色发送到片段着色器，但没有帮助

代码段如下

window.onload = function(){
getGLContext();
initShaders();
drawLines( 0, 0, 400,400 );
gl.clear(gl.COLOR_BUFFER_BIT );
gl.uniform4f( uColor, 0, 0, 0, 1);
}

2. 对于游戏，我需要网格作为背景，游戏循环需要requestAnimationFrame，并将在循环内渲染Tetrominos。因此，在画完这条线后，我用这个draw()画了其他的Tetrominos。然而，它删除了我之前画的线。当我在draw()中注释掉gl.clear(gl.COLOR_BUFFER_BIT );时，它将删除该行和背景色。

   function draw() { gl.clear(gl.COLOR_BUFFER_BIT ); gl.drawArrays(gl.TRIANGLES, 0, index*6); requestAnimationFrame(draw); }

以下是演示：https://codepen.io/zhenghaohe/pen/LqxpjB

希望你能回答这两个问题。谢谢

Answer 1

这通常是WebGL的工作方式。

WebGL只是绘制成一个像素矩形。没有基元的记忆。没有结构。只有代码和生成的画布，它是一个像素矩形。

大多数WebGL程序/页面在每一帧都会清除整个画布，并在每次绘制时重新绘制100%想要显示的内容。对于俄罗斯方块，一般代码可能类似

function render()  {
clear the canvas
draw the grid
draw all the stable pieces
draw the current piece
draw the next piece
draw the effects
draw the score
}

任何关于基元或其他结构的知识都完全取决于您的代码。

如果你想让网格线是静态的，那么要么用CSS设置一个静态背景，要么使用另一个画布

使用背景：

const gl = document.querySelector('#c').getContext('webgl');
function render(time) {
time *= 0.001;
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
drawBlocks(gl, time);

requestAnimationFrame(render);
}
requestAnimationFrame(render);
// --- below this line not important to the answer
function drawBlocks(gl, time) {
gl.enable(gl.SCISSOR_TEST);

const numBlocks = 5;
for (let i = 0; i < numBlocks; ++i) {
const u = i / numBlocks;
gl.clearColor(i / 5, i / 2 % 1, i / 3 % 1, 1);
const x = 150 + Math.sin(time + u * Math.PI * 2) * 130;
const y = 75 + Math.cos(time + u * Math.PI * 2) * 55;
gl.scissor(x, y, 20, 20);
gl.clear(gl.COLOR_BUFFER_BIT);
}

gl.disable(gl.SCISSOR_TEST);
}

#c {
background-image: url(https://i.imgur.com/ZCfccZh.png);
}

<canvas id="c"></canvas>

使用2个画布

// this is the context for the back canvas. It could also be webgl
// using a 2D context just to make the sample simpler
const ctx = document.querySelector('#back').getContext('2d');
drawGrid(ctx);
// this is the context for the front canvas
const gl = document.querySelector('#front').getContext('webgl');
function render(time) {
time *= 0.001;
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
drawBlocks(gl, time);

requestAnimationFrame(render);
}
requestAnimationFrame(render);
// --- below this line not important to the answer
function drawBlocks(gl, time) {
gl.enable(gl.SCISSOR_TEST);

const numBlocks = 5;
for (let i = 0; i < numBlocks; ++i) {
const u = i / numBlocks;
gl.clearColor(i / 5, i / 2 % 1, i / 3 % 1, 1);
const x = 150 + Math.sin(time + u * Math.PI * 2) * 130;
const y = 75 + Math.cos(time + u * Math.PI * 2) * 55;
gl.scissor(x, y, 20, 20);
gl.clear(gl.COLOR_BUFFER_BIT);
}

gl.disable(gl.SCISSOR_TEST);
}
function drawGrid(ctx) {
// draw grid
ctx.translate(-10.5, -5.5);
ctx.beginPath();
for (let i = 0; i < 330; i += 20) {
ctx.moveTo(0, i);
ctx.lineTo(330, i);
ctx.moveTo(i, 0);
ctx.lineTo(i, 300);
}
ctx.strokeStyle = "blue";
ctx.stroke();
}

#container {
position: relative; /* required so we can position child elements */
}
#front {
position: absolute;
left: 0;
top: 0;
}

<div id="container">
<canvas id="back"></canvas>
<canvas id="front"></canvas>
</div>

至于为什么即使你没有叫clear也能清除，那是因为这就是为什么规范说它应该进行

请参阅：为什么使用WebGL'；清除'；抽到前面的缓冲区？