Webの新潮流。高品質なWebGL 3Dコンテンツを楽しめる『david.li』の作品

執筆: UZUREA編集部 アイコン UZUREA編集部

この記事をSNSでシェア

webサイト上で3D空間や美麗なグラフィックを表現する事ができる技術の規格=WebGL(ウェブジーエル)。html5同様、webブラウザの対応状況やコンピュータ―の処理能力向上によって、web上のインタラクティブコンテンツによる表現の幅は広がってきています。

そのWebGL使って非常に高品質な実験作品を公開しているのがイギリス ロンドン(※)のクリエイターによるwebサイト『devid.li』です。

devid.liに掲載された作品は、ユーザーがwebブラウザ上でパラメーターを操作する事が可能なインタラクティブなコンテンツとして提供されていおり、それらの作品はそれぞれgithubでソースコードも公開されています。

webの新たな可能性を体験できるコンテンツをいくつかご紹介いたしましょう。

※同Twitterアカウントの所在地情報より

スポンサーリンク

流体パーティクル

Fluid Particles と名付けられたコンテンツは、ページへアクセスした瞬間にはシンプルな3D空間が表示されます。

devid-li-fluid01

空間の壁面にあたる部分でマウスカーソルで一度クリックし、ドラッグする事で矩形が描画されます。マウスボタンを離した後は再度クリックするまで描画した矩形に奥行を付ける事ができます。

devid-li-fluid02

一度作成した立体は消したり、動かす事も可能。空間内であれば上下左右、奥手前と、どの壁面からでも構築できます。

devid-li-fluid03

あまり深く考えずに、自由に立体物を配置していきましょう。

devid-li-fluid04

スペースキーを押しながらドラッグする事でカメラ位置も変更可能です。

devid-li-fluid05

存分に立体物を創造したら画面左上の『Start』をクリックすると、作成した立体物達は球状の流体に切り替わります。

devid-li-fluid06

そして、各球体は空間の中で重力の影響を受けつつ軽快にバウンドします。

devid-li-fluid07

カメラの向きを変えたりしつつ空間内でマウスポインタを動かすことで、球体をかき混ぜたりしながら滑らかな動きを思う存分鑑賞する事ができます。

左上のスライダーでFluidity(流動性)と、Speed(速度)の調整も可能です。

devid-li-fluid08

シンプルながら、ついつい眺めて遊んでしまう魅力がある作品。

3D空間での立体生成や、それぞれの衝突判定。流体化してからの軽快な処理と鮮やかな色彩。UIもシンプルながらストレスを感じない作りになっており、作者の高度なクリエイティブスキルを感じる作品です。

ADULT SWiM スープ

Adult Swim Soup は『ADULT SWiM』webサイトに設置された作品です。

devid-li-adultswim01

表示に従い画面をクリックするとゲル状(?)だった『SOUP』の文字が液体化し、文字の中に漂うキャラクター達も激しく跳ね回ります。

devid-li-adultswim02

さらに表示に従い画面内をクリックすると、出現する蛇口からスープとキャラクターが勢いよく吹き出します。

devid-li-adultswim03

左上の『ZOOM』スライダーを右にすると、画面が引いてキャラクターやオブジェクトが小さくなり、さらに大量に表示させる事ができます。

devid-li-adultswim05

右上の『DRAIN』をクリックすると、スープとキャラクター達は画面の外へと流れ出て消えていきます。

devid-li-adultswim04

マウスポインタでかき混ぜる事も可能で、Fluid Particlesに似ているコンテンツですがこちらは奥行のない二次元画面での表現です。

ポップなキャラクターと、カラフルなスープ。
蛇口から吹き出す意外性のある”しかけ”などで、より驚きと遊び心が感じられる作品です。

流体ペイント

Fluid Paint はオイルパステルや油絵で描いたような表現が可能なペイントコンテンツです。

devid-li-paint01

筆の太さや密度、色、やり直し・繰り返しといった必要十分な基本機能は提供されている他、実際に絵の具で描いたような『Natural』と、RGBの画面で行がされたCGのような『Digital』のColorモードを切り替える事も可能です。

devid-li-paint02natural

Naturalモード

devid-li-paint02digital

Digitalモード

『Save』ボタンを押す事で、描いた画像がPNG形式で表示されるので、右クリックなどでパソコンに保存して置く事も可能です。

ボルテックス スフィア

Vortex Spheres は、非常に幻想的なコンテンツです。

画面が表示されると、地面の一部から緑色の流体が吹き上がっていきます。

devid-li-vortexspheres01

吹き上がる流体達は時折見え隠れする黄色いライン沿っている様で、時にきのこ雲のようになったりと吹き上がる煙のような動きをシミュレートしていきます。

ユーザーはマウスポインタである程度この流体に干渉する事が出来たり、マウスをドラッグさせる事で観測位置を変更する事ができます。

devid-li-vortexspheres02

『Variation』スライダを右にすると流体の骨となる黄色いラインの動きが激しくなり、『Speed』スライダを右にすると速度が速くなります。

devid-li-vortexspheres03

更に、緑の『Drop』ボタンをクリックすると……

devid-li-vortexspheres04

流体達は途端に浮力を失い地面に落ちて散り散りになりますが、その後は再度吹き上がりを始めます。

インテリアー ラバライトのように、いつまでも眺めて呆けてしまう不思議な魅力があるインタラクティブコンテンツです。

その他のコンテンツ まとめ

david.liではその他にも、高さや風向きを変えて海の波をの動きをシミュレートできるOcean Wave Simulation

devid-li-waves01

画像にフーリエ変換に基づいた、視覚フィルターを加える事ができるFourier Image Filtering

devid-li-fourierimagefiltering01

空中で流れ行く粒子の色や数などを変えて鑑賞できるVolumetric Particle Flow

devid-li-flow01

といった、いずれも高い品質のコンテンツが公開されています。

今後のWebコンテンツ制作において、重要な要素となるWebGL技術の可能性を感じる事のできるdevid.li の公式webサイト、Twitter、動画チャンネルなどを記載しておきますので、クリエイティブに関わる方も、そうで無い方にも是非一度楽しんでいただきたいと思います。

WebGLを本格的に学びたい方は

WebGL関連書籍や、API Three.jsに関する書籍で本格的に学んでみてはいかがでしょうか。

スポンサーリンク
記載内容につきまして

掲載記事に関しまして

当サイトの掲載記事は、UZUREA.NETスタッフやパートナーライターの主観によって執筆しています。内容については、実際の事象やスペック、用途と異なる場合がございます。
また記載する製品やサービスの内容が正式スペックや保証範囲の適用外となる場合もありますので、あらかじめご了承ください。

この記事をSNSでシェア