透き通る空気感とやわらかな質感が見事な OFF+BRAND. 公開の Clearwater Wellness のウェブサイト
都市開発計画のデモサイト
今回ご紹介するのは、OFF+BRAND. というスタジオが公開しているウェブサイトです。
おそらくこちらはデモサイトで、実在するクライアント向けの案件というわけではなさそうです。海外では一般的なのかもしれないですが、いかにも普通の案件であるかのように公開されていることが多くて、いつもどういう文脈のサイトなのかを把握する際に悩んでしまいますね……
すごく透明感のある雰囲気で、なんか結構おもしろい実装がなされている感じがします。
リンク：
メタボール的な表現と建物の 3D 表現
今回のサイトの WebGL には、２つの路線があります。
１つ目は、トップページの冒頭などに配置されているメタボールのような表現です。
トップページの冒頭でカーソルを動かしてみるとわかりやすいと思うのですが、カーソルの位置にも小さな水滴のようなオブジェクトが描かれるようになっていて、画面内の丸みを帯びた物体とそれらが干渉するようになっています。
この画面の隅に描かれている丸みを帯びた物体、微妙に背景が透けるようになっていてなんともいえない面白い質感をしていますよね。
メタボール的な物体を描画するときに、こういうふうに透かした質感を付与するのって結構めずらしい気がします。
また、サイト内にあるもう１つの WebGL 実装が建物の 3D 表現です。
こちらは普通にフォトリアル寄りな質感になっています。
この建物の 3D シーン、WebGL 実装を長年見てきた自分の目から見るとなんか変というか……
よくわからない不思議な質感をしているんですよね。
もしかしたら、スプライトアニメーションに近いことをやってるのかもしれないですが、その割には妙に立体感があって不思議な挙動です。
なんか妙なことをやってそうな感じがあるんですが、じっくり分析してみないとわからなさそうです。
CG に詳しくない方には、今回のサイトで見られる２つの WebGL 表現が実はまったく異なる仕組みで描画されているということを、想像しにくいと思います。
一方は、いわゆるレイマーチングと呼ばれる技術を用いています。もう一方はパッと見ただけではなにをしているのかはわからないですが、少なくともレイマーチングではなさそうですね。
こういうさまざまな技術を組み合わせた表現は、やっぱりクライアントのいる案件ではやや不安要素になる可能性が高くなるところがあり、そういう意味でもデモサイトで実際にやってみるというのはいいことなのかもしれませんね。
ぜひチェックしてみてください。
