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

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

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

LET'S BUILD TOGETHER

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

Coordinate System

LET'S BUILD TOGETHER

I know A-Frame (WebVR)

LET'S BUILD TOGETHER

DEMO TIME

LET'S BUILD TOGETHER

DEMO 1

PRIMITIVE COMPONENTS

LET'S BUILD TOGETHER

DEMO 2

SKY PRIMITIVE && INSPECTOR

Images Equirectangular

Aframe registry

LET'S BUILD TOGETHER

DEMO 3

TEXTURES BASIC EXAMPLE

LET'S BUILD TOGETHER

DEMO 4

STATS && ATTRIBUTES

LET'S BUILD TOGETHER

DEMO 5

CAMERA ANIMATION

LET'S BUILD TOGETHER

DEMO 6

TORUS

LET'S BUILD TOGETHER

DEMO 7

TEXT && MULTIPLE ANIMATION

LET'S BUILD TOGETHER

DEMO 8

ASSETS

Access control CORS

LET'S BUILD TOGETHER

DEMO 9

3D MODELS (COLLADAS)

3D MODELS

LET'S BUILD TOGETHER

DEMO 10

VIDEOS

LET'S BUILD TOGETHER

DEMO 11

AUDIO

LET'S BUILD TOGETHER

DEMO 12

CURSOR EVENTS

LET'S BUILD TOGETHER

DEMO 13

CURSOR SHAPES

LET'S BUILD TOGETHER

DEMO 14

A-FRAME EVENTS

LET'S BUILD TOGETHER

DEMO 15

GALLERY PROJECT

LET'S BUILD TOGETHER

DEMO 16

PHYSICS

LET'S BUILD TOGETHER

DEMO 17

COMPONENTS (SUN)

LET'S BUILD TOGETHER

DEMO 18

COLLISIONS

LET'S BUILD TOGETHER

DEMO 19

MAZE PROJECT

LET'S BUILD TOGETHER

DEMO 20

A-Frame speech command component

SPEECH RECOGNITION

Story teller

LET'S BUILD TOGETHER

MINI MIKE'S METRO MINIS

LET'S BUILD TOGETHER

AFRAME CITY

LET'S BUILD TOGETHER

A-PAINTER

LET'S BUILD TOGETHER

CREDITS

Platzi

Dan Zajdband

LET'S BUILD TOGETHER

LET'S BUILD TOGETHER

LET'S BUILD TOGETHER

A-Frame React

LET'S BUILD TOGETHER

INSPIRATION

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

WebVR - A-Frame

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

  • 1,877