ThreeJS: First shader attempt - blending two textures

Question

I'm trying to blend two textures without success. I just get a black texture.

I'm not sure if it is the shader code or the way I'm implementing it using ThreeJS.

I've tried two different shader methods, but I just get a black texture on both of them:

Test1:

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/

Test 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/

Basically I just want to blend two images using an overlay/multiply method, where the top one is white with some transparent areas.

Any help will be appreciated.

Answer 1

You have run into the following issue:

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

Just assign your textures after you have merge the uniforms.

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

three.js R112