webgl 系列 —— 着色器语言-电脑学习网

其他章节请看：

webgl 系列

着色器语言

本篇开始学习着色器语言 —— GLSL全称是 Graphics Library Shader Language （图形库着色器语言）

GLSL 是一门独立的语言，和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句（if）、函数、数组等等。

GLSL 比较简单。其专门用于编写着色器，舍弃了许多编程语言中复杂的东西，比如没有字符串，只有数字。

Tip: webgl 1.0 绝大多数浏览器都支持，webgl 2.0 支持度差些。webgpu 旨在取代WebGL，浏览器兼容惨不忍睹。
webgl 系列 —— 着色器语言

webgl 系列 —— 着色器语言

准备

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

webgl 系列 —— 着色器语言

// 顶点着色器
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.5, 0.5,
            -0.5, -0.5,
            0.5, -0.5,
            0.5, 0.5
        ]),
        vertexNumber: 4,
        count: 2,
    }
    initVertexBuffers(gl, vertices)
    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;
    }
    gl.vertexAttribPointer(a_Position, count, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_Position);
}

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

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

// demo\shader\vShader.js
const VSHADER_SOURCE = /* glsl */ `
attribute vec4 a_Position;
void main() {
  gl_Position = a_Position;
  gl_PointSize = 10.0;               
}
`;

这里的 /* glsl */ 用于 vscode 高亮 glsl。就像这样（左侧高亮）：
webgl 系列 —— 着色器语言

高亮 glsl

笔者选择 vscode 安装 Comment tagged templates（重启后仍未生效，后切换安装的版本，再次重启即可）:
webgl 系列 —— 着色器语言

如果你是基于 webpack 这种模块化的开发，可以安装 WebGL GLSL Editor，直接编写 .glsl 就能高亮:
webgl 系列 —— 着色器语言

基础

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

// 单行注释
/*
多行注释
*/

变量名

变量命名规则如下：

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

webgl 系列 —— 着色器语言

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

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

基本类型

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

// 精度限定字。否则浏览器控制台报错：No precision specified for (float)
precision mediump float;
int a = 1;     // 整型
float b = 1.0; // 浮点
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 中类似。比如都有：

加减乘除（+、-、、/、+=、-=、=、/=）
自增、自减（++、--）
比较（>、<、>=、<=、==、!=）
取反（!）
与或（&&、||）
三元运算符

更详细的请看下表：
webgl 系列 —— 着色器语言

Tip：[1] 与运算，第一个表达式为 true 才进行第二个表达式计算；或运算，第一个表达式为 false 才进行第二个表达式计算。[2] 逻辑异或，只有左右两个表达式有且只有一个为 true 时，运算结果才为 true，否则是 false。

虽然glsl运算符与 js 中类似，但有些运算符在用法上和js还是有些许差异。比如：

参与运算的类型必须都是整数

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

! 只能操作布尔类型

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

三元运算符的 condition 类型得是 bool

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

复杂类型

矢量和矩阵类型

矢量（或向量）和矩阵类型非常适合处理计算机图形。

矢量和矩阵类型的变量包含多个元素，每个元素是一个数值（整型、浮点、布尔）。

Tip：可以将矢量和矩阵理解成基本类型的集合。矢量将多个元素排成一行，矩阵则将这些元素划分成行和列。

glsl 支持的矢量（vector）和矩阵（matrix）类型如下：

webgl 系列 —— 着色器语言

Tip: vec 是浮点矢量、ivec 是整型矢量、bvec 是布尔矢量。

矢量

几维向量就得传几个分量，否则报错。例如：

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

由于向量很重要，所以glsl提供了灵活的创建方式。例如：

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

如果向量接收不止一个参数，但参数个数又比矢量元素少，就会报错。例如：

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

通过分量名可以取得向量相应的元素。例如：

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

第一个分量除了可以通过 x 取得，还可以是 r 或 s。请看下表：
webgl 系列 —— 着色器语言

Tip：即使你声明一个颜色向量，依然可以用 x 来取得向量中第一个分量值。就像这样：

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

可以从矢量中同时抽取多个分量，这个叫混合。例如：

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

疑惑：还可以用来赋值（测试失败）：

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

向量直接可以进行运算。下面显示一个白色图形：

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

Tip: 对于颜色，小于0则是0，大于1则是1。

矩阵

通过 mat[1234]() 构造矩阵，例如创建一个平移矩阵，让图形向左平移 0.5。就像这样：

const VSHADER_SOURCE = `
attribute vec4 a_Position;
// 向左平移 0.5
float tX = -0.5;
// 行列得颠倒
mat4 matrix = mat4(
  1,  0, 0, 0,
  0,  1, 0, 0,
  0,  0, 1, 0,
  tX, 0, 0, 1
);
void main() {
  gl_Position = matrix * a_Position;
}
`;

类似 js 操作数组的方式可以取得矩阵对应元素。就像这样：

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

数组

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

float floatArray[4]; // 含4个浮点数的数组
vec4 vec4Array[2]; // 含2个4维向量的数组

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

// 'vec4Array' : syntax error
vec4 vec4Array[2];
vec4Array[0] = vec4(1.0, 0.0, 0.0, 1.0);
vec4Array[1] = vec4(1.0, 1.0, 0.0, 1.0);

疑惑：报错'vec4Array' : syntax error

注：下面这段代码会报错，需要增加 const：

// 错误。constant expression required
int size = 4;
vec4 vec4Array[size];

// 正确。
const int size = 4;
vec4 vec4Array[size];

取样器

glsl 提供一种内置类型：取样器（sample），必须通过该类型变量访问纹理。有两种基本取样器：sampler2D、samplerCube。

例如在绘制猫时，我们用到 sampler2D：uniform sampler2D u_Sampler;

结构体

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

// 定义一个结构体。类似 js 的对象。
struct light {
  vec4 color;
  vec3 position;
}
// 申明一个 light 类型的变量 l1
light l1;
// 赋值和构造
l1 = light(vec4(1.0, 0.0, 0.0, 1.0), vec3(1.0, 2.0, 3.0));
// 通过.访问成员
vec4 color = l1.color;
vec3 postion = l1.position;

精度限定字

glsl 引入精度限定字，用于帮助着色器程序提高运行效率，减小开销。

精度限定字用于表示每种数据具有的精度（比特数）。高精度的需要更大的开销（内存、计算时间），低精度开销则小。

在低精度下，webgl 程序运行结果比较粗糙，甚至不准确，这个需要考虑程序效能和性能的平衡。

webgl 支持高中低三种精度：
webgl 系列 —— 着色器语言

如果不确定，可以选择中精度。例如为所有浮点都选择中精度：precision mediump float;

也可以为每个变量设置精度。就像这样：mediump float size;

数据类型的默认精度请看下表：
webgl 系列 —— 着色器语言

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

循环和分支

for

语法：

for(初始化表达式; 条件表达式; 循环步进表达式){
}

例如：

for(int i = 0; i < 10; i++){
  // 循环体
}

以下几点需要注意：

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

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

// Failed to compile shader: ERROR: 0:29: 'for' : syntax error
int sum = 0;
for (int i = 0; i < 10; i++){
  sum += i;
}

if...else

语法：

if(条件表达式){
}else if(条件表达式){
}else{
}

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

// if(1) - 报错
if(bool(1)){
    gl_FragColor = vec4(color1, 1.0);
}else{
    gl_FragColor = vec4(color2, 1.0);
}

函数

在 js 中定义一个函数：

function sum(a, b){
    return a + b;
}

如果不 return，js 默认返回 undefined。

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

// 不返回
void sum(int a, int b){
}

// 返回 int
int sum(int a, int b){
    return a + b;
}

glsl 也提供了一些内置函数，例如角度转弧度的 radians()，可直接使用。请看下表：
webgl 系列 —— 着色器语言

其他章节请看：

webgl 系列

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

webgl 系列 —— 着色器语言

着色器语言

准备

高亮 glsl

基础

变量名

基本类型

类型转换

运算符

复杂类型

矢量和矩阵类型

矢量

矩阵

数组

取样器

结构体

精度限定字

循环和分支

for

if...else

函数

评论(0)

提示：请文明发言取消回复

作者信息

最近更新

2022年最新BellooV4.3.2(贝罗交友约会)php破解源码-完整的高级约会源码

wordpress 阅读量每次访问随机增加的插件

原创 WordPress 主题 C7V5 扁平化|响应式|HTML5主题

CSS 选择器权重特性

宝塔Linux面板一键挂载云服务器硬盘

Linux 系统介绍以及常用命令（零基础级别）

2022年最新wordpress日主题Ripro子主题-ziyuan-zhankr蓝色资源网主题V3.0.3子主题破解版

HTML head 头标签详细解答

webgl 系列 —— 着色器语言

着色器语言

准备

高亮 glsl

基础

变量名

基本类型

类型转换

运算符

复杂类型

矢量和矩阵类型

矢量

矩阵

数组

取样器

结构体

精度限定字

循环和分支

for

if...else

函数

评论(0)

提示：请文明发言 取消回复

相关文章

作者信息

最近更新

提示：请文明发言取消回复