纹理叠加混合 Three.js / WebGL

Question

着色器纹理叠加混合，简单的说，比如一张贴图的 RGB 值乘 0.2，另一张贴图的 RGB 值乘(1-0.2),两张贴图分别乘一个系数后然后相加。WebGL实现纹理叠加功能主要是通过编写着色器代码Shader实现，可以通过原生 WebGl 编写代码来演示该功能比较麻烦，通过任意一个 WebGL 引擎来演示纹理叠加功能，不用调用WebGL原生API比较方便，比如应用最为广泛的WebGl引擎Three.js来演示该功能。

阅读前提

阅读本文之前，首先要求有一定的原生 WebGL 基础，尤其着色器语法部分，还需要有一定的 Three.js 自定义着色器的基础，也就是对 ShaderMaterial 构造函数的使用有一定的基础。如果没有相应的基础，可以学习本站发布的原生 WebGL 视频教程和 Three.js 进阶视频教程的 Three.js 自定义着色器部分知识。

Threejs 着色器代码

实现纹理叠加混合功能，不需要编写顶点着色器，只需要编写片面元着色器即可。

下面代码的功能是，把两个颜色贴图 ./Earth1.png 和  ./Earth2.png 进行叠加混合后，作为几何体对应材质的颜色纹理贴图使用。

顶点着色器

<script id="vertex">
  void main(){
    vUv = uv;
    gl_Position = projectionMatrix*viewMatrix*modelMatrix*vec4( position, 1.0 );
  }
</script>

片元着色器的编写，在进行叠加混合计算的时候，可以借助内置函数mix快速实现。

<script id="fragment">
  // 声明两个颜色贴图变量
  uniform sampler2D texture1;
  uniform sampler2D texture2;
  varying vec2 vUv;
  void main() {
    // 从纹理贴图Earth1.png提取RGBA值
    vec4 color1 = texture2D( texture1, vUv);
    // 从纹理贴图Earth2.png提取RGBA值
    vec4 color2 = texture2D( texture2, vUv);
    //通过内置函数mix，现行混合两个贴图像素值
     gl_FragColor = mix(color1, color2, 0.8);
  }
</script>

uniforms设置两个颜色贴图变量的传值，对应片元着色器中的两个变量uniform sampler2D texture1;和uniform sampler2D texture2;。

var texLod = new THREE.TextureLoader();
// 自定义顶点着色器对象
var material = new THREE.ShaderMaterial({
  uniforms: {
    // 纹理贴图1
    texture1: {
      value: texLod.load('./Earth1.png')
    },
    // 纹理贴图2
    texture2: {
      value: texLod.load('./Earth2.png')
    },
  },
  // 顶点着色器
  vertexShader: document.getElementById('vertex').textContent,
  // 片元着色器
  fragmentShader: document.getElementById('fragment').textContent,
});