📖

[V全般]InstagramのARエフェクト付きチェキを作ってみよう!➀

2022/12/05に公開約2,400字

こんにちは。
朱護重工の山口です。

アドカレ4日目の記事でチェキの作り方をまとめましたが、今日はそのチェキを使ってARを作ります。

この記事は「Vtuber何でも Advent Calendar 2022」の5日目の記事です。
https://adventar.org/calendars/7909

目次

  • 目標
  • 準備するもの
  • アカウントの準備
  • インストール

目標

Instagramのフィルター機能を使ってこれを作ります。

  • フィルターを作る
  • フィルターを公開する

https://twitter.com/YamagichiM/status/1599694755927293952?s=20&t=Wv7dLVZQNxRWliyy9HY6PA

準備するもの

  • InstagramもしくはFaceBookアカウント
  • スマホ
  • マーカーにする素材
  • チェキ(物理)
  • ARで表示する素材
  • PC

InstagramとFaceBookアカウント

管理コンソールはFaceBookアカウント、公開用にInstagramアカウントを利用します。作成したフィルターはInstagramとFaceBookどちらにも公開可能です。

今回は、管理コンソールはFaceBookアカウント、InstagramアカウントでInstagramのみに公開を想定して進めます。

スマホ

androidでもiOSでもどちらでも大丈夫です。InstagramがインストールできればOK。

マーカーにする素材

事前に画像を設定するとその画像を認識したときに、その画像を基準にエフェクトが表示されます。今回は、印刷したチェキを真上から撮影した画像を使います。
アバターチェキなのでinstaxのアプリのスクリーンショットや元画像などでも良いですが、サインの書き込みなどをした場合は画像の認識精度が下がってしまうため、撮影した画像を使います。
多少であれば光の映り込みがあっても大丈夫です。

撮影した画像

切り抜いた画像

ARで表示する素材

エフェクトで利用する素材です。この記事では立ち絵を表示していますが、別になんの画像でもOKです。音楽や3Dモデルなどもエフェクトとして表示可能です。

ただし、詳細は後述しますがフィルターを構成する全ての要素の合計サイズが5MB以内でないと公開できません。アバターの3Dモデルなどを利用したいときはかなり調整が難しいため、最初は画像一枚から始めるのが良いです。

PC

フィルターを作成するために「Meta Spark Studio」というソフトウェアを利用します。
動作要件は下記です。(公式サイトから引用)

https://sparkar.facebook.com/ar-studio/learn/downloads/#spark-ar-player-app

アカウントの準備

下記サイトにアクセスし、「スタートガイド」を選択します。
https://sparkar.facebook.com/ar-studio/

FaceBookアカウントへのログインを求められるのでログインします。ここでログインしたアカウントはフィルター公開時には外部から見えないので安心してください。

ログインすると、「Meta Spark Hub」が表示されます。
とりあえず、公開まではここに用事はないのでいったんそっとしておきます。

インストール

PC

アカウントの準備ができたら、ソフトウェアのダウンロードをします。
下記ページからWindowsもしくはMac版を選択しダウンロード、インストールします。
https://sparkar.facebook.com/ar-studio/learn/downloads/#spark-ar-studio

インストール後、画面の指示に従いさきほど「Meta Spark Hub」でログインするのに利用したアカウントでログインします。

スマホ

下記ページからスマホにデバッグ用フィルター再生アプリをインストールします。
このアプリはログイン要求はないです。
https://sparkar.facebook.com/ar-studio/learn/downloads/#spark-ar-studio

続きは次の記事で

これで下準備ができました。実際のプロジェクト編集は次の記事でみていきます。

Discussion

ログインするとコメントできます