从零开始构建自己的WebGL3D引擎—材质篇

引言：
第二篇本来想讲讲摄影机的内容，但是还是想从渲染开始讲起。因为我们希望引擎更专注于渲染，等渲染结束我们再去慢慢的写摄影机和一些数学运算吧。
该篇主要思考基础材质类如何封装以及shader如何处理和优化、shader编译、uniform上传的细节和更好的实现
1.要设计一个好的材质，我们先想想别的引擎是如何设计的，有什么好的地方、有什么不足的地方
Three.js
使用方法(目前先拿自定义的shaderMaterial举例)

var shaderMaterial = new THREE.ShaderMaterial( {
   
   uniforms: uniforms,
   vertexShader: document.getElementById( 'vertexshader' ).textContent,
   fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
   blending: THREE.AdditiveBlending,
   depthTest: false,
   transparent: true,
   vertexColors: true
} );

我们首先要自己构造uniforms（这个还挺麻烦、其实你写完shader就可以正则匹配出uniforms了、然后是传染vertexShader和fragmentShader、然后是一些其他参数）
如果想使用光照和阴影那？（下面截个water.js中mirror的代码看看）

var mirrorShader = {
   
   uniforms: UniformsUtils.merge( [
      UniformsLib[ 'fog' ],
      UniformsLib[ 'lights' ],
      {
   
         "normalSampler": {
    value: null },
         "mirrorSampler": {
    value: null },
         "alpha": {
    value: 1.0 },
         "time": {
    value: 0.0 },
         "size": {
    value: 1.0 },
         "distortionScale": {
    value: 20.0 },
         "textureMatrix":