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
Linux哪個版本更好用?常用Linux版本!
2020-04-03
Linux
Spring系列：Spring版本和JDK版本對應關係
2020-11-07
SpringJDK
SMSSDK從2.x版本升級至3.x版本指導
2019-03-21
Linux哪個版本更好用?常用Linux版本合集！
2021-11-30
Linux
【Linux】Linux版本介紹（核心版本和發行版本）
2018-06-18
Linux
低版本 pytorch 和 numpy 2 版本不相容
2024-11-27
PyTorch
win10有幾個版本?哪個版本最好_windows10各版本區別對比
2020-02-27
Win10Windows
5、Git之版本號
2024-06-07
Git
MySQL的版本以及版本號
2020-03-15
MySql
React 16.8 版本: 帶 Hooks 的版本
2019-02-18
ReactHook
第一個錯誤的版本
2018-04-25
Node 快速切換版本、版本回退(降級)、版本更新(升級)
2022-03-10
【4】版本控制系統SVN
2024-06-16
lombok版本與 lombok plugins版本問題
2020-10-22
LombokPlugin
R語言安裝多個版本和多版本Rstudio管理
2024-11-01
R語言
Linux哪個版本好？各個版本之間有什麼區別？
2022-02-18
Linux
pip包高版本轉低版本或者直接pip低版本包
2020-12-20
（2）Spring Cloud版本介紹
2022-09-30
SpringCloud
Spring Data 釋出更改版本管理方案之後的第一個版本：2020.0.0
2020-11-03
Spring
WPS Office 2019政府定製版本
2019-07-09
定製 ERP 工廠版本功能
2021-06-12
版本的故事（四）版本號有多重要
2020-09-13
語義化版本 2.0.0 - 版本控制規則
2021-07-23
win10怎麼退回上一個版本_win10退回上一個版本的步驟
2020-07-10
Win10
Android Sdk版本、Support包版本及常用框架最新版本彙總
2018-08-23
Android框架
原始碼版本管理（一）
2022-06-14
原始碼
Linux伺服器選擇哪個版本好?常用版本推薦
2021-07-28
Linux伺服器
win10裝3dmax哪個版本好_win10下哪個版本3dmax最穩定
2020-06-04
Win103D
yiigo 4.x 版本釋出
2019-10-26
Go
android版本與linux核心版本對應關係
2018-11-12
AndroidLinux
全球iPhone版本大全 iPhone有哪些國家版本
2018-07-04
iPhone
Apache Doris 1.2.4 Release 版本正式釋出｜版本通告
2023-04-27
Apache
【MSSQL】MSSQL 從Express版本升級到Enterprise版本
2020-03-24
SQLExpress
Homestead 安裝其他PHP版本並切換版本
2020-09-27
PHP
如何將 Ubuntu 版本升級到新版本
2021-09-15
Ubuntu
Git版本控制與優缺點
2018-07-09
Git