# Custom shader does not interact with light

**URL:** <https://discourse.threejs.org/t/custom-shader-does-not-interact-with-light/24301>\
**Category:** Questions\
**Tags:** materials, shaders\
**Created:** [March 12, 2021, 12:08am UTC](https://discourse.threejs.org/t/custom-shader-does-not-interact-with-light/24301 "2021-03-12T00:08:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Henrique\_Barone](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/henrique_barone/32/16129_2.png) [@Henrique\_Barone](https://discourse.threejs.org/u/Henrique_Barone)\
**Post date:** [March 12, 2021, 12:08am UTC](https://discourse.threejs.org/t/custom-shader-does-not-interact-with-light/24301/1 "2021-03-12T00:08:29Z")

</div>

Hello,

I spent a lot of time studying examples of how to use onBeforeCompile, in this forum and this guide ([Extending three.js materials with GLSL](https://medium.com/@pailhead011/extending-three-js-materials-with-glsl-78ea7bbb9270)), but I still don’t quite understand how the Replace works.  
I made this fiddle with chromakey shader [Based on this example](https://sbcode.net/threejs/webcam/) using a phongMaterial to demonstrate the expected result  
[chromakey shader from webcam](https://jsfiddle.net/hbarone/yp63uewk/117/)  
The shader material code:

```
    chromakeyMaterial = new THREE.MeshPhongMaterial( { 
    		// color: 0x4080ff,
        map: webcamTexture,
        dithering: true,
        transparent: true,
        side: THREE.DoubleSide,
        //uniforms: THREE.UniformsLibs.Light
        //fog: true
     } );
     
   
     chromakeyMaterial.onBeforeCompile = shader => { 
        //shader.uniforms.time = { value: 0 };
        shader.uniforms.keyColor = { value: [0.0, 1.0, 0.0] };
        shader.uniforms.similarity = { value: 0.77 };
        shader.uniforms.smoothness = { value: 0.0 };

        shader.vertexShader = 'varying vec2 vUv;\n' + shader.vertexShader;
        shader.vertexShader = shader.vertexShader.replace(
          '#include <map_fragment>'
         );
         
        shader.fragmentShader = `
            uniform vec3 keyColor;
            uniform float similarity;
            uniform float smoothness;
            uniform vec2 vUv;
            uniform sampler2D map;
        ` + shader.fragmentShader;
        shader.fragmentShader = shader.fragmentShader.replace(
          '#include <map_fragment>',
           [
             ` vec4 videoColor = texture2D(map, vUv);

             float Y1 = 0.299 * keyColor.r + 0.587 * keyColor.g + 0.114 * keyColor.b;
             float Cr1 = keyColor.r - Y1;
             float Cb1 = keyColor.b - Y1;

             float Y2 = 0.299 * videoColor.r + 0.587 * videoColor.g + 0.114 * videoColor.b;
             float Cr2 = videoColor.r - Y2;
             float Cb2 = videoColor.b - Y2;

             float blend = smoothstep(similarity, similarity + smoothness, distance(vec2(Cr2, Cb2), vec2(Cr1, Cb1)));
             gl_FragColor = vec4(videoColor.rgb, videoColor.a * blend);
         }`
           ].join( '\n' )
         );

```

};

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 12, 2021, 12:54pm UTC](https://discourse.threejs.org/t/custom-shader-does-not-interact-with-light/24301/2 "2021-03-12T12:54:16Z")

</div>

> [@Henrique\_Barone](#):
>
> […] how the Replace works. […]

Since shaders are just strings in js - `shader.replace` behaves like [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace).

Because of that, keep in mind that this line of yours:

```js
shader.vertexShader = shader.vertexShader.replace('#include <map_fragment>');

```

will replace `#include <map_fragment>` with `undefined` in the shader. Which may cause syntax errors.