SNOWのフェイスフィルターのスパイダーマンバージョンを作りたいpart2

皆さんこんにちは🌞こんばんは🌇

Misagonです‼️

フェイスフィルタースパイダーマンバージョンを考えてから随分と日が開いてしまいましたが、忘れていたわけではありません😑

試行錯誤の結果、スパイダーマンのフェイスフィルターを作ることに成功しました‼️

まずは見てましょう‼️ジャカジャン🎊

なかなかのクオリティですね‼️

合成してるわけじゃないですからね💦

それでは早速手順を記載していきます。

①ARKit2.0 for Unityをダウンロード

ダウンロード後、解凍してUnityにドラッグアンドドロップしてください。

iosのバージョン確認もしてね

②Spidermanの3Dモデルを入手 (Sketcfhabに登録必要※無料です)

③Spidermanの3Dモデルを編集して頭だけにする

ダウンロードしたものはモデルがカクカクしているのでBlenderで重複頂点を削除したり、表面を滑らかにしたりと編集します。(Blenderのサイトなどで調べてね)

④Unityに編集したSpidermanのモデルをインポート

⑤各種設定

ARKit2.0とSpidermanのモデルをインポートしたらあと少しです。

まず、UnityARKitPlugin>Examples>FaceTrackingの階層を開いてその中にある

FaceAnchorSceneを開きます。

するとヒエラルキービューに

CameraParent

ARFaceAnchorManager

ARCameraTracker

AxesPrefab

Directional light

が表示されます。(上画像参照)

AxesPrefabは削除か非表示にして構いません。

ARFaceAnchorManagerを選択すると、右側のインスペクタービューに

このように表示されます。このAnchor Prefabと書いているところに

インポートしたSpidermanのモデルを指定します。(以下参照)

れで顔を認識した時に表示されるオブジェクトの準備ができました。

次にFaceTrackingの使用を許可する必要があるので

UnityARKitPlugin>Resources>UnityARKitPlugin>ARKitSettingを選択し

AR Kit Uses Facetracking

App Requires AR Kit

の有効にチェックを入れます。

これでシーンを保存してビルドします。(プラットフォームをiosに切り替えてね)

⑥シャッターボタンの追加

スクリーンショットをカメラロールに保存するための設定をします。

Assetフォルダの下にPluginフォルダを作成しその中にiOSフォルダを作成します。

iOSフォルダの中にScreenShot.mmというファイルを作成します。(Xcodeで.mmファイルを作成できます。)

作成したファイルに次のプログラムを上書きします。

———————————————————————————

#import <Foundation/Foundation.h>
#import <AssetsLibrary/AssetsLibrary.h>
#import <AVFoundation/AVFoundation.h>

extern “C” void SaveToAlbum (const char* path)
{
UIImage *image = [UIImage imageWithContentsOfFile:[NSString stringWithUTF8String:path]];
ALAssetsLibrary *library = [[ALAssetsLibrary alloc] init];
NSMutableDictionary *metadata = [[NSMutableDictionary alloc] init];
[library writeImageToSavedPhotosAlbum:image.CGImage metadata:metadata completionBlock:^(NSURL *assetURL, NSError *error) {}];
}

————————————————————————–

ボタンを押したらスクリーンショットを撮るスクリプトはこちら※.cs

using System.Collections;
using UnityEngine;
using System.IO;
using System.Runtime.InteropServices;

public class ScreenShot : MonoBehaviour
{
[DllImport(“__Internal”)]
private static extern void SaveToAlbum(string path);

IEnumerator SaveToCameraroll(string path)
{
// ファイルが生成されるまで待つ
while(true)
{
if(File.Exists(path))
break;
yield return null;
}

SaveToAlbum(path);
}

void Update()
{
if(Input.GetMouseButtonDown(0))
{
#if UNITY_EDITOR
#else
string filename = “test.png“;
string path = Application.persistentDataPath + “/” + filename;

// 以前のスクリーンショットを削除する
File.Delete(path);

// スクリーンショットを撮影する
ScreenCapture.CaptureScreenshot(filename);

// カメラロールに保存する
StartCoroutine(SaveToCameraroll(path));
#endif
}
}

Xcodeでアプリをインストールします。

シャッターボタンを追加した場合

info.plistを選択し

右クリックでAdd Rowで以下を追加します。(追加しないとカメラで写真を取った時にアプリがクラッシュします。)

Privacy – Photo Library Additions Usage Description

⑧完成

という流れでした!これでみんなもスパイダーマン!!

SNOWのフェイスフィルターのスパイダーマンバージョンを作りたい!

どーも!Misagonです!!
今回から取り組んでいくのは、名付けて「Spider-man Filter Project」です!

SNOWのフェイスフィルターを自分で自作しようという試みなのですが、
アプリ制作超超初心者なので、いろいろなサイトや参考書を駆使して作成していきたいと思います。忘備録的な意味も込めてね笑

まず使用機材、ソフトはこちら
Macbook Air 10.5インチ(メモリ増設有り)
・iPhoneX1(主にこれにアプリを入れて動かす予定)
・Unity Version 2018.1.6f1 Personal
Photoshop Elements
Blender
などなど、都度使用していきたいと思います!

イメージとしては、自分の顔をスマホで写したら、スマホが顔を認識してスパイダーマンの顔を自分の顔に貼り付けてくれるという感じです。最終目標はこのスパイダーマンの画像のように目が大きくなったり小さくなったりを調整できるようにしたいと考えています。

今回一番重要な技術は「フェイストラッキング

カメラや赤外線センサーなどが顔を読み取り、表情などを認識する技術です。

制作の流れは、

①Unityでフェイストラッキングを実装したアプリを作成

PhotoshopBlenderスパイダーマンのマスクフィルターを作成

③上記を合体して実装

という流れです。

①が一番難しいところだと思うのですが、少しずつやっていきます!!

とりあえずUnityをインストールしたので、今回使用するアセット(いろいろな機能のパッケージプログラムと認識)をアセットストアからダウンロードしてインポートします!

ダウンロードするアセットはUnity-ARKit-Plugin です!Unityはインストールするとアセットストアを開けるのでそこで検索するのですが、検索しても出てこなかったのでGoogle先生に頼んだら載せてるサイトがあったのでここからダウンロード

https://bitbucket.org/Unity-Technologies/unity-arkit-plugin/downloads/

これをうまく使用したいところ、、、続く