第7章 精装修工段：着色器与特效

第 7 章 · 精装修工段：着色器与特效

章节摘要：本章是产线的精装修工段：自定义着色器重写表面的涂装规则，后期处理链给整幅画面抛光，粒子系统批量喷洒小件，物理引擎接管碰撞仿真。四样工装都能让演示上一个档次，也都按帧收费——精装修的原则是"加得值、退得掉"。

一条主线

沙盘进入竞标演示阶段，客户把友商的页面甩了过来：水面在流、金粉在飘、点击有辉光、搬运机器人会避障。这些效果没有一样是基础三件套的活——它们全部出自精装修工段。但精装修有一条铁律：主体装配（前六章）没过关就上特效，等于毛坯房贴金箔，画面会以更清晰的方式暴露场景本身的廉价。

主线从"每帧收费"展开。前六章的工位大多是一次性成本：几何体建一次、纹理传一次、模型装一次。精装修四样全不同——着色器每帧为每个像素跑一遍、后期链每帧把整幅画面多画几遍、粒子每帧更新数万个位置、物理每帧做一轮碰撞求解。所以本章每一节都配着两本账：效果账与帧账，第四节末尾会把两本账合并进第 8 章的质检清单。精装修师傅的修养，一半在审美，一半在预算。

沿途站点

第一站 7.1 着色器：顶点与片元的定制涂装。ShaderMaterial 把两段小程序（顶点着色器管形、片元着色器管色）直接交给你写，uniform 与 varying 是主程序与显卡程序之间的传话筒。本站用一个流光扫描面演示完整接线，并给出"不上 ShaderMaterial 的三个替身"——很多"自定义效果"其实内置材质的 onBeforeCompile 就够。

第二站 7.2 后期处理链：成品前的最后一道抛光。渲染结果不再直接上屏，而是流经一串效果器（泛光、景深、色调映射）逐层加工。本站搭一条最小可用的处理链，讲清"为什么泛光必须配暗部控制"，以及关掉整条链的降级开关怎么留。

第三站 7.3 粒子系统：批量小件的喷洒工艺。一万颗灰尘、一场金粉雨，正身是 Points 加缓冲区：一颗粒子一个顶点，位置更新在 CPU 数组里批量做，一次提交显卡。本站顺带把 InstancedMesh 的实例化思路讲透——它是"成千上万个同类小件"的通用答案。

第四站 7.4 物理引擎联动：给装配线加上碰撞台。Three.js 本体不含物理，物理引擎是外聘的仿真工头：它管状态、Three.js 管显示，每帧对一次账。本站用翻斗卸货演示刚体与网格的联动流程，以及"显示与仿真解耦"这个最重要的架构决定。

图：精装修工段的加戏与账单

拐点与结论

本章的认观转折在 7.1：内置材质已经把通用光照流程做到了极致，自定义着色器的价值不是"更高级"，而是"内置材质表达不了的效果"——流光、扭曲、程序化噪声。能用替身解决的别上 ShaderMaterial，这是工段纪律而不是保守。

第二个转折在 7.4 的解耦：物理引擎不认识 Three.js，Three.js 也不认识物理引擎，两者是"仿真工头与展示部门"的关系——工头每帧报坐标，展示部门照单摆放。理解了这层合同关系，任何物理库的接入都是同一套流程：建仿真世界、把刚体与网格登记成对、每帧对账。

读完你应该

• 判断一个效果该用内置材质、onBeforeCompile 还是完整 ShaderMaterial；
• 写出带 uniform 交互的顶点与片元着色器，并在每帧更新参数；
• 搭一条含泛光的后期处理链，并预留一键降级开关；
• 用 Points 批量更新粒子，用 InstancedMesh 摆放万级同款小件；
• 接入物理引擎完成"建世界、登记对、每帧对账"三步，并解释解耦的收益。

下一章的接力

精装修完工，沙盘到了出厂时刻。下一章质检与出货：帧预算怎么量、优化清单怎么过、生态怎么借力、项目怎么复盘——把前七章的所有工位按交付标准再巡一遍。