次世代 3D モデルフォーマット glTF 形式でのエクスポートもサポートしたプロシージャルな樹木のモデル生成デモ
たまにはデモ作品も紹介したい
今回ご紹介するのは、WebGL を利用したプロシージャルな樹木のモデル生成が行えるデモです。
ここのところ、当サイトではずっとウェブサイトとしての事例ばかり紹介する感じでしたが、WebGL が出てきたばかりの頃は、むしろこういったデモとしての WebGL コンテンツがいっぱいありましたよね……
最近ではふつうにウェブサイトで WebGL が演出に使われるようになってきており、こういった実験作の WebGL 事例を紹介するのは久しぶりですが、glTF 対応など、技術的にも面白い内容になっていますのでご紹介します。
glTF 形式のオリジナル・ツリーモデルを作ろう
まず最初に、ご存じない方も多いかと思いますので glTF について簡単に解説します。
glTF は、WebGL や OpenGL を管理している Khronos が公式に普及を目指している 3D フォーマットで、かつて COLLADA と呼ばれていたものの後継ですね。
WebGL の登場を機に、ウェブで利用できる 3D フォーマットの重要性が増してきたことや、複数のツール同士でのデータの連携がより必要性を高めていることなどを踏まえ、中間フォーマットとしての世界標準を設けクリエイターやデベロッパーの負担を軽減していくことが glTF の基本理念だと考えていいでしょう。
3D のモデルデータの読み込みには、それなりに卓越した 3D プログラミングの知識が必要なのですが、glTF が今後普及していけば、そのあたりもかなり簡易に行えるようになっていくのかなと個人的には思っています。
さて、そういった glTF でのエクスポート機能を備える今回のデモですが、操作については難しいことはほとんどありません。自由にパラメータをいじくり回して、オリジナルの木のモデルを生成することができます。
デフォルトの状態では、右側のスライダー群が隠れていると思いますが、画面の右上のところから開閉できます。
ズラッと出てくるパラメータは、一見するとどういう作用を持つものなのかわかりにくい場合も多いかと思いますが、深く考えるよりスライダーを動かしてみれば即座に効果を確認できるでしょう。
ぐいぐいと木の姿が変わっていくので、単純にそれを見ているだけでも楽しいです。
動作はかなり軽快ですね。
まるで枝垂れ桜のような形にすることもできる。
今回のデモでは、glTF をサポートしているからなのか、右側のツールメニューの一番下に現在の頂点の個数なども表示されています。
枝の分岐回数や葉の茂り具合などを変えると、この頂点の個数がダイレクトに変化するので、頂点の個数がこれくらならこのクオリティになるんだな……ということをざっくりと理解するのにもいいかもしれません。
最近の WebGL では数万程度の頂点の個数は割りとサクッと画面に出せてしまいますが、今回の木のモデルのような、背景として設置されるオブジェクトの頂点の個数は結構シビアに考えないといけないケースも多いため、いろいろ感覚を養うのにはいいような気がしました。
色を変えてみたり形を変えてみたり、調整できるパラメータの種類も多く汎用性の高い今回のデモツール。
ダウンロードできる glTF のファイルはバイナリ形式になっています。
glTF にはテキストファイルとセットになったバージョンと、バイナリ単体で完結するバージョンとの両方があるのですが、今回のような単体バイナリファイルなら、テクスチャ用の画像なども全部ひとつにまとまった状態になっていますので、そういった特性から言ってもやはりウェブの中間フォーマットとして優れた規格であることがうかがえますよね。
ダウンロードしたバイナリを開くことができるビューアが無いと手元で開き直して見てみることができないのですが、今後、glTF は多くのツールで標準でサポートされることになると思いますし、three.js などでも対応が進んでいます。
glTF を体験する機会としても、今回のツールは非常に面白いと思います。
ぜひチェックしてみてください。
