Membuat Projek Augmented Reality Berbasis Web (Html & Js)
Kamis, 15 April 2010
Tambah Komentar
cara menciptakan augmented sederhana memakai web - Okeh.. Hmm.. Lets do it. Selamat tiba di artikel TB kali ini. Seperti biasanya, admin ganteng bakal ngasih info menarik perihal dunia teknologi. Episode kali ini agak menarik. Soalnya kita bakal membahas salah satu teknologi terbaru yang sudah diciptakan dalam basis web. Ya.. Web!
Kenapa sih selalu web? Ya alasannya ialah di zaman sekarang, perkembangan dunia digital berjalan cepet banget terutama dalam basis website. Karena emang udah gak diraguin lagi sih, orang mengakses web tuh praktis banget. Malah kini web gak cuma sekedar halaman personal. Aplikasi dan game pun dapat dijalankan di web.
Nah,, tapii di kesempatan kali ini, sesuai judul, gw akan ngasih tutorial sekaligus source code untuk menciptakan projek teknologi web yang berjulukan Augmented Reality.
Mungkin banyak yang belum tau. Apa sih augmented reality itu? buat apa sih augmented reality itu? man, lo niscaya tau dan pernah liat yang namanya Augmented Reality ini, tapi 'cuma' gres tau kalo itu ternyata namanya Augmented Reality.
Tapi santay, gw akan jelasin perihal augmented reality di artikel ini. Nah, sebelum gw jelasin apa itu augmented reality, gw bakal kasih salah satu referensi dari penggunaan augmented reality. Kayak gini nih;
 |
| Augmented Reality Sederhana |
 |
| Augmented Reality pada game Pokemon Go |
Nah, gres liat gambarnya, niscaya lo pribadi paham, bahkan niscaya pernah pake teknologi ini.
Augmented Reality (AR) ialah teknologi yang menggabungkan antara dunia konkret dengan dunia digital yang disatukan melalui perangkat elektronik dan scanner. Perangkat elektronik yang dimaksud berupa komputer atau smartphone. Untuk scanner, kita dapat memakai kamera smartphone.
Cara kerjanya adalah, sebuah gambar atau objek yang mempunyai suatu instruksi unik di scan dengan kamera hp, kemudian animasi 3D akan muncul. Kode unik gak cuma barcode atau angka, tapi sebuah bentuk, warna, topografi, tekstur visual juga dapat menjadi instruksi unik. Nah untuk animasi 3D nya, dapat kita pakai di referensi yang bakal gw kasih ini, atau dapat bikin sendiri dengan memakai WebGL untuk rendering animasinya.
Untuk basis java dan kotlin, mungkin sudah banyak yang memakai teknologi ini. Namun di teknologi website, AR masih tergolong gres dan masih dikembangkan. Dan gak semua versi browser suport untuk menerjemahkan bahasa AR yang ditulis pakai Javascript. Tapi hening aja, gak perlu protes apalagi demo wahai rakyat ku. Karena gw bakal ngasih tau dengan sejelas mungkin cara bikinnya termasuk spesifikasi yang diperlukan.
Cara Membuat Projek Augmented Reality (AR) Berbasis Web
Peralatan yang harus dipakai yaitu:
1. Browser Chrome versi 71.0.3578.98 atau versi terdekatnya (Kalau mozila dan browser lain aku kurang tau)
2. Web server local (Disini aku memakai XAMPP)
Baca: XAMPP : Pengertian, Fungsi, Dan Cara Menggunakannya
3. Ngrok (Ntar gw jelasin kenapa harus pake fitur ini)
4. Secangkir kopi dan wajah cakep (biar makin niat)
Okeh, pertama, mari kita mulai rilis source code 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 untuk memberitahu ke AR.js untuk mengenali instruksi 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> untuk mendukung tanda yang ganda, selain itu, gunakan <a-marker-camera> sebagai pengganti </a-marker> -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Tentunya jikalau kalian sudah paham perihal penggunaan web server lokal dari XAMPP, niscaya sudah tau dong harus gimana. Yakk, silahkan taro instruksi tersebut di file gres di htdocs dengan nama index.html
Nah, disini gw akan bikin folder dengan nama AR
Beginilah kira kira.
Wkwkw gw tau apa yang dipikiran lu wahai real programmer.
"Itukan pake HTML dan JS doang, kenapa harus pake web server lokal anjay?!"
Santuy..santuy..
Makara begini, dengan library javascript dari ar.js, lo diwajibkan untuk mempunyai alamat https:// atau protocol secure untuk mengakses kamera. Ya demi keamanan, hal ini gak memandang apakah web lo masih offline atau sudah online. Nah oleh alasannya ialah itu, kita bakal manfaatin NGROK dengan WEB SERVER LOKAL XAMPP
Kita bakal menciptakan jaringan localhost kita mempunyai protocol secure (https://) dengan bantuan ngrok. Ngrok akan membantu kita untuk memanipulasi alamat web kita berada di server ngrok. Tapi hening aja, seluruh file di htdocs sebetulnya masih offline dan hanya pc lo yang dapat ngakses.
Daripada bingung, nih pribadi gw paktekin aja.
Silahkan DOWNLOAD NGROK DISINI
Nah kalau sudah, silahkan ekstrak zip nya di folder XAMPP lo. Defaultnya di C://xampp/ nah taro dah disitu. Inget, Apache dan Mysql harus tetap dalam keadaan menyala!
Setelah itu buka aplikasi tersebut (ngrok.exe)
Setelah itu ketikan perintah menyerupai dibawah ini didalam cmd ngrok
ngrok http 80 -host-header="localhost:80"
nah bakal keluar url menyerupai subdomain dari ngrok.io
Silahkan diakses dengan https. maka kita akan masuk ke folder htdocs dengan memakai link tersebut.
Nah gres kita kanal pake https://xxx.ngrok.io/AR.
Kalo udah, silahkan nyalakan webcam, kemudian arahkan kamera ke gambar dibawah ini.
Silahkan tanya di kolom komentar kalo belum berhasil. Kalau udah ya syukur. Silahkan kembangin terus!
Sekian artikel cara menciptakan projek augmented reality berbasis web dengan html dan js. Semoga tutorial kali ini bermanfaat. Terima Kasih!
Sumber: https://github.com/mtegarsp/AR
Belum ada Komentar untuk "Membuat Projek Augmented Reality Berbasis Web (Html & Js)"
Posting Komentar