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

(Posted solution on behalf of the question author, to move it to the answer space).

I have a solution thanks to @Mugen87 and @prisoner849:

var camera, scene, renderer, object;
var texture1URL = "https://cdn.rawgit.com/mrdoob/three.js/45418089bd5633e856384a8c0beefced87143334/examples/textures/terrain/grasslight-big.jpg";
var texture2URL = "https://cdn.rawgit.com/mrdoob/three.js/45418089bd5633e856384a8c0beefced87143334/examples/textures/patterns/circuit_pattern.png";
var status = document.getElementById("status");

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xcccccc );

  var ambientLight = new THREE.AmbientLight( 0xffffff, 1 );
  scene.add( ambientLight );

  camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 500 );
  camera.enableDamping = false;
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = -15;

  renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.gammaFactor = 2.14;
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.enableDamping = true;

  //var gridHelper = new THREE.GridHelper(10, 20, 0x333333, 0x333333);
  //scene.add( gridHelper );
}

// -------------------- Object -------------------- //
function initObject() {
  var texture1 = new THREE.TextureLoader().load( texture1URL );
  var texture2 = new THREE.TextureLoader().load( texture2URL );

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

      texture1: null,
      texture2: null,

    }]),
    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 );

         vec4 col1 = texture2D(texture1, vUv);
         vec4 col2 = texture2D(texture2, vUv);
         col2 = col2.a > 0.5 ? col2 : vec4(0, 0, 0, 1);
         gl_FragColor = mix( col1, col2, 0.25 );
       }

     `
  };

  // Dummy box for reference.
    //scene.add( new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({color:0xff0000})) );

  var material = new THREE.ShaderMaterial(pitchMaterialParams);
    material.uniforms.texture1.value = texture1;
    material.uniforms.texture2.value = texture2;
  material.side = THREE.DoubleSide;
    var geometry = new THREE.PlaneGeometry(10, 10);
  var object = new THREE.Mesh(geometry, material);
    scene.add( object );
}

// -------------------- Events -------------------- //
function initEvents() {
    window.addEventListener("resize", onWindowResize);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
}

init();
initObject();
initEvents();
animate();

https://jsfiddle.net/Eketol/ynsLrwg6/

Answer 2

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

Answer 3

This part:

uniforms: THREE.UniformsUtils.merge([{

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

}])

better to keep it simpler:

uniforms: {

  texture1: { value: texture1 },
  texture2: { value: texture2 }

}

And shaders could be like that:

    vertexShader: 
        `
      varying vec2 vUv;

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

     `,
    fragmentShader: 
    `
      varying vec2 vUv;
      uniform sampler2D u_texture1;
      uniform sampler2D u_texture2;

      void main() {
        vec4 col1 = texture2D(u_texture1, vUv);
        vec4 col2 = texture2D(u_texture2, vUv);
        col2 = col2.a > 0.5 ? col2 : vec4(0, 0, 0, 1);
        gl_FragColor = mix( col1, col2, 0.25 );
      }
    `