1. threejs材质的shader代码
# threejs各个材质的shader代码
本节课给大家说说threejs各种网格材质、点材质、精灵材质，对应的着色器(shader)代码。
# 知识回顾：ShaderMaterial自定义shader代码
回顾下前面ShaderMaterial讲解，你会发现咱们用ShaderMaterial自定义着色器GLSL ES代码，模拟过基础网格材质MeshBasicMaterial、点材质PointsMaterial的渲染效果。
其实threejs中，接触的常用的网格材质、点材质本质上都是shader(着色器)代码，都有threejs提前定义好的着色器 GLSL ES代码。
# 不同材质对应的shader文件
你可以下载threejs官方文件包，或者直接查看课件源码中我下载的threejs文件包。
目录\src\renderers\shaders\ShaderLib里面有不同threejs材质对应的着色器shader文件。
你通过名字，就可以判断，那个材质，对应那个shader文件
# #include语法简介
着色器语言GLSL ES，可以通过#include引入其它的着色器代码文件，你可以类比js的 import语法去对比理解(虽然不同，但是都是为了引入别的文件)。
# renderers\shaders\ShaderChunk目录
查看threejs官方文件包src\renderers\shaders\ShaderChunk目录，你可以发现ShaderChunk文件夹里面有很多着色器GLSL ES的功能代码模块。
比如文件default_vertex.glsl.js、default_fragment.glsl.js、color_pars_vertex.glsl.js
ShaderChunk里面的shader代码文件，会被其它的文件引用，比如shaders\ShaderLib目录下面的shader文件，就会引用ShaderChunk里面的文件代码。
比如ShaderChunk里面的color_pars_vertex.glsl.js文件，会被ShaderLib里面多个文件引用，你可以检索关键词color_pars_vertex去验证，你会发现多个文件含有代码#include <color_pars_vertex>。
比如网格基础材质MeshBasicMaterial对应shader文件meshbasic.glsl.js，就引入了文件color_pars_vertex.glsl.js
...
#include <color_pars_vertex>
...
# .onBeforeCompile查看shader代码
threejs各个材质材质会从父类Material继承.onBeforeCompile方法。
你可以通过.onBeforeCompile函数的参数shader获取材质的着色器代码，其实你对照下，就会发现这些代码的来自\src\renderers\shaders\ShaderLib目录下shader文件。
const material = new THREE.MeshLambertMaterial();
material.onBeforeCompile = function (shader) {
console.log('shader', shader);
console.log('顶点着色器', shader.vertexShader);
console.log('片元着色器', shader.fragmentShader);
}