How to make Puppet Dance AR with Meta Spark

1. Create Dance with
Puppet using Body
Tracking Instagram Filter
Membuat Filter Joget Bareng Puppet
dengan Fitur Body Tracking Instagram

2. Apa saja yang akan kita pelajari ?
1. Penggunaan Patch Body Tracking.
2. Import 3D model dari komputer.
3. Penggunaan trigger Body Tracker untuk menggerakkan 3D Puppet.
Konsep filternya apa?
1. Filter entertain dengan konsep joget bareng puppet Marshmello.
2. Puppet Marshmello berada di sebelah user saat berjoget.
3. Puppet Marshmello mengikuti gerakan badan, tangan dan kaki user.
Klik play preview !
Nyalakan audio devicemu

3. Filter Journey
Buka
Filter
User berjoget,
Puppet ikut gerak joget.
Body
ditemukan
Buka
Story /
Reels
Scan Body Post ke Story/ Reels
Record

4. Asset
3D Head Marshmello 3D Cylinder
Icon Grafis Marshmello
Patch
posRotObj
Download Asset
Patch
convertPostObject2DTo3D
https://drive.google.com/drive/folders/1N6hCHjO84MGXyBAxhTPWcompIiGfDsit?usp=sharing

5. Teori: Koordinat di Meta Spark
Koordinat di Meta Spark dibagi 2, yaitu:
1. Koordinat untuk objek 2D Canvas dan Rectangle
2. Koordinat Non Canvas & Rectangle
koordinat untuk objek
2D Canvas & Rectangle
koordinat untuk objek
Non Canvas & Rectangle
Perbedaan koordinat ini sering menjadi
kendala saat development filter yang
mengharuskan adanya perubahan value
position.
Oleh karena itu sudah disiapkan patch
converternya.

6. Teori: Menentukan Titik Tengah di antara 2 Titik Body Tracking untuk
dijadikan titik pivot Position dan Rotation.
Misal object 3D ini, diapit titik A dan B, maka:
Rumus titik tengah
A
B
Rumus rotasi dari 2 titik yang bergerak:

7. Patch Body Tracking
Patch apa aja yang perlu kamu tahu untuk menggunakan fitur Body Tracking?

8. Step-step:
Step 1 : Import Aset dan buat objek-objek di scene panel
Import Asset 3D:
1. Cylinder
2. Head Marshmello
Import patch tambahan:
1. convertPostObject2DTo3D
2. posRotObj
1 2
Buatlah objek canvas, puppetGroup,
dan objek 3D
seperti
susunan root
di samping

9. Step-step:
Step 2 : Tambahkan patch Device, Body Finder dan Body Select
Tambahkan patch Body finder dan Body Select ke patch editor, kemudian buat patch sender screenSize dan Scale.
1
2
Tambahkan patch Body Finder dan Body Select dengan index 0, artinya body orang pertama yang terlihat di kamera yang akan
ditracking.

10. Step-step:
Step 3 : Buat logic position objek Puppet (puppetGroup).
Buat logic bounding box seperti di atas, kemudian sambungkan ke properties 2D position dari objek rectangle puppetGroup.
Step 4 : Buat logic position objek Head Marshmello
Tambahkan patch neck 2D. Hasilnya berupa koordinat 2D. Ubahlah nilainya menjadi koordinat object 3D menggunakan patch
convertPostObject2DTo3D.

11. Step-step:
Step 5 : Buat logic position dan rotation objek leftArm dan leftHand
Tambahkan patch LeftArm 2D. Ada 3 value, kemudian ubahlah nilainya menjadi koordinat objek 3D.
Dapatkan nilai position dan rotation dari 2 titik untuk menggerakkan dan memutar objek leftArm dan leftHand.

12. Step-step:
Step 6 : Buat logic position dan rotation objek rightArm dan rightHand
Tambahkan patch rightArm 2D. Ada 3 value, kemudian ubahlah nilainya menjadi koordinat objek 3D.
Dapatkan nilai position dan rotation dari 2 titik untuk menggerakkan dan memutar objek rightArm dan rightHand.

13. Step-step:
Step 7 : Buat logic position dan rotation objek leftTight dan leftLeg
Tambahkan patch leftLeg 2D. Ada 3 value, kemudian ubahlah nilainya menjadi koordinat objek 3D.
Dapatkan nilai position dan rotation dari 2 titik untuk menggerakkan dan memutar objek leftThight dan leftLeg.
Buatlah sender value leftTight. Value ini nanti akan digunakan untuk mentrigger objek body.

14. Step-step:
Step 8 : Buat logic position dan rotation objek rightTight dan rightLeg
Tambahkan patch rightLeg 2D. Ada 3 value, kemudian ubahlah nilainya menjadi koordinat objek 3D.
Dapatkan nilai position dan rotation dari 2 titik untuk menggerakkan dan memutar objek rightThight dan rightLeg.
Buatlah sender value rightTight. Value ini nanti akan digunakan untuk mentrigger objek body.

15. Step-step:
Step 9 : Buat logic position dan rotation objek Body
Tambahkan patch sender neckPos, leftTight dan rightTight yang sudah dibuat sebelumnya.
Ubah posisi dan rotasi objek body menggunakan patch posRotObj.

16. Publishing
Bagaimana cara upload filter ke Instagram?
1. Export projek mejadi arexport.
2. Buka Meta Spark Hub : https://www.facebook.com/sparkarhub
3. Pilih Publish - Effect for sharing - kemudian isi form.
4. Beri nama filter maksimal 20 karakter.
5. Upload file arexport.
6. Pilih platform facebook/ instagram.
7. Upload image icon. Kemudian save.
8. Copy link trial dan buka di smartphone.
9. Mainkan filter kemudian download videonya.
10. Kembali ke Meta Spark Hub, upload video previewnya.
11. Kemudian terakhir submit.
12. Tunggu proses approval 1-5 hari kerja.

17. Assignment (Tugas)
1. Buatlah filter puppet dengan menggunakan objek 3D Sphere (bola).
2. Kamu boleh menambahkan tracker lainnya.
3. Tambahkan sound efek di momen-momen tertentu filter kamu.
4. Pastikan filter kamu tidak melanggar Meta Spark Policy (https://sparkar.facebook.com/ar-
studio/learn/publishing/spark-ar-review-policies/)
5. Pastian filter kamu tidak melanggar hak cipta. Gunakan aset gambar, 3d dan audio sesuai license yang
kamu punya.
Buatlah filter dengan konsep dan ketentuan berikut ini: