Extending MeshMatcapMaterial with custom shader

Hi there,

I tried to rebuild the MeshMatcapMaterial with a custom shader.
Here was the model I started with: three.js/meshmatcap_frag.glsl.js at dev · mrdoob/three.js · GitHub

My code is here:

var customUniforms = THREE.UniformsUtils.merge([
          { map: { value: matcap } },
          { diffuse: { value: new THREE.Color( 0xFF0000 ) } },
          { opacity: { value: 0.5 } }
        // material
        material = new THREE.ShaderMaterial( {
          vertexShader: THREE.ShaderLib.matcap.vertexShader,
          fragmentShader: THREE.ShaderLib.matcap.fragmentShader,
          uniforms: customUniforms,
          transparent: true,
          flatShading: false
        } );
        material.defines['USE_MATCAP'] = true;
        object = new THREE.Mesh( geometry, material );

So I created a ShaderMaterial using the vertex shader and fragment shader from THREE.ShaderLib and
I also added a customUniforms including the matcap texture.

… But the object stays black, even if the matcap works on an other 3D object without this custom shader.

Could anyone help? Thanks in advance!
Have a nice day :slight_smile:


The following example demonstrates how you extend a built-in material.


In this particular case, MeshLambertMaterial is enhanced so it does support instanced rendering. You should be able to use the same approach for MeshMatcapMaterial.

Please use the mentioned example as a code template. If you have problems adapting the code, please share your progress of work as a live demo.

BTW: There is actually a whole article about extending materials in three.js: https://medium.com/@pailhead011/extending-three-js-materials-with-glsl-78ea7bbb9270

Creating a custom material is not always necessary. Sometimes a code injection via Material.onBeforeCompile() can also do the trick.