技术路线与心得：从一道光学题到可交互的三维物理模拟器

本文记录「沟槽反射模拟器」从选题、物理建模、图形实现到发布的全过程，包含技术路线、开发心得、实战踩坑与后续优化思路。内容为原创分享，欢迎交流。

一、技术路线：如何把「一道光学题」变成「一个能玩的作品」

1. 选题与目标拆解

沟槽反射是一个"理论上很简单、直觉上很反直觉"的光学现象：金属拉丝表面在灯光下会呈现一条横向亮线，光盘在阳光下会折射出彩虹般的同心圆弧，V 形沟槽还会把光原路送回光源。这些现象背后是同一个几何光学模型——表面微沟槽的柱面镜反射。

做这个小工具的路线是：

1. 物理建模：把「拉丝板」抽象为平行 V 形微沟槽，把「光盘」抽象为同心圆环沟槽；
2. 反射数学化：柱面/沟槽反射的关键性质是「沿槽方向分量保持不变、垂直槽方向分量反向」，由此推导反射光锥的几何与亮线的解析条件；
3. 三维可视化：用 Three.js 搭场景、自定义 GLSL 着色器逐像素算沟槽法线，用 marching-squares 提取亮线等值线；
4. 交互化：拖拽光源、拖拽眼睛、滑杆调参数、预设场景，让抽象的几何关系"一拉就懂"。

2. 技术选型

二、核心物理与算法的实现要点

1. 沟槽法线的逐像素计算

平行槽板场景中，沟槽截面是「锯齿形」：法线在垂直槽方向的平面上左右摇摆。着色器里用 fract(x / period) 判断当前像素落在槽的哪一侧斜面，再构造法线：

vec3 grooveNormal(vec3 wp) {
  float p = fract(wp.x / uPeriod + 0.5);
  float s = (p < 0.5) ? -uSlope : uSlope;   // uSlope = tan(α/2)
  return normalize(vec3(s, 1.0, 0.0));
}

同心圆盘场景则把 x 轴换成径向：radial = (wp.x, 0, wp.z) / r，法线由径向与垂直方向叉乘得到。两种形态共用一套反射计算，只是法线来源不同。

2. 反射亮线的两种求法

• 着色器高光：对每个像素，入射方向由光源位置 / 平行光方向确定，反射方向由沟槽法线镜面反射得到，再用反射方向与「眼睛方向」做点积，落在阈值内即高光。实时、逐像素、和反射锥的几何完全一致。
• 等值线提取：在 CPU 侧把反射条件写成隐式函数 f(x,z) = dot(reflected, eyeDir) - threshold，在板面网格上跑 marching-squares，提取零点等高线绘制为金色亮线。这两套结果相互印证，调试时非常有用。

3. V 形槽回射

一次反射把光「摊」成锥面，但 V 形沟槽还有一个更妙的性质：光线射入一侧壁、反射到对侧壁、再反射出来时，会回到入射方向附近——真正的"原路返回"。微观机理标签页用 2D 截面把这条路径画出来，与「灯下点圆心天然发亮」的现象对应起来。

三、实战经验与踩坑记录

1. 法线贴图 vs 真几何：最初想用真实的三棱柱几何体做沟槽，但顶点过多、光照也不对；改用平面 + 着色器里"假法线"（perturbed normal）后效果和性能都大幅提升。这就是图形学里的"细节靠法线、几何靠简模"。
2. CDN 动态加载 Three.js：import() 动态加载模块时，OrbitControls 也必须走同版本的同源模块，否则会出现版本不匹配的诡异报错。我还加了加载失败的友好提示层（离线也能明确知道原因）。
3. 拖拽要注意射线拾取与坐标平面：灯下点拖拽要限制在板面 y=0 平面内（用射线与平面求交），否则拖到场景外就"飞了"。眼睛标记则用平行于视线的平面求交，保证拖拽手感稳定。
4. 等值线精度：marching-squares 网格太粗亮线发虚，太细每帧计算量大。最终 100×100 网格 + 每帧只重算参数变化时，稳 60fps。
5. 深色 UI 的对比度：金色高光在深色背景上很抢眼，但细节文字容易看不清；统一了调色板变量（CSS custom properties）后，后续微调配色只改一处。

四、存在问题与优化空间

1. 物理简化：目前是单光源、单观察者、理想镜面假设，没有能量积分与多次反射的能量衰减；真实拉丝金属还有粗糙度、各向异性高光。可进一步引入 GGX 各向异性 BRDF。
2. 性能：逐像素着色器在低端移动端仍有压力；可降分辨率渲染高光层再用后处理上采样。marching-squares 可改为 GPU 端计算。
3. 交互性：下一次迭代想加「时间轴动画」（光线发射→反弹→亮线成型）、多点光源、动态光源扫过板面；并把方程图像页做成参数联动、实时更新的公式。
4. 可访问性：目前依赖鼠标拖拽，触屏和键盘操作支持不足；颜色区分可再加形状/文字标注，照顾色弱用户。
5. 工程化：单文件交付方便，但代码已接近 60KB，后续功能增多可拆分为多文件 + 构建流程，便于测试与维护。

五、小结

做这个小工具最大的收获是：物理直觉 + 数学建模 + 图形实现三件事必须闭环。只懂公式画不出直觉，只画画面不懂公式会画出"假物理"。当你把一道题做成一个"能拖、能调、能玩"的作品时，理解会深入很多。希望这份代码与心得对同样在做物理可视化、3D 前端小工具的同学有帮助。

欢迎 Star / Issue / PR：https://gitcode.com/Eddygit/groove-reflection-simulator
在线试玩（展览馆）：https://gallery.developer.huaweicloud.cn/gallery/004568c080c00000