10
Sto sperimentando una semplice scena Three.js (principiante in quest'area). Sto utilizzando il WebGLRenderer Three.js e ho impostato un piano, un cubo che proietta ombre e una sorgente di luce direzionale. Il risultato è mostrato nell'immagine.Qualità dell'ombra Three.js in Chrome/MacOS?
Come faccio:
1. Aumentare la qualità del rendering ombra?
2. Eliminare i bordi frastagliati?
Ho impostato l'antialiasing al vero, ma non sembra aiutare in qualsiasi browser ...
renderer = new THREE.WebGLRenderer ({antialias: true});
La shadowMapType è stato utile, grazie! Aumentare le dimensioni shadowMap non ha alcun effetto. Qualche idea sui bordi frastagliati? Rendere la scena due volte più grande dell'elemento canvas sembra aiutare un po '. – dani
L'impostazione dell'antialias su true avrebbe dovuto fare la differenza. Ma come ultima risorsa puoi anche provare l'effetto FXAA ShaderPass di cui puoi vedere le implementazioni nella cartella degli esempi. Ce ne sono diversi (webgl_lines_colors.html, webgl_geometry_text.html) – gaitat
Anche la regolazione delle dimensioni della telecamera ombra dovrebbe essere d'aiuto. Dovresti limitare il raggio d'azione della camera d'ombra al più piccolo possibile, in modo che contenga a malapena la scena. In questo modo puoi sfruttare la risoluzione e la risoluzione di profondità disponibili. shadowCameraNear e shadowCameraFar sarebbero i primi sospettati. Nel caso delle luci direzionali, c'era anche qualcosa come shadowCameraLeft, in alto, a destra, in basso ecc. – yaku