Spark AR 入門（X-MENのサイクロプスになろう）

#Spark AR 入門
前回のSpark AR超入門の続き(　https://qiita.com/tokki7127/items/bbcc9a79d8cf2966eff7
)
この記事を読むだけでも作れるとは思います、、
今回はX-MENのサイクロプスになってみる
![X-MEN.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/2630a58c-3cc7-f231-41be-0abf3e2153ae.jpeg)

最終アウトプット
https://gyazo.com/0fb591622de7137f6eff3f826e2fccc2

#下準備
##①Face Trackerを挿入
<img width="1364" alt="スクリーンショット 2020-02-25 22.52.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/6015f7b7-0808-5ef2-64ff-146e189abbbf.png">
SceneのAdd ObjectからFace Trackerを挿入する


##②Face Meshを追加
<img width="1359" alt="スクリーンショット 2020-02-25 22.53.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/4e3276aa-5f6a-671a-569f-2251717d45dc.png">
Face TrackerにFace Meshを追加する

##③Face MeshにMaterialsを追加する
<img width="1360" alt="スクリーンショット 2020-02-25 22.53.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/5341321f-0455-3467-0d36-82b05237d9cc.png">
Face Meshの右側のMaterialsボタンからMaterialsを追加する

##③MaterialsのtypeをRetouchingに変更
<img width="1354" alt="スクリーンショット 2020-02-25 22.56.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/0c939dfc-f9e3-2a1f-f10d-7549b422bb99.png">
１.Materialsを選択してShader TypeをRetouchingに変更する
2.Skin Smoothingを５０％から１０％に変更
3.Materialsの名前をRetouchに変更しておく

#目の素材を作る
##①ARLibraryからCapsule Primitiveをインポートする
<img width="1356" alt="スクリーンショット 2020-02-25 23.08.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/c1a9b04e-9bfe-c702-75b1-a4ca3c7a1872.png">
<img width="933" alt="スクリーンショット 2020-02-25 23.09.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/bc6d787c-2322-879b-ecb8-6e1664ebedbc.png">
<img width="919" alt="スクリーンショット 2020-02-25 23.09.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/71e5dbbe-4df8-faad-e609-3fb262260035.png">
左したAssetsのAdd Assetを選択して、import From AR Libraryを選択
AR Libraryから 3D Primitiveを選択して、その中のCapsule Primitiveを選択・インポートする

##②Capsule PrimitiveをFace Trackerのフォルダに移動する
<img width="1363" alt="スクリーンショット 2020-02-25 23.16.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/91e88873-2e83-3566-d900-18c42ea5258e.png">
##Capsuleを調整する
<img width="1358" alt="スクリーンショット 2020-02-25 23.18.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/62917f31-c807-c43b-a32b-d061d0030001.png">
右のTransformationでRotation Yを９０に変更する
<img width="1358" alt="スクリーンショット 2020-02-25 23.20.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/27c9f7a2-3735-8e69-bfa7-a8d8b0011910.png">
画面上部のEdit the scale of selected object or objectsを選択
<img width="1358" alt="スクリーンショット 2020-02-25 23.23.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/77851ed0-3b7a-01e2-da78-d85084cfbf20.png">
赤い矢印を選択して、引っ張ることでCapsuleを拡大する
<img width="1359" alt="スクリーンショット 2020-02-25 23.26.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/3f4adb50-5778-7433-8aea-25fc34085544.png">
Capsuleを複製してLaserLとLaserRに名前を変更する
<img width="1364" alt="スクリーンショット 2020-02-25 23.32.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/16e6ee9f-e21f-f5f7-f355-eeb337676185.png">
SceneのAdd ObjectからNull Objectを２つ追加して
Left Rightに名前を変更する
<img width="1360" alt="スクリーンショット 2020-02-25 23.37.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/2c685829-7d3e-d9b4-0072-93b86f2a47c2.png">
フォルダの移動する
Face Tracker
|-Face Mesh
|-Left
　|-LaserL
|-Right
　|-LaserR

#アイトラッカー（EyeTracker）を挿入する
<img width="1356" alt="スクリーンショット 2020-02-25 23.43.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/2a28baf6-c71c-a610-cbaa-ca49923af4d5.png">
上部のViewからShow/Hide Patch Editorを選択して、Patch Editorを出す

<img width="1355" alt="スクリーンショット 2020-02-25 23.44.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/0bfa63d3-4e44-e003-824d-b31ad46fe8f5.png">
Patch EditorにFace Trackerを移動する
Face Tracker０は利用しないので削除しても良い
<img width="1359" alt="スクリーンショット 2020-02-25 23.48.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/68854007-5856-202a-de7d-d917e9cf5b79.png">
Face Selectに Eyelidを追加する
参考：https://gyazo.com/31f2f65c0c3be937a3162f5877de638c

<img width="729" alt="スクリーンショット 2020-02-25 23.53.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/de5b20ca-c89a-84b4-3e63-b90dae92d961.png">
<img width="721" alt="スクリーンショット 2020-02-25 23.53.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/a02acd9c-9c27-b265-39ca-226e5123a6df.png">
Leftのobjectを選択して、右のpositionを選択する
黄色い四角が現れるのでEyelid（leftCenterPosition）と連結する
<img width="1440" alt="スクリーンショット 2020-02-25 23.57.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/2bcb2283-3823-1128-6cf2-6cc7f2bf406d.png">
上のボタンを十字ボタンに切り替えた後、LaserLを選択して赤い矢印を移動することで目の位置に移動させる
<img width="746" alt="スクリーンショット 2020-02-26 0.03.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/1ca2259a-7e81-d2d3-6663-b8d6c5d82478.png">
右も同じ手順で作業する
#エフェクトの追加
<img width="1436" alt="スクリーンショット 2020-02-26 0.09.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/84c871ae-32bb-2020-228a-57ad61bf0342.png">
Capsule_matを選択して、Shader TypeをFlatに変更する 
<img width="1436" alt="スクリーンショット 2020-02-26 0.13.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/b596185b-2806-2853-5928-0fb87866bf4e.png">
Materialsフォルダに追加されたCapsule_matの編集をする
・色を好みの色の変更（今回は赤）
・Opacityで透明度の変更（今回は５０％）
#光線をリアルにする（１）
![赤　光.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/1acac3ed-6fdf-7c46-1548-0c4e86570ed5.jpeg)
この画像を利用する
<img width="1436" alt="スクリーンショット 2020-02-26 0.18.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/482837fa-4c4f-1dca-4678-be7e21ebc43e.png">
<img width="1439" alt="スクリーンショット 2020-02-26 0.22.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/82b88f2a-0885-202d-a3b2-46b3653a094b.png">
Left ObjectにPlaneを追加してMaterialを追加する
Materialの名前をEmissionPointに変更する
<img width="1435" alt="スクリーンショット 2020-02-26 0.25.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/8ad1e47b-ef8c-2f8e-528d-3e57ecc20f28.png">
赤い光の画像をインポートする
<img width="1440" alt="スクリーンショット 2020-02-26 0.26.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/119c0c65-7ed6-fdb7-975e-7f9e5baa5448.png">
MaterialのEmissionPointを選択してtextureをインポートした画像に変更する
<img width="1438" alt="スクリーンショット 2020-02-26 0.28.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/1adc033d-1dfa-7c1c-c1c2-65e3d0ac2cc6.png">
・RenderOptionsのBlendModeをAlphaからAddに変更する
・AdvanceRenderOptionsのUseUseDepthTestのチェックを外す
.planeのサイズを大きくするともっとよい
目が若干赤く光っていたら成功
#光線をリアルにする（２）-ParticleSystemの追加
<img width="1436" alt="スクリーンショット 2020-02-26 0.36.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/debea323-444a-561b-fa04-bec761559e1a.png">
emitterが追加されるのでemitterをLeftObjectに移動させる
<img width="1434" alt="スクリーンショット 2020-02-26 0.39.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/8fbe2be6-bc53-46c2-1491-16f70c7066b6.png">
目から白黒の物体が飛んでいることを確認
<img width="1438" alt="スクリーンショット 2020-02-26 0.46.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/71c70ff7-8e85-7190-bc1e-538a440dcaa5.png">
emitterの編集
　Transformation
　　Scale：（１・１・１）
　　Rotation：（９０・０・０）
　emitter
　　Type：　Point
　　Spray angle：　全て０に
　Particle
　　Scale：０.０２５
　　LifeSpan：２
　Material
　　emissionPointに変更する

#最終に
完成品
https://gyazo.com/0fb591622de7137f6eff3f826e2fccc2

自分で製作した時の手順をメモとして残しました
もしわからないところがあればコメントお願いします

ツイッターでAR作品の投稿をしているのでフォローいただけると喜びです！！
https://twitter.com/ar_tokki