このアイデアは、よくあることですが、次のようなことから始まりました。 全く別のプロジェクト というアーティストの作品に出会って、道をそれたとき、 カタリナ・ビジェガス ソーシャルメディア上で。彼女は、ステッカーとして販売しているイラストに命を吹き込む Instagram AR フィルターを作成しています。 AR は新しいものではありません。私は 2012 年に私の真新しい Sony スマートフォンにその種の効果を示すアプリを搭載していました。しかし、AR エフェクトを簡単に作成し、それを Instagram などのユビキタス プラットフォームに公開できるツールがあることを発見して、本当にピンときました。
そこで私は、自分の個人的な活動や職業上の活動を考慮して、そのようなテクノロジーをどのように活用できるかを考え始めました。作成できればよかったのですが 美しいデジタルイラスト インタラクティブにすることで新しい次元を与えますが、当面、これは私のスキルセットからは遠すぎます。そこで私は、自分にとってなんとなく意味がありそうなシンプルなプロジェクトを作成することにしました。それは、名刺にカメラを向けたときに 3D アニメーションを再生するフィルターを作成するというものでした。私は小さな etsy ショップを経営しているのですが、私の名刺と一緒に注文を受け取ったら、顧客がこの AR フィルターを試してみたいと思うかもしれないので、顧客にそのことをソーシャル ネットワークに投稿するよう仕向ける楽しい方法になるかもしれないと考えました。
翼を羽ばたかせるのは難しくありません。両方の翼オブジェクトの Y 軸に回転アニメーションを追加するだけです。ただし、このようなエフェクトを翼オブジェクトに直接適用しても機能しません。実際、オブジェクトの質量中心は翼の中央に位置しているため、それを回転させると中心から回転することになります。必要なのは、翼の端の、体に接触している部分から回転することです。ここで少し意味が通じるといいのですが…
、merci beaucoup pour toutes ces explications très claires! C'est vraiment トップ! en revanche, j'ai un petit soucis, lorsque j'exporte il semble que mon fichier ne peut être exporté que sur Facebook et n'est pas possible avec Instagram… je ne sais pas pourquoi… et une fois que l'efet est acceptéそして、モントレーのレトロウーバーを宣伝してください!!!問題はありません!プヴェヴー・マデール? je vous souhaite une Excellente journée。
Il semblerait que depuis que j'ai écrit ce tutoriel l'option pour poster et retrouver des effets tel que celui-ci sur instagram ait été suprimée ou en tout caslargement modifié.
チュートリアル
名刺用の AR Instagram フィルターを作成する
30分
簡単
フリーソフトウェア
このアイデアは、よくあることですが、次のようなことから始まりました。 全く別のプロジェクト というアーティストの作品に出会って、道をそれたとき、 カタリナ・ビジェガス ソーシャルメディア上で。彼女は、ステッカーとして販売しているイラストに命を吹き込む Instagram AR フィルターを作成しています。 AR は新しいものではありません。私は 2012 年に私の真新しい Sony スマートフォンにその種の効果を示すアプリを搭載していました。しかし、AR エフェクトを簡単に作成し、それを Instagram などのユビキタス プラットフォームに公開できるツールがあることを発見して、本当にピンときました。
そこで私は、自分の個人的な活動や職業上の活動を考慮して、そのようなテクノロジーをどのように活用できるかを考え始めました。作成できればよかったのですが 美しいデジタルイラスト インタラクティブにすることで新しい次元を与えますが、当面、これは私のスキルセットからは遠すぎます。そこで私は、自分にとってなんとなく意味がありそうなシンプルなプロジェクトを作成することにしました。それは、名刺にカメラを向けたときに 3D アニメーションを再生するフィルターを作成するというものでした。私は小さな etsy ショップを経営しているのですが、私の名刺と一緒に注文を受け取ったら、顧客がこの AR フィルターを試してみたいと思うかもしれないので、顧客にそのことをソーシャル ネットワークに投稿するよう仕向ける楽しい方法になるかもしれないと考えました。
要件
ソフトウェア
このプロジェクトの作成には次のソフトウェアが使用されました。
ファイル
すべてのプロジェクト ファイルを Google ドライブにアップロードしました。
プロジェクト ファイル リポジトリの構造:
ウォークスルー
ARアニメーション用の名刺とモックアップをデザインする
名刺
最初に完了する必要があるタスクは、独自の名刺のデザインを考え出すことです。
このチュートリアルでは、によってデザインされた蛾のイラストを使用します。 私の才能ある友人、ホイ・チェン。 Huiさん、作品を使用させていただきありがとうございます!
についてはこちらの記事をご覧ください Spark AR Studio でのターゲット追跡のベスト プラクティス フィルターで簡単に認識できるように名刺のデザインがどのようなものであるべきかをよく理解するためです。
デザインに満足したら、印刷してカードの写真を撮ります。実際、デジタルの物体の代わりに、追跡したい現実世界の物体の写真を使用すると、ターゲット追跡がより効果的に機能することがわかりました。
ARアニメーションのモックアップとビジュアル要素の準備
次に、AR アニメーションを上から見たときのモックアップをデザインします。これは、Spark AR Studio でシーンのさまざまな要素を整理して配置するのに役立ちます。
ベクター エディターで主要な要素をさまざまなレイヤーに整理し、次のようにエクスポートします。 .png 背景が透明な画像。
アニメーション化されたテキスト: 結局のところ、これは私にとってプロジェクトの中で最も厄介な部分の 1 つであることがわかりました。つまり、テキストのストロークを Inkscape でデザインし、それを Blender にロードして、フレームごとのアニメーションを生成しました。そのプロセスについてさらに詳しく知りたい人がいたら、コメントで知らせてください。それについての短いチュートリアルを書くことに取り掛かるかもしれません。
Spark AR スタジオをインストールする
に向かう Spark AR Studioのダウンロードページ、インストール ファイルをダウンロードし、指示に従ってプログラムをインストールします。
このプログラムを使用するには Facebook アカウントが必要です。
新しいプロジェクトを作成する
Spark AR Studio を起動してログインできたら、 をクリックして新しいプロジェクトを作成します。 新しく作る -> 新しいプロジェクト -> ターゲット追跡.
このソフトウェアは非常にバグが多く不安定なので、プロジェクトをすぐに保存し、大幅な進歩があった後は忘れずに定期的に保存することをお勧めします。
テクスチャをプロジェクトにインポートする
前に .png として保存したシーン要素を覚えていますか?それらを次のようにロードする必要があります テクスチャ プロジェクト内で使用できるようにします。
ソフトウェアのドキュメントを引用するには:
の中に アセットパネル ウィンドウの左下隅にある をクリックします。 コンピュータからインポート すべてのファイルをロードします テクスチャ /Text アニメーション フレームのコンテンツを除く、Google ドライブ リポジトリのフォルダー。
次に選択します 新しくインポートされたすべてのテクスチャ 背景とBusiness_card_target_imageを除く。で テクスチャパネル 右側にある 圧縮サブパネル、 3 つの圧縮オプションをすべて次のように設定します なし。これを行うのは、画像がすでに十分に軽量であり、プログラムの圧縮モジュールが明確な理由もなく CPU と GPU リソースを過剰に使用して永久にスタックする傾向があるためです。
次に、テキストアニメーションのフレームをインポートします。もう一度、圧縮モジュールがその作業を行う (しない) のを永遠に待機することを避けるために、回避策を使用する必要があります。の右下に、 アセットパネル、 クリック + アセットの追加 -> 輸入 -> コンピュータから。すべての画像をロードします /テキストアニメーションフレーム フォルダー、一度に半分ずつ。プログラムのクラッシュを避けるためにこれを行う必要があります…プログラムのクラッシュを避けるために使用すると便利なテクスチャ アニメーションのインポート オプションがあります。
50 フレームがインポートされたら、すべてを選択して、 タイプ に テクスチャシーケンス の上部にある テクスチャパネル。
圧縮を次のように設定します なし 他のテクスチャの場合と同様に、3 つの圧縮オプションすべてについて。
最後に、アニメーションを操作する別のタイプのオブジェクトを作成する必要があります。の中に + アセットの追加 メニュー、選択 アニメーションシーケンス。右側に開いたパネルで、 ドロップダウン矢印 の前に テクスチャ そして、 テクスチャシーケンス 私たちが作成したばかりのものです。
マテリアルを作成する
必要なマテリアルを作成するには、 をクリックします。 + アセットの追加 -> 材料。そのうち 7 つが必要になるので、複製してください。 6 との回 CTRL + D.
すべてのマテリアルに、より意味のある名前を付けます。次に、それぞれにいくつかのパラメータを設定する必要があります。
背景以外の素材をすべて選択します。
で マテリアルパネル 右側で選択します 両面 の中に レンダリングオプション サブパネル。これは、下から見た場合にもテクスチャが見えるようにするためです。羽と蛾の体は空中に浮かぶため、これは特に重要です。
の中に 高度なレンダリング オプション サブパネルのチェックを外します 深度まで書き込み。これにより、テクスチャの透明な背景が実際に消え、後でプレーンを操作するときに相互に干渉しなくなります。
次に、関連するものを選択します テクスチャ それぞれの材料について シェーダのプロパティ サブパネル。
テクスチャをターゲット トラッカーに追加する
ここで、ターゲット トラッカーにターゲットを指定する必要があります。ターゲット トラッカーは、アニメーションをトリガーする現実世界のオブジェクトの位置を特定し、その方向を向く必要がある平面に関する情報をオブジェクトに提供するプログラムのモジュールです。
選択する 固定ターゲットトラッカー0 の中に シーン 左上のパネルと ターゲットトラッカー 右側のメニューを選択してください 名刺対象画像 として テクスチャ.
シーンの要素の平面を作成する
最初に行うことは、シーンの 3D ビューから 2D ビューに切り替えることです。 モード.
次 右クリック の上 固定ターゲットトラッカー0 に 追加 新しい 飛行機 現場へ。
使用 CTRL + D に 重複 この飛行機 6回 最終的に7機になるように。
シーンに含まれるすべての要素を反映するようにプレーンの名前を変更します。
の中に 平面パネル 右側に、関連するものを追加します 材料 各飛行機へ。
平面のスケールと位置を調整する
プレーンのテクスチャが作成されたので、シーンの要素に適切な寸法と位置を与えるようにプレーンを調整する必要があります。そのために、一度に 1 つの飛行機を作業します。
したがって、作業する最初の飛行機 (この場合は星) を除くすべての飛行機を選択して、それらを作成することから始めます。 隠れた チェックを外すことで 見える.
対象画像を参考にしてください 規模 そして 再配置 星が背景と一致するまで。完了したら、Stars プレーンの可視性を非表示に設定し、別のプレーンに移動します。 Background と TextAnimation を除くすべてのプレーンでこの操作を繰り返します。
満足したら、これまで作業してきたすべての飛行機と背景を公開します。を選択 背景 飛行機と 規模 理想的には、ターゲット画像を完全に覆うことが望ましいでしょう。
次に、 テキストアニメーション 表示されたら、もう一度元の比率に戻して、適切に配置します。
蛾は背景に比べて少し小さく見えます。確かに、ターゲット画像を参考にして蛾を拡大縮小しましたが、背景は名刺よりも大きくしました。したがって、プロポーションはもはやモックアップに忠実ではありません。
これを解決するには、背景を除くすべてを一貫した方法で拡大縮小したいと考えています。これらすべての要素を包括することでこれを達成します。 ヌルコンテナ、 そして スケーリング すべての個々のプレーンの代わりにこのコンテナを使用します。
テキストをアニメーション化する
右クリック の上 固定ターゲットトラッカー0 そして選択してください パッチの作成。これにより、 パッチエディター.
右クリック パッチエディターで、 アニメーション パッチ。 接続する の 見つかった のコネクタ 固定ターゲットトラッカー にパッチを当てます 遊ぶ のコネクタ アニメーション パッチ。これにより、ARフィルターを有効にすると、目的の画像が見つかったのでテキストアニメーションの再生が開始されるようになります。
これを行うと、間に Pulse パッチが自動的に追加されます。を接続します。 オフになっています のコネクタ 脈 にパッチを当てます リセット のコネクタ アニメーション パッチ。これは、カメラがターゲット画像の邪魔にならないように移動すると、テキストアニメーションがリセットされ、ターゲットが新たに見つかったときに再度再生できるようにするためです。
を追加 フレームトランジション パッチを当てて接続する 進捗 から相手側へのコネクタ アニメーション パッチ。をセットする フレーム数 = 51.
を選択 テキストアニメーションシーケンス を開くために アニメーション シーケンス パネル 右手に。クリックしてください 矢印 前の 現在のフレーム シーンに表示されているフレームを操作できるようにする新しいパッチを追加します。 接続する このパッチを、の利用可能なコネクタに適用します。 フレームトランジション パッチ。
アニメーション パッチの [Duration] パラメータを調整することで、アニメーションの速度を制御できます。
翼を動かす
各翼を連続して選択し、その翼が 位置 で Z軸 は 0.
翼を羽ばたかせるのは難しくありません。両方の翼オブジェクトの Y 軸に回転アニメーションを追加するだけです。ただし、このようなエフェクトを翼オブジェクトに直接適用しても機能しません。実際、オブジェクトの質量中心は翼の中央に位置しているため、それを回転させると中心から回転することになります。必要なのは、翼の端の、体に接触している部分から回転することです。ここで少し意味が通じるといいのですが…
したがって、何らかの方法で翼オブジェクトの重心を移動する方法を見つける必要があります。これを行うには、シーンの中央に重心が来るように自動的に作成される Null オブジェクトを使用します。これらの Null オブジェクトは翼オブジェクトを保持し、回転は Null オブジェクト自体に適用されます。やりましょう!
右クリック で 容器 そして 追加 ある ヌルオブジェクト その中。名前を RightWingContainer に変更し、 重複 それと CTRL + D。複製した LeftWingContainer の名前を変更します。を選択 翼オブジェクト そして ドラッグドロップ それらをそれぞれの Null オブジェクトコンテナ.
の中に パッチエディター, 右クリック そして追加します ループアニメーション パッチ。をセットする 期間 = 2 にチェックを入れてください ミラーリング チェックボックス (これは、アニメーションがシームレスにループし、翼の羽ばたきの終わりで最初から再び開始されないようにするためです。ミラーリングをオンにすると、翼は上向きの羽ばたきの上限に達した後、後方に羽ばたき始めます)。
次に追加します 遷移 パッチと 重複 それ。リンクしてください 進捗 のコネクタ ループアニメーション 両方の対応するものにパッチを適用します 遷移 パッチ。
次のようにトランジション パッチのパラメータを入力します。
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
を選択 右翼コンテナ そして上に ヌルオブジェクトパネル 左クリックしてください 矢印 前の 回転。これにより、パッチ エディターにパッチが追加され、これらの値を操作できるようになります。を接続します。 価値 一番上のコネクタ 遷移 のコネクタにパッチを当てます。 右翼コンテナ 新しく作成されたパッチ。
で操作を繰り返します 左翼コンテナ そして一番下のトランジションパッチ。
この時点で、両羽が羽ばたき始めるのが見えるはずです。ここで、蛾を Z 軸に沿ってよりわかりやすい位置に移動するだけです。いじってみる 位置 で Z軸 の 右翼コンテナ, 左翼コンテナ そして 体 満足のいく結果が得られるまで繰り返します。
結果をプレビューする
ダウンロードする必要があります スパーク AR プレーヤー まず携帯電話のアプリをダウンロードしてください。
電話がコンピュータに接続されると、Spar AR Studio の左下の電話アイコンに小さな青い点が追加されます。それをクリックして選択してください 送信 あなたのデバイスに。
先ほど印刷した名刺にカメラを向けて楽しんでください。
この時点で、次のステップで必要になるため、携帯電話のアプリを使用してエフェクトのビデオを撮影します。
AR フィルターを Facebook または Instagram に公開する
クリックしてください 公開 左下隅のプレビュー アイコンの下にある矢印アイコン。これにより、プロジェクトがパッケージ化され、アップロードされ、リダイレクトされます。 スパーク AR ハブのウェブページ。
フィルタを正常に公開するには、次の手順に従います。
を確認するとよいでしょう。 Spark AR ポリシー レビューのために送信する前に。私のウェブサイトのアドレスがデモビデオに表示されていたため、最初の試みは拒否されました。
最終結果
これまで私が取り組んできたフィルターのデモを残しておきます。
1 つ目は自分の名刺用に作成したもので、2 つ目は次のいずれかを使用して作成した最初のテストです。 ドライフラワーの花びらで作ったポストカード 3 番目は、このチュートリアル用に作成されたフィルターです。
このチュートリアルを楽しんでいただければ幸いです。
いつものように、このチュートリアルに関するフィードバックや、ここに投稿してほしいプロジェクトのアイデアがあれば、お気軽に共有してください。
脚注
次のオンライン コンテンツは、このプロジェクトの作成中にいくつかの支援やインスピレーションを提供しました。
、merci beaucoup pour toutes ces explications très claires! C'est vraiment トップ! en revanche, j'ai un petit soucis, lorsque j'exporte il semble que mon fichier ne peut être exporté que sur Facebook et n'est pas possible avec Instagram… je ne sais pas pourquoi… et une fois que l'efet est acceptéそして、モントレーのレトロウーバーを宣伝してください!!!問題はありません!プヴェヴー・マデール? je vous souhaite une Excellente journée。
ボンジュール・ノエミ、
Il semblerait que depuis que j'ai écrit ce tutoriel l'option pour poster et retrouver des effets tel que celui-ci sur instagram ait été suprimée ou en tout caslargement modifié.
オーストラリアの旅を楽しみましょう!