目录

 

在函数initFramebufferObject()中进行了帧缓冲区的初始化工作。具体来说， 帧缓冲区的具体设置过程可以分为如下8步：

2.2.2.1. 创建帧缓冲对象(gl.createFramebuffer())

通过gl.createFramebuffer()来创建初始化对象：

// 初始化帧缓冲区对象 (FBO) function initFramebufferObject(gl) {   //...    // 创建帧缓冲区对象 (FBO)   framebuffer = gl.createFramebuffer();   if (!framebuffer) {     console.log('Failed to create frame buffer object');     return error();   }    //... }

2.2.2.2. 创建纹理对象并设置其尺寸和参数

在教程《WebGL简易教程(十一)：纹理》中就已经介绍过如何创建纹理对象并设置纹理对象的参数。这里的创建过程也是一样的；只是细节略有不同:

  1. 这里设置纹理的长、宽可以跟画布的长宽不一样，想要速度快，可以小一点；想要效果好，就可以大一点。
  2. gl.texImage2D函数的最后一个参数需设置为null，表示新建了一块空白的区域，以便帧缓存绘制。
function initFramebufferObject(gl) {   //...    // 创建纹理对象并设置其尺寸和参数   texture = gl.createTexture(); // 创建纹理对象   if (!texture) {     console.log('Failed to create texture object');     return error();   }   gl.bindTexture(gl.TEXTURE_2D, texture); // Bind the object to target   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);     // 设置纹理参数   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);   framebuffer.texture = texture; // 保存纹理对象    //... }

2.2.2.3. 创建渲染缓冲区对象(gl.createRenderbuffer())

通过函数gl.createRenderbuffer()创建渲染缓冲区对象，这个渲染缓冲区对象将被指定成深度关联对象。

function initFramebufferObject(gl) {   //...    // 创建渲染缓冲区对象并设置其尺寸和参数   depthBuffer = gl.createRenderbuffer(); //创建渲染缓冲区   if (!depthBuffer) {     console.log('Failed to create renderbuffer object');     return error();   }    //... }

2.2.2.4. 绑定渲染缓冲区并设置尺寸(gl.bindRenderbuffer(),gl.renderbufferStorage())

将渲染缓冲区绑定到目标上，通过目标设置渲染缓冲区的尺寸等参数。

function initFramebufferObject(gl) {   //...    gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer); // Bind the object to target   gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT);      //... }

对于WebGL/OpenGL而言，任何缓冲区对象都是需要绑定到目标上，再对目标进行操作的。绑定函数gl.bindRenderbuffer()的定义为：

image

 

绑定完成后，通过gl.renderbufferStorage()函数设置渲染缓冲区的格式、宽度以及高度等。注意深度关联的渲染缓冲区，其宽度和高度必须与作为颜色关联对象的纹理缓冲区一致。其函数定义为：

image

 

2.2.2.5. 将纹理对象关联到帧缓冲区对象(gl.bindFramebuffer(), gl.framebufferTexture2D)

仍然是先将帧缓冲绑定到目标上，使用函数gl.bindFramebuffer()进行绑定：