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

2024年1月9日 17:06

おはようございます、株式会社アスタスタのデザイナーとしてUI・UXを担当しているSHIRAI（@shirai_astaster）といいます。

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

年賀状がなくても上記URLにアクセスすれば遊べます😎

昨年は干支をモチーフにしていましたが、今年はApple Vision PROを全面に押し出したAR年賀状を制作しました！Vision PRO 向けにプロダクト開発を進めていることをアピールするためです😎

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

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コンテンツが完成しました😀😀

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