CODEWITHSUNDEEP
javascriptthree.jsshadow
chitzui
chitzui

Reputation: 4098

Create very soft shadows in three.js?

is it possible to create a very soft / very subtle shadow in three.js? like on this pic? enter image description here

everything I managed to do so far is this:

enter image description here

My Lights:

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 render:

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

thanks you

Upvotes: 9

Views: 18610

Answers (5)

Bun Wong
Bun Wong

Reputation: 13

I think drei is a good solution of soft shadow

https://github.com/pmndrs/drei#softshadows

Upvotes: -2

Slakinov
Slakinov

Reputation: 341

You can soften shadows by setting radius like this:

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

Upvotes: 10

Roland
Roland

Reputation: 116

I was curious about this too, so i played around with all possible vars i found. The first real change made this one at init: 

shadowLight.shadow.mapSize.width = 2048; // You have there 4K no need to go over 2K

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

Then i tested something other and when i've set:

shadowLight = new THREE.DirectionalLight(0xffffff(COLOR), 1.75(NEAR should in this case under 2), 1000 (FAR should just be the range between light/floor)); the Shadows smothing more out when i set also my directional lights position the 250 with:

shadowLight.position.set( 100(X just for some side effects), 250(Y over the scene), 0(Z) );

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

Then i change this value to the value of my floor width.

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

because if you use this:

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

and put it also in render:

scenes.add( shadowLight, helper );

...you see the box of your light and it should be maxed to your scene width itself i think. Hope it helps someone out.

Upvotes: 5

RayJaKen
RayJaKen

Reputation: 81

Actually that is not Ambient Occlusion. AO is only the contact shadow between 2 meshes which are very close one to each other. What you are looking for, those soft shadows, you can get them in 2 ways:

First one, the easier: creating lightmaps in the 3D software that you use to create your models. That is: baking the shadows (and ambient occlusion too, if you want, and even textures and materials) into 1 texture that you can use later in ThreeJS. BUT: you will not be able to move those objects later... or better said, you will be able to move them, but their shadows will remain in the objects where they were being projected when you baked the lightmap.

The other way is doing something as it is done in this example, but unfortunately I haven't been able to go through it yet and I don't know much about it: http://helloracer.com/webgl/

Good luck with it! Regards.

EDIT: Sorry... the 2nd option, the one with the F1 car, is still a lightmap :( But that shadow is made to follow the car, so the effect is quite nice at the end. Here you have the shadow being used, it is all baked, not real-time calculated: http://helloracer.com/webgl/obj/textures/Shadow.jpg

Upvotes: 1

Hectate
Hectate

Reputation: 212

What you're looking at is called Ambient Occlusion. There are a few things already available to look at, and you can probably find more now that you know what to search for. For example: Ambient occlusion in threejs

Upvotes: 3

Related Questions