見出し画像

2DデザイナーのためのインスタグラムAR入門 【初心者制作篇】

はじめまして!去年からインスタグラムのARフィルターの制作に夢中な久野です。

画像13

最近、フェイスブックやインスタグラムの中の人(アメリカ、イギリス、インド、日本)とお会いする機会にも恵まれ、様々なイベントへの参加やインタビュー等を受けたりしている中で、そのプラットフォームやコミュニティにもっと貢献したいという気持ちが強くなり、今回のようなチュートリアル記事を作成してみるに至りました。

好評であれば、今後も更新していくつもりなので、よければいいねやフォローをよろしくおねがいします..! 

画像14

さて、みなさま、そもそも、自分のARフィルタをインスタグラムで公開できる機能 はご存知ですか..? これは、2018年にクローズドベータ版として一部の承認済みのクリエイターにのみ公開され、2019年の夏頃にパブリックベータ版として正式に発表された機能です。

画像15

すでに海外では、Louis Vuitton、Dior、Pradaなどのハイブランドをはじめ、様々な企業アカウントが次々とブランドフィルタを公開しています。

画像16

本記事では、フェイスブック社が開発しているSpark AR Studioというアプリケーション(PC / Mac)を使用して、「好きな画像が顔についてくる」簡単なARフィルターを制作する手順をご紹介したいと思います。明日の後編では、実際にインスタグラムに公開する手順をご紹介します。

1. Spark AR Studioのインストール

画像1

公式サイトのダウンロードページからDownload を押します。

画像2

インストールしたアプリケーションを立ち上げて、Blank Projectをクリック、新規プロジェクトを作成してください。


2. 画像表示用のマテリアルを作成

画像3

新規プロジェクトが立ち上がったら、From Computer から表示したい画像を読み込みます。今回は、512x512ピクセルの透過PNG画像を使用します。

画像4

読み込みが完了したら、Add Assets -> Material をクリックし、画像を3DCGモデルに貼り付けるための、マテリアルを作成します。

画像5

作成されたマテリアルをクリックし、右のパラメータウィンドウからShader TypeをFlatに変更し、Shader PropertiesのTextureに画像を設定します。

3. 画像をおでこに表示する

画像6

Add Object -> Face Tracker -> Insert をクリックし、顔検出用のオブジェクトを作成します。

画像7

作成されたFace Trackerを右クリックし、Add -> Planeを選択してください。チェック柄の正方形のオブジェクトが顔を追跡するようになります。

画像8

作成したPlaneをクリックし、右のパラメータウィンドウのMaterialsの+ボタンから、さきほど作成したマテリアルを設定します。

画像9

顔の中央に画像が表示されました。


画像10

最後に画像の位置や大きさを微調整して完成です。PlaneTransformationsから変更できます。

4. Instagramでテストする

画像11

完成したフィルターを実際に使ってみましょう。左下のTest on Deviceアイコンから、Instagram Camera->Sendボタンをクリックします。しばらくすると、Test Linkが発行されるので、スマートフォンからURLを開きます。

画像12

自分のおでこに画像が表示されましたか? 実際に撮影し、ストーリーズに投稿することも可能です。あ、ぜひ、僕のアカウントをタグ付けしてください〜!!※通知がくるように

明日の記事では、プロフィールからフィルターを遊べるようにするための、公開審査手順についてご紹介します。お楽しみに..!

公開しました!! →  2Dデザイナーのためのインスタグラムフィルター入門【公開篇】

画像17

👋

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

どうもありがとうございます!
37
制作会社のBirdman Inc.でソフトウェアエンジニアをしながら、趣味で個人アプリやインスタグラムフィルターの開発をしています。