更新两次aPos,绘制两次，下次更新，却不是？

来源：2-9 实战：实现一个贪吃蛇小游戏

躁动的胸大肌

2023-08-03

这里两次都使用了aPosition这个顶点，在很短的时间内，更新两次aPos,绘制两次，会绘制（贪吃蛇和食物在不同的位置），但是下次draw却是覆盖原来的位置，并没有看到有清理画布的动作，下一帧会清掉这个点吗？

  gl.vertexAttrib3f(aPosition, random.x, random.y, 0.0);
    gl.drawArrays(gl.POINTS, 0, 1);

    let prex = 0;
    let prey = 0;
    for (let i = 0; i < points.length; i++) {
      if (i === 0) {
        prex = points[0].x
        prey = points[0].y
        points[0][direction] += speed;
      } else {
        let {x, y} = points[i]
        points[i].x = prex
        points[i].y = prey

        prex = x;
        prey = y;
      }

      gl.vertexAttrib3f(aPosition, points[i].x, points[i].y, 0.0);

      gl.drawArrays(gl.POINTS, 0, 1);
    }

写回答

1回答

yancy

2023-09-01

当前帧会连续绘制，调用drawArrays可以绘制多个点。但是在下一阵的时候会清理掉上一次绘制的内容。可以用下方这种方式验证下。

function start() {
  if (i >= points.length) {
    return;
  }
  gl.vertexAttrib2f(aPosition, points[i].clickX, points[i].clickY)

  gl.drawArrays(gl.POINTS, 0, 1);

  i++

  console.log(i, 'i')
  requestAnimationFrame(start)
}
start()

start函数是每帧执行一次，在这个绘制里，每次都会将上一次绘制的点清理掉。

yancy

Mr陈序猿

这个就可以了解下requestAnimationFrame这个方法的执行周期了，它会在下一帧的时候执行

2024-02-05

共2条回复

WebGL+Three.js 入门与实战，系统学习 Web3D 技术

前端的技术蓝海，涨薪好选择

1081 学习 · 294 问题

查看课程

相似问题

为什么是重新绘制而不是叠加？