Kenapa sih selalu web? Ya karena di zaman sekarang ini, perkembangan dunia digital berjalan cepet banget terutama pada basis situs. Karena emang udah gak diraguin lagi sih, orang mengakses web tuh gampang banget. Malah sekarang ini web gak cuma sekedar halaman personal. Program dan game pun dapat dijalankan di web.
Nah,, tapii di kesempatan kali ini, sesuai judul, gw akan ngasih panduan sekaligus source code bagi merancang projek teknologi web yang bernama Augmented Reality.
Mungkin banyak yang belum tau. Apa sih augmented reality itu? bikin apa sih augmented reality itu? man, lo pasti tau dan pernah liat yang namanya Augmented Reality ini, tapi ‘cuma’ baru tau kalo itu ternyata namanya Augmented Reality.
akan tetapi santay, gw akan jelasin mengenai augmented reality di artikel ini. Nah, sebelum gw jelasin apa itu augmented reality, gw bakal kasih diantara contoh dari pemakaian augmented reality. Kayak gini nih;
 |
| Augmented Reality Sederhana |
 |
| Augmented Reality di game Pokemon Go |
Nah, baru liat gambarnya, pasti lo seketika paham, bahkan pasti pernah pake teknologi ini.
Augmented Reality (AR) yakni teknologi yang menggabungkan antara dunia nyata dengan dunia digital yang disatukan via alat elektronik dan scanner. Alat elektronik yang dimaksud berupa komputer atau smartphone. Bagi scanner, kita dapat menggunakan kamera smartphone.
Cara kerjanya yakni, sebuah gambar atau objek yang mempunyai suatu kode unik di scan dengan kamera hp, lalu animasi 3D akan muncul. Kode unik gak cuma barcode atau angka, tapi sebuah format, warna, topografi, tekstur visual pun dapat menjadi kode unik. Nah bagi animasi 3D nya, dapat kita gunakan di contoh yang bakal gw kasih ini, atau dapat bikin sendiri dengan menggunakan WebGL bagi rendering animasinya.
Bagi basis java dan kotlin, mungkin telah banyak yang menggunakan teknologi ini. Namun di teknologi situs, AR masih tergolong baru dan masih dikembangkan. Dan gak segala versi browser suport bagi menerjemahkan bahasa AR yang ditulis gunakan Javascript. akan tetapi tenang aja, gak perlu protes apalagi demo wahai rakyat ku. Karena gw bakal ngasih tau dengan sejelas mungkin cara bikinnya termasuk spesifikasi yang diperlukan.
Cara Membangun Projek Augmented Reality (AR) Dengan menggunakan Web
Peralatan yang mesti digunakan yaitu:
1. Browser Chrome versi 71.0.3578.98 atau versi terdekatnya (Kalau mozila dan browser lain saya kurang tau)
2. Web server local (Disini saya menggunakan XAMPP)
3. Ngrok (Ntar gw jelasin kenapa mesti pake fitur ini)
4. Secangkir kopi dan wajah cakep (biar makin niat)
Okeh, pertama-tama, mari kita mulai rilis sourcecode nya. Silahkan kalian copas dibawah ini..
<!doctype HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://rawgit.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/events.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<!-- kita akan menambahkan detectionMode dan matrixCodeType bagi memberitahu ke AR.js bagi mengenali kode unik -->
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<a-assets>
<a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/mtegarsp/AR/master/CesiumMan"></a-asset-item>
</a-assets>
<a-marker type='barcode' value='7'>
<a-box position='0 0.5 0' color="red"></a-box>
</a-marker>
<a-marker markerhandler emitevents="true" cursor="fuse: false; rayOrigin: mouse" id="animated-marker" type='barcode' value='6'>
<a-entity
id="animated-model"
gltf-model="#animated-asset"
scale="2">
</a-entity>
</a-marker>
<!-- gunakan <a-entity camera> bagi mendukung tanda yang ganda, selain itu, gunakan <a-marker-camera> selaku pengganti </a-marker> -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
ngrok http 80 -host-header=”localhost:80″
nah bakal keluar url seperti subdomain dari ngrok.io
Silahkan diakses dengan https. karenanya kita akan masuk ke folder htdocs dengan menggunakan link tersebut.
Nah baru kita akses pake https://xxx.ngrok.io/AR.
Kalo udah, silahkan nyalakan webcam, lalu arahkan kamera ke gambar dibawah ini.
Hayoo.. apa yang tampil bro.. wkwkwk
Silahkan tanya di kolom komentar kalo belum berhasil. Kalau udah ya syukur. Silahkan kembangin terus!
Demikianlah artikel cara membuat projek augmented reality berbasis web dengan html dan js. Semoga panduan kali ini bermanfaat. Terima Kasih!
Sumber: https://github.com/mtegarsp/AR
