ビジュアルのほとんどを WebGL 実装でスクロールに連動させた Alpine Bio のウェブサイト
あまり見たことがない迫力
今回ご紹介するのは Alpine Bio というバイオ系の研究開発などを行っている企業のウェブサイトです。
WebGL 実装を多く見てきたわたくしですが、今回のサイトの WebGL 実装は結構珍しいパターンというか、ちょっと変わっている感じがします。
普通なら DOM に画像を置いて見せることが多いような部分も全体的に WebGL でずんずん実装していてすごく興味深いです。そのおかげもあってか、すごく迫力のあるビジュアルになっていますね。
リンク：
次々と姿を変えるビジュアルに圧倒される
今回のサイトはスクロールしながら見ていく縦に長いトップページの、そのビジュアルの多くの部分が WebGL によって組み立てられています。
一般に、実装工数を削減する意味でも、開発や調整のしやすさという意味でも、普通に画像を置いて解決できる部分は CSS などを駆使して DOM で構築する場合が多いと思うのですが……
今回のサイトでは多くの部分が WebGL によってレンダリングされています。
最近は CSS でもできることがどんどん増えて、マスク処理みたいなこととかはわざわざ WebGL を持ち出してこなくてもできる、という認識なのですが……
今回のサイトの場合はいろいろ考えた末に、全部 WebGL で実装することにしたんだと想像します。
パーティクルのようなオブジェクトが出てきたり、スクロールに連動してマスクされる領域が変化したりと、複雑なトランジションとインタラクションが次々と展開されます。
それほど立体的なビジュアルが多くあるわけではないですが、平面に終始するということもなく、すごくバリエーション豊かな演出がどんどん出てきます。
これ見た目はなんというか CG 的な派手さみたいなものはありませんけれども、もし同じことをやってくれと言われたらいろいろ考えさせられるというか、わたしだったらためらいが生まれそうな気がします。
すごく手が込んでいて、見た目以上に作るの大変そうな WebGL 実装です。
これは完全な個人的な興味でしかありませんが、どういう経緯で今回のサイトの技術選定がなされたのか、すごく気になります。
たぶん、CSS でも似たようなことはある程度まではできるはずで、WebGL でなければならないと判断した部分がどのあたりにあったのか、気になりますね……
とは言え、全体が WebGL で処理されているからこその軽快さ、そして迫力のビジュアルは一見の価値があると思います。
ぜひチェックしてみてください。
