Part 2 着色器与 GLSL

约 627 字大约 2 分钟

我们之前学习过着色器的基本概念。着色器是在 GPU 上执行特定图形处理任务的程序。而 GLSL（OpenGL Shader Language）专门用于编写图形着色器。

可以在<script>标签中编写 GLSL 代码，并指定类型：

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

1 GLSL 的数据类型

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

2 变量修饰符

用于指定变量的作用域、生命周期和用途。不同的修饰符在顶点着色器和片元着色器中有着不同的作用。

attribute：仅在顶点着色器中使用。定义从顶点缓冲区中传入的变量。
uniform：定义在整个渲染过程中保持不变的变量，如旋转矩阵、光照参数等。
varying：用于在顶点着色器和片元着色器之间传递插值数据。

3 内置变量

GLSL 定义了一组内部变量定义顶点和片元的属性。

gl_Position：顶点着色器中的内置变量，定义顶点变换后的位置。
gl_PointSize：顶点着色器中的内置变量，定义点的大小。
gl_FragColor：片元着色器中的内置变量，定义片元的最终颜色。

4 内置函数

GLSL 内置了一些常用函数。

数值函数：sin cos tan pow exp log sqrt abs min max radians
向量函数：dot cross normalize length distance
纹理采样函数：texture2D textureCube

5 精度修饰符

precesion关键字用来声明浮点型变量的默认精度。

32 位浮点数：precesion highp float
16 位浮点数：precesion mediump float
10 位浮点数：precesion lowp float

6 主函数

着色器必须有一个主函数定义函数入口：

void main(void) {
  gl_Position = vec4(aPosition, 0.0, 1.0);
  gl_PointSize = 10.0;
}

例如对于下面这个例子：

<!-- 顶点着色器 -->
<script id="vertex-shader" type="x-shader/x-vertex">
  void main() {
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    gl_PointSize = 10.0;
  } 
</script>

<!-- 片元着色器 -->
<script id="fragment-shader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
</script>

gl_Position定义点的位置在原点处，注意 GLSL 中使用的是齐次坐标。

gl_PointSize定义点的大小为 10 像素。

gl_FragColor定义了点的颜色为 RGBA(1, 0, 0, 1)，即红色。

Part 2 着色器 与 GLSL