VisionPROを装着できるハッピーなARコンテンツをつくった話😎

おはようございます、デザイナーとしてアートディレクションとUX業務を担当しているSHIRAI（@shirai_astaster）です。

当社と直接お付き合いのある方はお気づきかと思いますが、アスタスタはスキあらばARコンテンツをねじ込みがちなところがあり、昨年に引き続き今年の年賀状でもARネタを仕込ませていただきました😀

今年はApple Vision PROを全面に押し出したAR年賀状を制作、Vision PRO 向けにプロダクト開発を進めていることをアピールさせてもらいました！

年賀状がなくても弊社8th wallプロジェクトページにアクセスすれば遊べます😎

ARは 8th Wall のフェイストラッキング機能を使い顔を認識、撮影者の目の部分にVisionPROを装着できるというもの。そして最後に「HAPPY NEW YEAR 2024」という文字が飛び出す、パーティーグッズ的な仕様になっています。
難しい機能は使っていませんが、今年はモデリング・マテリアル・パーティクル部分にこだわりました😀😀

Vision PRO モデリング&レンダリング

何はともあれまずはVision PROのモデリングです。現物を見たことがないので画像を見ながらモデリングすることになりますが、幸いなことに色々なアングルの写真がたくさん出てきました。

Vision Proを画像検索

立体的なイメージを膨らませつつ、材質ごとにパーツ分け。複数のオブジェクトを組み合わせています。

特徴的なバックストラップは、球体を変形させてモデリング

材質ごとにパーツ分けして、いくつかのオブジェクトを組み合わせて制作

最後は年賀状印刷用の画像を作成。 アスタスタのカラーでライティングし、ロゴも追加しました😀

アスタスタカラーでライティング後レンダリング

ARコンテンツづくり

モデリングができたので、次は Vision PRO から飛び出す「HAPPY NEW YEAR 2024」という文字を作っていきます！
パーティーグッズのような楽しげなイメージにするため、テクスチャにラメのようなキラキラした反射を加えておめでたい感じを目指しました。

ラメマテリアルの作成

ラメっぽい感じを出すためにボロノイテクスチャを使用。シェーダーエディタで粗さとノーマルに接続することでラメのような反射を作りました。動かした時のキラキラ感がすてきです😎

粗さとノーマルに接続するとラメのような反射に

動かしたときに効果を発揮！

さいごに文字が飛び出す アホっぽい アニメーションを追加して完成😂 8th Wall用にモデリングデータ（アニメーション含む）をgltf形式で書き出します。

飛び出すハッピーな文字たち

8th Wall でA-Frameパーティクル調整

AR空間上で星を降らせたいので、8th Wallでパーティクルライブラリを追加しパラメーターの調整作業を行いました。ライブラリには aframe-particle-system-component を使っています。

https://www.npmjs.com/package/aframe-particle-system-component

設定可能なパラメーターが多かったので、ChatGPTに説明してもらいながら、何度もプレビューしつつ微調整を重ねました🫠

position="0 4 -1" 
  particle-system="
    particleCount: 200; 
    size: 0.4; 
    shape: circle;
    color: #FF0000, #00FF00, #0000FF, #FFFF00, #FF00FF, #00FFFF;
    maxAge: 6; 
    velocityValue: 0 -0.05 0;
    velocitySpread: 1 1 1; 
    accelerationValue: 0 -0.01 0;
    accelerationSpread: 2 2 2;
    rotationAngle: 180;
    opacity: 0.8;
    fadeOut: true;

3DモデルのアニメーションとA-Frameのパーティクルを組み合わせたARコンテンツが完成！

リカちゃんで撮影！相変わらずフェイストラッキングの精度が高い

昨年に引き続き、今回も 8th Wall を使って実装しましたが、フェイストラッキングの精度も高くとても使い勝手がいいですね。アニメーション部分はBlenderで作成しインポート、パーティクルもライブラリを使うことで比較的簡単にARコンテンツが完成しました😀😀

ぜひ一度遊んでみてください！！
フィードバックや感想などいただけると大変嬉しいです😀