Pada artikel sebelumnya kita telah mempelajari dan membuat aplikasi augmented reality hanya dengan 10 baris kodde HTML menggunakan library ar.js. Pada artikel kali ini ..nyoba-nyoba pake mindAR.
Membuat aplikasi augmented relity menggnakan MindAR cukup mudah.
It's super easy!
Dalam panduan memulai cepat ini, kamu akan membuat halaman web AR, yang akan memulai kamera perangkat, mendeteksi target gambar, dan menampilkan objek yang diperbesar di atasnya.
Compile Target Images
Sebelum mengerjakan halaman web, pertama-tama kita perlu melakukan preprocess (alias kompilasi) gambar. Kami perlu memindai gambar dan mengekstrak lokasi menarik (alias titik fitur) sehingga kami dapat mendeteksi dan melacak gambar nanti.
Langkah prapemrosesan ini membutuhkan waktu, oleh karena itu kami ingin melakukannya terlebih dahulu untuk mengurangi waktu pemuatan saat pengguna benar-benar menggunakan aplikasi AR kamu nanti.
MindAR hadir dengan alat kompilasi yang sangat ramah untuk melakukan ini. Compiler Target Images
step 1 - Pilih gambar yang sebagai target (marker)
Head over to the compiler and you will see this
Dalam demo ini, menggunakan gambar berikut, kamu dapat menggnakannya juga download
Kemudian, drop gambar ke kompiler kemudia click Start.
step 2 - visualize the features
Setelah kompilasi selesai, kita akan melihat beberapa visualisasi fitur.
step 3 - download .mind file
Di bagian bawah visualisasi, kamu akan melihat tombol Download.J ika sudah, download file berexstensi mind tersebut.
Build the page
Persiapan
Pertama, buat folder bersih untuk proyek kamu, katakanlah mindar-project. Letakkan file target.mind di sana dan buat file html kosong, katakanlah index.html. Jadi folder tersebut harus memiliki dua file seperti ini:
./targets.mind
./index.html
Contoh minimal
Sekarang, mari kita mulai dengan sesuatu yang sederhana untuk menampilkan bidang persegi panjang tepat di atas gambar target. Buka index.html dengan editor pilihan kamu, dan rekatkan konten berikut:
mind-ar-js and aframe library
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.aframe.js"></script>Ini adalah perpustakaan mindAR dan A-frame yang dihosting di cdn yang kita butuhkan untuk membangun aplikasi AR web!
Body
Pada bagian body, tambahkan script berikut!
<body>
<a-scene mindar-image="imageTargetSrc: ./targets.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity mindar-image-target="targetIndex: 0">
<a-plane color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
</a-entity>
</a-scene>
</body>Kami akan menyoroti dua hal di sini terkait dengan MindAR.
- Dalam <a-scene> kamu dapat melihat properti mindar-image= "imageTargetSrc: ./targets.mind;" Ini memberi tahu mesin di mana file .mind terkompilasi yang kamu buat sebelumnya.
- Terdapat
<a-entity>, dengan prpoertymindar-image-target="targetIndex: 0". Ini memberitahu mesin untuk mendeteksi dan melacak target gambar tertentu. TargetIndex selalu 0, jika target.mind kamu hanya berisi satu gambar. Namun kamu dapat mengkompilasi beberapa gambar bersama-sama, dan targetIndex akan mengikuti urutan gambar. Kita akan membicarakannya lebih lanjut nanti ketika kami memiliki beberapa target gambar.
Pada contoh diatas, , kamu lihat kode <a-plane color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>. Ini menunjukkan bahwa objek yang akan ditampilkan berada diatas target image dengan wara biru.
Jalankan
Setelah selesai, coba buka aplikasi pada browser, allow/ijinkan aktifkan kamera. Jika berhasil akan menampilna gambar berikut!
Oya... kamu harus pake server sendiri tuk menjalankannya yaa...
Untuk mencobanya coba masuk link ini : jejakmedia.link/ar/
Complete Code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script>
</head>
<body>
<a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<img id="card" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/card.png" />
<a-asset-item id="avatarModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/card-example/softmind/scene.gltf"></a-asset-item>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity mindar-image-target="targetIndex: 0">
<a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
<a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel" animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate">
</a-entity>
</a-scene>
</body>
</html>Sumber : MindAR
Tidak ada komentar: