0

I am going through Learning Three.js: The JavaScript 3D Library for WebGL. It is six years old, and written in v69. I decided to try to use the latest version, v105, to familiarize myself with the current API. There haven't been too many changes, but it seems to me that the quality of shadow rendering is less realistic in the latest version.

Comparison of shadow rendering in THREE.js v69 vs. v105

What is the reason for this? And is there a common way of fixing it?

In v69, the code to turn on shadows is:

renderer.shadowMapEnabled = true;

While in v105, it's:

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // This produces a slightly better shadow than the default THREE.PCFShadowMap
Harry Stevens
  • 1,373
  • 1
  • 15
  • 18
  • Check [the docs](https://threejs.org/docs/#api/en/lights/shadows/LightShadow). specifically bias, mapSize and radius (which you would set on the light.shadow.) – 2pha Jun 23 '19 at 00:03
  • 1
    Thanks. Though I had read those docs before posting here. I was not able to find a combination of settings that would produce a decent shadow. – Harry Stevens Jun 23 '19 at 01:36
  • 1
    No idea (though it looks like the shadow map is low-res). [Here are more up to date tutorials](https://threejsfundamentals.org/threejs/lessons/threejs-shadows.html) – gman Jun 23 '19 at 02:06
  • 1
    Possible duplicate of [Three.js - Why is the shadow of these items looking like this?](https://stackoverflow.com/questions/47996510/three-js-why-is-the-shadow-of-these-items-looking-like-this) – Rabbid76 Jun 24 '19 at 11:11
  • 1
    @Rabbid76 Yes, it was. Changing the map size and the angle solved the issue. – Harry Stevens Jun 24 '19 at 20:03

1 Answers1

2

If you're using a SpotLight, then you can change the dimensions of its lightShadow.mapSize. The default is 512x512 (I'm guessing the default was higher in r69), but you can increase its dimensions to whatever you wish with:

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
M -
  • 26,908
  • 11
  • 49
  • 81