# Extending MeshMatcapMaterial with custom shader

**URL:** https://discourse.threejs.org/t/extending-meshmatcapmaterial-with-custom-shader/7317
**Category:** Questions
**Tags:** textures, shaders, shader-material, fragment-shader
**Created:** [April 30, 2019, 1:17pm UTC](https://discourse.threejs.org/t/extending-meshmatcapmaterial-with-custom-shader/7317 "2019-04-30T13:17:10Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Minh\_Boutin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/minh_boutin/32/5342_2.png) [@Minh\_Boutin](https://discourse.threejs.org/u/Minh_Boutin)
#### Post date: [April 30, 2019, 1:17pm UTC](https://discourse.threejs.org/t/extending-meshmatcapmaterial-with-custom-shader/7317/1 "2019-04-30T13:17:10Z")

</div>

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](https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/meshmatcap_frag.glsl.js)

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 🙂

Minh

---

<div class="post-metadata">

### Author: ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [April 30, 2019, 2:08pm UTC](https://discourse.threejs.org/t/extending-meshmatcapmaterial-with-custom-shader/7317/2 "2019-04-30T14:08:42Z")

</div>

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](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](https://jsfiddle.net/f2Lommf5/).

BTW: There is actually a whole article about extending materials in `three.js`: [https://medium.com/@pailhead011/extending-three-js-materials-with-glsl-78ea7bbb9270](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()](https://threejs.org/docs/index.html#api/en/materials/Material.onBeforeCompile) can also do the trick.