先日 Version 3 がリリースされた Babylon.js を利用！日本人作者による WebGL の小作品が面白い

doxas : 2017-09-04 14:09:43

オリジナルの小惑星をデザインできる

今回ご紹介するのは、いわゆる実験的な小さなデモ作品。

日本ではあまり利用されているのを見かけないのですが、WebGL を利用したライブラリとして著名な Babylon.js を使った作品になります。

作者は日本の方で、当サイトでも何度かその作品やサイトをご紹介したことがあります。

今回の作品は本当に実験作のような感じで、デモがぽつりと置かれているだけなのですが、Babylon.js の作例として、またちょっと面白い WebGL の作品として、ぜひご覧になってみていただきたい出来栄えです。

今回の作品は、暗い空間のなかにぼんやりと光るような感じで、ひとつの球体が置かれているシーンからスタートします。

画面内には、控えめにふたつのボタンが置かれていて、自由にモードの切替が可能です。初期状態だと「FILL」と書かれたボタンのほうがアクティブになっていて、このモードでは、球体に陸地を生成することができます。

緑色の単なる球体にしか見えないと思うのですが、マウスでこの球体の上をなぞるようにしてやると、モコモコと地面が盛り上がってきて陸地が生成されます。

陸地は法線方向の高さに対して性質が変化するようになっていて、一定以上の高さになると、自然と樹が生えてくるという面白い演出もなされています。

自由に思うがままに陸地を生成することができ、適当にガシガシとマウスを動かしているだけでも本当に面白いですね。

そして先程もちょっと触れたように、左下のボタンを押してやればモードの切替が可能で、地面を逆に平坦に戻していくこともできます。

最初の印象だと、単なる緑色の球体のように見えるかなと思うのですが……

ひとたび地形を生成してみると、実は緑色に見えていた表面の部分が、水面を模したものであったことがわかります。

遠巻きにキャプチャした画像だとわかりにくいかもしれませんが、緑色の一番外側にある球体の部分は実は半透明になっているんですね。

微妙に、背景が透けて見えるようになっています。

この水面の下から地面が盛り上がってくるような演出によって、より立体的な、地面っぽい「陸地感」が演出できているのだと思います。

Babylon.js は Microsoft 謹製の WebGL 用フレームワークで、最近のバージョンアップで物理ベースのマテリアルモードが追加されるなど、積極的に開発が進められています。

日本では残念ながら利用例が少ないのですが、海外ではかなり知名度もあります。今回紹介した作品も、海外の方たちのほうがむしろ熱心に反応している様子が見受けられました。

ぜひ日本でも、どんどん Babylon 使いが増えていってほしい……という思いもあって今回はご紹介させていただいた形です。