Webの新潮流。高品質なWebGL 3Dコンテンツを楽しめる『david.li』の作品 UZUREA編集部 公開:2017年8月6日（7年前） / 更新:2020年7月30日 コメント 0件 クリエイティブWebGLデザイナーデザイン技術 SNS X Facebook Ｂ! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 webサイト上で3D空間や美麗なグラフィックを表現する事ができる技術の規格＝WebGL（ウェブジーエル）。html5同様、webブラウザの対応状況やコンピュータ―の処理能力向上によって、web上のインタラクティブコンテンツによる表現の幅は広がってきています。 そのWebGL使って非常に高品質な実験作品を公開しているのがイギリス ロンドン（※）のクリエイターによるwebサイト『devid.li』です。 devid.liに掲載された作品は、ユーザーがwebブラウザ上でパラメーターを操作する事が可能なインタラクティブなコンテンツとして提供されていおり、それらの作品はそれぞれgithubでソースコードも公開されています。 webの新たな可能性を体験できるコンテンツをいくつかご紹介いたしましょう。 ※同Twitterアカウントの所在地情報より 記事の索引1 流体パーティクル2 ADULT SWiM スープ3 流体ペイント4 ボルテックス スフィア5 その他のコンテンツ まとめ5.1 WebGLを本格的に学びたい方は 流体パーティクル Fluid Particles と名付けられたコンテンツは、ページへアクセスした瞬間にはシンプルな3D空間が表示されます。 空間の壁面にあたる部分でマウスカーソルで一度クリックし、ドラッグする事で矩形が描画されます。マウスボタンを離した後は再度クリックするまで描画した矩形に奥行を付ける事ができます。 一度作成した立体は消したり、動かす事も可能。空間内であれば上下左右、奥手前と、どの壁面からでも構築できます。 あまり深く考えずに、自由に立体物を配置していきましょう。 スペースキーを押しながらドラッグする事でカメラ位置も変更可能です。 存分に立体物を創造したら画面左上の『Start』をクリックすると、作成した立体物達は球状の流体に切り替わります。 そして、各球体は空間の中で重力の影響を受けつつ軽快にバウンドします。 カメラの向きを変えたりしつつ空間内でマウスポインタを動かすことで、球体をかき混ぜたりしながら滑らかな動きを思う存分鑑賞する事ができます。 左上のスライダーでFluidity（流動性）と、Speed（速度）の調整も可能です。 シンプルながら、ついつい眺めて遊んでしまう魅力がある作品。 ３D空間での立体生成や、それぞれの衝突判定。流体化してからの軽快な処理と鮮やかな色彩。UIもシンプルながらストレスを感じない作りになっており、作者の高度なクリエイティブスキルを感じる作品です。 ADULT SWiM スープ Adult Swim Soup は『ADULT SWiM』webサイトに設置された作品です。 表示に従い画面をクリックするとゲル状（？）だった『SOUP』の文字が液体化し、文字の中に漂うキャラクター達も激しく跳ね回ります。 さらに表示に従い画面内をクリックすると、出現する蛇口からスープとキャラクターが勢いよく吹き出します。 左上の『ZOOM』スライダーを右にすると、画面が引いてキャラクターやオブジェクトが小さくなり、さらに大量に表示させる事ができます。 右上の『DRAIN』をクリックすると、スープとキャラクター達は画面の外へと流れ出て消えていきます。 マウスポインタでかき混ぜる事も可能で、Fluid Particlesに似ているコンテンツですがこちらは奥行のない二次元画面での表現です。 ポップなキャラクターと、カラフルなスープ。蛇口から吹き出す意外性のある”しかけ”などで、より驚きと遊び心が感じられる作品です。 流体ペイント Fluid Paint はオイルパステルや油絵で描いたような表現が可能なペイントコンテンツです。 筆の太さや密度、色、やり直し・繰り返しといった必要十分な基本機能は提供されている他、実際に絵の具で描いたような『Natural』と、RGBの画面で行がされたCGのような『Digital』のColorモードを切り替える事も可能です。 Naturalモード Digitalモード 『Save』ボタンを押す事で、描いた画像がPNG形式で表示されるので、右クリックなどでパソコンに保存して置く事も可能です。 ボルテックス スフィア Vortex Spheres は、非常に幻想的なコンテンツです。 画面が表示されると、地面の一部から緑色の流体が吹き上がっていきます。 吹き上がる流体達は時折見え隠れする黄色いライン沿っている様で、時にきのこ雲のようになったりと吹き上がる煙のような動きをシミュレートしていきます。 ユーザーはマウスポインタである程度この流体に干渉する事が出来たり、マウスをドラッグさせる事で観測位置を変更する事ができます。 『Variation』スライダを右にすると流体の骨となる黄色いラインの動きが激しくなり、『Speed』スライダを右にすると速度が速くなります。 さらに、緑の『Drop』ボタンをクリックすると…… 流体達は途端に浮力を失い地面に落ちて散り散りになりますが、その後は再度吹き上がりを始めます。 インテリアー ラバライトのように、いつまでも眺めて呆けてしまう不思議な魅力があるインタラクティブコンテンツです。 その他のコンテンツ まとめ david.liではその他にも、高さや風向きを変えて海の波をの動きをシミュレートできるOcean Wave Simulation。 画像にフーリエ変換に基づいた、視覚フィルターを加える事ができるFourier Image Filtering。 空中で流れ行く粒子の色や数などを変えて鑑賞できるVolumetric Particle Flow といった、いずれも高い品質のコンテンツが公開されています。 今後のWebコンテンツ制作において、重要な要素となるWebGL技術の可能性を感じる事のできるdevid.li の公式webサイト、Twitter、動画チャンネルなどを記載しておきますので、クリエイティブに関わる方も、そうで無い方にも是非一度楽しんでいただきたいと思います。 Official site devid.liTwitter @daviddotligithub dliYouTube ※オフィシャルサイトに掲載されていない作品の紹介動画も有り WebGLを本格的に学びたい方は WebGL関連書籍や、API Three.jsに関する書籍で本格的に学んでみてはいかがでしょうか。
