How can I achieve super subtle shading effects in three.js?

Question

How can I achieve super subtle shading effects in three.js?

Is there a way to achieve a very soft and subtle shadow in three.js, similar to the one in this image? https://i.sstatic.net/6B6en.jpg

So far, I have only been able to create something like this:

https://i.sstatic.net/a3rgD.png

Here are my current light settings:

HemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, 0.9);
ambientLight = new THREE.AmbientLight(0xdc8874, 0.5);
shadowLight = new THREE.DirectionalLight(0xffffff, 1);
shadowLight.position.set(5, 20, -5);
shadowLight.castShadow = true;
shadowLight.shadowCameraVisible = true;
shadowLight.shadowDarkness = 0.5;
shadowLight.shadow.camera.left = -500;
shadowLight.shadow.camera.right = 500;
shadowLight.shadow.camera.top = 500;
shadowLight.shadow.camera.bottom = -500;
shadowLight.shadow.camera.near = 1;
shadowLight.shadow.camera.far = 1000;
shadowLight.shadowCameraVisible = true;
shadowLight.shadow.mapSize.width = 4096; // default is 512
shadowLight.shadow.mapSize.height = 4096; // default is 512

And in the rendering section:

renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;

Thank you!

javascript three.js shadow

Answer 1

Answer №1

To reduce the harshness of shadows, adjust the radius in the following manner:

var brightness = new THREE.AmbientLight(0xffffff, 0.2);
brightness.castShadow = true;
brightness.shadow.radius = 8;

Answer 2

To reduce the harshness of shadows, adjust the radius in the following manner:

var brightness = new THREE.AmbientLight(0xffffff, 0.2);
brightness.castShadow = true;
brightness.shadow.radius = 8;

Answer 3

Answer №2

I was intrigued by this issue as well, so I decided to experiment with all the variables I could find. The first significant change occurred during initialization:

shadowLight.shadow.mapSize.width = 2048; // Adjusted to 4K resolution without exceeding 2K

shadowLight.shadow.mapSize.height = 2048; //   -  || -

Next, I tried something different and found that when I set:

shadowLight = new THREE.DirectionalLight(0xffffff(COLOR), 1.75(NEAR should be less than 2), 1000 (FAR should only encompass the range between light and floor));

the shadows blended more smoothly when I also adjusted the position of my directional lights to 250 with:

shadowLight.position.set( 100(X for additional effects), 250(Y above the scene), 0(Z) );

!!!!!!!!!!!!!!!!!Delete the (VAR) parts before using!!!!!!!!!!

Afterwards, I changed these values to match the width of my floor.

d = 1000;
shadowLight.shadow.camera.left = -d;
shadowLight.shadow.camera.right = d;
shadowLight.shadow.camera.top = d;
shadowLight.shadow.camera.bottom = -d;

It's important to do this because if you utilize:

var helper = new THREE.CameraHelper( shadowLight.shadow.camera );

and include it in the render:

scenes.add( shadowLight, helper );

...you will observe the boundaries of your light box, which ideally should align with the width of your scene. I hope this information proves helpful to someone.

Answer 4

I was intrigued by this issue as well, so I decided to experiment with all the variables I could find. The first significant change occurred during initialization:

shadowLight.shadow.mapSize.width = 2048; // Adjusted to 4K resolution without exceeding 2K

shadowLight.shadow.mapSize.height = 2048; //   -  || -

Next, I tried something different and found that when I set:

shadowLight = new THREE.DirectionalLight(0xffffff(COLOR), 1.75(NEAR should be less than 2), 1000 (FAR should only encompass the range between light and floor));

the shadows blended more smoothly when I also adjusted the position of my directional lights to 250 with:

shadowLight.position.set( 100(X for additional effects), 250(Y above the scene), 0(Z) );

!!!!!!!!!!!!!!!!!Delete the (VAR) parts before using!!!!!!!!!!

Afterwards, I changed these values to match the width of my floor.

d = 1000;
shadowLight.shadow.camera.left = -d;
shadowLight.shadow.camera.right = d;
shadowLight.shadow.camera.top = d;
shadowLight.shadow.camera.bottom = -d;

It's important to do this because if you utilize:

var helper = new THREE.CameraHelper( shadowLight.shadow.camera );

and include it in the render:

scenes.add( shadowLight, helper );

...you will observe the boundaries of your light box, which ideally should align with the width of your scene. I hope this information proves helpful to someone.

Answer 5

Answer №3

What you are observing is referred to as Ambient Occlusion. There are several resources available for further exploration, and with this knowledge in hand, you can discover even more. For instance: Exploring ambient occlusion in three.js

Answer 6

What you are observing is referred to as Ambient Occlusion. There are several resources available for further exploration, and with this knowledge in hand, you can discover even more. For instance: Exploring ambient occlusion in three.js

Answer 7

Answer №4

Actually, Ambient Occlusion is specifically the contact shadow between closely positioned meshes. However, if you're looking to achieve soft shadows, there are two methods you can explore:

The first method, which is simpler, involves creating lightmaps within your 3D modeling software. This process essentially bakes shadows (and potentially ambient occlusion, textures, and materials) into a single texture that can be later used in ThreeJS. Keep in mind though, once baked, the objects cannot easily have their shadows adjusted relative to each other.

The second method is demonstrated in the example linked below, although I haven't delved into it much myself:

Good luck with your project! Best regards.

EDIT: Apologies, upon further examination, the F1 car example mentioned still utilizes a lightmap. However, the shadow dynamically follows the car, resulting in a visually appealing effect. You can view the shadow texture being applied here, showcasing the baked nature of the effect:

Answer 8

Actually, Ambient Occlusion is specifically the contact shadow between closely positioned meshes. However, if you're looking to achieve soft shadows, there are two methods you can explore:

The first method, which is simpler, involves creating lightmaps within your 3D modeling software. This process essentially bakes shadows (and potentially ambient occlusion, textures, and materials) into a single texture that can be later used in ThreeJS. Keep in mind though, once baked, the objects cannot easily have their shadows adjusted relative to each other.

The second method is demonstrated in the example linked below, although I haven't delved into it much myself:

Good luck with your project! Best regards.

EDIT: Apologies, upon further examination, the F1 car example mentioned still utilizes a lightmap. However, the shadow dynamically follows the car, resulting in a visually appealing effect. You can view the shadow texture being applied here, showcasing the baked nature of the effect:

Answer 9

Answer №5

I believe that using the drei library provides an effective soft shadow solution.

Check out more information on how to implement soft shadows with https://github.com/pmndrs/drei#softshadows

Answer 10

I believe that using the drei library provides an effective soft shadow solution.

Check out more information on how to implement soft shadows with https://github.com/pmndrs/drei#softshadows

How can I achieve super subtle shading effects in three.js?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Keeping JSP current with changes made to files on the client side

Why does the onBlur event function in Chrome but fails to work in Safari?

Loop through a collection of unique identifiers for documents and establish event listeners in Firestore

Using regular expressions to identify the presence of "&", parentheses, and consecutive letters in a string

Using JavaScript, implement the array.filter method on a JSON array to retrieve the entire array if a specific property matches a given

Error: React-Redux/Jest Invariant Violation - The "store" could not be located

Checking the validity of a date range

What is the best way to showcase the outcomes of a map function in JSX?

Combine several objects into one consolidated object

Loading Data into Array - Angular/Ionic

Creating a personalized JavaScript clock based on a specific time

Tips for properly including my Dialog Flow access token in the environment file within the Angular CLI

Tips on implementing Piwik JavaScript code within app.js on Express

Obtain the identifier of a div within nested HTML components by utilizing jQuery

What potential challenges could arise from granting access to all Controllers to all Data?

`Datatables sorting feature for British date and time`

What are some effective ways to slow down the image transitions in a Javascript slideshow?

Exploring Nashorn's Global Object Variables Through Access and Intercept Techniques

Looking to show the contents of a Rails AJAX JSON response in your application? Having trouble with Javascript displaying [object HTMLDocument] instead? Let

Unable to retrieve JSON data from a PHP file hosted on the server