1 of 25

VR Development

A Nerds’ Perspective

2 of 25

Who am I?

Ruben van der Leun
Freelance software developer
Web and mobile applications
Self-proclaimed VR Evangelist (generally by never shutting up about it)

3 of 25

A Techy Perspective

VR is here
You can start building.

No Vive, Oculus or Samsung Gear required.
Your mobile will do.
Using only HTML

Live development. Check the progress via :

http://bit.do/topdeskvr

4 of 25

Personal anecdote time

http://bit.do/topdeskvr

5 of 25

http://bit.do/topdeskvr

6 of 25

Why can we start building now?

Hardware...
Software: 3D engines

3D worldspace for years with games and simulations.
Add a VR camera and have fun
Adapt our knowledge to Virtual Reality

Hurdles to overcome

Interaction
User interface
Locomotion

http://bit.do/topdeskvr

7 of 25

It’s the Wild West out (t-)here. Come join in!

http://bit.do/topdeskvr

8 of 25

Unity

Unreal

Two popular engines

All-around engine
Ease of use
Asset Store
C# or Javascript

In development since 1998
Excellent graphical capabilities
Open Source
C++

http://bit.do/topdeskvr

9 of 25

WebGL

A challenger appears

Powered by the Web
Deploy once, available everywhere
No installation required, only browser
Three.js library

http://bit.do/topdeskvr

10 of 25

AFrame (aframe.io)

Created by Mozilla
Use HTML to create �VR experiences
Support for multiple platforms

Mobile
Oculus Rift
HTC Vive

http://bit.do/topdeskvr

11 of 25

The Basics

X-Y-Z positioning

X

Y

Z

http://bit.do/topdeskvr

12 of 25

The Basics

X-Y-Z positioning
Entity

X

Y

Z

http://bit.do/topdeskvr

13 of 25

The Basics

X-Y-Z positioning
Entity
Components

X

Y

Z

http://bit.do/topdeskvr

14 of 25

Live Demo: Let’s create a galaxy

We’ll create a scene with planets and make them rotate around us
Going through the basics we just discussed
Watch progress live!

http://bit.do/topdeskvr

15 of 25

Creating a galaxy in 6 steps

Place a camera
Set the background
Create a planet
Place a texture on it
Create multiple planets
Rotate the planets around the user

http://bit.do/topdeskvr

16 of 25

Step #1: Place a camera

Place an entity in the scene
Add the following components:

camera
look-controls

HMD input
Gyroscope/Accelerometer for mobile
Mouse

http://bit.do/topdeskvr

17 of 25

Creating a galaxy in 6 steps

Place a camera
Set the background
Create a planet
Place a texture on it
Create multiple planets
Rotate the planets around the user

http://bit.do/topdeskvr

18 of 25

Step #2: The background

Adding a starfield as the background

http://bit.do/topdeskvr

19 of 25

Creating a galaxy in 6 steps

Place a camera
Set the background
Create a planet
Place a texture on it
Create multiple planets
Rotate the planets around the user

http://bit.do/topdeskvr

20 of 25

Step #3: Create the first planet

Place an entity in the scene
Add the following components:

Position

Placing it at 0, 0, -10, so it’s right in front of us

geometry

Creates a basic shape (sphere)
Determines size via width, height & depth

http://bit.do/topdeskvr

21 of 25

Creating a galaxy in 6 steps

Place a camera
Set the background
Create a planet
Place a texture on it
Create multiple planets
Rotate the planets around the user

http://bit.do/topdeskvr

22 of 25

Step #4: Place a texture on it

Using the material component, we can place an image on the sphere
The image will be wrapped around the model

http://bit.do/topdeskvr

23 of 25

Creating a galaxy in 6 steps

Place a camera
Set the background
Create a planet
Place a texture on it
Create multiple planets
Rotate the planets around the user

http://bit.do/topdeskvr

24 of 25

Creating a galaxy in 6 steps

Place a camera
Set the background
Create a planet
Place a texture on it
Create multiple planets
Rotate the planets around the user

http://bit.do/topdeskvr

25 of 25

What else can we do with AFrame?

Interaction
Write your own component
Use your favorite framework for internal logic
Implement Firebase for multiplayer
Play with the lights

http://bit.do/topdeskvr