Chrome/MacOSのThree.jsシャドウの品質？

私は単純なThree.jsシーン（このエリアの初心者）を試しています。私はThree.js WebGLRendererを使用しています。プレーン、シャドウを投影するキューブ、指向性光源を設定しました。結果が画像に表示されます。Chrome/MacOSのThree.jsシャドウの品質？

はどのようにします：

1.影のレンダリングの品質を向上させますか？
2.ギザギザのエッジを取り除きますか？私がtrueにアンチエイリアスを設定しているが、どのブラウザで助けていないようです...

レンダラ=新しいTHREE.WebGLRenderer（{アンチエイリアス：真}）

。

enter image description here

出典

2013-05-25 dani

あなたは2つのことを行うことができます。まず、レンダラ属性

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

を設定し、あなたもあなたと光のシャドウマップのサイズを大きくすることができます

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

出典

2013-05-25 18:19:03 gaitat

shadowMapTypeは、おかげで便利でした！ shadowMapディメンションを大きくしても効果はありません。ギザギザのエッジのアイデア？キャンバス要素の2倍の大きさのシーンを作ることは少し助けになるようです。 – dani

アンチエイリアスをtrueに設定すると違いが生じたはずです。しかし、最後の手段として、examplesFinder内の実装を見ることができるeffectFXAA ShaderPassを試すこともできます。いくつかあります（webgl_lines_colors.html、webgl_geometry_text.html）。 – gaitat

シャドーカメラの寸法を調整することも役立ちます。シャドーカメラの視野錐台はできるだけ小さくして、シーンをほとんど含まないようにする必要があります。このようにして、使用可能な解像度と深度の解像度を利用できます。 shadowCameraNearとshadowCameraFarが最初の被疑者になります。指向性の照明の場合は、shadowCameraLeft、top、right、bottomなど – yaku

Chrome/MacOSのThree.jsシャドウの品質？

答えて

関連する問題