1. Python技术站首页
  2. 其他
  3. JavaScript

webgl 系列 —— 着色器语言

• JavaScript
yizhihongxing

其他章节请看：

webgl 系列

着色器语言

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

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

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

Tip: webgl 1.0 绝大多数浏览器都支持，webgl 2.0 支持度差些。webgpu 旨在取代WebGL，浏览器兼容惨不忍睹。
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 系列

原文链接：https://www.cnblogs.com/pengjiali/p/17265809.html

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webgl 系列 —— 着色器语言 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年4月18日
下一篇 2023年4月18日

相关文章

  • JavaScript函数定义方法实例详解

    JavaScript函数定义方法实例详解 在JavaScript中，函数是一种重要的编程概念。函数能够帮助我们将代码组织得更好、复用性更高，并且能够进一步实现更为复杂的功能。下面将详细讲解JavaScript函数定义的多种方法。 1.函数声明 函数声明是一种最经典的JavaScript函数定义方式。 function add(a, b) { return a…

    JavaScript 2023年6月10日
    00

  • JavaScript获取服务器时间的方法详解

    JavaScript获取服务器时间的方法详解 在Web开发中，有时需要获取服务器的时间，在前端使用JavaScript编写代码时，通常会用到一些方法来获取该时间。本文将会介绍获取服务器时间的常用方法，供前端开发者参考和使用。 1. 使用XMLHttpRequest对象获取服务器时间 XMLHttpRequest可以通过异步的方式请求服务器上的一个文本文件，该…

    JavaScript 2023年5月28日
    00

  • JavaScript通过字符串调用函数的实现方法

    JavaScript可以通过字符串调用函数的方法称为函数调用方法，也就是将字符串转化成函数名称并直接调用对应的函数。下面是一些实现方法的示例说明： 1. 使用eval()函数实现字符串调用函数 使用eval()函数可以将字符串解析成JS代码并执行，从而实现字符串调用函数的方法。 // 定义需要调用的函数 function greeting(message) …

    JavaScript 2023年5月28日
    00

  • 简单聊聊Js中的常见错误类型

    简单聊聊Js中的常见错误类型 在Js编程中，我们不可避免地会遇到各种类型的错误。了解这些错误类型及其产生的原因，可以帮助我们更快速地定位错误并解决问题。下面就让我们来简单聊聊Js中的常见错误类型。 1. 引用错误（ReferenceError） 引用错误通常发生在引用未定义的变量或函数时。例如： console.log(a); // Uncaught Ref…

    JavaScript 2023年6月1日
    00

  • AJAX简单测试代码实例

    下面我详细讲解一下“AJAX简单测试代码实例”的完整攻略。 AJAX简单测试代码实例 AJAX概述 AJAX（Asynchronous JavaScript And XML）即异步的JavaScript与XML技术。它允许web页面异步地更新部分内容，从而避免了页面全部刷新，提升了用户体验。 AJAX原理 AJAX是通过XMLHttpRequest对象实现的…

    JavaScript 2023年6月11日
    00

  • 微信小程序绑定手机号获取验证码功能

    下面是关于“微信小程序绑定手机号获取验证码功能”的完整攻略： 一、注册云服务 首先需要在微信公众平台中注册云服务，并且开通云开发环境。具体步骤如下： 登录微信公众平台，在左侧菜单中找到“设置”选项并点击 在“设置”页面中选择“开发者工具”，进入到开发者工具页面 点击“云开发”选项，并进行云服务注册和环境创建 二、创建验证码云函数 创建一个名为“getCode…

    JavaScript 2023年6月10日
    00

  • js里取容器大小、定位、距离等属性搜集整理

    在JavaScript中，获取元素的位置、大小、距离等属性是开发中经常使用的操作，以下是获取常用属性的完整攻略： 获取元素大小 获取元素的大小（宽度和高度）有不同的方法，其中包括： 通过clientWidth和clientHeight clientWidth或clientHeight属性返回元素的可见宽度和高度（不包括滚动条）。 const element …

    JavaScript 2023年6月10日
    00

  • Ajax实现跨域访问的三种方法

    下面是详细的讲解： 什么是Ajax实现跨域访问？ 在Web开发中，跨域指的是一个域下的文档或脚本试图去请求另一个域下的资源，这种跨域的请求是被浏览器所禁止的。而Ajax实现跨域访问则是指在异步请求数据时，可以在客户端直接向其他域名的服务器获取数据，从而避免了在服务端进行跨域操作的限制。 实现Ajax跨域访问的三种方法 1. 通过修改同源策略 同源策略指的是浏…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部