3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2020-02-25

Spark AR 入門

前回のSpark AR超入門の続き( https://qiita.com/tokki7127/items/bbcc9a79d8cf2966eff7
)
この記事を読むだけでも作れるとは思います、、
今回はX-MENのサイクロプスになってみる
X-MEN.jpeg

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

下準備

①Face Trackerを挿入

スクリーンショット 2020-02-25 22.52.56.png SceneのAdd ObjectからFace Trackerを挿入する

②Face Meshを追加

スクリーンショット 2020-02-25 22.53.10.png Face TrackerにFace Meshを追加する

③Face MeshにMaterialsを追加する

スクリーンショット 2020-02-25 22.53.31.png Face Meshの右側のMaterialsボタンからMaterialsを追加する

③MaterialsのtypeをRetouchingに変更

スクリーンショット 2020-02-25 22.56.34.png 1.Materialsを選択してShader TypeをRetouchingに変更する 2.Skin Smoothingを50%から10%に変更 3.Materialsの名前をRetouchに変更しておく

目の素材を作る

①ARLibraryからCapsule Primitiveをインポートする

スクリーンショット 2020-02-25 23.08.57.png スクリーンショット 2020-02-25 23.09.07.png スクリーンショット 2020-02-25 23.09.16.png 左したAssetsのAdd Assetを選択して、import From AR Libraryを選択 AR Libraryから 3D Primitiveを選択して、その中のCapsule Primitiveを選択・インポートする

②Capsule PrimitiveをFace Trackerのフォルダに移動する

スクリーンショット 2020-02-25 23.16.03.png ## Capsuleを調整する スクリーンショット 2020-02-25 23.18.00.png 右のTransformationでRotation Yを90に変更する スクリーンショット 2020-02-25 23.20.49.png 画面上部のEdit the scale of selected object or objectsを選択 スクリーンショット 2020-02-25 23.23.00.png 赤い矢印を選択して、引っ張ることでCapsuleを拡大する スクリーンショット 2020-02-25 23.26.41.png Capsuleを複製してLaserLとLaserRに名前を変更する スクリーンショット 2020-02-25 23.32.42.png SceneのAdd ObjectからNull Objectを2つ追加して Left Rightに名前を変更する スクリーンショット 2020-02-25 23.37.11.png フォルダの移動する Face Tracker |-Face Mesh |-Left  |-LaserL |-Right  |-LaserR

アイトラッカー(EyeTracker)を挿入する

スクリーンショット 2020-02-25 23.43.57.png 上部のViewからShow/Hide Patch Editorを選択して、Patch Editorを出す スクリーンショット 2020-02-25 23.44.10.png Patch EditorにFace Trackerを移動する Face Tracker0は利用しないので削除しても良い スクリーンショット 2020-02-25 23.48.11.png Face Selectに Eyelidを追加する 参考:https://gyazo.com/31f2f65c0c3be937a3162f5877de638c スクリーンショット 2020-02-25 23.53.20.png スクリーンショット 2020-02-25 23.53.34.png Leftのobjectを選択して、右のpositionを選択する 黄色い四角が現れるのでEyelid(leftCenterPosition)と連結する スクリーンショット 2020-02-25 23.57.49.png 上のボタンを十字ボタンに切り替えた後、LaserLを選択して赤い矢印を移動することで目の位置に移動させる スクリーンショット 2020-02-26 0.03.48.png 右も同じ手順で作業する # エフェクトの追加 スクリーンショット 2020-02-26 0.09.16.png Capsule_matを選択して、Shader TypeをFlatに変更する スクリーンショット 2020-02-26 0.13.36.png Materialsフォルダに追加されたCapsule_matの編集をする ・色を好みの色の変更(今回は赤) ・Opacityで透明度の変更(今回は50%) # 光線をリアルにする(1) ![赤 光.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373045/1acac3ed-6fdf-7c46-1548-0c4e86570ed5.jpeg) この画像を利用する スクリーンショット 2020-02-26 0.18.46.png スクリーンショット 2020-02-26 0.22.09.png Left ObjectにPlaneを追加してMaterialを追加する Materialの名前をEmissionPointに変更する スクリーンショット 2020-02-26 0.25.49.png 赤い光の画像をインポートする スクリーンショット 2020-02-26 0.26.39.png MaterialのEmissionPointを選択してtextureをインポートした画像に変更する スクリーンショット 2020-02-26 0.28.34.png ・RenderOptionsのBlendModeをAlphaからAddに変更する ・AdvanceRenderOptionsのUseUseDepthTestのチェックを外す .planeのサイズを大きくするともっとよい 目が若干赤く光っていたら成功 # 光線をリアルにする(2)-ParticleSystemの追加 スクリーンショット 2020-02-26 0.36.25.png emitterが追加されるのでemitterをLeftObjectに移動させる スクリーンショット 2020-02-26 0.39.48.png 目から白黒の物体が飛んでいることを確認 スクリーンショット 2020-02-26 0.46.20.png emitterの編集  Transformation   Scale:(1・1・1)   Rotation:(90・0・0)  emitter   Type: Point   Spray angle: 全て0に  Particle   Scale:0.025   LifeSpan:2  Material   emissionPointに変更する

最終に

完成品
https://gyazo.com/0fb591622de7137f6eff3f826e2fccc2

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

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?