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

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

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

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

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