AI をテーマに人間の脳をイメージさせる CG 表現が美しい Alibaba Cloud Neuro-Symbolic Lab のウェブサイト

doxas : 2022-02-17 15:08:11

CG 的かっこよさの詰め合わせ

今回ご紹介するのは、Alibaba グループの AI 研究を担う部門（？）のウェブサイトです。

近年 Alibaba グループに関するニュースや情報を目にする機会も増えていますが、中国を拠点にデジタル関連のサービスなどを提供する巨大グループ企業ですね。

今回のサイトは Alibaba Cloud に関連した、AI 研究系のラボの特設サイトなのかなと想像するのですが、とにかくリッチでかっこいいグラフィックス、そしてインタラクティブ性を備えています。

今回のサイトは AI がテーマということで、実際にその技術の一端を体験しながら楽しむことができるというのがおそらくコンセプトなのだと思います。

キーワードを組み合わせて AI に与えたり、画像を与えて診断させたりといった、いかにも AI っぽい機能を体験することができます。

とは言え、私は AI に関しては完全な素人なので、それがどれくらいすごいことなのかや、あるいはウェブサイト上で見せられているものが本当に AI によってリアルタイムに処理されているものなのか、などは正直わかりません。

ここでは WebGL のグラフィックスに関する部分を中心に見ていきたいと思います。

とは言え、今回のサイトのビジュアルは結構説明不要というか……

ほぼ見たままのイメージで、パーティクルなどを上手に利用して人工知能をイメージさせる脳のようなオブジェクトを表現しています。

カメラから遠い方に描かれるパーティクルをぼかしたような外見にすることで、うまく被写界深度的な、奥行き感を強く抱かせる外見を実現しているのはとてもうまいですね。

若干ですがマウスカーソルに対して反応するようにもなっていますし、すごく雰囲気のあるビジュアルになっています。

また、サイト内のコンテンツを先に進めていくと、パーツをドラッグ＆ドロップして脳の中身を詰め込んでいく、みたいなちょっと変わったコンテンツもあります。

上の画像がまさにそのシーンで、脳のような 3D モデルの周辺にパーツが浮いているので、これを掴んではめ込んでいくような操作を行ってやります。

スクリーンショットでは見えにくいと思いますが、白いサークル状のアイコンなんかも出てきますので操作自体は難しくなく、かなり直感的に行えるようになっています。

その他、AI が画像を解析した結果が 3D のグラフィックスとして描画されるなど、とにかく WebGL を利用してデジタルな絵作りで魅せるスタイルが徹底して貫かれています。

ラインやパーティクルを使って、比較的抽象度の高い画作りを行うのは WebGL がかなり得意とする領域だと思います。

今回のケースのように背景が真っ暗だと、加算合成で全部をまるっと処理できるので縛りが少なく、その割に見栄えも良くなるのでよく用いられるスタイルですよね。

今回のサイトでは被写界深度的な表現がなされていたり、パーティクルの制御が非常に自然に仕上げられていたり、細かいことを言い出すとかなりいろんな部分でかっこよく（品質を高く）見せるための工夫が盛り込まれています。

自分が実際にこれと同じものを実装するとしたらどういうことをやればいいのかな～みたいに想像しながら見てみると、勉強になるかもしれないですね。