three.js - 三JS : First shader attempt - blending two textures

Question

我正在尝试混合两种纹理，但没有成功。我只得到黑色纹理。

我不确定这是着色器代码还是我使用 ThreeJS 实现它的方式。

我尝试了两种不同的着色器方法，但它们都只是得到黑色纹理:

测试1:

var pitchMaterialParams = {
uniforms: THREE.UniformsUtils.merge([{

  texture1: { type: "t", value: texture1 },
  texture2: { type: "t", value: texture2 },

}]),
vertexShader: 
 `

   precision highp float;
   precision highp int;

   //uniform mat4 modelViewMatrix;
   //uniform mat4 projectionMatrix;
   //attribute vec3 position;
   //attribute vec2 uv;
   varying vec2 vUv;

   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
   }

 `,
fragmentShader: 
 `

   precision mediump float;
   uniform sampler2D texture1;
   uniform sampler2D texture2;
   varying vec2 vUv;

   void main() {
     vec4 t1 = texture2D( texture1, vUv );
     vec4 t2 = texture2D( texture2, vUv );
     //gl_FragColor = mix( t1, t2, t2.a );
     gl_FragColor = vec4(mix(t1.rgb, t2.rgb, t2.a), 1.0);
   }

 `};

https://jsfiddle.net/Eketol/doLgv9cw/

测试2:

var pitchMaterialParams = {
uniforms: THREE.UniformsUtils.merge([{

  fade: { type: "f", value: 0 },
  u_texture1: { type: "t", value: texture1 },
  u_texture2: { type: "t", value: texture2 }

}]),
vertexShader: 
 `

   precision highp float;
   precision highp int;
   varying vec2 v_uv;
   varying float v_textureIndex;

   void main() {
     v_textureIndex = step(0.5, uv.x) + step(0.5, uv.y) * 2.0;
     v_uv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }

 `,
fragmentShader: 
`

  precision mediump float;

  varying vec2 v_uv;
  varying float v_textureIndex;
  uniform sampler2D u_texture1;
  uniform sampler2D u_texture2;

  void main() {
    gl_FragColor = mix( texture2D(u_texture1, v_uv), texture2D(u_texture2, v_uv), step(0.5, v_textureIndex) );
  }

`};

https://jsfiddle.net/Eketol/qm435wL7/

基本上我只想使用叠加/乘法方法混合两个图像，其中顶部图像是白色的，带有一些透明区域。

任何帮助将不胜感激。

Answer 1

您遇到了以下问题:

https://github.com/mrdoob/three.js/issues/8016

只需在合并制服后分配纹理即可。

https://jsfiddle.net/r4nmf2wt/1/

三.js R112