私は three.js を初めて使用し、最近頻繁に作業を開始しています。私はそれを本当に楽しんでおり、いくつかの素晴らしいものを作成しました。ただし、理由はわかりませんが、アンチエイリアスを true に設定しても違いはありません。
renderer = new THREE.WebGLRenderer({ antialiasing: true });
可能な解決策を探しましたが、これが機能しない理由を見つけたり理解したりできないようです。アンチエイリアシングを機能させるために不足している、または必要なものはありますか?
編集：
この問題の修正に役立つリンク: https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html https://github.com/mrdoob/three.js/tree/master/examples /js
少し掘り下げましたが、three.js の開発者はそれをカバーしています!
WebGLRendererコンストラクターの引数オブジェクトで使用しているプロパティ名が正しくありません。ドキュメントによると、プロパティの名前は'antialias'ではなく 'antialiasing'である必要があります。
Mac OS の Google Chrome でテストしたところ、回転する立方体のデモでエッジのレンダリングが顕著に滑らかになりました。
プロパティが呼び出され、次のantialiasようにアクティブ化されます。
renderer = new THREE.WebGLRenderer({ antialias: true });
すべてのブラウザーで機能するとは限りません。詳細については、この問題を確認してください。
注:
プロパティは公開されていないため、次のように構築後にアンチエイリアスを設定します。
renderer.antialias = true; // <-- DOES NOT WORK
動作しないでしょう。
renderer = new THREE.WebGLRenderer( { antialias: true } );
上記は私のデスクトップ コンピューターでは動作しますが、ラップトップでは動作しないようです。
これは、使用しているブラウザとシステムに依存すると思います。私の知る限り、Firefox は現在アンチエイリアスをまったくサポートしていません。また、グラフィック カードとドライバに依存する場合もあります。たとえば、古い 2009 年半ばの MacBook Pro の Chrome ではアンチエイリアシングが得られませんが、2012 年後半の新しいマシンではアンチエイリアシングが得られます。
また、FXAA シェーダーを使用して、後処理ステップとしてアンチエイリアシングを行うことを検討することもできます。ここで後処理について読むことができます。