第 2 章练习：GLSL 数据类型

对应教程：02 GLSL 数据类型与基本语法
起始示例：数据类型可视化，修改 02-types.js。

练习 1：让蓝色也形成渐变

**目标：**蓝色不再是整张平面相同的数值，而是从左下角到右上角逐渐增加。现有滑块仍控制蓝色的最大强度。

**要求：**只修改片元着色器中 vec3 color = ... 一行；继续使用 vUv 和 uBlue。

**完成标准：**滑块在 0.0 时没有蓝色；滑块增大时，右上角比左下角更蓝。

可将 vUv.x 与 vUv.y 的平均值乘以 uBlue。

</details>

练习 2：改变 swizzle 的结果

**目标：**勾选“交换红绿通道”后，让原来的蓝色进入红色通道，原来的红色进入绿色通道，原来的绿色进入蓝色通道。

**要求：**修改 if ( uSwap ) 中的一行向量赋值，并把界面标签改成与新行为相符的文字。

**完成标准：**勾选后能指出新 RGB 分别来自旧 RGB 的哪一项；取消勾选仍为原始颜色。

按新的 R、G、B 顺序写三个旧通道字母。

</details>

练习 3：找出类型错误

下面三行分别想得到 0.5、一个包含 UV 的三分量颜色、整数模式 1。找出有问题的行并修正，说明原因：

float halfValue = 1 / 2;
vec3 color = vec3( vUv, 0.5 );
int mode = 1.0;

**完成标准：**修正后的三行可放入片元着色器并通过编译；能说出每行的类型与分量数量。

参考解答

第 2 章练习参考解答

对应练习：GLSL 数据类型。

练习 1：让蓝色也形成渐变

在 02-types.js 的片元着色器中替换颜色构造行：

vec3 color = vec3( coords.x, coords.y, uBlue * ( coords.x + coords.y ) / 2.0 );

coords.x、coords.y 从左下到右上分别增加，平均值也增加。uBlue 为 0.0 时第三个分量处处为零；它增大时，右上角的蓝色最强。

练习 2：改变 swizzle 的结果

if ( uSwap ) {
  color = color.brg;
}

新 R 来自旧 B，新 G 来自旧 R，新 B 来自旧 G。color.brg 会先读取原颜色，再将新的 vec3 赋给 color。同时把 02-types.html 的控件标签改为“循环移动 RGB 通道”：

<label for="swap">循环移动 RGB 通道 <code>bool</code><input id="swap" type="checkbox" /></label>

练习 3：找出类型错误

float halfValue = 1.0 / 2.0;
vec3 color = vec3( vUv, 0.5 );
int mode = 1;

第一行原本使用两个整数，得到整数除法的结果；改成浮点字面量后得到 0.5。第二行本来就正确：vUv 是 vec2，加一个 float 正好构成 vec3。第三行原本把浮点字面量 1.0 放进 int；改用整数 1 即可。也可以明确写 int(1.0)，但这里没有转换的必要。