最近，想要给一个立方体不同的面赋不同的材质，能够是纯色也能够是贴图。而后，我就感觉一个简略的shaderMaterial就能够解决了。然而放到理论利用场景中发现，别的物体有光照成果，我写的没有光照成果。所以还得给自定义着色器增加光照成果，于是就有了这篇文章。
本文次要从以下几个方面进行讲述：
- 创立没有光照成果的立方体；
- 扩大lambert材质，创立有光照成果的立方体；
适用人群：对THREE.js和glsl有根本理解的人。
创立没有光照成果的立方体
本示例会创立一个前后左右面是纯色，上上面是贴图的立方体。该局部的内容次要包含以下局部：
- 创立bufferGeometry；
- 自定义shaderMaterial，在shaderMaterial外面判断是用纯色还是贴图；
- 创立mesh。
创立bufferGeometry
因为想更深刻的理解THREE.js的实现原理，所以这块没有间接应用BoxBufferGeometry，而是本人定义顶点信息：
const geometry = new THREE.BufferGeometry()const position = [ // 每个面两个三角形，每个三角形三个顶点，每个顶点三个坐标值，所以一个三角形是3*3=9个值，一个面是3*3*2=18个值 -1, -1, 1, 1, -1, 1, 1, 1, 1, // front face 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // right face 1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, -1, -1, -1, -1, 1, -1, // back face -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, // left face -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, 1, 1, 1, 1, 1, 1, 1, -1, // top face 1, 1, -1, -1, 1, -1, -1, 1, 1, 1, -1, 1, -1, -1, 1, -1, -1, -1, // bottom face -1, -1, -1, 1, -1, -1, 1, -1, 1]// 定义了一个长宽高都是2的立方体，所以下面xyz的坐标要么是1，要么是-1geometry.setAttribute('position', new THREE.BufferAttribute(Float32Array.from(position), 3))而后，给每个顶点增加色彩信息，每个顶点既能够是纯色也能够是贴图，纯色须要rgb三个重量，贴图须要uv两个重量，所以每个顶点至多须要三个重量来示意。
那么，如何判断这个顶点是纯色还是贴图呢？
咱们当然能够再应用一个数组来示意。然而留神到下面贴图只须要两个重量，那么咱们就能够利用第三个重量来判断。glsl语言外面rgb色值的范畴是0-1，所以咱们能够应用这个范畴之外的值示意这是一个贴图。
那取什么值呢？咱们这个立方体定义了上上面是贴图，也就是贴图不只一个，那么这个值还要能推导出是第几个贴图。我这里设置了一个textureBaseIndex为2的变量。
const colors = []const textureBaseIndex = 2for (let i = 0; i < 12; i++) { switch (i) { case 0: // front color case 1: colors.push(1, 0, 0, 1, 0, 0, 1, 0, 0) // 红 break case 2: // right color case 3: colors.push(0, 1, 0, 0, 1, 0, 0, 1, 0) // 绿 break case 4: // back color case 5: colors.push(0, 0, 1, 0, 0, 1, 0, 0, 1) // 蓝 break; case 6: // left color case 7: colors.push(1, 1, 0, 1, 1, 0, 1, 1, 0) // 黄 break case 8: // top texture uv，前两个重量示意uv，第三个重量示意取第几个纹理，在纹理理论索引值的根底上加上textureBaseIndex colors.push(0, 0, textureBaseIndex + 0, 1, 0, textureBaseIndex + 0, 1, 1, textureBaseIndex + 0) break case 9: colors.push(1, 1, textureBaseIndex + 0, 0, 1, textureBaseIndex + 0, 0, 0, textureBaseIndex + 0) break case 10: // bottom texture uv，前两个重量示意uv，第三个重量示意取第几个纹理，在纹理理论索引值的根底上加上textureBaseIndex colors.push(1, 1, textureBaseIndex + 1, 0, 1, textureBaseIndex + 1, 0, 0, textureBaseIndex + 1) break case 11: colors.push(0, 0, textureBaseIndex + 1, 1, 0, textureBaseIndex + 1, 1, 1, textureBaseIndex + 1) break }}geometry.setAttribute('color', new THREE.BufferAttribute(Float32Array.from(colors), 3))自定义shanderMaterial
顶点着色器的代码比较简单，把color属性通过varying变量vColor传给片元着色器：
function getVertexShader () { return ` attribute vec3 color; varying vec3 vColor; void main () { vColor = color; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `}接下来是片元着色器，次要有以下几点：
- 通过
vColor.z判断是纯色还是贴图； - 把贴图信息通过sampler2D数组传入，而后在依据
vColor.z获取数组下标的时候，后面在生成下标的时候加了一个textureBaseIndex，所以用的时候得先减去； - 通过下标获取
sampler2D数组中的某一项的时候，不能间接应用textures[index]，glsl要求[]外面的内容必须是Integral constant expression，所以应用了一个generateSwitch函数动静生成一系列if代码；
残缺代码如下：
function getFragmentShader (textureLength, textureBaseIndex) { function generateSwitch () { let str = '' for (let i = 0; i < textureLength; i++) { str += `${str.length ? 'else' : ''} if (index == ${i}) { gl_FragColor = texture2D(textures[${i}], vec2(vColor.x, vColor.y)); } ` } return str } return ` ${textureLength ? ` uniform sampler2D textures[${textureLength}]; ` : ''} varying vec3 vColor; void main () { ${textureLength ? ` if (vColor.z <= 1.0) { gl_FragColor = vec4(vColor, 1.0); } else { int index = int(vColor.z) - ${textureBaseIndex}; ${generateSwitch()} }` : ` gl_FragColor = vec4(vColor, 1.0); ` } } `}生成自定义材质：
const textures = [ new THREE.TextureLoader().load('./textures/colors.png'), // 顶面贴图 new THREE.TextureLoader().load('./textures/colors.png') // 底面贴图]const material = new THREE.ShaderMaterial({ uniforms: { textures: { value: textures } // 片元着色器中会应用 }, vertexShader: getVertexShader(), fragmentShader: getFragmentShader(textures.length, textureBaseIndex)})创立mesh
这步就比较简单了，创立一个mesh，并增加到场景中：
const mesh = new THREE.Mesh(geometry, material)scene.add(mesh)这样，立方体就创立好了。本例应用了根本的WebGLRenderer，Scene，PerspectiveCamera，没有非凡解决，这里就不再写了。实现成果截图如下：
front/right/top面成果截图
back/left/bottom面成果截图
扩大lambert材质，创立有光照成果的立方体
我的理论利用场景中的物体是lambert材质，也就是MeshLambertMaterial。所以，上面的实例代码以扩大lamert材质的光照成果为例。要想应用该实现计划，最好钻研下THREE.js的源码。
THREE.js外面事后定义了一系列材质，MeshLambertMaterial材质就是其中之一。这部分代码在src/renderers/shaders文件夹上面，ShaderLib.js外面是材质的入口，比方MeshLambertMaterial:
const ShaderLib = { lambert: { uniforms: mergeUniforms( [ // uniform变量 UniformsLib.common, UniformsLib.specularmap, UniformsLib.envmap, UniformsLib.aomap, UniformsLib.lightmap, UniformsLib.emissivemap, UniformsLib.fog, UniformsLib.lights, { emissive: { value: new Color( 0x000000 ) } } ] ), vertexShader: ShaderChunk.meshlambert_vert, // 顶点着色器代码 fragmentShader: ShaderChunk.meshlambert_frag // 片元着色器代码 },}ShaderChunk和ShaderLib文件夹上面就是理论的着色器代码，区别是ShaderLib是THREE.js给咱们间接应用的，ShaderChunk是更细粒度的代码。ShderLib外面的不同材质有很多共有的代码，所以这个共有的代码就提取成一个个ShaderChunk，达到复用的目标。一个材质是由多个ShaderChunk生成的。咱们能够关上ShaderLib/meshlambert_vert.glsl.js文件，会发现外面有很多#include语句，这些语句最初会被替换为理论的ShaderChunk外面的片段。
咱们看到shaders文件夹上面只是定义了材质的构造以及glsl代码片段，那么，残缺成果的代码是在哪生成的呢？
src/renderers/webgl/WebGLProgram.js文件。
列一下这个文件我理解的一些知识点：
- 首先依据咱们创立材质时的参数，定义一些#define变量，增加在着色器代码的后面；
- 解析ShaderLib外面的代码，把#include语句替换为理论代码，参见resolveIncludes函数；
更重要的是，ShaderLib外面预约义的一些材质，挂在了THREE变量上，这样咱们就能够取得原始代码，并通过批改局部glsl代码达到扩大材质的目标。
比方，下面的那个例子，首先革新一下顶点着色器：
- 在默认的lambert顶点着色器代码后面增加属性变量和varying变量；
- 在main函数外面给varying变量赋值；
- 具体插在原始main函数的哪一行看你的需要；
function getVertexShader () { let shader = ` attribute vec3 color; varying vec3 vColor; ` + THREE.ShaderLib.lambert.vertexShader const index = shader.indexOf('#include <uv_vertex>') shader = shader.slice(0, index) + ` vColor = color; ` + shader.slice(index) return shader}片元着色器的革新如下：
- 在默认的lambert片元着色器代码后面增加uniform变量和varying变量；
- 在main函数外面插入咱们的代码，插入地位我选在了#include <color_fragment>前面，因为这个代码片段和我当初的批改做了相似的事件，所以插在这个地位是能够的。留神，此时就不是间接给gl_FragColor赋值了，而是把成果加在diffuseColor变量上。理论开发的时候，具体批改哪个值就得参考THREE.js源码了。
function getFragmentShader (textureLength, textureBaseIndex) { function generateSwitch () { let str = '' for (let i = 0; i < textureLength; i++) { str += `${str.length ? 'else' : ''} if (index == ${i}) { diffuseColor *= texture2D(textures[${i}], vec2(vColor.x, vColor.y)); } ` } return str } let shader = ` uniform sampler2D textures[${textureLength}]; varying vec3 vColor; ` + THREE.ShaderLib.lambert.fragmentShader const index = shader.indexOf('#include <color_fragment>') shader = shader.slice(0, index) + ` ${textureLength ? ` if (vColor.z <= 1.0) { diffuseColor.rgb *= vColor; } else { int index = int(vColor.z) - ${textureBaseIndex}; ${generateSwitch()} }` : ` diffuseColor.rgb *= vColor; ` } ` + shader.slice(index) return shader}而后，创立着色器：
- 批改一下uniform变量，把lambert默认的uniform变量也增加进去；
- 增加lights参数为true，否则代码报错；
- THREE源码默认diffuse是0xeeeeee，笼罩一下，批改为0xffffff；
const material = new THREE.ShaderMaterial({ uniforms: THREE.UniformsUtils.merge([ THREE.ShaderLib.lambert.uniforms, { textures: { value: textures } }, { diffuse: { value: new THREE.Color(0xffffff) } } ]), vertexShader: getVertexShader(), fragmentShader: getFragmentShader(textures.length, textureBaseIndex), lights: true})这个时候刷新页面，会发现是一个彩色的立方体，这是因为咱们还没有增加光源：
const light = new THREE.DirectionalLight( 0xffffff ); // 平行光light.position.set( 1, 1, 1 );scene.add( light );const ambient = new THREE.AmbientLight(0xffffff, 0.7); // 环境光scene.add(ambient)之所以增加两个光源是因为发现：
- 环境光不受几何物体法线影响；
- 平行光受几何物体法线影响；
增加上述代码后，如果把环境光正文掉，会发现材质还是彩色的，这是因为下面创立的geometry没有法线信息，所以须要应用上面的办法增加一下法线信息：
geometry.computeVertexNormals()最终成果截图如下：
front/right/top面成果截图，同时受平行光和环境光影响
back/left/bottom面成果截图，不在平行光照耀范畴内，只受环境光影响
总结
本文例子只是为了解说如何扩大已有材质，可能并没有任何应用意义。
上述观点是基于目前对THREE.js的钻研后果，可能会有认知谬误。如有，欢送留言评论。
参考资料：
- Extending the Built-in Phong Material Shader in Three.js
- Integral constant expression