細胞の動きや働きをパーティクルで表現! 老いに関する研究と医薬品開発を行う Calico のウェブサイト

doxas : 2020-09-10 13:47:47

有機物の動きや働きを見事に表現

今回ご紹介するのは、人間の老いをテーマにした研究や薬品の開発を行っている企業 Calico のウェブサイトです。

WebGL が使われているのはトップページの冒頭部分だけなのですが、このイントロのデモがなかなか良くできており、ビジュアル的にも迫力があります。

シームレスに形状が変化する様子はどこか有機的な雰囲気になっていて、テーマにもぴったり合っています。

リンク:

Calico

よく観察してみると様々な工夫が凝らされている

今回のサイトの WebGL 利用部分は冒頭にあるイントロだけなので、実際のところ、そんなに紹介することは多くありません。

ただ、このイントロのデモが結構しっかり作ってあって、よく観察してみると質感向上のためにいろんな工夫を凝らしており、いろんな意味で表現の参考になりそうな事例だなと感じます。

パッと見た印象通り、シーン全体を構成しているのは粒状のパーティクルのみで、いわゆる面を持つポリゴンは使われていないようです。

うーん、これはシナプスを表しているのかな?

パーティクルが絶えず流れるように移動しながら、全体としては何らかの構造物のシルエットになるように姿を変化させていきます。

アニメーションは一定のリズムというか間隔で自動的に発生するようになっており、手前のレイヤーに表示されるメッセージとある程度リンクするような感じで動きます。

場面によっては、パーティクルにカラフルな色が塗られることもあります。

パーティクルが変形する際には、途切れること無くシームレスにパーティクルが移動していくのですが、こういう表現って自分が実際にこれを作ることを意識しながら見てみると、結構難しいように思えるのではないでしょうか。

今回のサイトの場合はそのあたりまったく違和感を感じさせない自然なシーン遷移になっていて、なかなか見事ですね。

また、一見するとわかりにくいかもしれませんが、実は今回のサイトのパーティクルって「手前で変形しながら動いているもの」と「背景で漂うように浮かんでいるもの」の2種類が浮遊してるんですよね。

いずれのパーティクルにも、RGB ディストーションの効果などが加えられているので、どこかデジタルなフィルターを通したような見た目になっています。

拡大してみると RGB ディストーションの効果がわかりやすい。(実際は上のキャプチャ画像は単なる原寸のスクリーンショットです)

今回のケースのように、医療やバイオマス系の事業を展開している企業の場合、サイトにパーティクルを使ったデモを置いているケースが結構ありますね。今回の事例も、パーティクルを上手に利用して企業のコンセプトイメージを表現していて、非常にかっこよく仕上がっていると思います。

個人的にちょっと不思議に感じたのは、パーティクルの種類が2種類あるのに、その2種類のうちの片一方だけがポイントスプライトになってることですね……

なんでそこ分けちゃったんだろ…… もしかしたら、負荷的な問題だったのかな? このくらいの頂点数だったらたいして変わらないような気もするけど……

WebGL の腕に覚えのある方は、どうやったらこういう表現ができるのか、実際に自分が実装するとしたらどうやって作るのか、想像してみるのも面白いかもしれません。

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

リンク:

Calico

share

follow us in feedly

search

search

monthly

sponsor

social