Tutorial Menampilkan AR(Augmented Reality) Di Website

www.cerdasbuatan.com iptek , tutorial Comment

Sobat cerdas kali ini kami akan memberikan tutorial bagaimana cara menampilkan AR(Augmented Reality) di Website sekaligus membahas fungsi dasar pada AR.JS

Intro sedikit, Mungkin dari sobat cerdas sudah tidak asing lagi, mendengar kata atau istilah AR di dunia teknologi baru-baru ini. Tetapi kebanyakan hanya di tampilkan di Sebuah aplikasi mobile dan jarang sekali di tampilkan di website. nah kali ini kami akan memberikan tutorial sederhana terkait AR Web.. atau menampilkan AR di website menggunakan AR.JS, jadi intinya adalah AR.JS ini sebuah Library untuk menampilkan AR CUSTOM alias buatan sendiri secara Instan dan di tampilkan di Websitemu .

dan Perlu sobat ketahui bahwa AR JS ini di buat oleh @jeromeetienne dan sekarang dikelola oleh @nicolocarpignoli . kalo sobat cerdas perhatikan di Github AR.JS ini, mereka selalu update terkait librarynya jadi jangan takut.

Langsung ke DEMO terlebihdahulu...😊

~ Click Demo : AR CERDASBUATAN

~ Dan coba arahkan ke Gambar Ini!

Marker Cerdasbuatan

*Untuk mencoba menampilkan usahakan menggunakan HTTPS karena kalo pake HTTP atau di local akan di dapat ti error dan coba menggunakan Mobile.

Error HTTP

AR Kotak Kuning

-> Sehingga akan tampak seperti hasil di gambar...

*Mungkin ini hanya tampak sederhana seperti menampilkan kotak kuning saja, tapi sebenarnya masih banyak yang bisa kita lakukan. dan juga bisa menggunakan file mentahan exportan dari unity ke ar.js ini. Contoh seperti gambar di bawah ini!

AR ALUN-ALUN CIANJUR

(~) Link AR Web Alun-alun Cianjur : https://cikraindo.com/study-case/ar-vr-cianjur/

untuk mencoba scroll paling bawah dan cari TRY HERE ! , untuk melihat syntax tinggal Ctrl+U.

Dan ketika dilihat <a-entity gltf-model> ada format .glb nah sobat kalo sudah terbiasa dengan unity tinggal export dengan buatan sendiri lalu samakan formatnya atau kalo misalnya gak bisa di unity coba pake app pihak 3 untuk export seperti Blender dengan format tersebut.

Jadi sebernarnya kita bisa melakukan banyak hal di AR.js ini sama halnya dengan kita membuat AR di unity asalkan kita baca saja Dokumentasinya .- link dokumentasi saya sertakan di paling bawah.

Langsung keTutorialnya...😊

Copas dan beri nama : index.html


<!Doctype HTML>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/1.7.5/aframe/build/aframe-ar.js"></script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
      <a-marker preset="custom" type="pattern" url="assets/pattern-cerdas-buatan.patt"> 
          <a-box position='0 0.5 0' material='color: yellow;'></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

Berikut sekalian Saya sertakan tutor cara mebuat Marker!
Pertama Click Link Bawah ini!
(~) : https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

Marker AR

(~) Marker Maker:
1. Upload Image
2. Download Marker
(Sebagai acuan Tracking seperti : pattern-cerdas-buatan.patt)
3. Download Image

(~) Apabila sudah selesai tinggal upload File Index.html kehosting masing-masing seperti biasa link namawebsitemu.com/CPANEL, File Manager -> public_html -> foldermu,. lalu buat folder baru dan beri nama "assets"->Lalu Masukan file Image & pattern-cerdas-buatan.patt ke Folder "assets". Sehingga menjadi seperti ini.

Struktur File

Struktur File Assets

Perjelasan :
Untuk cara kerjannya sebernya sama Seperti kita bikin AR di Unity jadi mengacu pada Scene cuman beda nya untuk mengcustom kita harus menggunakan app pihak ketiga. untuk contoh membuat Marker sebagai acuan Tracking kamera.

Kalo misalnya sobat belum punya hosting sama sekali atau mau beli tapi uang kurang, atau intinya mau yang gratis, saya serta Link Hosting Full Gratiss.
1. https://www.000webhost.com/
2. https://www.freehosting.com/

Nah untuk mengetahui Dokumentasi lebih Lengkap : https://aframe.io/blog/arjs/

Baik semoga sobat cerdas berhasil mencoba tutorial ini...

*Catatan : Tolong ingatkan apabila ada salah cetak/typo Terima Kasih!

Cerdas Buatan

Tuesday, November 12, 2019

Tutorial Menampilkan AR(Augmented Reality) Di Website