ボリュームレンダリングをあの three.js で実現した面白い試み LEBARBA

doxas : 2014-11-21 15:31:47

3DCG の手法の一つボリュームレンダリング

3DCG には様々なテクニック、様々な実現手法があります。

また、それぞれの手法ごとに、どういった用途に適しているのかなどが違っています。

3DCG の技術が利用されるのは、何もゲームやデモばかりではありません。医療や建築の現場などで利用されている 3D の技術では、今回紹介するようなボリュームレンダリングが利用される場合も多くあるでしょう。

若干負荷は高めですが、WebGL でボリュームレンダリング実装がされているケースは珍しいので、気になる方はぜひチェックしてみてください。

three.js で実装されているという点がユニーク

個人的には、このボリュームレンダリングの実装に three.js が使われているのがユニークだなと感じます。

もし仮に、自分でボリュームレンダリングを実装しないといけないとしたら、やっぱりライブラリはあまり利用せずに書くような気がします。そこをあえて three.js を利用して作られているという点で、three.js を利用している人たちにとっては特殊な実装例として参考になるのではないでしょうか。

盆栽をボリュームレンダリングした様子です。

右上のほうにはメニューが出ていますので、そこからいくつかの設定を変更することもできます。

ちなみに、そもそもボリュームレンダリングというのはなんなの? という疑問を持っている人もいるかもしれません。実は、今回紹介するサイトには、そのあたりの解説も結構しっかり出ています。

ただし……

ぜんぶ英語ですけど(笑)

図式や、実際のコードなどを交えて書かれているので非常に参考になるでしょう。

一般に、WebGL で通常行われる 3D のレンダリングではポリゴンによってモデルが形成されますが、これはハリボテのように中身がスカスカです。

ゲームなどで、ポリゴンモデルの中身に誤って視点が入ってしまうトラブルなど、誰もが一度くらいは体験したことがあると思いますが、ポリゴンモデルはあくまでも面で立体を表現するため、中身に関する情報は持っていないわけです。

ボリュームレンダリングはその名の通り、オブジェクトなどがどのような密度を持っているのか、それを考慮したレンダリングが行えます。

ボリュームレンダリングであれば、中身が詰まっているオブジェクトは断面を見てもちゃんと中身がどうなっているのかわかるようになります。そのような特徴を持っていることもあり、医療の現場などでは特に重宝される 3DCG の技術です。

ボリュームレンダリングが気になる方は今回のサイトをチェックしてみると、いろいろな点で参考になるのではないでしょうか。

リンク:

LEBARBA

share

follow us in feedly

search

search

monthly

sponsor

social