Adult Swim に掲載されている驚きの物理演算系 WebGL デモ! Elastic Man がすごい!

doxas : 2017-11-28 14:03:21

WebAssembly を利用した高速処理も

今回ご紹介するのは、これまでにも驚きの WebGL デモを多数掲載してきた Adult Swim のウェブサイトです。

毎回毎回、ちょっとそう簡単には真似出来ないようなすごいデモが登場することでおなじみの Adult Swim のサイトですが、今回のやつも、ちょっと半端じゃない内容になっています。

WebAssembly を用いるなど、技術的にもかなり挑戦的な内容になっており、明らかにこれまでのウェブの体験を超えてくる大きな驚きが感じられると思います。

公開直後からひっきりなしにそこらじゅうで話題になっていたので、既にご覧になった方も多いかもしれませんが、ご紹介しようと思います。

とにかく触ってみてほしい、そんなサイト

今回のサイトは、あまりごちゃごちゃと言うよりもまずは触ってみてもらえれば全部伝わる、という感じのサイトです。

キャプチャ画像を一応掲載しますが、正直言って実際にサイトに行って触ってみるのが一番です。

非常にスムーズで、驚くほどリアリティのある本物志向のオブジェクトの動きに思わず声が出てしまうと思います。効果音の若干生々しいくらいの演出も相まって、本当に衝撃的な印象を抱かされますね。

画面のロードが完了すると、ちょうど中央部分に男性の顔のモデルが現れます。

マウスカーソルの位置に向かって瞳だけが追従するような感じで、ちょっと驚いたような、そんな表情。

そんな顔のモデルの、頬の部分など地肌が出ている部分はドラッグ操作を行うことでつかむことができるようになっています。マウスのボタンを押した瞬間に、グッと肌をつかんだような演出が入り、そのままボタンをホールドしながらカーソルを動かすと……

ご覧のとおり、見事に引っ張られて変形します。

まるで水風船というか、結構分厚い目のゴムの袋を引っ張っているかのような、そんな動き方をするのですが、これがなんともリアルです。

もちろん、強く引っ張ることもできますし、たぶん誰もがやると思いますが、かなりグリグリと画面中を引っ張り回しても物理的に破綻したような結果にはならないですね。

またマウスのボタンのホールドを解除したときの、反動でビターンって感じで戻っていくところも本当にリアルです

私はあまり WebAssembly には詳しくないのでこれは憶測で書く感じになってしまうのですが、恐らく顔のモデルを生成するプロセスに、WASM が使われているのかなと思いますね。

物理演算のリアルタイムの処理は、テクスチャを利用した GPGPU でガリガリ処理しているものと思われます。

使っているシェーダの量も普通じゃないですし、なにより多分、ほとんどがスクラッチな実装によって動いていると思います。

ここのところライブラリを使った事例ばかりを紹介していたので、久々に化物じみたピュア WebGL 実装を見て感激で震えが来ました……

今回のデモを制作したのは、これまでにも物理演算や流体のアルゴリズムを使った大量のパーティクルを用いたデモなどで世界を震撼させてきた @daviddotli さんです。

今回のデモはこれまでのものとはちょっと風合いこそ違いますが、やはりその内容は良い意味で、他者を置き去りにする素晴らしい内容になっていると思います。

WebAssembly による処理の詳細が私は全然わからなくて、ちょっと勉強してみようって気持ちにさせられました。やはり、素晴らしい作品を目にすることは、とても刺激になりますね。

一応デモ実行中の画面右上に、クオリティを変更するためのボタンなども用意されていますが、基本的に負荷が高めのデモだとは思いますので、ぜひハイエンドな環境でご覧いただくことをおすすめします。

ぜひ実物をチェックしてみてください。

リンク:

Adult Swim - Elastic Man

share

follow us in feedly

search

search

monthly

sponsor

social