Quality of Three.js shadow in Chrome/MacOS?

three.js webgl antialiasing
dani picture dani · May 25, 2013 · Viewed 10.4k times · Source

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

Answer

gaitat picture gaitat · May 25, 2013

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;

Related questions

Antialiasing not working in Three.js

I am new to three.js and have starting working with it a lot recently. I really enjoy it and I have created some incredible things. However, I'm unsure why but when setting antialiasing to true I see no difference. …

Read More
How to stop a requestAnimationFrame recursion/loop?

I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame. I initiate it like this: self.animate = function() { self.camera.lookAt(self.scene.position); self.…

Read More
How to detect collision in three.js?

I am using three.js. I have two mesh geometries in my scene. If these geometries are intersected (or would intersect if translated) I want to detect this as a collision. How do I go about performing collision detection with …

Read More