Shader入门教程二（语法篇）

前端

2023-09-13 06:52:57

Shader入门教程二（语法篇）

在上一节中，我们介绍了Shader的概念和工作原理，并通过一个简单的例子展示了如何编写一个顶点着色器和片元着色器。在本节中，我们将深入探讨Shader的语法规则，并介绍一些常用的函数。

语法规则

Shader程序遵循GLSL（OpenGL着色语言）语法，其类似于C语言。以下是GLSL语法的一些基本规则：

变量声明：使用type variable_name;语法声明变量，其中type是变量类型（如float、int、vec3）、variable_name是变量名。
常量声明：使用const type constant_name = value;语法声明常量，其中type是常量类型（如float、int、vec3）、constant_name是常量名、value是常量值。
函数调用：使用function_name(arguments);语法调用函数，其中function_name是函数名、arguments是函数参数。
语句结束：使用分号;结束语句。
注释：使用//或/* ... */语法添加注释。

常用的函数

GLSL提供了丰富的函数库，用于执行各种操作。以下是一些常用的函数：

vec3 normalize(vec3 v)：对向量v进行归一化，使其长度为1。
float dot(vec3 v1, vec3 v2)：计算两个向量的点积。
float length(vec3 v)：计算向量的长度。
vec3 cross(vec3 v1, vec3 v2)：计算两个向量的叉积。
float mix(float x, float y, float a)：根据因子a对x和y进行插值。

示例：扩展顶点着色器

在上一节的示例中，我们创建了两个三角形。为了将它们拓展到整个canvas区域，我们需要修改顶点着色器，如下：

// 顶点着色器
in vec3 position; // 顶点位置

// 扩展到整个canvas区域所需的uniform变量
uniform vec2 canvas_size; // canvas大小

void main() {
  // 将顶点位置映射到0.0到1.0范围
  vec2 normalized_position = position / canvas_size;

  // 设置顶点位置
  gl_Position = vec4(normalized_position, 0.0, 1.0);
}