其他章節請看：
webgl 系列
漸變三角形
本文通過一個漸變三角形的示例逐步分析：varying變數、合并緩沖區、圖形裝配、光柵化、varying 內插
繪制三個點v1
需求：繪制三個相同顏色的點，效果如下：
通過三角形的學習，這個需求非常容易實作，代碼如下：
const VSHADER_SOURCE = `
attribute vec4 a_Position;
void main() {
gl_Position = a_Position;
gl_PointSize = 10.0;
}
`
const FSHADER_SOURCE = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`
function main() {
const canvas = document.getElementById('webgl');
const gl = canvas.getContext("webgl");
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;
}
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
const vertices = {
data: new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
]),
vertexNumber: 3,
count: 2,
}
initVertexBuffers(gl, vertices)
gl.drawArrays(gl.POINTS, 0, vertices.vertexNumber);
}
function initVertexBuffers(gl, {data, count}) {
const vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('創建緩沖區物件失敗');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
const 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;
}
gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
}
繪制三個點v2
需求
需求：繪制三個不同顏色的點（基于版本1），效果如下：
Tip: 繪制三個點不同顏色的點其實也就完成了漸變三角形的繪制，這里呼叫了兩次 drawArrays()，也就是繪制了兩個圖元，一系列點、三角形，
核心代碼
相對版本1，變化的代碼如下：
const VSHADER_SOURCE = `
attribute vec4 a_Position;
+attribute vec4 a_Color;
+varying vec4 v_Color;
void main() {
gl_Position = a_Position;
- gl_PointSize = 10.0;
+ gl_PointSize = 10.0;
+ v_Color = a_Color;
}
`
const FSHADER_SOURCE = `
+precision mediump float;
+varying vec4 v_Color;
void main() {
- gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+ gl_FragColor = v_Color;
}
`
function main() {
const vertices = {
data: new Float32Array([
- 0.0, 0.5,
- -0.5, -0.5,
- 0.5, -0.5
+ 0.0, 0.5, 1.0, 0.0, 0.0,
+ -0.5, -0.5, 0.0, 1.0, 0.0,
+ 0.5, -0.5, 0.0, 0.0, 1.0,
]),
vertexNumber: 3,
count: 2,
initVertexBuffers(gl, vertices)
gl.drawArrays(gl.POINTS, 0, vertices.vertexNumber);
+ gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.vertexNumber);
}
function initVertexBuffers(gl, {data, count}) {
const vertexBuffer = gl.createBuffer();
- gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, 0, 0);
+ const FSIZE = data.BYTES_PER_ELEMENT;
+ gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, FSIZE * 5, 0);
gl.enableVertexAttribArray(a_Position);
+ const 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;
+ }
+ gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
+ gl.enableVertexAttribArray(a_Color);
}
完整代碼
const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec4 a_Color;
varying vec4 v_Color;
void main() {
gl_Position = a_Position;
gl_PointSize = 10.0;
v_Color = a_Color;
}
`
const FSHADER_SOURCE = `
precision mediump float;
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
`
function main() {
const canvas = document.getElementById('webgl');
const gl = canvas.getContext("webgl");
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;
}
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
const vertices = {
data: new Float32Array([
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0,
]),
vertexNumber: 3,
count: 2,
}
initVertexBuffers(gl, vertices)
gl.drawArrays(gl.POINTS, 0, vertices.vertexNumber);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.vertexNumber);
}
function initVertexBuffers(gl, { data, count }) {
const vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('創建緩沖區物件失敗');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
const 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;
}
const FSIZE = data.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, FSIZE * 5, 0);
gl.enableVertexAttribArray(a_Position);
const 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;
}
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
gl.enableVertexAttribArray(a_Color);
}
改變顏色(varying)
前面我們說過著色器語言（GLSL ES）有三種型別的“變數”，我們已經使用了兩種：
attribute- 傳輸的是那些與頂點相關的資料，只有頂點著色器才能使用，例如頂點的位置、大小、顏色uniform- 傳輸的是那些對于所有頂點都相同的資料，例如變化矩陣
現在我們可以將顏色從 js 傳入 attribute，但真正影響顏色繪制的是片元著色器的 gl_FragColor，目前我們是靜態設定，就像這樣：
const FSHADER_SOURCE = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`
如何將頂點著色器中的資料傳入片元著色器？
我們曾經通過 uniform 給片元著色器傳遞顏色，就像這樣：
const FSHADER_SOURCE = `
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;
}
`
但是 uniform 是相同的的變數，沒法為每個頂點準備一個值，為了讓每個點的顏色不同，需要使用varying（不同的）變數，
使用 varying 給片元著色器傳遞值（顏色），就像這樣：
const VSHADER_SOURCE = `
// 定義一個 attribute 變數，用于接收 js 傳入的顏色
attribute vec4 a_Color;
// 定義 varying 變數，用于傳遞給片元著色器
varying vec4 v_Color;
void main() {
gl_Position = a_Position;
gl_PointSize = 10.0;
// 給 varying 變數賦值
v_Color = a_Color;
}
`
const FSHADER_SOURCE = `
precision mediump float;
// 宣告一個與頂點著色器中相同的 varying 變數名，用于接收顏色
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
`
代碼決議：
- 通過在頂點著色器中宣告一個 attribute 變數用于接收 js 傳入的顏色
- 在頂點著色器中宣告一個 varying 變數，用于接收 attribute 中的顏色，并將顏色傳給片元著色器
- 片元著色器宣告一個與頂點著色器中相同的 varying 變數名，接收顏色
Tip：頂點著色器中的 varying 變數 v_Color 與 片元著色器中的 varying 變數 v_Color 不同，中間涉及 varying 內插，下文會介紹，
合并緩沖區
漸變三角形將頂點和每個頂點的顏色寫在一起，資料結構如下：
data: new Float32Array([
- 0.0, 0.5,
- -0.5, -0.5,
- 0.5, -0.5
+ 0.0, 0.5, 1.0, 0.0, 0.0,
+ -0.5, -0.5, 0.0, 1.0, 0.0,
+ 0.5, -0.5, 0.0, 0.0, 1.0,
]),
在漸變三角形示例中我們只用了一個緩沖區物件（const vertexBuffer = gl.createBuffer();），當然也可以使用兩個緩沖區物件來實作相同的效果，核心代碼如下：
// 宣告第二個緩沖區物件：顏色緩沖區
const vertexColorBuffer = gl.createBuffer();
if (!vertexColorBuffer) {
console.log('創建緩沖區物件失敗');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
// 顏色資料抽離出來
const colors = new Float32Array([
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0,
]);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
const 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;
}
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Color);
將多個緩沖區合并，代碼更簡潔，思路：
- 首先將頂點位置和顏色寫在一個陣列中
- 然后通過 vertexAttribPointer() 來讀取不同的資訊（頂點位置、顏色），
請看代碼：
const vertices = {
// 頂點位置和顏色寫在一起
data: new Float32Array([
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0,
]),
vertexNumber: 3,
count: 2,
}
// 每個元素所占用的位元組數
const FSIZE = data.BYTES_PER_ELEMENT;
// FSIZE * 5 - 指定每個點的位元組數
// 0 - 偏移量
gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, FSIZE * 5, 0);
/*
提取顏色：
3 - 分量數
FSIZE * 2 - 偏移量，從第三個開始
*/
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
例如提取顏色：每個點總共位元組數是 FSIZE * 5，顏色占3個分量，從第三（FSIZE * 2）個數開始讀取 3 個分量，
為什么是漸變
我們定義了三個不同顏色的點，繪制出來的三角形為什么卻是漸變色彩？
要回答這個問題，需要說一下整個繪制程序，
請看下圖：
- 首先確定頂點坐標，我們傳了三個頂點
- 接著將孤立的頂點坐標
裝配成幾何圖形，幾何圖形的類別由 drawArrays() 第一個引數決定 - 將裝配好的幾何圖形轉為
片元（簡單認為是像素，這里為了示意，只顯示了10個片元），這個程序稱為光柵化，
圖形裝配和光柵化程序如下圖所示：
一旦光柵化結束，程式就開始逐片元呼叫片元著色器，這里呼叫了10次，每呼叫一次就處理一個片元，對于每個片元，片元著色器計算出該片元的顏色，并寫入顏色緩沖區，當最后一個片元被處理完成，瀏覽器就會顯示最終結果，就像這樣：
漸變其實是由 varying 變數的內插導致的，比如繪制一條線，一端是紅色，一端是藍色，我們在頂點著色器向 varying 變數 v_Color 賦上兩個顏色，webgl 會計算出線段上所有點（片元）的顏色，并賦值給片元著色器中的 varying 變數 v_Color，就像這樣：
頂點著色器中的 v_Color 和片元著色器中的 v_Color 不是一回事，示意如下：
其他章節請看：
webgl 系列
出處：https://www.cnblogs.com/pengjiali/p/17216109.html
本文著作權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連接，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546874.html
標籤：其他