引子

在看 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, // 右下角    ]);    const obj = {};    obj.verticesBuffer = this.createBuffer(gl, gl.ARRAY_BUFFER, vertices);    obj.indexBuffer = this.createBuffer(gl, gl.ELEMENT_ARRAY_BUFFER, indices);    obj.texCoordsBuffer = this.createBuffer(gl, gl.ARRAY_BUFFER, texCoords);    return obj;  },  createBuffer: function (gl, type, data) {    const buffer = gl.createBuffer();    gl.bindBuffer(type, buffer);    gl.bufferData(type, data, gl.STATIC_DRAW);    gl.bindBuffer(type, null);    return buffer;  }  // 局部代码省略

顶点着色器和片元着色器都能够新定义，这里为了不便专用了一套。

帧缓冲区对象

想要在帧缓冲区绘制，须要创立对应的帧缓冲区对象。

  // 帧缓冲区对象  this.framebufferObj = this.createFramebufferObject(gl);  // 局部代码省略  createFramebufferObject: function (gl) {    let framebuffer = gl.createFramebuffer();    let texture = gl.createTexture();    gl.bindTexture(gl.TEXTURE_2D, texture);    gl.texImage2D(      gl.TEXTURE_2D,      0,      gl.RGBA,      this.offscreenWidth,      this.offscreenHeight,      0,      gl.RGBA,      gl.UNSIGNED_BYTE,      null    );    // 反转图片 Y 轴方向    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);    // 纹理坐标程度填充 s    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);    // 纹理坐标垂直填充 t    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);    // 纹理放大解决    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);    // 纹理放大解决    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);    framebuffer.texture = texture; // 保留纹理对象    // 关联缓冲区对象    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);    gl.framebufferTexture2D(      gl.FRAMEBUFFER,      gl.COLOR_ATTACHMENT0,      gl.TEXTURE_2D,      texture,      0    );    // 查看配置是否正确    var e = gl.checkFramebufferStatus(gl.FRAMEBUFFER);    if (gl.FRAMEBUFFER_COMPLETE !== e) {      console.log("Frame buffer object is incomplete: " + e.toString());      return;    }    gl.bindFramebuffer(gl.FRAMEBUFFER, null);    gl.bindTexture(gl.TEXTURE_2D, null);    return framebuffer;  }  // 局部代码省略
  • createFramebuffer 函数创立帧缓冲区对象，删除对象的函数是 deleteFramebuffer 。
  • 创立好后，须要将帧缓冲区的色彩关联对象指定一个纹理对象，示例创立的纹理对象有几个特点：1 纹理的宽高跟绘制区域宽高统一；2 应用 texImage2D 时最初一个参数为 null ，也就是预留了一个空白的存储纹理对象的区域；3 创立好的纹理对象放到了帧缓冲区对象上，就是这行代码 framebuffer.texture = texture 。
  • bindFramebuffer 函数将帧缓冲区绑定到指标上，而后应用 framebufferTexture2D 将后面创立的纹理对象绑定到帧缓冲区的色彩关联对象 gl.COLOR_ATTACHMENT0 上。
  • checkFramebufferStatus 查看帧缓冲区对象配置是否正确。

绘制

绘制时候次要的区别是有切换的过程：

// 局部代码省略  draw: function () {    const gl = this.gl;    const frameBuffer = this.framebufferObj;    this.canvasObj.clear();    const program = this.shaderProgram;    gl.useProgram(program.program);    // 这个就让绘制的指标变成了帧缓冲区    gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);    gl.viewport(0, 0, this.offscreenWidth, this.offscreenHeight);    this.drawOffFrame(program, this.imgTexture);    // 解除帧缓冲区绑定，绘制的指标变成了色彩缓冲区    gl.bindFramebuffer(gl.FRAMEBUFFER, null);    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);    this.drawScreen(program, frameBuffer.texture);  },  // 局部代码省略
  • 先应用 bindFramebuffer 让绘制的指标变成帧缓冲区，须要指定对应的视口。
  • 帧缓冲区绘制实现后解除绑定，复原到失常默认的色彩缓冲区，同样须要指定对应的视口，还要比拟特地的是应用了缓冲区对象的纹理，这个表明就是从帧缓冲区失去的绘制后果。

察看及思考

网上找的相干示例感觉比较复杂，尝试简化的过程中有上面的一些察看和思考。

framebuffer.texture 是原本就有的属性还是人为增加的 ？

在创立帧缓冲区对象的时候有这个逻辑： framebuffer.texture = texture ，那么帧缓冲区对象自身就有 texture 属性吗？

打印日志发现刚创立的时候并没有这个属性，所以揣测应该是人为的增加。

framebuffer.texture 什么时候有的内容 ？

初始化帧缓冲区对象的时候，存储的纹理是空白的，但从最终后果来看，在帧缓冲区绘制之后，纹理就有内容了，那么 framebuffer.texture 属性是什么时候有了内容？

在绘制逻辑中，跟纹理相干语句有：

  gl.activeTexture(gl.TEXTURE0);  gl.bindTexture(gl.TEXTURE_2D, texture);  gl.uniform1i(program.uSampler, 0);  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

揣测是 gl.drawElements 办法绘制后果存储在帧缓冲区的色彩关联对象，帧缓冲区的色彩关联对象又在初始化时关联了创立的空白纹理 对象，framebuffer.texture 指向的也是同一个空白纹理对象，所以最终就有了内容。

最终的显示为什么没有铺满整个画布？

最终绘制可显示的内容时，能够发现顶点对应整个画布，纹理坐标对应的整个残缺的纹理，但为什么没有铺满整个画布？

最终绘制可显示内容时应用的纹理来自帧缓冲区的绘制后果，而帧缓冲区的顶点对应的是整个缓冲区域的一半，如果把整个帧缓冲区绘制后果当做一个纹理，依照最终绘制可视区比例缩放，那么最初的绘制没有铺满就是预期正确的后果。

这个是铺满画布的示例，只需将缓冲区顶点调整为对应整个缓冲区大小。

参考资料

  • WebGL编程指南帧缓冲示例
  • WebGL Framebuffers
  • WebGL display framebuffer?