WebGL簡易教程(七)：繪製一個矩形體

阿新 • • 發佈：2019-10-07

1. 概述
2. 示例
- 2.1. 頂點索引繪製
- 2.2. MVP矩陣設定
  - 2.2.1. 模型矩陣
  - 2.2.2. 投影矩陣
  - 2.2.3. 檢視矩陣
  - 2.2.4. MVP矩陣
3. 結果
4. 參考

1. 概述

在上一篇教程《WebGL簡易教程(六)：第一個三維示例(使用模型檢視投影變換)》中，通過使用模型檢視投影變換，繪製了一組由遠及近的三角形。但是這個示例還是太簡單了，這幾個三角形的座標仍然是-1到1之間的座標，無論如何都是很容易設定引數的，可能並不能很深入的理解模型檢視投影變換。

在這篇教程就更一步，繪製一個稍微複雜一點的實體——矩形體。矩形體很多時候可以用來做三維物體的包圍盒，包圍盒在很多情況下特別有用，特別是進行UI互動的時候，只要能設定引數讓包圍盒看見，其三維物體也必定是能被看見的。為了更好的理解模型檢視投影變換，特意設定矩形體的座標為比較大的浮點數。

2. 示例

改進上一篇教程的JS程式碼，得到新的程式碼如下：

// 頂點著色器程式
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' + // attribute variable
  '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' + // Set the vertex coordinates of the point
  '  v_Color = a_Color;\n' +
  '}\n';

// 片元著色器程式
var FSHADER_SOURCE =
  'precision mediump float;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' +
  '}\n';

//定義一個矩形體：混合建構函式原型模式
function Cuboid(minX, maxX, minY, maxY, minZ, maxZ) {
  this.minX = minX;
  this.maxX = maxX;
  this.minY = minY;
  this.maxY = maxY;
  this.minZ = minZ;
  this.maxZ = maxZ;
}

Cuboid.prototype = {
  constructor: Cuboid,
  CenterX: function () {
    return (this.minX + this.maxX) / 2.0;
  },
  CenterY: function () {
    return (this.minY + this.maxY) / 2.0;
  },
  CenterZ: function () {
    return (this.minZ + this.maxZ) / 2.0;
  },
  LengthX: function () {
    return (this.maxX - this.minX);
  },
  LengthY: function () {
    return (this.maxY - this.minY);
  }
}

var currentAngle = [35.0, 30.0]; // 繞X軸Y軸的旋轉角度 ([x-axis, y-axis])
var curScale = 1.0;   //當前的縮放比例

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

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

  // 初始化著色器
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // 設定頂點位置
  var cuboid = new Cuboid(399589.072, 400469.072, 3995118.062, 3997558.062, 732, 1268);
  var n = initVertexBuffers(gl, cuboid);
  if (n < 0) {
    console.log('Failed to set the positions of the vertices');
    return;
  }

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

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

  //繪製函式
  var tick = function () {
    //設定MVP矩陣
    setMVPMatrix(gl, canvas, cuboid);

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

    //繪製矩形體
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);

    //請求瀏覽器呼叫tick
    requestAnimationFrame(tick);  
  };

  //開始繪製
  tick();

  // 繪製矩形體
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}

//設定MVP矩陣
function setMVPMatrix(gl, canvas, cuboid) {
  // Get the storage location of u_MvpMatrix
  var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
  if (!u_MvpMatrix) {
    console.log('Failed to get the storage location of u_MvpMatrix');
    return;
  }

  //模型矩陣
  var modelMatrix = new Matrix4();
  modelMatrix.scale(curScale, curScale, curScale);
  modelMatrix.rotate(currentAngle[0], 1.0, 0.0, 0.0); // Rotation around x-axis 
  modelMatrix.rotate(currentAngle[1], 0.0, 1.0, 0.0); // Rotation around y-axis 
  modelMatrix.translate(-cuboid.CenterX(), -cuboid.CenterY(), -cuboid.CenterZ());

  //投影矩陣
  var fovy = 60;
  var near = 1;
  var projMatrix = new Matrix4();
  projMatrix.setPerspective(fovy, canvas.width / canvas.height, 1, 10000);

  //計算lookAt()函式初始視點的高度
  var angle = fovy / 2 * Math.PI / 180.0;  
  var eyeHight = (cuboid.LengthY() * 1.2) / 2.0 / angle;

  //檢視矩陣  
  var viewMatrix = new Matrix4();  // View matrix   
  viewMatrix.lookAt(0, 0, eyeHight, 0, 0, 0, 0, 1, 0);

  //MVP矩陣
  var mvpMatrix = new Matrix4();
  mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);

  //將MVP矩陣傳輸到著色器的uniform變數u_MvpMatrix
  gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
}

//
function initVertexBuffers(gl, cuboid) {
  // Create a cube
  //    v6----- v5
  //   /|      /|
  //  v1------v0|
  //  | |     | |
  //  | |v7---|-|v4
  //  |/      |/
  //  v2------v3
  // 頂點座標和顏色
  var verticesColors = new Float32Array([
    cuboid.maxX, cuboid.maxY, cuboid.maxZ, 1.0, 1.0, 1.0,  // v0 White
    cuboid.minX, cuboid.maxY, cuboid.maxZ, 1.0, 0.0, 1.0,  // v1 Magenta
    cuboid.minX, cuboid.minY, cuboid.maxZ, 1.0, 0.0, 0.0,  // v2 Red
    cuboid.maxX, cuboid.minY, cuboid.maxZ, 1.0, 1.0, 0.0,  // v3 Yellow
    cuboid.maxX, cuboid.minY, cuboid.minZ, 0.0, 1.0, 0.0,  // v4 Green
    cuboid.maxX, cuboid.maxY, cuboid.minZ, 0.0, 1.0, 1.0,  // v5 Cyan
    cuboid.minX, cuboid.maxY, cuboid.minZ, 0.0, 0.0, 1.0,  // v6 Blue
    cuboid.minX, cuboid.minY, cuboid.minZ, 1.0, 0.0, 1.0   // v7 Black
  ]);

  //頂點索引
  var indices = new Uint8Array([
    0, 1, 2, 0, 2, 3,    // 前
    0, 3, 4, 0, 4, 5,    // 右
    0, 5, 6, 0, 6, 1,    // 上
    1, 6, 7, 1, 7, 2,    // 左
    7, 4, 3, 7, 3, 2,    // 下
    4, 7, 6, 4, 6, 5     // 後
  ]);

  //
  var FSIZE = verticesColors.BYTES_PER_ELEMENT;   //陣列中每個元素的位元組數

  // 建立緩衝區物件
  var vertexColorBuffer = gl.createBuffer();
  var indexBuffer = gl.createBuffer();
  if (!vertexColorBuffer || !indexBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

  // 將緩衝區物件繫結到目標
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
  // 向緩衝區物件寫入資料
  gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

  //獲取著色器中attribute變數a_Position的地址 
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  // 將緩衝區物件分配給a_Position變數
  gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);

  // 連線a_Position變數與分配給它的緩衝區物件
  gl.enableVertexAttribArray(a_Position);

  //獲取著色器中attribute變數a_Color的地址 
  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  if (a_Color < 0) {
    console.log('Failed to get the storage location of a_Color');
    return -1;
  }
  // 將緩衝區物件分配給a_Color變數
  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  // 連線a_Color變數與分配給它的緩衝區物件
  gl.enableVertexAttribArray(a_Color);

  // 將頂點索引寫入到緩衝區物件
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

  return indices.length;
}

這段程式碼的流程與上一篇的JS程式碼基本一致，著色器部分也基本沒有變化。應該關注的主要有兩點：通過頂點索引繪製物體和MVP矩陣的設定。

2.1. 頂點索引繪製

如果通過前面的知識進行繪製一個矩形體，一個矩形有6個面，每個面有2個三角形，每個三角形有3個點，也就意味著需要定義36個頂點。但是我們知道一個矩形體只需要有8個頂點就可以了，定義36個頂點意味著記憶體和視訊記憶體的浪費。為了解決這個問題，WebGL提供了通過頂點索引進行繪製的方法：gl.drawElements()。其函式的定義如下：

在本示例中，首先定義了一個描述矩形體的物件,並且根據其引數，定義了其頂點陣列，包含了XYZ資訊和顏色資訊。

//定義一個矩形體：混合建構函式原型模式
function Cuboid(minX, maxX, minY, maxY, minZ, maxZ) {
  this.minX = minX;
  this.maxX = maxX;
  this.minY = minY;
  this.maxY = maxY;
  this.minZ = minZ;
  this.maxZ = maxZ;
}

Cuboid.prototype = {
  constructor: Cuboid,
  CenterX: function () {
    return (this.minX + this.maxX) / 2.0;
  },
  CenterY: function () {
    return (this.minY + this.maxY) / 2.0;
  },
  CenterZ: function () {
    return (this.minZ + this.maxZ) / 2.0;
  },
  LengthX: function () {
    return (this.maxX - this.minX);
  },
  LengthY: function () {
    return (this.maxY - this.minY);
  }
}

//...

// 頂點座標和顏色
var verticesColors = new Float32Array([
  cuboid.maxX, cuboid.maxY, cuboid.maxZ, 1.0, 1.0, 1.0,  // v0 White
  cuboid.minX, cuboid.maxY, cuboid.maxZ, 1.0, 0.0, 1.0,  // v1 Magenta
  cuboid.minX, cuboid.minY, cuboid.maxZ, 1.0, 0.0, 0.0,  // v2 Red
  cuboid.maxX, cuboid.minY, cuboid.maxZ, 1.0, 1.0, 0.0,  // v3 Yellow
  cuboid.maxX, cuboid.minY, cuboid.minZ, 0.0, 1.0, 0.0,  // v4 Green
  cuboid.maxX, cuboid.maxY, cuboid.minZ, 0.0, 1.0, 1.0,  // v5 Cyan
  cuboid.minX, cuboid.maxY, cuboid.minZ, 0.0, 0.0, 1.0,  // v6 Blue
  cuboid.minX, cuboid.minY, cuboid.minZ, 1.0, 0.0, 1.0   // v7 Black
]);

//...

如之前的程式碼一樣，頂點和顏色陣列都傳遞給頂點緩衝器物件。不同的是這裡還定義了一個頂點索引陣列：

//頂點索引
var indices = new Uint8Array([
  0, 1, 2, 0, 2, 3,    // 前
  0, 3, 4, 0, 4, 5,    // 右
  0, 5, 6, 0, 6, 1,    // 上
  1, 6, 7, 1, 7, 2,    // 左
  7, 4, 3, 7, 3, 2,    // 下
  4, 7, 6, 4, 6, 5     // 後
]);

這個陣列才真正定義了矩形體中三角形的繪製順序，每個三角形的頂點都由在頂點陣列的索引值來代替，交給WebGL去識別，如圖所示：

同樣的，這個頂點索引陣列也應該傳遞到緩衝區物件。只不過不繫結到gl.ARRAY_BUFFER上而繫結到gl.ELEMENT_ARRAY_BUFFER上。這個引數表示，該緩衝區的內容是頂點的索引值資料。相關程式碼如下：

// 建立緩衝區物件
var indexBuffer = gl.createBuffer();

//...

// 將頂點索引寫入到緩衝區物件
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

最後，通過上述的gl.drawElements()函式繪製出來：

// 繪製矩形體
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);

通過頂點索引的方式繪製三維物體，能夠很明顯的節約記憶體和視訊記憶體的開銷，三維物體的共點情況越多，越應該採用這種方式。

2.2. MVP矩陣設定

MVP矩陣的設定同樣放置在setMVPMatrix()函式中。

2.2.1. 模型矩陣

var currentAngle = [35.0, 30.0]; // 繞X軸Y軸的旋轉角度 ([x-axis, y-axis])
var curScale = 1.0;   //當前的縮放比例

//...

//模型矩陣
var modelMatrix = new Matrix4();
modelMatrix.scale(curScale, curScale, curScale);
modelMatrix.rotate(currentAngle[0], 1.0, 0.0, 0.0); // Rotation around x-axis 
modelMatrix.rotate(currentAngle[1], 0.0, 1.0, 0.0); // Rotation around y-axis 
modelMatrix.translate(-cuboid.CenterX(), -cuboid.CenterY(), -cuboid.CenterZ());

在模型矩陣中，先將矩形體的中心平移到座標系的原點，然後繞X軸旋轉35度，繞Y軸旋轉30度，最後保持縮放比例不變。

2.2.2. 投影矩陣

一般來說，透視投影矩陣的引數是不太容易設定，一般可以設定為經驗值固定不變（不絕對）。

//投影矩陣
var fovy = 60;
var near = 1;
var projMatrix = new Matrix4();
projMatrix.setPerspective(fovy, canvas.width / canvas.height, 1, 10000);

2.2.3. 檢視矩陣

然後通過前面的引數，設定檢視矩陣，讓檢視中正好可以顯示該矩形體：

//計算lookAt()函式初始視點的高度
var angle = fovy / 2 * Math.PI / 180.0;  
var eyeHight = (cuboid.LengthY() * 1.2) / 2.0 / angle;

//檢視矩陣  
var viewMatrix = new Matrix4();  // View matrix   
viewMatrix.lookAt(0, 0, eyeHight, 0, 0, 0, 0, 1, 0);

對lookat()函式來說，觀察點是已經座標系的原點，也就是矩形體的中心位置（矩形體已經被平移了）;上方向一般都是預設的經驗值(0,1,0);那麼關鍵就是求視點的位置，進一步來說就是視高的位置。

那麼根據透視投影設定的垂直張角，可以求得視高，如圖所示：

很明顯的看出，當光線射到包圍盒的中心，包圍盒Y方向長度的一半，除以視點高，就是fovy一半的正切值。這就是以上程式碼中求得eyeHight的由來。

2.2.4. MVP矩陣

將模型矩陣、檢視矩陣、投影矩陣級聯起來，得到MVP矩陣：

//MVP矩陣
var mvpMatrix = new Matrix4();
mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);

3. 結果

在瀏覽器中開啟對應的HTML，可以看見一個彩色的矩形體。執行結果如下：

4. 參考

本來部分程式碼和插圖來自《WebGL程式設計指南》，原始碼連結：地址。會在此共享目錄中持續更新後續的內

WebGL簡易教程(七)：繪製一個矩形體

1. 概述

2. 示例

2.1. 頂點索引繪製

2.2. MVP矩陣設定

2.2.1. 模型矩陣

2.2.2. 投影矩陣

2.2.3. 檢視矩陣

2.2.4. MVP矩陣

3. 結果

4. 參考

WebGL簡易教程(七)：繪製一個矩形體

WebGL簡易教程(三)：繪製一個三角形(緩衝區物件)

WebGL簡易教程(九)：綜合例項：地形的繪製

WebGL簡易教程(一)：第一個簡單示例

WebGL簡易教程(二)：向著色器傳輸資料

WebGL簡易教程(四)：顏色

WebGL簡易教程(五)：圖形變換(模型、檢視、投影變換)

WebGL簡易教程(六)：第一個三維示例(使用模型檢視投影變換)

WebGL簡易教程(十)：光照

WebGL簡易教程(十三)：幀快取物件(離屏渲染)

WebGL簡易教程(十一)：紋理

WebGL簡易教程(十四)：陰影

WebGL簡易教程(十五)：載入gltf模型

Spring Boot系列教程七：Spring boot集成MyBatis

Spring Security教程(七)：RememberMe功能

CorelDRAW教程分享：繪製流程圖簡單方法分享

小程式雲開發教程七：貼子的詳情及評論功能

UI設計教程分享：設計一個高質量的logo要從哪方面入手呢？

python爬蟲入門教程(二)：開始一個簡單的爬蟲

基於硬體的C（C++）語言程式設計教程9：判斷一個年份是否為閏年

WebGL簡易教程(七)：繪製一個矩形體

1. 概述

2. 示例

2.1. 頂點索引繪製

2.2. MVP矩陣設定

2.2.1. 模型矩陣

2.2.2. 投影矩陣

2.2.3. 檢視矩陣

2.2.4. MVP矩陣

3. 結果

4. 參考

相關推薦