WebGL簡易教程(十三):幀快取物件(離屏渲染)
目錄
- 1. 概述
- 2. 示例
- 2.1. 著色器部分
- 2.2. 初始化/準備工作
- 2.2.1. 著色器切換
- 2.2.2. 幀緩衝區
- 2.3. 繪製函式
- 2.3.1. 初始化頂點陣列
- 2.3.2. 傳遞非公用隨幀不變的資料
- 2.3.3. 逐幀繪製
- 3. 結果
- 4. 參考
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簡易教程(三):繪製一個三角形(緩衝區物件)》中介紹過使用頂點緩衝區的五個步驟:
- 建立緩衝區物件(gl.createBuffer())
- 繫結緩衝區物件(gl.bindBuffer())
- 將資料寫入緩衝區物件(gl.bufferData())
- 將緩衝區物件分配給attribute變數(gl.vertexAttribPointer())
- 開啟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)。一般來說,可以定義一個紋理物件作為幀緩衝區的的顏色關聯物件,定義一個渲染緩衝區物件作為幀緩衝區的深度關聯物件,來實現離屏繪製。
圖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簡易教程(十一):紋理》中就已經介紹過如何建立紋理物件並設定紋理物件的引數。這裡的建立過程也是一樣的;只是細節略有不同:
- 這裡設定紋理的長、寬可以跟畫布的長寬不一樣,想要速度快,可以小一點;想要效果好,就可以大一點。
- 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()的定義為:
繫結完成後,通過gl.renderbufferStorage()函式設定渲染緩衝區的格式、寬度以及高度等。注意深度關聯的渲染緩衝區,其寬度和高度必須與作為顏色關聯物件的紋理緩衝區一致。其函式定義為:
2.2.2.5. 將紋理物件關聯到幀緩衝區物件(gl.bindFramebuffer(), gl.framebufferTexture2D)
仍然是先將幀緩衝繫結到目標上,使用函式gl.bindFramebuffer()進行繫結:
使用繫結的目標,將建立的紋理物件指定為幀緩衝區的顏色關聯物件;函式gl.framebufferTexture2D()的定義如下:
例項中的相關程式碼如下:
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); //關聯深度
//...
}
其函式定義如下:
2.2.2.7. 檢查幀緩衝區的配置(gl.checkFramebufferStatus())
配置幀緩衝區的過程很複雜,WebGL提供了檢查函式gl.checkFramebufferStatus():
相關程式碼如下:
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()函式定義一個繪圖的視口:
接下來還是通過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. 結果
最後執行的結果如下,顯示的是一個特定角度的地形:
跟之前教程相比,示例似乎沒有特別的地方。這個示例的關鍵點在於這個渲染效果經過了幀緩衝區的中轉,給更深入的技術做準備——比如,下一篇要論述的技術:陰影。
4. 參考
本來部分程式碼和插圖來自《WebGL程式設計指南》,原始碼連結:地址 。會在此共享目錄中持續更新後續的內