碼上快樂

相關內容    簡體    繁體

WebGL簡易教程(十三)：幀緩存對象(離屏渲染)

本文轉載自   查看原文   2019-12-01 11:41   946    WebGL/ FBO/ 幀緩沖區對象

目錄

1. 概述

事物是普遍聯系的。為了達到更加真實的渲染效果，很多時候需要利用被渲染物體在其他狀態下的中間渲染結果，處理到最終顯示的渲染場景中。這種中間渲染結果，就保存在幀緩沖區對象（framebuffer object，簡稱FBO）中，用來替代顏色緩沖區或深度緩存區。由於其結果並不直接被顯示出來，所以這種技術也被稱為離屏繪制（offscreen drawing）。

在之前的教程實例中，地形的顏色信息都是來自於頂點緩沖區對象。而在這篇教程中，准備寫出這樣一個示例：分別在幀緩沖區和顏色緩沖區中繪制同一塊地形，顏色緩沖區的顏色信息不通過頂點緩沖區獲取而通過幀緩沖區獲取。這個簡單的示例並沒有具體的實際意義，但是能更好的理解FBO，FBO是后續更高級技術的基礎。

2. 示例

示例的完整代碼太長，這里就不放出來了，可以在文章尾部提供的地址自行下載；這里主要講解其中的關鍵部分。

2.1. 着色器部分

這里定義了兩組着色器，一組是繪制在幀緩沖區的：

// 頂點着色器程序-繪制到幀緩存
var FRAME_VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +  //位置
  'attribute vec4 a_Color;\n' + //顏色
  'uniform mat4 u_MvpMatrix;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_Position = u_MvpMatrix * a_Position;\n' + // 設置頂點坐標
  '  v_Color = a_Color;\n' +
  '}\n';

// 片元着色器程序-繪制到幀緩存
var FRAME_FSHADER_SOURCE =
  'precision mediump float;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +  
  '  gl_FragColor = v_Color;\n' +   //將深度保存在FBO中
  '}\n';

可以看到這段着色器程序與繪制在顏色緩沖區的着色器沒有區別。另外一組是正常繪制在顏色緩沖區的：

// 頂點着色器程序
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +  //位置
  'attribute vec4 a_Color;\n' + //顏色
  'attribute vec4 a_Normal;\n' + //法向量
  'uniform mat4 u_MvpMatrix;\n' +     
  'varying vec4 v_PositionFromLight;\n' +
  'void main() {\n' +
  '  gl_Position = u_MvpMatrix * a_Position;\n' +
  '  v_PositionFromLight = gl_Position;\n' +
  '}\n';

// 片元着色器程序
var FSHADER_SOURCE =
  '#ifdef GL_ES\n' +
  'precision mediump float;\n' +
  '#endif\n' +
  'uniform sampler2D u_Sampler;\n' +  //顏色貼圖
  'varying vec4 v_PositionFromLight;\n' +
  'void main() {\n' +
  //獲取顏色貼圖中的值
  '  vec3 shadowCoord = (v_PositionFromLight.xyz/v_PositionFromLight.w)/2.0 + 0.5;\n' +
  '  gl_FragColor = texture2D(u_Sampler, shadowCoord.xy);\n' +
  '}\n';

這里可以看到最終位置仍然來自頂點數組，顏色卻是從一個紋理對象插值出來的。這個紋理對象正是幀緩沖區中關聯的紋理對象，它是在幀緩沖對象繪制之后傳遞過來的。

注意這里關於紋理坐標的計算，在《WebGL簡易教程(五)：圖形變換(模型、視圖、投影變換)》這篇教程中曾經提到過，在經過頂點着色器之后，頂點坐標會歸一化到-1到1之間；而紋理坐標是在0到1之間的，所以這里需要坐標變換一下。

2.2. 初始化/准備工作

首先仍然是進行一些初始化操作。獲取上下文后創建着色器，並初始化幀緩沖對象（FBO）：

  // 獲取 <canvas> 元素
  var canvas = document.getElementById('webgl');

  // 獲取WebGL渲染上下文
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  //初始化兩個着色器，drawProgram繪制到界面，frameProgram繪制到幀緩存
  var drawProgram = createProgram(gl, VSHADER_SOURCE, FSHADER_SOURCE);
  var frameProgram = createProgram(gl, FRAME_VSHADER_SOURCE, FRAME_FSHADER_SOURCE);
  if (!drawProgram || !frameProgram) {
    console.log('Failed to intialize shaders.');
    return;
  }

  //從着色器中獲取地址，保存到對應的變量中
  GetProgramLocation(gl, drawProgram, frameProgram);

  // 初始化幀緩沖區對象 (FBO)
  var fbo = initFramebufferObject(gl);
  if (!fbo) {
    console.log('Failed to intialize the framebuffer object (FBO)');
    return;
  }

  // 開啟深度測試
  gl.enable(gl.DEPTH_TEST);

  // 指定清空<canvas>的顏色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  //清空顏色和深度緩沖區
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

這里的函數GetProgramLocation是功能將從着色器獲取的數據地址保存起來，因為涉及到一些切換着色器再分配數據的操作，保存到變量中方便一些：

//從着色器中獲取地址，保存到對應的變量中
function GetProgramLocation(gl, drawProgram, frameProgram) {
  // Get the storage location of attribute variables and uniform variables 
  drawProgram.a_Position = gl.getAttribLocation(drawProgram, 'a_Position');
  drawProgram.u_MvpMatrix = gl.getUniformLocation(drawProgram, 'u_MvpMatrix');
  if (drawProgram.a_Position < 0 || !drawProgram.u_MvpMatrix) {
    console.log('Failed to get the storage location of a_Position, u_MvpMatrix');
    //return;
  }

  frameProgram.a_Position = gl.getAttribLocation(frameProgram, 'a_Position');
  frameProgram.a_Color = gl.getAttribLocation(frameProgram, 'a_Color');
  frameProgram.u_MvpMatrix = gl.getUniformLocation(frameProgram, 'u_MvpMatrix');
  if (frameProgram.a_Position < 0 || frameProgram.a_TexCoord < 0 || !frameProgram.u_MvpMatrix) {
    console.log('Failed to get the storage location of a_Position, a_Color, u_MvpMatrix');
    //return;
  }
}

2.2.1. 着色器切換

在示例中實際進行了兩次繪制操作，分別在幀緩沖區和顏色緩沖區中繪制了一遍。因此，需要用到兩組不同的着色器。但是同一時間內只能用一組着色器進行繪制工作，這里就涉及到一個着色器切換的問題。

2.2.1.1. 初始化

在之前的例子當中，都是通過WebGL組件cuon-utils中的函數initShaders來初始化着色器。這個函數實際上包含了創建着色器程序功能函數createProgram()，以及設置當前着色器函數gl.useProgram()：

function initShaders(gl, vshader, fshader) {
  var program = createProgram(gl, vshader, fshader);
  if (!program) {
    console.log('Failed to create program');
    return false;
  }

  gl.useProgram(program);
  gl.program = program;

  return true;
}

在程序初始化的時候只需要創建着色器函數createProgram()就可以了，在需要傳輸數據和繪制的時候再去設置當前的着色器gl.useProgram()。

2.2.1.2. 頂點緩沖區

除此之外，頂點緩沖區的使用也有所改變。在之前的教程《WebGL簡易教程(三)：繪制一個三角形(緩沖區對象)》中介紹過使用頂點緩沖區的五個步驟：

  1. 創建緩沖區對象(gl.createBuffer())
  2. 綁定緩沖區對象(gl.bindBuffer())
  3. 將數據寫入緩沖區對象(gl.bufferData())
  4. 將緩沖區對象分配給attribute變量(gl.vertexAttribPointer())
  5. 開啟attribute變量(gl.enableVertexAttribArray())

但是為了節省空間，兩個不同的着色器是使用相同的頂點緩沖區數據，在需要的時候切換分配數據。因此這里可以將以上五步分成兩個函數——在初始化的時候，進行1~3步：向頂點緩沖區寫入數據，留待繪制的時候分配使用：

//向頂點緩沖區寫入數據，留待以后分配
function initArrayBufferForLaterUse(gl, data, num, type) {
  // Create a buffer object
  var buffer = gl.createBuffer();
  if (!buffer) {
    console.log('Failed to create the buffer object');
    return null;
  }
  // Write date into the buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

  // Store the necessary information to assign the object to the attribute variable later
  buffer.num = num;
  buffer.type = type;

  return buffer;
}

在繪制時切換到對應的着色器，進行4~5步：分配緩沖區對象並開啟連接：

//分配緩沖區對象並開啟連接
function initAttributeVariable(gl, a_attribute, buffer) {
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.vertexAttribPointer(a_attribute, buffer.num, buffer.type, false, 0, 0);
  gl.enableVertexAttribArray(a_attribute);
}

當然，頂點數據索引也同時分配到頂點緩沖區，需要的時候綁定緩沖區對象即可：

//向頂點緩沖區寫入索引，留待以后分配
function initElementArrayBufferForLaterUse(gl, data, type) {
  // Create a buffer object
  var buffer = gl.createBuffer();
  if (!buffer) {
    console.log('Failed to create the buffer object');
    return null;
  }
  // Write date into the buffer object
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);

  buffer.type = type;

  return buffer;
}

2.2.2. 幀緩沖區

幀緩沖區對象保存的是渲染的中間結果，因此分別存在三個關聯對象——顏色關聯對象（color attachment）、深度關聯對象（depth attachment）和模板關聯對象（stencil attachment），用來代替顏色緩沖區、深度緩沖區和模板緩沖區。關聯對象分為兩種：紋理對象和渲染緩沖區對象（renderbuffer object）。一般來說，可以定義一個紋理對象作為幀緩沖區的的顏色關聯對象，定義一個渲染緩沖區對象作為幀緩沖區的深度關聯對象，來實現離屏繪制。

image
圖2-1：幀緩沖區對象、紋理對象和渲染緩沖區對象

在函數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()進行綁定：

image

使用綁定的目標，將創建的紋理對象指定為幀緩沖區的顏色關聯對象；函數gl.framebufferTexture2D()的定義如下：
image

實例中的相關代碼如下： 

function initFramebufferObject(gl) {
  //...
  // 將紋理和渲染緩沖區對象關聯到幀緩沖區對象上
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);   //關聯顏色
  
  //...
}

注意這里的attachment參數的取值gl.COLOR_ATTACHMENT0，WebGL和OpenGL有所不同，WebGL只允許一個顏色關聯對象而OpenGL允許多個。

2.2.2.6. 將渲染緩沖區對象關聯到幀緩沖區對象(gl.framebufferRenderbuffer())

使用gl.framebufferRenderbuffer()函數將渲染緩沖區對象關聯到幀緩沖區的深度關聯對象：

function initFramebufferObject(gl) {
  //...
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);    //關聯深度
  //...
}

其函數定義如下：

image

2.2.2.7. 檢查幀緩沖區的配置(gl.checkFramebufferStatus())

配置幀緩沖區的過程很復雜，WebGL提供了檢查函數gl.checkFramebufferStatus():

image

相關代碼如下： 

function initFramebufferObject(gl) {
  //...
  // 檢查幀緩沖區是否被正確設置
  var e = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  if (gl.FRAMEBUFFER_COMPLETE !== e) {
    console.log('Frame buffer object is incomplete: ' + e.toString());
    return error();
  }
  //...
}

2.2.2.8. 在幀緩沖區進行繪制(gl.bindFramebuffer())

在需要在幀緩沖區繪制的時候調用綁定幀緩沖區對象，在需要在顏色緩沖區繪制的時候接觸綁定。可以通過gl.bindFramebuffer()函數實現，具體可看下一節內容。

2.3. 繪制函數

初始化准備工作完成后，接下來在加載數據的后進行圖形繪制操作，調用繪制函數DrawDEM()：

  demFile.addEventListener("change", function (event) {
    //...
    reader.onload = function () {
      if (reader.result) {

        //讀取
        var terrain = new Terrain();
        if (!readDEMFile(reader.result, terrain)) {
          console.log("文件格式有誤，不能讀取該文件！");
        }

        //繪制
        DrawDEM(gl, canvas, fbo, frameProgram, drawProgram, terrain);
      }
    }

readDEMFile()是讀取解析DEM文件的函數，並保存到自定義的Terrain對象中，通過這個Terrain對象，調用DrawDEM()進行繪制：

//繪制
function DrawDEM(gl, canvas, fbo, frameProgram, drawProgram, terrain) {
  // 設置頂點位置
  var demBufferObject = initVertexBuffersForDrawDEM(gl, terrain);
  if (!demBufferObject) {
    console.log('Failed to set the positions of the vertices');
    return;
  }

  //獲取光線:平行光
  var lightDirection = getLight();

  //預先給着色器傳遞一些不變的量
  {
    //使用幀緩沖區着色器
    gl.useProgram(frameProgram);
    //設置MVP矩陣
    setMVPMatrix(gl, canvas, terrain.sphere, lightDirection, frameProgram);

    //使用顏色緩沖區着色器
    gl.useProgram(drawProgram);
    //設置MVP矩陣
    setMVPMatrix(gl, canvas, terrain.sphere, lightDirection, drawProgram);
    //將繪制在幀緩沖區的紋理傳遞給顏色緩沖區着色器的0號紋理單元
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, fbo.texture);
    gl.uniform1i(drawProgram.u_Sampler, 0);

    gl.useProgram(null);
  }

  //開始繪制
  var tick = function () {
    //幀緩存繪制
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); //將繪制目標切換為幀緩沖區對象FBO
    gl.viewport(0, 0, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT); // 為FBO設置一個視口

    gl.clearColor(0.2, 0.2, 0.4, 1.0); // Set clear color (the color is slightly changed)
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear FBO
    gl.useProgram(frameProgram); //准備生成紋理貼圖

    //分配緩沖區對象並開啟連接
    initAttributeVariable(gl, frameProgram.a_Position, demBufferObject.vertexBuffer); // 頂點坐標
    initAttributeVariable(gl, frameProgram.a_Color, demBufferObject.colorBuffer); // 顏色

    //分配索引並繪制
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, demBufferObject.indexBuffer);
    gl.drawElements(gl.TRIANGLES, demBufferObject.numIndices, demBufferObject.indexBuffer.type, 0);

    //顏色緩存繪制
    gl.bindFramebuffer(gl.FRAMEBUFFER, null); //將繪制目標切換為顏色緩沖區
    gl.viewport(0, 0, canvas.width, canvas.height); // 設置視口為當前畫布的大小

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear the color buffer
    gl.useProgram(drawProgram); // 准備進行繪制

    //分配緩沖區對象並開啟連接
    initAttributeVariable(gl, drawProgram.a_Position, demBufferObject.vertexBuffer); // Vertex coordinat

    //分配索引並繪制
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, demBufferObject.indexBuffer);
    gl.drawElements(gl.TRIANGLES, demBufferObject.numIndices, demBufferObject.indexBuffer.type, 0);

    window.requestAnimationFrame(tick, canvas);
  };
  tick();
}

2.3.1. 初始化頂點數組

首先第一步仍然是初始化頂點緩沖區數組，但是與之前不同的是這個只傳輸頂點數據到頂點緩沖區，並不連接頂點着色器，因為兩組着色器是公用頂點數據的，所以需要在切換着色器的時候分配着色器並連接：

function initVertexBuffersForDrawDEM(gl, terrain) {
  //DEM的一個網格是由兩個三角形組成的
  //      0------1            1
  //      |                   |
  //      |                   |
  //      col       col------col+1    
  var col = terrain.col;
  var row = terrain.row;

  var indices = new Uint16Array((row - 1) * (col - 1) * 6);
  var ci = 0;
  for (var yi = 0; yi < row - 1; yi++) {
    //for (var yi = 0; yi < 10; yi++) {
    for (var xi = 0; xi < col - 1; xi++) {
      indices[ci * 6] = yi * col + xi;
      indices[ci * 6 + 1] = (yi + 1) * col + xi;
      indices[ci * 6 + 2] = yi * col + xi + 1;
      indices[ci * 6 + 3] = (yi + 1) * col + xi;
      indices[ci * 6 + 4] = (yi + 1) * col + xi + 1;
      indices[ci * 6 + 5] = yi * col + xi + 1;
      ci++;
    }
  }

  var dem = new Object(); // Create the "Object" object to return multiple objects.

  // Write vertex information to buffer object
  dem.vertexBuffer = initArrayBufferForLaterUse(gl, terrain.vertices, 3, gl.FLOAT);
  dem.colorBuffer = initArrayBufferForLaterUse(gl, terrain.colors, 3, gl.FLOAT);
  dem.normalBuffer = initArrayBufferForLaterUse(gl, terrain.normals, 3, gl.FLOAT);
  dem.indexBuffer = initElementArrayBufferForLaterUse(gl, indices, gl.UNSIGNED_SHORT);
  if (!dem.vertexBuffer || !dem.colorBuffer || !dem.indexBuffer || !dem.normalBuffer) {
    return null;
  }

  dem.numIndices = indices.length;

  // Unbind the buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

  return dem;
}

2.3.2. 傳遞非公用隨幀不變的數據

為了滿足交互需求，繪制函數仍然是通過刷新頁面函數requestAnimationFrame()實現的，有的數據是固定隨幀不變的，這樣的數據可以提前傳輸好。當然，這些數據不包含共用的頂點緩沖區數據：

  //獲取光線:平行光
  var lightDirection = getLight();

  //預先給着色器傳遞一些不變的量
  {
    //使用幀緩沖區着色器
    gl.useProgram(frameProgram);
    //設置MVP矩陣
    setMVPMatrix(gl, canvas, terrain.sphere, lightDirection, frameProgram);

    //使用顏色緩沖區着色器
    gl.useProgram(drawProgram);
    //設置MVP矩陣
    setMVPMatrix(gl, canvas, terrain.sphere, lightDirection, drawProgram);
    //將繪制在幀緩沖區的紋理傳遞給顏色緩沖區着色器的0號紋理單元
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, fbo.texture);
    gl.uniform1i(drawProgram.u_Sampler, 0);

    gl.useProgram(null);
  }

注意這里通過函數gl.useProgram()切換了着色器，然后再分別給着色器傳輸數據。在這個例子只是通過幀緩沖區做顏色中轉，所以幀緩沖區和顏色緩沖區繪制的MVP矩陣是相同且固定的，所以可以提前傳輸好。並且，將幀緩沖區關聯着顏色關聯對象的紋理對象，分配給顏色緩沖區的片元着色器。

2.3.3. 逐幀繪制

刷新頁面函數requestAnimationFrame()的回調函數tick()中進行繪制，頁面每隔一段時間就會調用這個繪制函數。

2.3.3.1. 繪制到幀緩存

為了聲明當前是繪制到幀緩存的，首先將要綁定幀緩沖區對象gl.bindFramebuffer()。然后調用gl.viewport()函數定義一個繪圖的視口：

image

接下來還是通過gl.useProgram()切換到對應的着色器，分配並連接頂點緩沖區的頂點數據；最后調用gl.drawElements()進行繪制即可。

相關的代碼如下：

//開始繪制
  var tick = function () {
    //幀緩存繪制
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); //將繪制目標切換為幀緩沖區對象FBO
    gl.viewport(0, 0, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT); // 為FBO設置一個視口

    gl.clearColor(0.2, 0.2, 0.4, 1.0); // Set clear color (the color is slightly changed)
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear FBO
    gl.useProgram(frameProgram); //准備生成紋理貼圖

    //分配緩沖區對象並開啟連接
    initAttributeVariable(gl, frameProgram.a_Position, demBufferObject.vertexBuffer); // 頂點坐標
    initAttributeVariable(gl, frameProgram.a_Color, demBufferObject.colorBuffer); // 顏色

    //分配索引並繪制
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, demBufferObject.indexBuffer);
    gl.drawElements(gl.TRIANGLES, demBufferObject.numIndices, demBufferObject.indexBuffer.type, 0);

    //...

    window.requestAnimationFrame(tick, canvas);
  };
  tick();
}

2.3.3.2. 繪制到顏色緩存

繪制到顏色緩沖區的步驟也是一致的，只不過在繪制之前需要調用gl.bindFramebuffer(gl.FRAMEBUFFER, null)解除幀緩沖區綁定，將繪制目標切換到當前的顏色緩沖區。當然，設置視口和切換着色器操作都是必須的。相關代碼如下：

//開始繪制
  var tick = function () {
    //...

    //顏色緩存繪制
    gl.bindFramebuffer(gl.FRAMEBUFFER, null); //將繪制目標切換為顏色緩沖區
    gl.viewport(0, 0, canvas.width, canvas.height); // 設置視口為當前畫布的大小

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear the color buffer
    gl.useProgram(drawProgram); // 准備進行繪制

    //分配緩沖區對象並開啟連接
    initAttributeVariable(gl, drawProgram.a_Position, demBufferObject.vertexBuffer); // Vertex coordinat

    //分配索引並繪制
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, demBufferObject.indexBuffer);
    gl.drawElements(gl.TRIANGLES, demBufferObject.numIndices, demBufferObject.indexBuffer.type, 0);

    window.requestAnimationFrame(tick, canvas);
  };
  tick();
}

3. 結果

最后運行的結果如下，顯示的是一個特定角度的地形：

image

跟之前教程相比，示例似乎沒有特別的地方。這個示例的關鍵點在於這個渲染效果經過了幀緩沖區的中轉，給更深入的技術做准備——比如，下一篇要論述的技術：陰影。

4. 參考

本來部分代碼和插圖來自《WebGL編程指南》，源代碼鏈接：地址 。會在此共享目錄中持續更新后續的內容。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 WebGL簡易教程(四)：顏色 WebGL簡易教程——目錄 WebGL簡易教程(十四)：陰影 WebGL簡易教程(十一)：紋理 WebGL簡易教程(十)：光照 WebGL簡易教程(三)：繪制一個三角形(緩沖區對象) WebGL簡易教程(九)：綜合實例：地形的繪制 WebGL簡易教程(十五)：加載gltf模型 WebGL簡易教程(十二)：包圍球與投影 WebGL簡易教程(七)：繪制一個矩形體
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM