# Video Green Scene Shadow

**URL:** <https://discourse.threejs.org/t/video-green-scene-shadow/64644>\
**Category:** Questions\
**Tags:** shadows\
**Created:** [April 26, 2024, 4:08am UTC](https://discourse.threejs.org/t/video-green-scene-shadow/64644 "2024-04-26T04:08:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![shimmer\_wang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shimmer_wang/32/45901_2.png) [@shimmer\_wang](https://discourse.threejs.org/u/shimmer_wang)\
**Post date:** [April 26, 2024, 4:08am UTC](https://discourse.threejs.org/t/video-green-scene-shadow/64644/1 "2024-04-26T04:08:25Z")

</div>

I found an issue while debugging shadows. After deducting the green screen, I found that the shadow is not the shadow of the green screen, but a rectangle. Do I need to make any changes

```javascript
            const texture = new THREE.VideoTexture(this.videoElement)
            texture.minFilter = THREE.LinearFilter
            texture.magFilter = THREE.LinearFilter
            texture.format = THREE.RGBAFormat

            const tempCoverImageColor = this.tempSourceData.backgroundColor
                // Chroma Key 
                const chromaKeyShader = {
                    uniforms: {
                        'tDiffuse': {value: texture},
                        'color': {value: new THREE.Color(tempCoverImageColor.r / 255.0, tempCoverImageColor.g / 255.0, tempCoverImageColor.b / 255.0)},
                        'range': {value: tempCoverImageColor.tolerance / 255.0},
                        'smoothing': {value: 0},
                    },
                    vertexShader: [
                        'varying vec2 vUv;',
                        'void main() {',
                        'vUv = uv;',
                        'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
                        '}'
                    ].join('\n'),
                    fragmentShader: [
                        'uniform sampler2D tDiffuse;',
                        'uniform vec3 color;',
                        'uniform float range;',
                        'uniform float smoothing;',
                        'varying vec2 vUv;',
                        'void main() {',
                        'vec4 texel = texture2D( tDiffuse, vUv );',
                        'if (length(texel.rgb - color.rgb) < range) {',
                        'discard;',
                        '}',
                        'float d = abs(length(texel.rgb - color.rgb));',
                        'float edge = smoothstep(range, range + smoothing, d);',
                        'gl_FragColor = texel * edge;',
                        '}'

                    ].join('\n'),
                    transparent: true,
                    alphaTest: 1,
                    clipping: true
                }
                const chromaKeyMaterial = new THREE.ShaderMaterial(chromaKeyShader)
                this.material = chromaKeyMaterial

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/b/ebb9e26e508369f13255659c10d053cd2316c34e.jpeg)

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [April 26, 2024, 5:08pm UTC](https://discourse.threejs.org/t/video-green-scene-shadow/64644/2 "2024-04-26T17:08:00Z")

</div>

What green screen?  
Are you using the three.js shadow makers?

---

<div class="post-metadata">

**Author:** ![rinzexe](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rinzexe/32/47090_2.png) [@rinzexe](https://discourse.threejs.org/u/rinzexe)\
**Post date:** [April 26, 2024, 5:25pm UTC](https://discourse.threejs.org/t/video-green-scene-shadow/64644/3 "2024-04-26T17:25:21Z")

</div>

as far as i understand the shadows are drawn from the meshes geometry, not texture. you’ll have to find some sort of workaround, for example drawing another plane as the shadow

---

<div class="post-metadata">

**Author:** ![shimmer\_wang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shimmer_wang/32/45901_2.png) [@shimmer\_wang](https://discourse.threejs.org/u/shimmer_wang)\
**Post date:** [April 27, 2024, 3:55am UTC](https://discourse.threejs.org/t/video-green-scene-shadow/64644/4 "2024-04-27T03:55:24Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/9/b9451498bb93d0f4805eba36bacbebdc5b3e425b.jpeg)  
Using directional lights to display shadows

---

<div class="post-metadata">

**Author:** ![shimmer\_wang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shimmer_wang/32/45901_2.png) [@shimmer\_wang](https://discourse.threejs.org/u/shimmer_wang)\
**Post date:** [April 27, 2024, 3:57am UTC](https://discourse.threejs.org/t/video-green-scene-shadow/64644/5 "2024-04-27T03:57:01Z")

</div>

> [@rinzexe](#):
>
> as far as i understand the shadows are drawn from the meshes geometry, not texture. you’ll have to find some sort of workaround, for example drawing another plane as the shadow

Okay, I’ll check the information again to see if there’s a way to implement it. Thank you!

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [April 27, 2024, 4:49pm UTC](https://discourse.threejs.org/t/video-green-scene-shadow/64644/6 "2024-04-27T16:49:29Z")

</div>

Just to make sure, are you displaying the image on a flat plane and have now made the green part invisible? And you have defined the plane to cast shadows - but you want to cast a shadow of only the girl?

There is a material called “Shadow Material”, that is transparent and receives shadows. But it sounds like you want the opposite of that.

The answer may be in [this discussion](https://discourse.threejs.org/t/cast-a-shadow-from-a-semi-transparent-texture/49818).

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 27, 2024, 7:08pm UTC](https://discourse.threejs.org/t/video-green-scene-shadow/64644/7 "2024-04-27T19:08:34Z")

</div>

> [@shimmer\_wang](#):
>
> `alphaTest: 1,`

~~I would try it with `alphaTest: 0.5`, for example.~~ Wrong

As you use `ShaderMaterial` with `discard`, you have to implement the same thing for `MeshDepthMaterial`.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 27, 2024, 9:04pm UTC](https://discourse.threejs.org/t/video-green-scene-shadow/64644/8 "2024-04-27T21:04:15Z")

</div>

Here is a very rough and simplified example, from scratch, of what I mean.  
Video:

Demo: [https://codepen.io/prisoner849/full/NWmmWeG](https://codepen.io/prisoner849/full/NWmmWeG)