WebAR

Diky Arga

Open Source Enthusiast

Part of

Doscom.org - Dinus Open Source Community

&

Mozilla Foundation as Mozilla Tech Speaker

Work for

 

 

as Front-end Developer

Coding + Gowes

@dikyarga || dikyarga.com

Augmented Reality

Realitas tertambah

Realitas tertambah adalah teknologi yang menggabungkan benda maya dua dimensi dan ataupun tiga dimensi ke dalam sebuah lingkungan nyata tiga dimensi lalu memproyeksikan benda-benda maya tersebut dalam waktu nyata.[1]

- Wikipedia

Contoh-contoh implementasi AR

di dunia commerce

Masalah dan Solusi tentang objek 3D

Bagaimana membuat objek 3D dengan mudah dan cepat ?

Apa perbedaan AR dengan VR ?

tidak seperti realitas maya yang sepenuhnya menggantikan kenyataan, realitas tertambah sekadar menambahkan atau melengkapi kenyataan.[2][3]

- masih dari Wikipedia

Lalu, apa itu WebAR ?

Sederhananya, Augmented Reality yang dibawa ke teknologi Web.

HTML, CSS dan JavaScript

Apa kelebihan WebAR dengan AR app ?

Distribusi

Lintas Platform

Immediacy

sumber : https://uploadvr.com/3-reasons-webvr-future-virtual-reality/
  • tidak perlu install
  • tidak perlu update
  • lintas perangkat (desktop & mobile)
  • lintas sistem operasi
  • sekali klik

Kenapa WebAR adalah masa depan AR ?

sumber https://medium.com/arjs/why-web-apps-are-the-future-of-augmented-reality-c503e796a0c5

Native app vs Web app === Desktop App vs Cloud app

The Technology Gap is Closing

  • Progressive Web App
  • WebGL 2.0
  • WebAssembly
  • WebRTC
  • WebWorkers

Woy! Kapan coding nya ?

Alat dan Bahan

  • Code Editor (Saya pakai VS Code / Atom)
  • Firefox versi terbaru (58 keatas)
  • Jika pengen nyobain di smartphone, unduh juga Firefox terbaru.
  • A-Frame
  • AR.js

Alat

Bahan

A-Frame

aframe.io

by MozVR Team

Karya yang dibuat dengan AFrame

aframe.io/examples/

Sebelum ada A-Frame

PDKT sama A-Frame

Mulai buat HTML sederhana

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    </a-scene>
  </body>
</html>

  1. Buat folder "belajar-webar"

  2. Buat file dengan nama "index.html"

  3. Salin code berikut ini :

Adding an Entity

<a-scene>
  <a-box color="red"></a-box>
</a-scene>

Salin code berikut didalam tag <body>

<a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>

Sama dengan

Transformasi ke 3D

<a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>

Kaidah Tangan Kanan

Position, Rotation & Scale

Taruh Box di depan kamera

<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

* Menggunakan satuan meter

Kita atur posisi-nya, dengan menambahkan atribut position

Bagaimana Cara Mengontrolnya ?

Pada display datar (seperti Laptop atau PC)

Drag n Drop Mouse + Keyboard ASDW atau arah panah

Pada smartphone cukup putar putar secara 360 derajat

Tambah Background Warna

Salin di dalam tag <a-scene>

<a-sky color="#2ecc71"></a-sky>

<a-sky>

Tambahkan Texture Gambar

tambahkan atribut src pada tag <a-box>

  <a-box src="https://i.imgur.com/mYmmbrp.jpg" 
         position="0 2 -5" 
         rotation="0 45 45"
         scale="2 2 2"></a-box>

Pakai Asset Management System

<a-scene>
  <a-assets>
    <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
  </a-assets>
  <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
  <a-sky color="#222"></a-sky>
</a-scene>
  • Tambahkan <a-assets> pada scene.
  • Definisikan texture <img> didalam <a-assets>.
  • Beri <img> HTML ID (e.g., id="boxTexture").
  • Referensikan asset dengan ID dengan DOM selector format (src="#boxTexture").

di rekomendasikan untuk meningkatkan performa dengan cara mengambil asset-nya terlebih dahulu sebelum di render

Tambah Animasi

tambahkan dalam tag <a-box>

<a-animation attribute="position" 
             to="0 3 0" 
             direction="alternate" 
             dur="2000"
             repeat="indefinite">
</a-animation>
  • Animasikan pada atribut position
  • Animasikan ke 0 3 -5 naik
  • Arahanya mengulang-ulang secara alternate
  • Setiap perulangan durasinya 2000 milisecond
  • Di ulang indefinite

dan masih banyak lagi ...

Tambahkan

Lantai

Pencahayaan

Audio

Text

 

Ayo selesaikan apa yang kita mulai

Unduh aset 3D di

tf3dm.com

Clara.io

Sketchup’s 3D Warehouse

Archive3D

TurboSquid

Atau buat sendiri dengan

Blender

3DMax

Cinema4D

Tambahkan Realitas Tertambah

AR.js

https://github.com/jeromeetienne/AR.js

Masukan script AR.js dibawah script A-Frame

<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script>

Modifikasi <a-scene>

<a-scene embedded arjs='sourceType: webcam;'>

Masukan aset 3D ke proyek kita

<a-asset-item id="monas" src="assets/3ds/monas.obj"></a-asset-item>

Masukan ke dalam tag <a-assets>

buat entitas baru dengan attribute obj-model

<a-entity position='0 0.5 0' obj-model="obj: #monas;" scale="0.05 0.05 0.05"></a-entity>

atau ambil assetnya secara online di

 

https://raw.githubusercontent.com/dikyarga/belajar-WebAR/master/assets/3ds/monas.obj

Tambahkan kamera marker nya dengan <a-camera-marker>

<a-marker-camera preset='hiro'></a-marker-camera>

tambahkan di dalam tag <a-scene>

Lalu, selanjutnya ?

WebAssembly

Lalu, selanjutnya ?

Bagaimana jika tanpa marker ?

AR.js mendukung Tango

Bonus!

Kalian juga bisa buat marker sendiri di sini , lalu ikuti cara berikut ini

Kita juga bisa main-main di Playground WebAR

< Thank you />

<? Any question ?>

t.me/dikyarga

Ping me on Telegram

Made with Slides.com