LET'S BUILD TOGETHER

http://rocka.co

xergioalex

Sergio A. Florez

TECH LEAD && FULL STACK DEVELOPER

LET'S BUILD TOGETHER

VIRTUAL REALITY

LET'S BUILD TOGETHER

LET'S BUILD TOGETHER

HTC VIVE

$527

OCULUS RIFT

$399

OCULUS GO

$199

SONY VR

$249

SAMSUNG GALAXY GEAR

$79

GOOGLE DAYDREAM

$79

LET'S BUILD TOGETHER

+ $2000

+ $649

LET'S BUILD TOGETHER

LET'S BUILD TOGETHER

DISTRIBUTION

MASSIFICATION

LET'S BUILD TOGETHER

https://immersive-web.github.io/webvr/spec/1.1/

STANDARD

It tells us what are the APIs that a browser must expose in order for a developer to create a reality experience on the web

LET'S BUILD TOGETHER

Today, the web is the most important mass distribution platform

LET'S BUILD TOGETHER

+

CARDBOARD - $7

VR BOX - $15

LET'S BUILD TOGETHER

LET'S BUILD TOGETHER

https://threejs.org/examples/

LET'S BUILD TOGETHER

Most webvr experiences weigh less than 2mb

WHY WEBVR?

We do not have to learn new technologies or reinvent the wheel

Use WebGL but we will not have to deal with it directly.

It's based on ThreeJs, it is the most common webGL framework.

If you already have an experience in webGL and in ThreeJs, adding a bit of code you can already have WebVR.

Aframe es el nuevo framework con el que podran hacer experiencias con html y javascript.

LET'S BUILD TOGETHER

https://aframe.io/

LET'S BUILD TOGETHER

https://aframe.io/docs/0.6.0/introduction/

Entity-Component System

architecture

Entities:  are container objects into which components can be attached. Entities are the base of all objects in the scene.

Components:  are reusable modules or data containers that can be attached to entities to provide appearance, behavior, and/or functionality.

Systems:  provide global scope, management, and services for classes of components.

LET'S BUILD TOGETHER

https://aframe.io/docs/0.6.0/introduction/

Coordinate System

LET'S BUILD TOGETHER

I know A-Frame (WebVR)

LET'S BUILD TOGETHER

DEMO TIME

https://github.com/xergioalex/goBasics

LET'S BUILD TOGETHER

DEMO 1

https://codepen.io/xergioalex/pen/jZxbdo

PRIMITIVE COMPONENTS

LET'S BUILD TOGETHER

DEMO 2

https://codepen.io/xergioalex/pen/PQeZYy

SKY PRIMITIVE && INSPECTOR

Images Equirectangular

https://www.flickr.com/groups/44671723@N00/

https://codepen.io/xergioalex/pen/oEdbGd

https://aframe.io/aframe-registry/

Aframe registry

LET'S BUILD TOGETHER

DEMO 3

https://codepen.io/xergioalex/pen/VQxepd

TEXTURES BASIC EXAMPLE

https://codepen.io/xergioalex/pen/vdjLmz

LET'S BUILD TOGETHER

DEMO 4

https://codepen.io/xergioalex/pen/LQmGdr

STATS && ATTRIBUTES

LET'S BUILD TOGETHER

DEMO 5

https://codepen.io/xergioalex/pen/ddeGKq

CAMERA ANIMATION

https://codepen.io/xergioalex/pen/eVrJPR

LET'S BUILD TOGETHER

DEMO 6

TORUS

https://codepen.io/xergioalex/pen/wyjMQB

https://codepen.io/xergioalex/pen/gvzPyY

LET'S BUILD TOGETHER

DEMO 7

TEXT && MULTIPLE ANIMATION

https://codepen.io/xergioalex/pen/qxYbwM

LET'S BUILD TOGETHER

DEMO 8

ASSETS

https://codepen.io/xergioalex/pen/eVrZpV

https://cdn.aframe.io/

Access control CORS

LET'S BUILD TOGETHER

DEMO 9

3D MODELS (COLLADAS)

https://codepen.io/xergioalex/pen/JpvXrz

https://3dwarehouse.sketchup.com/?hl=en

3D MODELS

https://clara.io

https://www.blender.org/

https://aframe.io/docs/0.7.0/guides/building-with-magicavoxel.html

https://codepen.io/xergioalex/pen/XZqdXq

LET'S BUILD TOGETHER

DEMO 10

VIDEOS

https://codepen.io/xergioalex/pen/eVrZQQ

https://codepen.io/xergioalex/pen/XZqdwG

LET'S BUILD TOGETHER

DEMO 11

AUDIO

https://codepen.io/xergioalex/pen/BYxzBw

LET'S BUILD TOGETHER

DEMO 12

CURSOR EVENTS

https://codepen.io/xergioalex/pen/rJvLab

LET'S BUILD TOGETHER

DEMO 13

CURSOR SHAPES

https://codepen.io/xergioalex/pen/qxYNNO

LET'S BUILD TOGETHER

DEMO 14

A-FRAME EVENTS

https://codepen.io/xergioalex/pen/MQQrwJ

LET'S BUILD TOGETHER

DEMO 15

GALLERY PROJECT

https://github.com/xergioalex/webvr-gallery

LET'S BUILD TOGETHER

DEMO 16

PHYSICS

https://codepen.io/xergioalex/pen/wyjowM

Physics: http://schteppe.github.io/cannon.js/

LET'S BUILD TOGETHER

DEMO 17

COMPONENTS (SUN)

https://codepen.io/xergioalex/pen/BYxLPB

Sky Sun: https://github.com/ngokevin/kframe/tree/master/components/sun-sky
A-Frame Extras:

https://github.com/donmccurdy/aframe-extras/tree/master/src/primitives

LET'S BUILD TOGETHER

DEMO 18

COLLISIONS

https://codepen.io/xergioalex/pen/QQrGBO

Physics: http://schteppe.github.io/cannon.js/

LET'S BUILD TOGETHER

DEMO 19

MAZE PROJECT

https://github.com/xergioalex/webvr-maze

LET'S BUILD TOGETHER

DEMO 20

https://codepen.io/xergioalex/pen/rJKxbm

https://github.com/lmalave/aframe-speech-command-component

A-Frame speech command component

https://github.com/TalAter/annyang

https://zajdband.com/storyteller/vr.html

SPEECH RECOGNITION

Story teller

LET'S BUILD TOGETHER

https://github.com/mikelovesrobots/mmmm

MINI MIKE'S METRO MINIS

LET'S BUILD TOGETHER

https://github.com/kfarr/aframe-city-builder

AFRAME CITY

LET'S BUILD TOGETHER

A-PAINTER

https://blog.mozvr.com/a-painter/

LET'S BUILD TOGETHER

CREDITS

@impronunciable

https://gurivr.com/

Platzi

https://platzi.com/clases/web-vr/

Dan Zajdband

LET'S BUILD TOGETHER

LET'S BUILD TOGETHER

LET'S BUILD TOGETHER

https://github.com/ngokevin/aframe-react

A-Frame React

LET'S BUILD TOGETHER

INSPIRATION

https://aframe.io/blog/

LET'S BUILD TOGETHER

IMPROVE PUBLIC SPEAKING SKILL

EMPATHY MACHINE

LET'S BUILD TOGETHER

LET'S BUILD TOGETHER

http://rocka.co

xergioalex

Sergio A. Florez

TECH LEAD && FULL STACK DEVELOPER

WebVR - A-Frame

By Sergio Alexander Florez Galeano

Made with Slides.com

WebVR - A-Frame

Creating 360 web experiences with A-Frame && Javascript.

  • 1,869

More from Sergio Alexander Florez Galeano