Extending MeshMatcapMaterial with custom shader

Questions
, , ,
1

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([
          THREE.ShaderLib.matcap.uniforms,
          { 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:

Minh

2

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

https://rawcdn.githack.com/mrdoob/three.js/r114/examples/webgl_buffergeometry_instancing_lambert.html

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.

4 Likes