Качество теневой тени в Chrome/MacOS?

Я экспериментирую с простой сценой Three.js(новичок в этой области). Я использую веб-приложение Three.js WebGLRenderer и настроил плоскость, куб, который отбрасывает тени и направленный источник света. Результат показан на изображении.

Как я:

1. Повысить качество рендеринга тени?
 2. Избавьтесь от зубчатых краев?

Я установил сглаживание в true, но, похоже, это не помогает в любом браузере...

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

enter image description here

Ответы

Ответ 1

Вы можете сделать две вещи. Сначала установите атрибут renderer

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

а затем вы также можете увеличить размер теневой карты вашего света с помощью:

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