web-dev-qa-db-ja.com

Three.jsでアンチエイリアスが機能しない

Three.jsは初めてで、最近多くの作業を開始しています。私はそれを本当に楽しんでおり、いくつかの素晴らしいものを作成しました。しかし、理由はわかりませんが、アンチエイリアスをtrueに設定しても違いはありません。

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

考えられる解決策を検索しましたが、なぜこれが機能しないのかを見つけたり理解したりできないようです。アンチエイリアシングを機能させるために不足しているものや必要なものはありますか？

編集：

この問題の修正に役立ったリンク： https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.htmlhttps://github.com/ mrdoob/three.js/tree/master/examples/js

少し掘り下げましたが、three.jsの開発者はそれをカバーしています！

javascriptthree.jswebglrenderantialiasing
22
zaidi92

WebGLRendererコンストラクターの引数オブ​​ジェクトで使用しているプロパティ名が正しくありません。 ドキュメント によれば、プロパティの名前は'antialias'、not'antialiasing'。

GoogleでテストしましたChrome Mac OSの場合、回転するキューブを備えたデモでエッジのレンダリングに顕著な平滑化がありました。

96
iBorg

プロパティはantialiasと呼ばれ、次のようにアクティブになります。

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

すべてのブラウザでは機能しません。詳細については、この問題を確認してください.

注：
このプロパティは公開されていないため、次のように構築後にアンチエイリアスを設定します。

renderer.antialias = true; // <-- DOES NOT WORK

動作しないでしょう。

16
Wilt

renderer = new THREE.WebGLRenderer（{antialias：true}）; -デスクトップコンプでは動作しますが、ラップトップでは動作せず、ひどい階段が見えます

4
potomek

お使いのコンピューターがデフォルトのWebGL AAをサポートしていない場合、レンダラーサイズとキャンバス幅のサイズを変更すると、FXAAよりもはるかに良い結果が得られます。 CSSが実際の幅と高さの値を保持していることに注意してください。

var w,h = [your prefs];

renderer.setSize(window.innerWidth*2, window.innerHeight*2);

renderer.domElement.style.width = w;
renderer.domElement.style.height = h;
renderer.domElement.width = w*2
renderer.domElement.height = h*2
3
MrX

これは、使用しているブラウザとシステムに依存すると考えています。私の知る限り、Firefoxは現在のところアンチエイリアスをサポートしていません。また、グラフィックカードとドライバーに依存する場合があります。たとえば、古い2009年半ばのMacBook ProではChromeでアンチエイリアスを取得しませんが、新しい2012年後半のマシンではアンチエイリアスを取得します。

また、FXAAシェーダーを使用して、後処理ステップとしてアンチエイリアスを実行することを検討することもできます。後処理 こちら について読むことができます。

0
angryobject