17

I am experimenting with a simple Three.js scene (novice in this area). I am using the Three.js WebGLRenderer and have set up a plane, a cube that casts shadows and a directional light source. The result is shown in the image.

How do I:

1. Increase the quality of the shadow rendering?
2. Get rid of the jagged edges?

I have set the antialiasing to true but it does not seem to help in any browser ...

renderer = new THREE.WebGLRenderer({ antialias: true});

enter image description here

gman
  • 100,619
  • 31
  • 269
  • 393
dani
  • 4,880
  • 8
  • 55
  • 95

2 Answers2

32

You can do two things. First set a renderer attribute 

renderer.shadowMapType = THREE.PCFSoftShadowMap; // options are THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap

and then you can also increase the shadowmap size of your light with:

light.shadowMapWidth = 1024; // default is 512
light.shadowMapHeight = 1024; // default is 512

And now r104 version : 

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
김태은
  • 107
  • 1
  • 1
  • 10
gaitat
  • 12,449
  • 4
  • 52
  • 76
  • The shadowMapType was helpful, thanks! Increasing the shadowMap dimensions has no effect. Any idea on the jagged edges? Making the scene twice the size of the canvas element seems to help a bit. – dani May 25 '13 at 18:27
  • Setting the antialias to true should have made a difference. But as a last resort you can also try the effectFXAA ShaderPass of which you can see implementations in the examples folder. There are several (webgl_lines_colors.html, webgl_geometry_text.html) – gaitat May 25 '13 at 19:50
  • 1
    Adjusting the dimensions of the shadow camera should also help. You should limit the view frustum of the shadow camera to as small as possible, so that it just barely contains your scene. This way you take advantage of the available resolution and depth resolution. shadowCameraNear and shadowCameraFar would be the first suspects. In the case of directional lights, there was also something like shadowCameraLeft, top, right, bottom etc. – yaku May 25 '13 at 20:34
  • renderer.shadowMapType = THREE.PCFSoftShadowMap; helps but it makes the render really slow. – CCamilo Aug 02 '18 at 14:27
  • its now light.shadow.mapSize.x and light.shadow.mapSize.y – Philipp Sokolov Nov 22 '22 at 15:28
10

Another thing you could do is to increase the width/height of the segments of the object that receives the shadow.

For instance, change this: 

var plane = new THREE.PlaneGeometry( 1000, 1000, 10, 10);

by this:

var plane = new THREE.PlaneGeometry( 1000, 1000, 100, 100);

Results:

Pixelated Smoothed

Salva Carrión
  • 510
  • 6
  • 16
  • I didn't notice any difference when making this change. Also, is the shadow calculating per vertex or per pixel? If the latter, number of plane segments wouldn't matter. – rich.e Jan 18 '22 at 16:07
  • @rich.e it only matters when using Lambert material where lighting is computed at vertex shader level. In Phong or Standard(Physical) materials adding more segments won't make a difference – Pawel May 03 '22 at 17:51