Shadow contact threejs

[lolia]

Hello community , i have a question about contact shadow in this example
https://threejs.org/examples/webgl_shadow_contact.html
i don’t understand the code , or how it work , so i hope you can help me ,
Also, there is a blur pass on the shadow that might create performances issue??

Thanks !

[prisoner849]

@lolia

i don’t understand the code , or how it work , any thing can help on this to implementing it on my own project , i want to apply this shadow to a gltf model , so i hope you can help me ,

Sounds like “I want something cool, but I don’t want to do anyting for that, so do my job for me”.
Having this example as a base, have you tried to put your gltf model in the scene, instead of those primitives?

@lolia

Also, there is a blur pass on the shadow that might create performances issue??

The example runs at about 30fps on my 7-years-old office machine with built-in Intel graphics.

[Chaser_Code]

The closer the object is to the light source, the less visible the shadow from it.

[lolia]

@prisoner849

Sounds like “I want something cool, but I don’t want to do anyting for that, so do my job for me”.

No i don’t mean that sorry if i miss explain that , i want to understand the base work of it !!!

[lolia]

@prisoner849

The example runs at about 30fps on my 7-years-old office machine with built-in Intel graphics.

Thanks…

[lolia]

@prisoner849

Having this example as a base, have you tried to put your gltf model in the scene, instead of those primitives?

actually i did it ,but as i say i a don’t know how it work , like why i add 2 camera to the scene , then can i make some objects effect by shadow and some objects not effect ??
this the gltf model example

[Fluqz]

I think I remember that everytime you render the contact shadow, all objs are added to a seperate scene with a orthographic camera looking down, the materials of the objs are overwritten with a depthMaterial and a “picture” is taken that basicly looks like a 2D image from above in black and white (objs are black, void is white). The image from the camera is rendered to a RenderTarget which allows you to use it as a texture. The black shapes are very hard edged so they need to be smoothed/blurred to look like a soft shadow. All objs are added back to the origin scene and the texture is applied on a transparent plane that is laying over the ground-plane.

@lolia

then can i make some objects effect by shadow and some objects not effect ??

Yes you can, only the objs in the second scene are used for shadows

Note that this is a fake shadow. Its not possible to apply self shadows on a obj. Its getting already really tricky if you have a wall (more than one plane to show the shadow)

EDIT:

I just saw that I extended the contact shadows script for myself with a second scene. The example uses only one scene… sry for confusion

This is the main part of the example

// remove the background
const initialBackground = scene.background;
scene.background = null;

// force the depthMaterial to all objs in the scene
cameraHelper.visible = false;
scene.overrideMaterial = depthMaterial;

// render to the render target to get the depths as a texture, use second camera from above
renderer.setRenderTarget( renderTarget );
renderer.render( scene, shadowCamera );

// and reset the override material back 
scene.overrideMaterial = null;
cameraHelper.visible = true;

    // Blur texture
blurShadow( state.shadow.blur );

    // a second pass to reduce the artifacts
// (0.4 is the minimum blur amout so that the artifacts are gone)
blurShadow( state.shadow.blur * 0.4 );

// reset and render the normal scene -> No renderTarget anymore. 
renderer.setRenderTarget( null );
scene.background = initialBackground;

    // Render on canvas with default camera
renderer.render( scene, camera );
stats.update();

[lolia]

@Fluqz

I think I remember that everytime you render the contact shadow, all objs are added to a seperate scene with a orthographic camera looking down, the materials of the objs are overwritten with a depthMaterial and a “picture” is taken that basicly looks like a 2D image from above in black and white (objs are black, void is white). The image from the camera is rendered to a RenderTarget which allows you to use it as a texture. The black shapes are very hard edged so they need to be smoothed/blurred to look like a soft shadow. All objs are added back to the origin scene and the texture is applied on a transparent plane that is laying over the ground-plane.

Thank’s for explain , so if the 2D image from abov , if i made the obj hit the plane the shadows is disappear , so can i make it more spread?

[Fluqz]

Have you tried playing around with the blur value? Or try replacing the OrthographicCamera with a PerspectiveCamera, in theory this would make the shadows bigger, but maybe has other effects. I didnt test it

[drcmda]

@prisoner849

Sounds like “I want something cool, but I don’t want to do anyting for that, so do my job for me”.

I agree 100%, though on the other hand, this is also how most people function . Passing blobs of code around that have to be re-purposed in hours of work sucks the fun out of everything, especially if you’re just prototyping ideas. “Do my job” is the root of the module eco system and npm.

I love being able to just do:

import { ContactShadows } from '@react-three/drei'

<ContactShadows />

without having the slightest idea how it works, for instance:

Shoe configurator - CodeSandbox

[prisoner849]

Perfectly agree.

@drcmda

“Do my job” is the root of the module eco system and npm.

And even in this case you have to put some effort into reading the docs and observe some examples to add the things correctly in your project.

[lolia]

i really explain and remove the part that you angry if it < sorry sorry @prisoner849

[prisoner849]

@lolia Don’t worry (be happy) I’m not angry at all.

[lolia]

@Fluqz

Yes you can, only the objs in the second scene are used for shadows

Then after your edit (there is only one scene ) how i can make some objs not effective in the shadow plz ?

[Fluqz]

In the example there is only one scene that holds all objs. That scene with its objects is used to make the contact shadow and is also used to render to screen.
To show shadows of certain objs only, you would need to remove those objs from the scene, before rendering the contact shadows and readd them before rendering to the screen.
Maybe its also possible to make obj.visible = false instead of removing them from the scene.

The render order is as follows:

in loop

← remove/ hide objs
1 - render scene as texture for contact shadows
← add/ show objs
2 - render scene to screen

Or you can make a second scene to switch between the two