CODEWITHSUNDEEP
javascriptthree.jsshadowlight
欧阳维杰
欧阳维杰

Reputation: 1768

How to improve shadow quality in three.js

I have several object in a scene. And I want them moving on a wide plane, which will receive shadows. If I use only one point light or a very large directional light the shadow of a object when it moved to the corner will become very rough (rough shadow edge) . like this: shadow with rough edge

So I’m wondering should I use a light for every object above them and follow them in order to cast a high quality shadow edge? And in some case I can not set the shadow.mapsize higher .

Upvotes: 3

Views: 6242

Answers (1)

manthrax
manthrax

Reputation: 5016

There are a number of things that control shadow quality.

What it looks like to me, is your shadow cameras left / right / top / bottom are set too large, and its casting the shadow over too large an area.

Shadow casting lights are pretty expensive, so I would avoid trying to compensate by having multiple lights.

Try reducing the light.shadow.camera left/right/top/bottom to focus the map better on where you're objects are. Also trying increasing shadowmap size to something like 1024 or 2048 square.

Another thing that helps is to use THREE.PCFShadowmapping instead of the default. That will smooth the edges of your shadows.

edit: Also check out PCFSoftShadowMapping.. slower to render, but greatly smooths shadow edges.

Getting the shadow mapping right is a tricky process and requires a lot of fiddling.

Also, try attaching a DirectionalLightHelper to your light and also a CameraHelper to the lights camera. Those will help you figure out how big the shadow casting area is and where things are pointing.

https://i.sstatic.net/LQz2Z.jpg

Upvotes: 7

Related Questions