Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

Three.js アンチエイリアス(antialias)

今回は、Three.jsの「アンチエイリアス(antialias)の設定」について書きたいと思います。


アンチエイリアスとは、物体の輪郭がギザギザになることを抑える処理のことです。
さらに詳しく、知りたい人はこちらのWikipediaを見てください。
アンチエイリアス - Wikipedia


アンチエイリアスを書く部分は、レンダラーオブジェクトの生成のところです。

//レンダラーオブジェクトの生成
 var renderer = new THREE.WebGLRenderer({antialias: true});             

この「antialias:」のところがThree.jsのアンチエイリアスの部分です。


「antialias: true」にすると、アンチエイリアスが有効になります。
こんな感じです。

//レンダラーオブジェクトの生成
 var renderer = new THREE.WebGLRenderer({antialias: true});             

有効にすると、物体の輪郭が滑らかになります。
アンチエイリアスを有効にすると計算量が増え、動作が重くなる場合があります。


「antialias: false」にすると、アンチエイリアスを無効にできます。
こんな感じです。

//レンダラーオブジェクトの生成
 var renderer = new THREE.WebGLRenderer({antialias: false});             

無効にすると、物体の輪郭がギザギザはになります。



写真で違いを比べてみます。
①はアンチエイリアス無効で、②がアンチエイリアス有効の写真です。
分かりやすくするために、赤丸をいれています。

①「antialias: false」アンチエイリアス:無効
f:id:gupuru:20131209213537p:plain

②「antialias: true」 アンチエイリアス:有効
f:id:gupuru:20131209213536p:plain

①のほうは、輪郭がギザギザになっているのが分かります。
②は、輪郭が①より滑らかになっています。多少、ギザギザは残っている感はありますけど(笑)


ちょっとした小ネタ?ですけど、1回、試してみる価値はあると思います。


これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!

広告を非表示にする