コンテンツの内容と背景の連動でインタラクティブに場面を演出した Mannequin Technologies のウェブサイト
単調にならないような工夫も
今回ご紹介するのは Mannequin Technologies というサービスのウェブサイトです。
たしか日本にも似たようなサービスを提供している事業者があったと思うのですが、いわゆるアパレル業界の洋服などをスタジオ撮影する代わりに、AI でそれに相当する人物写真を生成する、といったサービスなのかなと思います。
デジタル技術を活用しているサービスだけに、WebGL 製の背景が醸し出す雰囲気が見事にマッチしているような気がします。
リンク：
WebGL 製の背景とコンテンツの連動
今回のサイトの WebGL 実装の中心は、背景部分に描かれるノイズを使ったインタラクティブな模様です。
模様のパターンは、比較的よく見かけるタイプで Simplex Noise などを利用して時間の経過に応じて変化させているかんじだと思います。
背景の手前にあるコンテンツ部分には、WebGL を利用せずに実装されている箇所が多そうです。
このスクリーンショットにあるように、人物の顔の部分がキラキラと光りつつ置き換えられていくような演出があり、AI のモデルを簡単に差し替えできることを上手にビジュアルで表現しています。
この人物の顔の部分が切り替わるエフェクトなどは、WebGL ではない方法で実装されているようで技術を用途に応じて上手に使い分けています。
一方、背景に置かれた WebGL 実装のほうはコンテンツの内容が切り替わる際に、大きく変化するようになっています。
変化のパターンもいくつかあり、こちらは結構手が込んでいます。
円形に波が広がるような、波紋のようなエフェクトがあったかと思うと、横や縦に、まったく違った見せ方で発生する遷移エフェクトもあります。
コンテンツの内容が変化するのに合わせて WebGL 実装側のエフェクトが発生するのですが、コンテンツ自体も CSS を駆使してそれと自然に連動させていますね。
こういった WebGL の世界と DOM の世界の連動って見た目以上に作るのは大変だったりするので、なかなか上手に実装しているなと感じました。
物理的にスタジオで撮影することに比べ、AI で多種多様なモデルに簡単に切り替えることができるというのは、たぶんいろんなメリットがあるんだと思います。
これから先の未来には、こういうのが当たり前になっていくんですかね……
アパレル関係だけでなく、料理や景観などのさまざまな被写体が、AI でより自然に表現されるようになっていくとすると、ウェブサイトのあり方もなにかしら変わってきそうな気がしてなりません。
WebGL 実装としてはシェーダを用いたエフェクト表現のお手本として、参考にできる部分がありそうです。
ぜひチェックしてみてください。
