Question

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

我想问几个问题：

对于这个游戏，我想先绘制网格作为背景。但是，我注意到在绘制线条之后，如果在之后使用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);
}

对于游戏，我需要网格作为背景，并且我需要requestAnimationFrame用于游戏循环，并将在循环内渲染Tetrominos。因此，在绘制线条之后，我使用了draw()来绘制其他Tetrominos。但是，它删除了我之前画过的线。当我在gl.clear(gl.COLOR_BUFFER_BIT );内注释掉draw()时，它将删除该行以及背景色。

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>

至于为什么即使您没有打电话也要清除它，这也是因为规范说明应该这样做的原因

请参阅：Why WebGL 'clear' draw to front buffer?

为什么gl.clear（gl.COLOR_BUFFER_BIT）和requestAnimationFrame会清除我之前画过的所有原语

1 个答案: