webgl 系列 —— 繪製一個點（版本2、版本3、版本4、版本5）

彭加李發表於2023-03-01

Web

繪製一個點

我們初步認識了 webgl，本篇主要圍繞繪製一個點的示例，逐步實現下面功能：

點的位置從 js 傳入著色器
點的大小由 js 傳入著色器
透過滑鼠點選繪點
透過滑鼠點選繪點，並改變點的顏色

繪製一個點（版本2）

需求

在上篇中我們在canvas中心繪製了一個點（效果如下），但這點的位置是直接寫在頂點著色器中 gl_Position = vec4(0.0, 0.0, 0.0, 1.0); 。

需求：點的位置從 js 傳入著色器

思路

將位置資訊從 js 傳入著色器有兩種方式：attribute 變數、uniform 變數

attribute - 傳輸的是那些與頂點相關的資料
uniform - 傳輸的是那些對於所有頂點都相同的資料

我們這裡使用 attribute 變數，因為每個點都有各自的座標

Tip：GLSL 中有三種型別的“變數”或者說資料儲存型別。每一種型別都有特定的目標和使用方法：: attributes、varyings（複雜，暫不介紹）和uniforms —— Data in WebGL

attribute

attribute 是一種著色器語言（GLSL ES）變數，用於向頂點著色器內傳輸資料，只有頂點著色器能使用它。

使用 attribute 有如下三步：

在頂點著色器中宣告 attribute 變數
在頂點著色器中將宣告的 attribute 變數賦值給 gl_Position 變數
向 attribute 變數傳輸資料

實現

完整程式碼如下：

// point02.js
// 必須要 ;
const VSHADER_SOURCE = `
// 宣告 attribute 變數
attribute vec4 a_Position;
void main() {
  // 將宣告的 attribute 變數賦值給 gl_Position 變數
  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 (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('初始化著色器失敗');
    return;
  }

  // 獲取 attribute 變數的儲存位置。如果找不到該屬性則返回 -1。
  const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
  if (a_Position < 0) {
    console.log('找不到 a_Position 的儲存位置');
    return;
  }
  // 為頂點 attibute 變數賦值
  gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);


  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT); 

  gl.drawArrays(gl.POINTS, 0, 1);
}

Tip：頂點著色器中必須要寫 ;

核心程式碼：

// 宣告 attribute 變數
attribute vec4 a_Position; 
void main() {
  // 將宣告的 attribute 變數賦值給 gl_Position 變數
  gl_Position = a_Position;
}

// 獲取 attribute 變數的儲存位置。如果找不到該屬性則返回 -1。
// gl.program - 在 initShaders() 函式中建立了這個程式物件。現在只需知道它是一個引數
const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
// 為頂點 attibute 變數賦值
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

Tip：習慣：所有 attribute 的變數以 a_ 開頭，所有 uniform 的變數以 u_ 開頭。

getAttribLocation

WebGLRenderingContext.getAttribLocation(program, name) 方法返回了給定 WebGLProgram物件中某屬性的下標指向位置。

vertexAttrib3f

vertexAttrib3f 是一系列同族方法中的一個，為頂點 attibute 變數賦值。

一系列方法指：

void gl.vertexAttrib1f(index, v0);
void gl.vertexAttrib2f(index, v0, v1);
// 將資料(v0, v1, v2) 傳給 index 指定的 attribute 變數
void gl.vertexAttrib3f(index, v0, v1, v2);
void gl.vertexAttrib4f(index, v0, v1, v2, v3);

// 向量版本 v(vector)
void gl.vertexAttrib1fv(index, value);
void gl.vertexAttrib2fv(index, value);
void gl.vertexAttrib3fv(index, value);
void gl.vertexAttrib4fv(index, value);

gl.vertexAttrib1f 傳1個分量。第二第三分量設定為 0.0，第四個分量設定為1.0
gl.vertexAttrib3f 傳3個分量。第四個分量設定為 1.0，以此類推。

向量版本以 v 結尾，接受型別化陣列。就像這樣：

const floatArray = new Float32Array([10.0, 5.0, 2.0]);
gl.vertexAttrib3fv(a_foobar, floatArray);

繪製一個點（版本3）

需求

需求：點的大小由 js 傳入著色器 —— 在版本2的基礎上實現

實現

和版本2的實現類似：

 const VSHADER_SOURCE = `
 attribute vec4 a_Position;
+attribute float a_PointSize;
 void main() {
   // 將宣告的 attribute 變數賦值給 gl_Position 變數
   gl_Position = a_Position;
-  gl_PointSize = 10.0;
+  gl_PointSize = a_PointSize;
 }
 `

function main() {
   gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

+  const a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize')
+  if (a_PointSize < 0) {
+    console.log('找不到 a_PointSize 的儲存位置');
+    return;
+  }
+  // 為頂點 attibute 變數賦值
+  gl.vertexAttrib1f(a_PointSize, 10.0);

   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);

繪製一個點（版本4）

需求

需求：透過滑鼠點選繪點

效果如下：

實現

完整程式碼如下：

const VSHADER_SOURCE = `
// 宣告 attribute 變數
attribute vec4 a_Position;
attribute float a_PointSize;
void main() {
  // 將宣告的 attribute 變數賦值給 gl_Position 變數
  gl_Position = a_Position;
  gl_PointSize = a_PointSize;               
}
`

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 (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('初始化著色器失敗');
    return;
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  const a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize')
  if (a_PointSize < 0) {
    console.log('找不到 a_PointSize 的儲存位置');
    return;
  }
  // 為頂點 attibute 變數賦值
  gl.vertexAttrib1f(a_PointSize, 10.0);

  // 獲取 attribute 變數的儲存位置。如果找不到該屬性則返回 -1。
  const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
  if (a_Position < 0) {
    console.log('找不到 a_Position 的儲存位置');
    return;
  }

  // 儲存所有點
  const points = [];

  // 註冊點選事件
  $(canvas).click(event => {
    // 將點選的座標轉為 webgl 座標系統。
    const rect = event.target.getBoundingClientRect();
    const x = ((event.clientX - rect.left) - canvas.width / 2) / (canvas.width / 2);
    const y = (canvas.height / 2 - (event.clientY - rect.top)) / (canvas.height / 2);
    console.log(x, y)
    // 將點儲存
    points.push({ x, y })
    // 注：使用預設值來清空緩衝。如果註釋這行，顏色緩衝區會被 webgl 重置為預設的透明色(0.0, 0.0, 0.0, 0.0) —— 必須
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 繪點
    points.forEach(item => {
      // 為頂點 attibute 變數賦值
      // 注：即使 x, y 是整數程式也沒問題
      gl.vertexAttrib3f(a_Position, item.x, item.y, 0.0);
      gl.drawArrays(gl.POINTS, 0, 1);
    })
  })
}

核心思路如下：

給 canvas 註冊點選事件（這裡引入jQuery）
點選時將 (x, y) 轉為 webgl 座標（怎麼轉換？百度搜尋，這不是重點），並將該點存入一個變數 points 中
迴圈 points 不停繪製點

注：迴圈前得透過 gl.clear 清空繪圖區，否則canvas背景會被重置為透明色。

繪製一個點（版本5）

需求

需求：透過滑鼠點選繪點，並改變點的顏色 —— 在版本4的基礎上實現

效果如下：

思路：顏色從硬編碼改成從 js 傳入。使用 uniform 變數。

uniform

前面我們用 attribute 向頂點著色器傳輸頂點的位置，只有頂點著色器才能使用 attribute。

對於片元著色器，需要使用 uniform 變數。

使用 uniform 有如下三步（和 attribute 類似）：

在頂點著色器中宣告 uniform 變數
在頂點著色器中將宣告的 uniform 變數賦值給 gl_FragColor 變數
向 uniform 變數傳輸資料

實現

完整程式碼：

const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute float a_PointSize;
void main() {
  gl_Position = a_Position;
  gl_PointSize = a_PointSize;               
}
`

const FSHADER_SOURCE = `
// 片元著色器必須加上精度描述。否則瀏覽器報錯：No precision specified for (float)
precision mediump float;
// 宣告變數
uniform vec4 u_FragColor;
void main() {
  gl_FragColor = u_FragColor;
}
`

function main() {
  const canvas = document.getElementById('webgl');

  const gl = canvas.getContext("webgl");

  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('初始化著色器失敗');
    return;
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  const a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize')
  if (a_PointSize < 0) {
    console.log('找不到 a_PointSize 的儲存位置');
    return;
  }
  gl.vertexAttrib1f(a_PointSize, 10.0);

  const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
  if (a_Position < 0) {
    console.log('找不到 a_Position 的儲存位置');
    return;
  }

  // 獲取 uniform 變數的儲存位置。如果找不到該屬性則返回 -1。
  const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')
  if (u_FragColor < 0) {
    console.log('找不到 u_FragColor 的儲存位置');
    return;
  }

  const points = [];

  // [0, 1)
  const getColor = () => Number.parseFloat(Math.random())
  
  $(canvas).click(event => {
    const rect = event.target.getBoundingClientRect();
    const x = ((event.clientX - rect.left) - canvas.width / 2) / (canvas.width / 2);
    const y = (canvas.height / 2 - (event.clientY - rect.top)) / (canvas.height / 2);
    
    // 將點的隨機顏色
    points.push({ x, y, rgb: [getColor(), getColor(), getColor()] })
    gl.clear(gl.COLOR_BUFFER_BIT);
    points.forEach(item => {
      gl.vertexAttrib3f(a_Position, item.x, item.y, 0.0);
      // 給 unifrom 變數賦值
      gl.uniform4f(u_FragColor, ...item.rgb, 1.0);
      gl.drawArrays(gl.POINTS, 0, 1);
    })
  })
}

核心程式碼：

const FSHADER_SOURCE = `
// 片元著色器必須加上精度描述。否則瀏覽器報錯：No precision specified for (float)
precision mediump float;
// 宣告變數
uniform vec4 u_FragColor;
void main() {
  gl_FragColor = u_FragColor;
}
`

function main() {
  // 獲取 uniform 變數的儲存位置。如果找不到該屬性則返回 -1。
  const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')
  if (u_FragColor < 0) {
    console.log('找不到 u_FragColor 的儲存位置');
    return;
  }

  $(canvas).click(event => {
    ...
    points.forEach(item => {
      ...
      // 給 unifrom 變數賦值
      gl.uniform4f(u_FragColor, ...item.rgb, 1.0);
      gl.drawArrays(gl.POINTS, 0, 1);
    })
  })
}

注：片元著色器必須加上精度描述（例如：precision mediump float;）。否則瀏覽器報錯：No precision specified for (float)

getUniformLocation

getUniformLocation 與 getAttribLocation 類似，只是這裡返回 uniform 變數的位置

uniform4f

有了 uniform 變數的儲存地址，就可以使用 uniform4f（和 vertexAttrib3f 很類似）向變數中寫入資料。

FlashFxp版本，好用的3個FlashFxp版本
2020-09-17
pycharm使用哪個版本好一點
2021-09-11
PyCharm
ORACLE FLAHBACK 系列（包含版本9與版本10）(zt)
2007-07-30
Oracle
一個版本問題
2012-09-21
JAVA 2目前的3個獨立的版本
2008-07-04
Java
SMSSDK從2.x版本升級至3.x版本指導
2019-03-21
沒有Angular 3，下一個Angular主版本將是Angular 4
2016-12-20
Angular
Python 版本調查：Python 3 增長 8.2% （你在用哪個版本）
2017-10-20
Python
Linux哪個版本更好用?常用Linux版本!
2020-04-03
Linux
Spring系列：Spring版本和JDK版本對應關係
2020-11-07
SpringJDK
win10有幾個版本?哪個版本最好_windows10各版本區別對比
2020-02-27
Win10Windows
第一個錯誤的版本
2018-04-25
MySQL的版本以及版本號
2020-03-15
MySql
mfc版本及其對應vc版本一覽表 (轉)
2007-12-13
【Linux】Linux版本介紹（核心版本和發行版本）
2018-06-18
Linux
PYTHON教程中“編寫一個Python指令碼”版本一的windows版本
2012-08-14
Python指令碼Windows
Linux哪個版本更好用?常用Linux版本合集！
2021-11-30
Linux
轉:tsm版本控制_的4個引數
2010-08-09
Node 快速切換版本、版本回退(降級)、版本更新(升級)
2022-03-10
React 16.8 版本: 帶 Hooks 的版本
2019-02-18
ReactHook
Android SDK版本和ADT版本
2014-06-30
Android
多個Jdk版本（轉）
2015-11-29
JDK
NUnit 的各個版本
2008-06-27
JBuilder那個版本最好？
2005-06-16
UI
版本管理
2017-02-21
版本控制
2014-06-24
pip包高版本轉低版本或者直接pip低版本包
2020-12-20
【OpenCv】OpenCv原始版本與新版本(2.4.10)的一個簡單對比
2015-03-01
OpenCV
WebGL自學課程(9):WebGL框架World.js(0.3.5版本)
2012-08-20
Web框架JS
win10怎麼退回上一個版本_win10退回上一個版本的步驟
2020-07-10
Win10
語義化版本 2.0.0 - 版本控制規則
2021-07-23
lombok版本與 lombok plugins版本問題
2020-10-22
LombokPlugin
版本的故事（四）版本號有多重要
2020-09-13
檢視ubuntu版本與linux核心版本
2017-06-03
UbuntuLinux
原始碼版本管理（一）
2022-06-14
原始碼
MySQL InnoDB版本一覽
2016-08-15
MySql
Oracle11gr2新增版本功能（一）
2009-09-11
Oracle
Docker Compose 版本過高（Docker版本不匹配），降低docker-compose版本
2018-01-12
Docker