着色器glsl使用

Mli
153 阅读3分钟 
attribute vec3 position; // 输入顶点位置属性
attribute vec3 color; // 输入顶点颜色属性
uniform mat4 modelViewProjectionMatrix; // 输入视图投影矩阵
varying vec3 vColor; // 输出插值后的颜色属性

void main() {
  gl_Position = modelViewProjectionMatrix * vec4(position, 1.0); // 对顶点进行变换
  vColor = color; // 传递顶点颜色属性给片段着色器
}

// 片段着色器
precision mediump float;
varying vec3 vColor; // 接收插值后的颜色属性

void main() {
  gl_FragColor = vec4(vColor, 1.0); // 输出插值后的颜色属性作为片段颜色
}

在这个示例中，顶点着色器中的 position 是一个 attribute 变量，表示顶点的位置属性。color 是另一个 attribute 变量，表示顶点的颜色属性。

modelViewProjectionMatrix 是一个 uniform 变量，表示视图投影矩阵。它可以通过外部传入的方式在渲染过程中保持不变。

片段着色器中的 vColor 是一个 varying 变量，用于在顶点着色器和片段着色器之间插值传递顶点颜色属性。最终，它将作为片段的颜色属性。

这个示例中，顶点着色器将顶点的位置属性和颜色属性进行变换和传递，片段着色器则接收插值后的颜色属性并输出作为最终的片段颜色。

总结一下：

  • attribute 是在顶点着色器中使用的变量类型。它用于表示每个顶点的属性数据，如顶点位置、颜色等。每个顶点都有自己的属性数据，并在顶点着色器中进行处理。

  • uniform 是在顶点着色器和片段着色器中都可以使用的变量类型。它用于表示在渲染过程中保持不变的常量数据，如视图投影矩阵、光照参数等。uniform 变量在渲染过程中对所有顶点和片段都是相同的。

  • varying 是在顶点着色器和片段着色器之间进行数据传递的变量类型。在顶点着色器中，varying 变量被赋予顶点的属性数据，在片段着色器中，它接收插值后的值。这样可以在顶点和片段之间传递数据，使得颜色、纹理等属性在图形的表面上平滑过渡。

这些变量类型在自定义着色器中非常重要，它们提供了灵活性和功能扩展的能力。通过合理使用 attribute、uniform 和 varying 变量，你可以实现各种效果，从简单的顶点变换到复杂的光照、纹理映射等高级功能。

当你熟悉了基本的着色器变量类型和用法后，可以进一步学习一些高级的着色器功能和函数。以下是一些常用的高级功能和函数的示例：

  1. 条件语句： 在着色器中可以使用条件语句来进行逻辑判断和分支处理。例如，你可以使用条件语句来根据某个条件选择不同的计算方式或输出结果。

    if (condition) {
  // 执行某些代码
} else {
  // 执行其他代码
}

  2. 纹理映射： 着色器中可以使用纹理贴图来给模型表面添加细节和图案。你可以通过采样纹理并将其应用于顶点或片段上。

    // 从纹理中采样颜色值
vec4 color = texture2D(uTexture, vTexCoord);

  3. 向量和矩阵运算： 着色器支持向量和矩阵的运算，包括向量的加减乘除、矩阵的乘法、转置等操作。这些运算可以用来进行坐标变换、光照计算等。

    // 向量加法
vec3 result = vec3(1.0, 2.0, 3.0) + vec3(4.0, 5.0, 6.0);

// 矩阵乘法
vec4 result = uProjectionMatrix * uModelViewMatrix * vec4(position, 1.0);

  4. 函数库： GLSL提供了一些内置的函数，用于处理向量、矩阵、数学计算等。例如，你可以使用函数来计算光照、法线变换、颜色调整等。

    // 计算点乘
float dotProduct = dot(vec3(1.0, 2.0, 3.0), vec3(4.0, 5.0, 6.0));

// 计算反射向量
vec3 reflected = reflect(incident, normal);

这些只是一些高级着色器功能和函数的示例，实际上，着色器语言提供了丰富的功能和操作，可以实现各种复杂的效果。

avatar
文章
阅读
粉丝