Three.js/WebGL/GLSL中#include <common>的含义及相关疑问
嘿，这个问题问得特别到位！咱们一步步拆解清楚关于Three.js着色器里#include <common>的疑惑：
#include <common>的完全解析 1. 它到底是什么？
#include <common>是Three.js特有的着色器预处理机制，可不是WebGL/GLSL原生支持的特性哦——GLSL本身根本没有#include这种指令（不像C/C++），这是Three.js团队为了方便开发者复用通用着色器代码，自己搞出来的一套逻辑。
<common>其实就是Three.js内置的一个「通用工具代码包」的标记，里面封装了超多常用的工具函数，比如你提到的rand(vec2)随机数生成函数，还有各种数学计算工具、坐标转换助手、基础函数封装等等，都是写着色器时高频用到的东西。
2. 它的工作原理是怎样的？
Three.js在把你的着色器代码传给WebGL编译器之前，会先做一轮自己的预处理：一旦看到#include <xxx>这样的标记，它就会去自己内置的「着色器代码片段库」里找到对应的代码模块，把<xxx>直接替换成模块里的完整GLSL代码，之后再把拼接好的完整代码交给WebGL去编译。
这些内置的代码片段都存在Three.js的源码里，比如<common>对应的代码就在Three.js核心包的src/renderers/shaders/ShaderChunk/common.glsl.js文件里（是JS模块，存的是GLSL代码字符串）。
3. 它是外部文件吗？
严格来说不是你项目里的外部文件，而是Three.js框架自带的内置代码片段。你完全不用自己去下载或者引入额外文件，只要在着色器里写#include <common>，Three.js就会自动帮你把对应的代码插进去，根本不用你操心。
4. 是Three.js独有，还是WebGL/GLSL通用？
划重点：这绝对是Three.js特有的功能！
GLSL（WebGL使用的着色语言）本身没有原生的#include功能，要是用原生WebGL开发，你要么手动把需要的函数复制粘贴到着色器里，要么自己写工具来做代码拼接。只有Three.js为了降低开发门槛，才实现了这套类似C/C++的include机制。
举个直观的例子：当你在片元着色器第一行写#include <common>，Three.js预处理后，会直接把common.glsl.js里的所有代码（包括你需要的rand(vec2)）插入到那个位置，你的着色器就能直接调用这些函数啦。
内容的提问来源于stack exchange，提问作者lsgng
