纯色填充

学习目标

通过本教程，你将学会：

- 理解GLSL片段着色器的基本结构

- 掌握gl_FragColor变量的作用和用法

- 了解RGBA颜色模式和取值范围

- 编写你的第一个GLSL着色器程序

核心概念

片段着色器（Fragment Shader）

片段着色器是GPU渲染管线中的一个重要阶段，它决定屏幕上每个像素的最终颜色。每个像素都会执行一次片段着色器程序。

gl_FragColor 变量

gl_FragColor 是GLSL中的内置输出变量，用于设置当前片段（像素）的颜色。它是一个vec4类型的变量，包含四个分量：

- R (Red)：红色分量

- G (Green)：绿色分量

- B (Blue)：蓝色分量

- A (Alpha)：透明度分量

RGBA颜色模式

在GLSL中，颜色值使用0.0到1.0的浮点数表示：

- 0.0 表示该颜色分量的最小值（黑色/完全透明）

- 1.0 表示该颜色分量的最大值（最亮/完全不透明）

- 0.5 表示中等强度

相关函数和语法

vec4构造函数

`glsl

vec4(r, g, b, a) // 创建一个四分量向量

vec4(rgb, a) // 使用vec3和float创建

vec4(value) // 所有分量都设为相同值

`

常用颜色示例

`glsl

vec4(1.0, 0.0, 0.0, 1.0) // 红色

vec4(0.0, 1.0, 0.0, 1.0) // 绿色

vec4(0.0, 0.0, 1.0, 1.0) // 蓝色

vec4(1.0, 1.0, 1.0, 1.0) // 白色

vec4(0.0, 0.0, 0.0, 1.0) // 黑色

vec4(0.5, 0.5, 0.5, 1.0) // 灰色

`

代码解析

在练习代码中，你需要完成以下任务：

1. 理解基本结构：

`glsl

precision mediump float; // 设置浮点精度

void main() { // 主函数入口

// 你的代码

}

`

2. 设置片段颜色：

`glsl

gl_FragColor = vec4(r, g, b, a);

`

其中 r, g, b 分别是红、绿、蓝分量，a 是透明度。

3. 完成红色填充：

- 红色分量设为 1.0（最大值）

- 绿色和蓝色分量设为 0.0（最小值）

- 透明度设为 1.0（完全不透明）

实践提示

- 在GLSL中，浮点数字面量建议加上小数点，如 1.0 而不是 1

- 颜色值超出 [0.0, 1.0] 范围会被自动截断

- Alpha值为0.0时完全透明，1.0时完全不透明

- 可以尝试修改不同的颜色值来观察效果变化

通过完成这个练习，你将建立对GLSL着色器编程的基础理解，为后续更复杂的效果打下坚实基础。