Graphics 为什么gl.clear（gl.COLOR\u BUFFER\u位）和requestAnimationFrame会清除我之前绘制的所有原语

嗨，伙计们，我一直在学习WebGL，并试图用它制作一个俄罗斯方块游戏

我有几个问题想问：

对于这个游戏，我想先画网格作为背景。然而，我注意到在我画完线之后，如果我使用

gl.clear（gl.COLOR\u BUFFER\u BIT）之后，它将清除我以前画的所有线条。我知道
gl.clear（gl.COLOR\u BUFFER\u位）是关于清除颜色缓冲区的（你可能会问我为什么要这样做。请耐心听我说。）。然后我尝试使用
gl.uniform4f（uColor，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);
}

对于游戏，我需要网格作为背景，对于游戏循环，我需要

requestAnimationFrame

，并将在循环内渲染Tetrominos。因此，在画完这条线之后，我用这个

draw（）。然而，它删除了我以前画的线。当我注释掉
gl.clear（gl.COLOR\u BUFFER\u位）在
draw（）
内部，它将删除线条和背景色

函数绘图（）{
总账清除（总账颜色\缓冲\位）；
总图数组（总图三角形，0，索引*6）；
请求动画帧（绘制）；
}

以下是演示：

---

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

这通常是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'）；
函数渲染（时间）{
时间*=0.001；
gl.clearColor（0,0,0,0）；
总账清除（总账颜色缓冲位）；
绘图块（gl，时间）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
//---在这条线下，答案并不重要
功能绘图块（总帐、时间）{
总帐启用（总帐剪刀测试）；
常数numBlocks=5；
for（设i=0；i

#c{
背景图片：url(https://i.imgur.com/ZCfccZh.png);
}

---

为什么在绘图后清除？通常在绘制每一帧之前，而不是在绘制某些内容之后清除。如果您查看代码，就会知道我想先设置网格，因此我绘制了一条线，然后我使用此循环

requestAnimationFrame

绘制每一个Tetrominos。

requestAnimationFrame

包含

gl.clear（gl.COLOR\u BUFFER\u BIT）

，否则我看不到每个图形的背景色。这就是为什么我说在画完线后我调用了“

gl.clear（gl.COLOR\u BUFFER\u BIT）

。谢谢你的回复！我认为你是对的。但我真的很想知道这两个问题的答案：1。为什么

gl.clear（gl.COLOR\u BUFFER\u位）删除我之前绘制的原始人2。为什么即使没有放入
gl.clear（gl.COLOR\u BUFFER\u位）也会出现这种情况
在
渲染
循环中，从循环中绘制的内容将替换之前在进入循环之前绘制的线条？我以为它会在线条的顶端画出更多的东西。WebGL只是一个API，可以画出一个像素的矩形。它不记得以前画过什么。颜色缓冲区是绘制输出的位置。当您将
COLOR\u BUFFER\u位
传递给
glClear（）
时，您告诉它，“清除输出。”。如果希望WebGL将新图形与旧图形混合，则必须调用
glEnable（GL_blend）或不将它们绘制到相同的像素。