疑似立体表現とパーティクルを駆使して描かれる近未来的世界観がおもしろい Amaterasu のウェブサイト

doxas : 2024-11-15 12:09:23

拠点は日本のようだが……

今回ご紹介するのは、Amaterasu という企業のウェブサイトです。

どうやら日本（東京）を拠点にしている企業みたいなのですが、ウェブサイトは完全に英語なので、メンバーが海外の方を主体としているとか、あるいは海外向けにまずはサービスを提供する予定という感じなのかもしれません。

正直言って、ウェブサイトを見てもどういうことをビジネスにしようとしているのか、わたしの英語読解力ではいまいちわからないところもあるのですが、WebGL 実装の内容を中心に見ていこうと思います。

今回のサイトでは、普通に 3D シーンとして描かれるものも存在するのですが、一方で、深度マップを活用した疑似立体表現を行っている場面があり、なんともおもしろいですね。

この疑似立体表現、数年前には一種流行のテクニックと言いますか、そこらじゅうで似たような実装がされているのを見かけた気がしますが、最近はあまり見かけなくなったようにも感じます。

今回のサイトでは、人物の横顔のシーンが出てくるのですが、ここで疑似立体表現が用いられています。

このシーン、画面の中央に描かれている人物の横顔は「もともとの素材自体は平面的な画像」です。それを、板状のポリゴンの上に投影しているものですね。

しかし同時に、法線を書き込んだノーマルマップや深度情報を書き込んだデプスマップなどを駆使して、まるで立体的な構造を持つ物体であるかのように描いています。

ライトの当たった陰影なども変化するので、本当に立体みたいに見えるという人もいるかもしれませんね。

今回のサイトではスクロールに応じてビューに変化が現れますが、人物の横顔に重なるようにして、パーティクルを駆使した演出が同時に発生するような場面が多く存在します。

いわゆるメンタルヘルスみたいな文脈を持つサービスを開発しているようなので、パーティクルを人間の思考に見立てたような、こういった演出をしながら事業を紹介しているのだと思います。

その他、どことなく宇宙や精神世界といった壮大な世界観を想像させる演出が多数見られるなど、ビジュアルにもこだわった作りとなっています。

ポリゴンを使ったいわゆる普通の 3D モデルではなく、平面とパーティクルだけで表現を突き詰めている感じがあり、なかなか個性がありますね。

パーティクル芸はそれほど不思議なことをしている印象はないのですが、疑似立体表現を用いていたり、いっぽうで画面遷移のトランジションは連番の画像ファイルで処理していたり、なんか不思議な構造をしたウェブサイトだなと個人的には感じました。

疑似立体表現は WebGL ではそれほど珍しい手法ではありませんが、深度マップと法線マップを組み合わせてライティングの加減まで調整しているケースは珍しいと思います。