Constructing the Social VR Web

 

Gavan Wilhite

AltspaceVR

What new tech is being built

How our browser works

Why we work on the VR web

AltspaceVR

why we work on the VR web

our service

communicate with anyone on the planet in the most natural and fufilling way possible

many platforms

operating systems

headsets

many devices

controllers

body sensors

many people

over 150 countries represented

 

live events have audiences in the thousands

 

widespread access to high-quality VR

be together

do things together

 

people want information, applications, and games

 

in VR, people can

  • meet
  • discuss​
  • laugh
  • attend

but they want more

they want the web

 

across all platforms, instantly, and safely

What does this look like?

Holograms Against Humanity

  • three.js + socket.io + node.js
  • 5,000+ games played last month
  • open source

 

What makes it successful?

  • humor
  • encourages communication
  • jump-in, jump-out

So, how does it work?

Traditional Browser

Browser

Engine

Game

Engine

+

VR Browser

=

+

Application

Browser

Engine

=

+

Application

We built a VR browser

and a SDK to make it easy to use

VR Web

Traditional

Browsers

+

Low-level

 VR APIs

+

Polyfills

VR Browsers

+

High-level

VR APIs

two paths to the VR web


one incremental,

one experimental


both make sense,

given goals and starting points

Chromium

three.js

A-Frame / 

<html></html>

game engine

application

scene 

browser engine

web app

Implementation

Three.js Renderer

  • Three.js is renderer agnostic

  • So we wrote our own renderer

  • Converts the three.js scene graph to Unity objects

  • Supports a subset of performant materials

Javascript APIs

getUser() 
// public information about the user
// useful for nameplates / highscores

getSpace() 
// information about the space
// useful for persistence 

getEnclosure()
// enclosure dimensions and scaling
// useful for reactive VR design

getThreeJSTrackingSkeleton()
// returns polled skeleton as fused from all body sensors
// useful for using the location of body parts as input

getGamepads()
// returns all gamepad-like input devices, including 6dof
// useful for game input or manipulation of objects

Have automatic access to

  • VOIP

  • Activities

  • Events

  • Avatars

  • Environments

 

Live on the web

  • Host at any URL

  • Use any backend

  • No gatekeepers

With the SDK,

you can make apps and games that 

Fullspace

  • Environments
  • Decorations
  • Immersive games
  • Avatar-attached items
  • Designed for VR

"Fullscreen"

Enclosed

  • Tabletop games
  • Visualizations
  • Objects
  • Interfaces
  • Designed for VR or AR

"Windowed"

look for the

 tick marks

AltPDB

  • Visualize proteins
  • Dynamically loads from RCSB PDB
  • Multiple display modes

 

Live interactive lessons

  • Content is synchronized
  • Presenter can indicate parts of the molecule using body trackers
  • Audience can ask questions

We've got the basics, but we want more

 

We want reusable, high-performance building blocks

What next?

The 2D web needed <textarea>, <image> and <iframe> as native building blocks

 

What are the equivalents for the VR web?

Building blocks

Native Components

NEW!

a new way to extend the web with native functionality

A-Frame

which brings us to the most important question.. 

Why is Brian on fire?

  • Built by Mozilla

  • Entity / Component / System

  • Uses Three.js

A bit about A-Frame

  • Implemented by the browser, rather than in Javascript

  • Directly access game engine features

  • Use platform infrastructure

  • Look for the  "n-"

Native Components

<a-entity position="0.5 1.25 3" n-spawner="res:interactables/basketball">

Text

Object

Spawner

Collider

Native Components

Container

Sound

Skeleton

released from Beta today

Text

  • In-world or UI

  • Rendered natively with signed distance fields

Native Components

Common Grounds

  • Conversation starter
  • Required dynamic text
  • Needed to stay in the background while not consuming resources

Native Components

Object

  • Pulls in a native 3D model

  • Growing library of free assets

  • Makes building apps / environments quick

  • Particle effects (like fire!) are popular

SVVR Poster

  • SDF text + super resolution
  • 3D graphic design with a text editor
  • 12k screenshot sent directly to print shop

 

Check it out at the booth

  • Tutorials running every day
  • Meet developers hanging out in VR
  • Pick up custom HaH cards

Native Components

Spawner

  • Rigidbody objects

  • Natively synced

  • Player lifespan

Fireball

  • Built in a day
  • No custom assets
  • "Secure" high-score system

 

Uses a variety of components

  • Object
  • Text
  • Spawner

Native Components

Skeleton

  • Attach objects to a unified tracking skeleton

  • Zero latency

  • Zero bandwidth overhead

  • Makes use of our exisiting avatar network traffic

Armory

  • Super simple
  • 100 lines of HTML
  • Works with all body trackers

 

Native Skeleton 

 

<a-mixin id="parent-to-head"
    position="0 0.05 0.03"
    n-skeleton-parent="part: head;"
    sync 
    sync-n-skeleton-parent>
</a-mixin>

Native Components

Collider

  • Static bodies

  • Integrated with movement system

  • Supports arbitrary meshes

Crystal Cave

  • Fullspace environment
  • Great hack for being "underlava"
  • Unveiled at a meetup

Native Components

Container

  • Counts how many objects are in a volume

  • Enables door triggers or lock / key setups

  • Internally solves many edge cases 

  • Automatically synced via object synchronization

The Gauntlet

  • Container around spikes..
  • ..for very loud screams

Native Components

Sound

  • Spatialized

  • Placed at the entity transform

  • Ogg / MP3

Lost in Time

  • Guided story
  • Large environment
  • Entirely A-Frame

 

Uses a variety of components

  • Sound
  • Particles (Object)
  • Text
  • Containers
  • Colliders

Two brand new components!

Native Components

NEW!

Browser

  • Similar to <iframe>

  • Enables the placement of sub-apps

  • Useful for events and other fullspace apps

  • Creates browser-ception

  • Natively synchronized, parsed in layout phase

Native Components

NEW!

Portal

  • Instantly travel to elsewhere in the same space,
    or to another space entirely

  • Enables the creation of multi-space events

  • Use our interface, or customize it with your own

Can't wait to see what gets made

 

 

     I'm excited

We've barely scratched the surface of what is possible

The tools are here, and getting better every day

The community is amazing

Developer Community

 

  • Outside of VR

    • Slack

    • Dev portal

  • Inside of VR

    • Collaboration sessions

    • Thursday meetups

 

let's build the future of the web together

  work with us - jobs.altvr.com

join the community - developer.altvr.com

Constructing the Social VR Web

By Gavan Wilhite

Constructing the Social VR Web

  • 142

More from Gavan Wilhite