Three.js着色器构成剖析和MeshStandardMaterial（PBR）shader着色器实现分析

       哈哈！今天要分享的是在工作碰到的需求，项目中部分模型需要通过Instance方式进行渲染优化，主要是减少drawcall次数和顶点数量。然而项目中的使用的是MeshStandardMaterial，这种材质是一种基于物理的标准材质（PBR),然而Three.js并没有将Instance封装到着色器中，需要我们在代码里重写THREE.ShaderLib.physical并将Instance的模型矩阵，逆转置矩阵等信息传入着色器实现需求，然后我就开始了我的MeshStandardMaterial  shader探索之旅 。

       首先我们剖析一下Three.js的着色器部分代码的构成，我们先来看一下Three.js的着色器源码构成（src目录下）。

                          

        那我们可以看见Three.js将代码分为两个部分ShaderLib和ShaderChunk两部分，看了ShaderLib中的任意一组顶点和片元着色器可以知道，ShaderLib通过组合SharderChunk来构建顶点着色器和片元着色器，下面简略分析下meshphysical_vert.glsl和meshphysical_frag.glsl两个文件，下面是基于Three.js r102版本分析。

export default /* glsl */`
#define PHYSICAL                 //定义物理材质的宏
varying vec3 vViewPosition;      //相机