Image dan Marker Tracker
Melalui kelas ini, kamu diajak untuk:
- Memahami cakupan fitur AR.JS.
- Mengenal kode dasar AR.JS.
Marker dan Gambar
Marker adalah penanda berupa gambar 2 dimensi atau QR code yang diatur untuk memunculkan objek AR.
Bagaimana Mempersiapkan Gambar?
Ada dua gambar yang harus dipersiapkan: gambar objek AR dan gambar marker. Gambar objek AR bisa berbentuk 3D atau video. Sedangkan marker bisa menggunakan template yang tersedia di AR.js atau kreasikan sesukanya.
Objek
Objek model AR berupa 3D dengan format file gltf atau glb. Ada banyak platform yang menyediakan format AR gratis seperti Google. Jika ingin mengkreasikan sendiri, gunakan platform Sketchfab.
Marker
Marker bekerja seperti QR Code, sebuah gambar dengan pola, bentuk, dan warna tertentu untuk memunculkan objek AR. Bentuknya bisa bermacam-macam karena AR.js akan menghubungkan marker dan gambar yang ditautkna.
AR.js menyediakan marker bawaan berupa kotak hitam dengan tulisan Hiro di tengah. Untuk merancang marker sesuai keinginan, gunakan platform marker training website.
Bagaimana Memasangnya?
Pustaka AR.js memungkinkan integrasi sederhana seperti menautkan file gambar yang sudah kita persiapkan sebelumnya. Untuk mengaktifkannya, Pasang kode berikut di html yang khusus membuat AR marker.
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>Kode bari pertama adalah mengaktifkan A Frame dalam pustaka AR.js, kemudian baris kedua adalah pustaka untuk mentransformasikan gambar.
Untuk menautkan gambar yang sudah disiapkan, masuk di bagian <body> seperti berikut.
<a-assets><a-asset-item
id="bowser"
src="https://cdnprovider.com/name/image/upload/v1616489059/media/gambar3D.glb">
</a-asset-item></a-assets>
<a-marker preset="hiro">Ada dua hal yang ditautkan, aset dan marker. Aset harus tersimpan di sebuah penyimpanan digital sehingga dapat diakses oleh browser. Untuk marker, bisa menggunakan template gambar kotak bertuliskan Hiro seperti berikut:
Bisakah Berkreasi Bebas?
AR.js memungkinkan developer berkreasi soal bentuk marker, pun gambar seperti apa beserta efeknya. Perlu improvisasi kode untuk membuat pengalaman AR lebih interaktif. Ikuti contoh berikut ini:
Clickable
Gambar tidak hanya muncul begitu saja, tapi bisa diklik mengikuti gestur jari. Untuk mengaktifkannya, buat susunan kode berikut:
preset="hiro"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
id="markerA"Properti raycaster berguna untuk membuat objek dapat digerakkan dengan ketukan jari. Sementara properti lain seperti emitevents dan cursor bersifat sekunder guna membantu fitur klik.
Kita bisa juga menambahkan ornamen tertentu ketika layar user tengah membuka kamera. Misalnya kita hendak menambahkan logo di ujung atas, maka terapkan kode berikut di bagian <style>:
.logo {
display:block;
height:28px;
width:auto;
position:absolute;
top:8px;
left:8px;
z-index:99999;
opacity:.64;
}Marker Custom
Bentuk marker yang unik perlu ditautkan. Caranya sama dengan menautkan gambar, namun dengan function preset. Contohnya seperti ini:
<a-marker preset=’custom’ type=’pattern’ url=’/PATH/TO/YOUR/MARKER.patt’>Pro Tips
- Marker adalah pemantik yang memunculkan objek AR.
- AR.js memungkinkan kustomisasi marker dan gambar dengan menautkan aset sendiri ke dalam baris kode di bagian <body>.
Kuis
Apabila kita ingin user mendapat objek ketika berada di lokasi tertentu, jenis AR apa yang cocok?