JavaScript WebGL 帧缓冲区对象

引子

在看 How I built a wind map with WebGL 的时候，里面用到了 framebuffer ，就去查了下资料单独尝试了一下。

• Origin
• My GitHub

帧缓冲区对象

WebGL 有一个能力是将渲染结果作为纹理使用，使用到的就是帧缓冲区对象（framebuffer object）。

在默认情况下，WebGL 最终绘图结果存储在颜色缓冲区，帧缓冲区对象可以用来代替颜色缓冲区，如下图所示，绘制在帧缓冲区中的对象并不会直接显示在 Canvas 上，因此这种技术也被称为离屏绘制（offscreen drawing）。

示例

为了验证上面的功能，这个示例会在帧缓冲区里面绘制一张图片，然后将其作为纹理再次绘制显示出来。

基于使用图片示例的逻辑，主要有下面几个方面的变化：

• 数据
• 帧缓冲区对象
• 绘制

数据

在帧缓冲区里面绘制跟正常的绘制一样，只是不显示，所以也要有对应的绘制区域大小、顶点坐标和纹理坐标。

  offscreenWidth: 200, // 离屏绘制的宽度
  offscreenHeight: 150, // 离屏绘制的高度
  // 部分代码省略
  // 针对帧缓冲区绘制的顶点和纹理坐标
  this.offScreenBuffer = this.initBuffersForFramebuffer(gl);
  // 部分代码省略
  initBuffersForFramebuffer: function (gl) {
   
    const vertices = new Float32Array([
      0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5,
    ]); // 矩形
    const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
    const texCoords = new Float32Array([
      1.0,
      1.0, // 右上角
      0.0,
      1.0, // 左上角
      0.0,
      0.0, // 左下角
      1.0,
      0.0, // 右下角
    ]);