Qualität von Three.js Schatten in Chrome/MacOS?

Ich experimentiere mit einer einfachen Three.js Szene (Novize in diesem Bereich). Ich benutze den Three.js WebGLRenderer und habe eine Ebene, einen Würfel, der Schatten und eine gerichtete Lichtquelle erzeugt. Das Ergebnis wird im Bild angezeigt.Qualität von Three.js Schatten in Chrome/MacOS?

Wie kann ich:

1. Erhöhen Sie die Qualität der Schatten-Rendering?
2. Die gezackten Kanten loswerden?

ich das Anti-Aliasing auf true gesetzt haben, aber es scheint nicht in jedem Browser ...

zu helfen

Renderer = new THREE.WebGLRenderer ({Anti-Aliasing: true});

enter image description here

Quelle

2013-05-25 dani

können Sie zwei Dinge tun. Erster Satz ein Renderer Attribut

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

und dann können Sie auch mit der ShadowMap Größe Ihres Licht erhöhen:

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

Quelle

2013-05-25 18:19:03 gaitat

Die shadowMapType war hilfreich, danke! Das Erhöhen der shadowMap-Dimensionen hat keine Auswirkungen. Irgendeine Idee an den gezackten Rändern? Die Szene, die doppelt so groß ist wie das Canvas-Element, scheint ein wenig zu helfen. – dani

Die Einstellung der Antialias auf True sollte einen Unterschied gemacht haben. Aber als letzten Ausweg können Sie auch den effectFXAA ShaderPass ausprobieren, von dem Sie Implementierungen im Ordner examples sehen können. Es gibt mehrere (webgl_lines_colors.html, webgl_geometry_text.html) – gaitat

Das Anpassen der Abmessungen der Schattenkamera sollte ebenfalls hilfreich sein. Sie sollten den View-Frustum der Shadow-Kamera so klein wie möglich halten, damit er Ihre Szene kaum enthält. Auf diese Weise nutzen Sie die verfügbare Auflösung und Tiefenauflösung. shadowCameraNear und shadowCameraFar wären die ersten Verdächtigen. Im Falle von gerichteten Lichtern gab es auch etwas wie shadowCameraLeft, top, right, bottom usw. – yaku

Qualität von Three.js Schatten in Chrome/MacOS?

Antwort

Verwandte Themen