Video Green Scene Shadow

Questions
1

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

            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
image827Ă—964 82 KB

2

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

3

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

4

image
image613Ă—892 80.1 KB

Using directional lights to display shadows

5

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

6

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.

1 Like
7

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.

8

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

Demo: https://codepen.io/prisoner849/full/NWmmWeG

2 Likes