鼠标交互
7 / 14
学习使用鼠标坐标创建交互效果，理解uniform变量的传递和使用。
一个彩色光晕跟随鼠标位置移动，同时随时间脉动。核心代码是：
下面拆解每个部分。
u_mouse 是什么
u_mouse 是从外部传入的鼠标坐标，单位是像素（比如 vec2(150.0, 200.0)）。
u_resolution 是画布的像素尺寸。把鼠标坐标除以分辨率，就换算到 0.0～1.0 的归一化范围，和 uv 坐标的单位一致，才能用 distance 比较。
计算距离并生成光晕
distance(uv, mouse) 返回当前像素到鼠标位置的距离。
smoothstep(0.0, radius, dist) 在 0 到 radius 之间生成 0.0～1.0 的过渡：
- 距离为 0（就在鼠标上）→ 0.0
- 距离大于
radius→ 1.0
1.0 - ... 反转，让鼠标附近为 1.0（亮），远处为 0.0（暗）。这就是光晕效果。
光晕的颜色来自哪里
光晕中心最亮时，红色通道是 glow = 1.0，绿色是 0.5，蓝色是 0.8，组合成粉紫色。离中心越远，三个通道都等比例减小，最终归零。
试着改一改
| 改动 | 效果 |
|---|---|
radius = 0.3 | 光晕更大 |
radius = 0.08 | 光晕变成小圆点 |
vec3(glow, glow, 0.0) | 黄色光晕 |
vec3(mouse.x, mouse.y, glow) | 光晕颜色跟随鼠标位置变化 |
练习
练习区的效果已经基本完整，但鼠标颜色和脉动已经写好。把 u_mouse / u_resolution 正确赋值给 mouse，让光晕跟随鼠标移动，并添加 sin(u_time) 脉动。
答案解析
u_mouse / u_resolution把鼠标坐标归一化到 0.0–1.0distance(uv, mouse)测量每个像素到鼠标的距离1.0 - smoothstep(0.0, 0.2, distToMouse)在半径 0.2 内生成光晕vec3(mouse, 0.5)让颜色跟随鼠标的 x、y 位置变化sin(u_time * 2.0) * 0.5 + 0.5产生 0.0–1.0 的脉动值- 三者相乘让光晕同时具备位置跟随、颜色变化和脉动效果
试着把 circle * pulse 改成 circle + pulse * 0.1，光晕会在脉动时微微扩大而不是整体变暗。