双色矩形分割

3 / 4

📝 练习目标

利用 if 条件将屏幕区域分为左右两色,掌握片元判断逻辑。

💡 💡 教程内容

学习目标

你将学习如何使用 if 条件语句,根据屏幕坐标对区域进行判断,实现左右颜色分割的效果。

---

核心概念详解

1. 条件判断的语法

`glsl

if (vUv.x < 0.5) {

color = 左侧颜色;

} else {

color = 右侧颜色;

}

`

这类判断方式适合根据位置、距离等条件区分显示区域。

---

2. 区域划分原理

我们使用 vUv.x 来判断当前像素是处于左侧还是右侧:

- vUv.x < 0.5 → 左半屏

- vUv.x >= 0.5 → 右半屏

---

3. 应用颜色输出

将逻辑判断结果赋予颜色并输出:

`glsl

gl_FragColor = vec4(color, 1.0);

`

你可以扩展到更多条件,创建分区图形、按钮状态、UI 响应等效果。

GLSL 代码编辑器

正确代码预览

当前代码预览