webgl 系列 —— 着色器语言

果子猫

其他章节请看：
webgl 系列

着色器语言

本篇开始学习着色器语言 —— GLSL全称是 Graphics Library Shader Language （图形库着色器语言）
GLSL 是一门独立的语言，和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句（if）、函数、数组等等。
GLSL 比较简单。其专门用于编写着色器，舍弃了许多编程语言中复杂的东西，比如没有字符串，只有数字。
Tip: webgl 1.0 绝大多数浏览器都支持，webgl 2.0 支持度差些。webgpu 旨在取代WebGL，浏览器兼容惨不忍睹。

准备

开始前稍微准备一下环境，根据前面三角形的学习，我们很容易绘制如下矩形：

1. // 顶点着色器
2. const VSHADER_SOURCE = `
3. attribute vec4 a_Position;
4. void main() {
5.   gl_Position = a_Position;
6.   gl_PointSize = 10.0;               
7. }
8. `
10. // 片元着色器
11. const FSHADER_SOURCE = `
12. void main() {
13.   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
14. }
15. `
17. function main() {
18.     const canvas = document.getElementById('webgl');
19.     const gl = canvas.getContext("webgl");
20.     if (!gl) {
21.         console.log('Failed to get the rendering context for WebGL');
22.         return;
23.     }
25.     if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
26.         console.log('Failed to intialize shaders.');
27.         return;
28.     }
30.     gl.clearColor(0, 0, 0, 1);
31.     gl.clear(gl.COLOR_BUFFER_BIT);
33.     const vertices = {
34.         data: new Float32Array([
35.             -0.5, 0.5,
36.             -0.5, -0.5,
37.             0.5, -0.5,
38.             0.5, 0.5
39.         ]),
40.         vertexNumber: 4,
41.         count: 2,
42.     }
44.     initVertexBuffers(gl, vertices)
46.     gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.vertexNumber);
47. }
49. function initVertexBuffers(gl, {data, count}) {
50.     const vertexBuffer = gl.createBuffer();
51.     if (!vertexBuffer) {
52.         console.log('创建缓冲区对象失败');
53.         return -1;
54.     }
56.     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
58.     gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
60.     const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
61.     if (a_Position < 0) {
62.         console.log('Failed to get the storage location of a_Position');
63.         return -1;
64.     }
66.     gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, 0, 0);
68.     gl.enableVertexAttribArray(a_Position);
69. }

复制代码

将顶点着色器和片元着色器提取出单独的 js 文件。就像这样:

1. // demo\shader\fShader.js
3. const FSHADER_SOURCE = /* glsl */ `
4. void main() {
5.   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
6. }`

复制代码

1. // demo\shader\vShader.js
3. const VSHADER_SOURCE = /* glsl */ `
4. attribute vec4 a_Position;
5. void main() {
6.   gl_Position = a_Position;
7.   gl_PointSize = 10.0;               
8. }
9. `;

复制代码

这里的 /* glsl */ 用于 vscode 高亮 glsl。就像这样（左侧高亮）：

高亮 glsl

笔者选择 vscode 安装 Comment tagged templates（重启后仍未生效，后切换安装的版本，再次重启即可）:

如果你是基于 webpack 这种模块化的开发，可以安装 WebGL GLSL Editor，直接编写 .glsl 就能高亮:

基础

• 区分大小写
  
• 每个语句以一个分号结束
  
• 单行注释 //、多行注释 /* */
  

1. // 单行注释
2. /*
3. 多行注释
4. */

复制代码

变量名

变量命名规则如下：

• 只能包含字母、数字、下划线
  
• 首字母不能是数字
  
• 不能是关键字和保留字
  
• 不能以gl_、webgl_ 或 _webgl_ 开头，这部分已经被 OpengGL ES 保留了
  

Tip: 变量的命名就按照js的习惯来就好，如果有问题，浏览器会给出较好的错误提示。就像这样：

1. // 只能包含字母、数字、下划线 - ERROR: 0:15: '$' : invalid character
2. int a$ = 1;
4. // 首字母不能是数字 - ERROR: 0:11: '0aA0_' : invalid number
5. int 0aA0_ = 1;
7. // 不能是关键字 - ERROR: 0:19: 'for' : syntax error
8. int for = 1;
10. // 不能是保留字 - Illegal use of reserved word 非法使用保留字
11. int class = 1;
13. // 不能以 gl_、webgl_ 或 _webgl_ 开头 - ERROR: 0:24: 'gl_' : reserved built-in name 保留的内置名称
14. int gl_a = 1;

复制代码

基本类型

不像 js 有 number、string、boolean、null、undefined、bigint、symbol 等 7 种基本类型，这里只有数字(int、float)和布尔(bool)。

1. // 精度限定字。否则浏览器控制台报错：No precision specified for (float)
2. precision mediump float;
3. int a = 1;     // 整型
4. float b = 1.0; // 浮点
5. bool c = true; // 布尔类型

复制代码

Tip: js 不区分整数和浮点数，其数字都是64位的双精度，类似 java 中的 double。而如果把整数赋值给 flat(float b = 1;) 就会报错。
类型转换

由于基本类型就三种（int、float、bool），所以类型转化也较js简单多了，共 6 种。

• int(float) - 转整型。删除浮点小数部分，转为整数（比如 3.14 转为 3）
  
• int(bool) - 转整型。true 转 1，false 转 0
  
• float(int) - 转浮点。（比如 1 转 1.0）
  
• float(bool) - 转浮点。true 转 1.0，false 转 0.0
  
• bool(int) - 0 转 false，非 0 转 true
  
• bool(float) - 0 转 false，非 0 转 true
  

例如将浮点转为整型：int d = int(1.0);
运算符

glsl 支持的运算符和 js 中类似。比如都有：
<ul>加减乘除（+、-、、/、+=、-=、=、/=）
自增、自减（++、--）
比较（>、=、 [1, 0, 0, 0]matrix[1][1] => 1[/code]数组

glsl 只支持一维数组，没有 pop()、push() 等操作。声明数组无需使用 new ，只需要在变量名后添加[]和数组长度。就像这样：

1. // 参与运算的类型必须都是整数
2. int e = 1 + 1.0; // 错
3. int e = 1 + 1; // 对

复制代码

数组不能在声明时初始化，必须显示的对每个元素进行初始化。就像这样：

1. // ! 只能操作布尔类型
2. bool e = !1; // 错
3. bool e = !true; // 对

复制代码

疑惑：报错'vec4Array' : syntax error
注：下面这段代码会报错，需要增加 const：

1. // condition 类型得是 bool
2. int e = 1 ? 1 : 2; // 错
3. int e = true ? 1 : 2; // 对

复制代码

1. // vec4 变量需要4个浮点数分量
2. vec4 e = 1.0;  // 错
3. vec4 e = vec4(1.0, 0.0, 0.0, 4.0); // 对

复制代码

取样器

glsl 提供一种内置类型：取样器（sample），必须通过该类型变量访问纹理。有两种基本取样器：sampler2D、samplerCube。
例如在绘制猫时，我们用到 sampler2D：uniform sampler2D u_Sampler;
结构体

glsl 通过 struct 可以自定义类型。类似 js 中的对象，访问也是通过 .。就像这样：

1. vec3 v3 = vec3(1.0, 2.0, 3.0);
3. // 使用 v3 的前两个元素
4. vec2 v2 = vec2(v3);
6. // 将 v4 设置为 (1, 1, 1, 1)
7. vec4 v4 = vec4(1);
9. // 取v2两个元素，v4也取前两个
10. vec4 v4b = vec4(v2, v4);

复制代码

精度限定字

glsl 引入精度限定字，用于帮助着色器程序提高运行效率，减小开销。
精度限定字用于表示每种数据具有的精度（比特数）。高精度的需要更大的开销（内存、计算时间），低精度开销则小。
在低精度下，webgl 程序运行结果比较粗糙，甚至不准确，这个需要考虑程序效能和性能的平衡。
webgl 支持高中低三种精度：

如果不确定，可以选择中精度。例如为所有浮点都选择中精度：precision mediump float;
也可以为每个变量设置精度。就像这样：mediump float size;
数据类型的默认精度请看下表：

由于片元着色器中的 float 没有精度，所以需要手动指定，否则会报错：No precision specified for (float)
循环和分支

for

语法：

1. // 错。接收不止一个参数，但参数个数又比矢量元素少
2. vec4 v4_2 = vec4(1, 1);

复制代码

例如：

1. vec3 v3 = vec3(1.0, 2.0, 3.0);
2. float x = v3.x; // 1.0
3. float y = v3.y; // 2.0
4. float z = v3.z; // 3.0

复制代码

以下几点需要注意：

• 循环变量(例如 i)只能在初始化表达式中定义
  
• 条件表达式如果为空，则返回 true
  
• 只允许一个循环变量，循环变量只能是 int 或 float
  
• 循环表达式必须是（假如是 i）: i++、i--、i+=、i-=
  
• 条件表达式必须是循环变量和整型常量的比较（i < 10.0 错误）
  

疑惑：如下for语句导致浏览器报错

1. vec3 color = vec3(1.0, 0.0, 0.0);
2. float x = v3.x; // 1.0

复制代码

if...else

语法：

1. vec3 v3 = vec3(1.0, 2.0, 3.0);
2. vec2 v2 = v3.xz; // v2 设为 (1.0, 3.0)
3. vec2 v2 = v3.zz; // v2 设为 (3.0, 3.0)

复制代码

条件表达式：布尔或产生布尔的表达式。请看：

1. // ERROR: 0:31: 'v3' : syntax error
2. vec3 v3 = vec3(1.0, 2.0, 3.0);
3. v3.xz = vec2(5.0, 6.0); // 预期：v3 设为 (5.0, 2.0, 6.0)

复制代码

函数

在 js 中定义一个函数：

1. vec3 color1 = vec3(1.0, 1.0, 1.0);
2. vec3 color2 = vec3(0.0, 0.0, 1.0);
3. void main() {
4.   // color1 + color2 等于 (1.0 + 0.0, 1.0 + 0.0, 1.0 + 1.0)，由于 大于1也是等于1，所以最后是 (1.0, 1.0, 1.0)
5.   gl_FragColor = vec4(color1 + color2, 1.0);
6. }

复制代码

如果不 return，js 默认返回 undefined。
glsl 中如果没有返回值则需要用到 void，否则得申明具体返回类型。就像这样：

1. const VSHADER_SOURCE = `
2. attribute vec4 a_Position;
3. // 向左平移 0.5
4. float tX = -0.5;
5. // 行列得颠倒
6. mat4 matrix = mat4(
7.   1,  0, 0, 0,
8.   0,  1, 0, 0,
9.   0,  0, 1, 0,
10.   tX, 0, 0, 1
11. );
12. void main() {
13.   gl_Position = matrix * a_Position;
14. }
15. `;

复制代码

1. matrix[0]    => [1, 0, 0, 0]
2. matrix[1][1] => 1

复制代码

glsl 也提供了一些内置函数，例如角度转弧度的 radians()，可直接使用。请看下表：

其他章节请看：
webgl 系列

来源:https://www.cnblogs.com/pengjiali/p/17265809.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！