コンテンツへスキップ

Shin Naka’s Dev Log

Notes from building things.

メインメニュー
  • HOME
  • WALK ASIA
  • Dev Log
  • THE NAKADEMY AWARDS

【Spark AR】スタバのセイレーンになれるARエフェクトの作り方

Shin Naka(なかしん) 2020年12月13日 1 分読み取り
icon_starbucks

Table of Contents

Toggle
    • Share this post:
  • 作り方
    • テクスチャ
    • Spark AR
    • 目パチ
    • パーティクル
    • アイコン
  • さいごに
  • 著者について
    • Shin Naka(なかしん)
    • Share this post:

Share this post:

Share on X (Twitter) Share on Facebook Share on Email Share on SMS

作り方

毎朝、出勤前にスタバに通っています。出勤と言っても自宅でテレワークなのですが。

朝に服を着替えてスタバに出かけ、ARエフェクトを作ったり、Netflixを観たり、このブログを書いたり、また何もせず遠くの景色を見て頭を空っぽにして過ごしています。

それから家に帰って仕事をするのですが、スタバでの時間がとても良いスイッチ切り替えになるのです。

スタバから家に出勤する感覚とでも言いましょうか。テレワーク前の朝活、まじでオススメですよ?

さて、ARエフェクトの話です。

近所のスタバにいると、頭上に丸い看板が垂れ下がってるのです。毎日見てると、もうあの顔になりたくなってきますよね?

じゃあ、ARエフェクトでスタバのセイレーンになっちゃいましょうか!

テクスチャ

まずはAffinity Designerで、顔に貼るテクスチャをパスで描きました。

あと目パチも作りました。

次に、カラダの部分はアルファで抜いたテクスチャにしてたのですが、なんだかMacBook Proでも処理落ちするのです。フレームレートがガタ落ち。

もしかして、大きなアルファで抜いたテクスチャで画面を覆うと重かったりする? って事でカラダの部分は円い板ポリゴンにしてみました。

ただ、iPhoneに転送して確認してみたところサクサク動いたので、このまま進めますね。

看板なので厚みのある円柱にしても良かったのですが、少しゴデゴテしすぎるかな?と懸念して板ポリにしてます。

Spark AR

さて、これらの素材をSpark ARに取り込み、設定していきます。

顔のマテリアルをFLATにして位置調整。

カラダの円いポリゴンのマテリアルもFLATにしました。

FLATにするとライトの影響を受けない、のっぺりしたカートゥーンみたいな質感になります。

目パチ

目パチをするためにはFaceTrackerからPatchを繋げていきます。

カメラで「Left Eye Closed」を捉えた時は、左目を閉じてるテクスチャを表示するという具合です。

ちなみに両目を閉じている時は「Blink Patch」というのを使ってみたのですが、これはマバタキをトリガーに何かをさせるものみたいで、閉じ目として使うと反応がイマイチでした。

なので「Left Eye Closed」と「Right Eye Closed」を「And」で繋げて、右目と左目を両方閉じてる時は、閉じ目のテクスチャを表示するという風にしました。

パーティクル

パーティクル大好き人間なので、キス顔をするとハートが出るエミッターを口元に配置しました。

アイコン

アイコンは顔のドアップにしました。

今回は結構力作になったな。という事で完成!

さいごに

このエフェクトはどう使えばいいのか悩みますが、スタバ好きならセイレーンになりきればいいじゃないの。

インスタのARエフェクトはこちら
FacebookのARエフェクトはこちら

次回はデーモンのARエフェクトを作ります。めっちゃ怖いですよ!!!

著者について

アバター

Shin Naka(なかしん)

Administrator

東京を拠点に、旅の記録〈Walk Asia〉、制作の記録〈Shin Naka’s Dev Log〉、観た映画の私的アワード〈THE NAKADEMY AWARDS〉を個人のログとして書いています。 完成した作品は TIGER ON BEAT 名義で発表しています。

ウェブサイトにアクセス すべての投稿を表示

Share this post:

Share on X (Twitter) Share on Facebook Share on Email Share on SMS

投稿ナビゲーション

前: 【Spark AR】『Hexagon / 六角形』の作り方【複眼】
次へ: 【Spark AR】デーモン閣下のARメイクの作り方

関連記事

dawn

【Spark AR】ゾンビ・ボイス・チェンジャーの作り方

Shin Naka(なかしん) 2021年2月25日
5ECD9AE9-246B-4B1F-9B84-209EF3F9A87A

【Spark AR】Instagramフィルター『Vinyl / レコード』の作り方

Shin Naka(なかしん) 2021年2月1日
icon

【Spark AR】ARエフェクト『Halo / 後光』の作り方

Shin Naka(なかしん) 2021年1月21日

Trending News

【Spark AR】ゾンビ・ボイス・チェンジャーの作り方 dawn 1

【Spark AR】ゾンビ・ボイス・チェンジャーの作り方

2021年2月25日
【Spark AR】Instagramフィルター『Vinyl / レコード』の作り方 5ECD9AE9-246B-4B1F-9B84-209EF3F9A87A 2

【Spark AR】Instagramフィルター『Vinyl / レコード』の作り方

2021年2月1日
【Spark AR】ARエフェクト『Halo / 後光』の作り方 icon 3

【Spark AR】ARエフェクト『Halo / 後光』の作り方

2021年1月21日
【Spark AR】Altern 8のマスクの作り方 icon_altern8 4

【Spark AR】Altern 8のマスクの作り方

2021年1月11日
【Spark AR】『ピヨり』ARエフェクトの作り方 icon_stun 5

【Spark AR】『ピヨり』ARエフェクトの作り方

2021年1月6日

Posts Slider

IMG_3808

【物理SIMからeSIMへ引越し方法】iPhone 17 Pro MaxでiCloudなしでもスムーズに移行する手順まとめ

Shin Naka(なかしん) 2025年10月12日
image

【iPhone15】SIMカードの入れ方 入れ替え方法【向きは?】

Shin Naka(なかしん) 2023年10月12日
image

【iPhone SE】SIMカードの入れ方 入れ替え方法【向きは?】

Shin Naka(なかしん) 2023年5月27日
image-2

コンプライアンス・スクリーニング

Shin Naka(なかしん) 2023年2月24日
image

Apple StoreでSIMフリー版の5G iPhoneを買った時のauでやる事

Shin Naka(なかしん) 2021年9月25日

About Shin Naka

Shin Naka(なかしん)

東京を拠点に、旅の記録〈Walk Asia〉、制作の記録〈Shin Naka’s Dev Log〉、観た映画の私的アワード〈THE NAKADEMY AWARDS〉を個人のログとして書いています。 完成した作品は TIGER ON BEAT 名義で発表しています。

見逃したかもしれません

IMG_3808

【物理SIMからeSIMへ引越し方法】iPhone 17 Pro MaxでiCloudなしでもスムーズに移行する手順まとめ

Shin Naka(なかしん) 2025年10月12日
image

【Beach of the Dead 開発記録 Ep24】『ビーチ・オブ・ザ・デッド』メニューリニューアル&広告削除!久しぶりに思い出しながらアップデートしてます【WALK ASIAリンク追加】

Shin Naka(なかしん) 2025年4月26日
image

WordPressでAddToAnyが表示されない原因とは?SNSシェアボタンが出ない時の対処法

Shin Naka(なかしん) 2025年4月22日
image

【Beach of the Dead 開発記録 Ep23】Beach of the Dead ver1.0.10 アップデート情報(Android 13対応・APIレベル修正・データセキュリティ)

Shin Naka(なかしん) 2025年3月29日
Copyright © All rights reserved. | MoreNews by AF themes。