着色器

GLSL（OpenGL Shading Language）是一种用于编写图形着色器的编程语言。着色器是用于在图形处理单元（GPU）上执行特定图形处理任务的程序。

通俗来讲，着色器就是花点的工具，一个图是由无数个点组成的，每个点都有其自己的颜色。

着色器类型

着色器就是一个绘制图形到屏幕上的函数，着色器有 2 种：

顶点着色器：处理每个顶点的属性，如位置、法线、纹理坐标等。
它的主要任务是将顶点从对象坐标系转换到屏幕坐标系，并传递顶点属性给片段着色器。
片段着色器：处理每个像素的颜色。
它接收来自顶点着色器插值后的数据，并最终决定每个像素的颜色。

着色器语法

在 HTML 种，可以把着色器的代码直接写到 <script> 标签中，同时设置一个 type 类型：

html

<!-- 顶点着色器 -->
<script id="vertex-shader" type="x-shader/x-vertex"></script>
<!-- 片段着色器 -->
<script id="fragment-shader" type="x-shader/x-fragment"></script>

主函数

着色器必须要有一个主函数，作为入口函数：

<script id="vertex-shader" type="x-shader/x-vertex">
  void main() {
    vColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
</script>

注意

<Script> 中写的片段着色器源码，每一句代码都必须以 ; 结尾，否则会报错！

数据类型

基本数据类型：float、int、bool
矩阵类型：mat2、mat3、mat4
采样器类型：sampler2D、samplerCube（用于纹理采样）
向量类型：
- 浮点型：vec2、vec3、vec4
- 整数型：ivec2、ivec3、ivec4
- 布尔型：bvec2、bvec3、bvec4

变量修饰符

变量修饰符用于指定变量的作用域、生命周期和用途，不同的修饰符在顶点着色器和片段着色器种起到不同的作用。

修饰符	作用
attribute	定义从顶点缓冲区传入的变量，只能用于顶点着色器
uniform	定义在整个渲染过程中保持不变的变量，常用于传递变化矩阵、光照参数等
varying	用于在顶点着色器和片段着色器之间传递插值数据

常用函数

数学函数：

函数	作用
sin	正弦
cos	余弦
tan	正切
pow	一个数的指定幂次，`pow(x, y)` 就是 x^y^
exp	指数函数，即 e^x^
log	对数函数，即 lnx
sqrt	平方根
abs	绝对值
min	最小值
max	最大值
radians	角度转换为弧度

向量函数：

函数	作用
dot	计算两个向量的点积
cross	计算两个三维向量的叉积
normalize	将向量归一化，即将向量的长度调整为1，方向保持不变
length	计算向量的长度（即向量的模）
distance	计算两个向量之间的距离

纹理采样函数：

函数	作用
texture2D	对二维纹理进行采样，根据给定的纹理坐标返回纹理颜色
textureCube	对立方体纹理进行采样，根据给定的立方体坐标返回纹理颜色

定义精度

precision 关键字用于声明变量的默认精度。

GLSL 支持三种不同的精度修饰符：

精度	精度	作用
highp	高精度	通常用 32 位表示，适用于高精度的计算，如位置计算
mediump	中精度	通常用 16 位表示，适用于需要中等精度但不需要高精度的计算，如纹理坐标
lowp	低精度	通常用 10 位表示，适用于对精度要求最低的计算，如颜色值

// 定义低精度的变量
precision lowp float

着色器 ​

着色器类型 ​

着色器语法 ​

主函数 ​

数据类型 ​

变量修饰符 ​

常用函数 ​

定义精度 ​

着色器