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 的数据类型
- 基本数据类型:
floatintbool - 浮点数向量类型:
vec2vec3vec4 - 整数向量类型:
ivec2ivec3ivec4 - 布尔向量类型:
bvec2bvec3bvec4 - 矩阵类型:
mat2mat3mat4 - 采样器类型:
sampler2DsamplerCube
2 变量修饰符
用于指定变量的作用域、生命周期和用途。不同的修饰符在顶点着色器和片元着色器中有着不同的作用。
attribute:仅在顶点着色器中使用。定义从顶点缓冲区中传入的变量。uniform:定义在整个渲染过程中保持不变的变量,如旋转矩阵、光照参数等。varying:用于在顶点着色器和片元着色器之间传递插值数据。
3 内置变量
GLSL 定义了一组内部变量定义顶点和片元的属性。
gl_Position:顶点着色器中的内置变量,定义顶点变换后的位置。gl_PointSize:顶点着色器中的内置变量,定义点的大小。gl_FragColor:片元着色器中的内置变量,定义片元的最终颜色。
4 内置函数
GLSL 内置了一些常用函数。
- 数值函数:
sincostanpowexplogsqrtabsminmaxradians - 向量函数:
dotcrossnormalizelengthdistance - 纹理采样函数:
texture2DtextureCube
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),即红色。