MozBelajar: Let's Get to Know WebVR

(Virtual Reality on the Web)

Diky Arga Anggara

Mahasiswa Teknik Informatika, UDINUS, Semarang

Open Source Enthusiast

Bagian dari Dinus Open Source Community (Doscom.org)

Bagian dari Mozilla Foundation, sebagai Firefox Student Ambassador & Mozilla Tech Speaker

Part-time Front-end programmer di GNEWS.id > MailTarget.co ( VueJS )

Coding + Cycling =

www.dikyarga.com | @dikyarga

slides.com/dikyarga/mozbelajar-lets-get-to-know-webvr

Slide ini langsung dapat di akses di

Apa itu

?

VR (Virtual Reality)

Virtual reality adalah sebuah teknologi yang membuat pengguna atau user dapat berinteraksi dengan lingkungan yang ada dalam dunia maya yang disimulasikan oleh komputer, sehingga pengguna merasa berada di dalam lingkungan tersebut. Di dalam bahasa Indonesia virtual reality dikenal dengan istilah realitas maya

- CodePolitan

Lalu, apa itu WebVR ?

Singkatnya, dunia VR yang dibawa ke dunia Web menggunakan teknologi Web juga, seperti HTML, CSS dan JavaScript

Menapa WebVR ?

  • Distribution

  • Cross-platform

  • Immediacy

A-Frame

aframe.io

by MozVR Team

Karya yang dibuat dengan AFrame

aframe.io/examples/

Sebelum ada A-Frame

Final Project

Create your own simple

VR e-commerce

PDKT sama A-Frame

Mulai buat HTML sederhana

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

  1. Buat folder "belajar-aframe"

  2. Buat file dengan nama "index.html"

  3. Copy 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 Background Gambar

tambahkan dalam tag <a-assets>

    <img id="skyTexture"
      src="https://raw.githubusercontent.com/dikyarga/belajar-aframe/master/images/panorama-smk-telkom-malang.jpeg">

rubah attribut color menjad src pada <a-sky>

<a-sky src="#skyTexture"></a-sky>

Tambah Animasi

tambahkan dalam tag <a-box>

<a-animation attribute="position" 
             to="0 3 -5" 
             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

Masukan aset 3D ke proyek kita

<a-asset-item id="shoe-obj" src="3d/converse_obj.obj"></a-asset-item>
<a-asset-item id="shoe-mtl" src="3d/converse_obj.mtl"></a-asset-item>

Masukan ke dalam tag <a-assets>

tambah tag <a-obj-model>

<a-obj-model src="#shoe-obj" 
             mtl="#shoe-mtl" 
             position="-5 0 -2" 
             rotation="0 0 0" 
             scale="0.1 0.1 0.1">
</a-obj-model>

Tambahkan Nama Barang dan Harga

  <script src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>

Menggunakan AFrame BMFont

tambahkan entitas baru dengan atribut bmfont-text

<a-entity bmfont-text="text: Sepatu Sneaker - Rp. 250.000,-"></a-entity>

Tambahkan code ini didalam tag <head>

Mari kita coba!

https://dikyarga.github.io/belajar-aframe/

Bonus!

Source code :

github.com/dikyarga/belajar-aframe

 

Demo :

dikyarga.github.io/belajar-aframe/

What's next ?

List resource Awesome AFrame

Tanya jawab FAQ

telegram.me/dikyarga

Hubungi saya via Telegram Chat

< Thank you />

<? Any question ?>

Bonus lagi!

https://www.eventbrite.com/e/mozkopdar-malang-mozilla-in-2017-tickets-31088151498

MozBelajar: Let's Get to Know WebVR

By Diky Arga

Made with Slides.com

MozBelajar: Let's Get to Know WebVR

for MozBelajar: Let's Get to Know WebVR

  • 1,102

More from Diky Arga