WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

纹理叠加混合(Three.js/WebGL)

着色器纹理叠加混合,简单的说,比如一张贴图的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,
});
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com