Three.js Shader源码结构

想要改写Three.js中的shader，就必须先了解其源码结构，本文梳理一下其源码结构，下一篇实现改写shader。

打开Three.js源码，发现其shader代码都以字符串的形式储存，比如我们搜一下vViewPosition关键字就可以定位到如下Shader编写的位置：

shader字符串位置

可以看到这里把代码拆分成了实现某个字功能的一段段字符串，比如“lights_toon_pars_fragment”，看命名就可以大概知道是实现了toon卡通效果的一部分片段着色器。

复制lights_toon_pars_fragment再搜索可以定位到一个以序号命名的组合拼装的shader代码段，如下图：

以序号命名的组合拼装的shader代码段

这里也很好理解，把断断续续的一个个函数拼装成一个顶点/片段shader。

继续搜索

fragment$4

，可以看到这里被赋值给了ShaderChunk下一个命名有意义的对象，如下图：

ShaderChunk

ShaderChunk中除了fragment$4这类拼接后的代码，也有拼接前的代码，为了方便C端用户自定义着色器时选择组装。
使用ShaderChunk继续往上搜索发现，其实每个材质的顶点片段shader就是直接指定的ShaderChunk中的对象，如下图

toon的顶点/片段着色器

倒推到这里就很好理解了，Three.js中每个材质都是由uniforms参数+ShaderChunk中的顶点片段着色器组成。而ShaderChunk中的顶点片段着色器又由一串字符串拼接而来。而每个字符串都是实现的某个着色功能。

了解了系统材质的源码结构，后面进行onBeforeCompile着色器扩展或者改写就容易多了。