My talk for tonight's Tales of JavaScript 3D Night Meetup http://www.meetup.com/talesofjavascript/events/200396932/

1. WEBGL, WEBVR,
AND THE
METAVERSE
TONY PARISI
SEPTEMBER, 2014

2. ABOUT ME
CREDS
Co-creator, VRML and X3D
http://www.tonyparisi.com 9/8/2014
CONTACT
tony@vizi.gl
skype: auradeluxe
http://twitter.com/auradeluxe http://www.tonypa
risi.com/
http://www.learningwebgl.com/
GET VIZI
https://github.com/tparisi/Vizi
GET THE BOOKS!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-Applications-HTML5-WebGL-Visualization/
dp/1449362966
MEETUPS
http://www.meetup.com/WebGL-Developers-Meetup/
http://www.meetup.com/Web-VR/
BOOK CODE
https://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
GET GLAM
http://www.glamjs.org/
https://github.com/tparisi/glam/
WORK
http://www.vizi.gl/

3. “The Web IS the Metaverse—
only with a 2D interface.”
— Vladimir Vukicevic,
Mozilla
Creator, WebGL
http://www.tonyparisi.com 9/8/2014

4. THE UBIQUITOUS 3D
PLATFORM
SEPTEMBER 2014:
http://www.tonyparisi.com 9/8/2014
3B seats.
Q.E.D.

5. REAL-WORLD APPS
TODAY
Nike’s Risk Everything campaign Nestle O Green tea experience
http://ogreen.special-t.com/en/
https://www.youtube.com/watch?v=io5snCcQ0ss
http://riskeverything.nike.com/
http://cityofdrones.io/
branding
art and
ads
architecture games
John Cale and Liam Young’s
City of Drones
Oort Online multiplayer sandbox game
http://www.tonyparisi.com 9/8/2014

6. THE PROTO-METAVERSE
http://www.tonyparisi.com 9/8/2014
OPEN
VIRTUAL
WORLDS
High Fidelity
From the creators of Second Life
http://www.highfidelity.io/
• NOT WEBGL (YET)
• BUT OPEN SOURCE, OPEN
STACK AND OPEN PROTOCOLS
BROWSER-BASED
MMORPG,
RTS GAMES
Project Atlas Engine Preview
http://www.artillery.com/
• GROUND-UP WEBGL ENGINE
60FPS
• BUILT ON WEB STACK IN
JAVASCRIPT!

7. VR TODAY
http://www.tonyparisi.com 9/8/2014
GIANT DOWNLOADS
SILO EXPERIENCES
CUMBERSOME NATIVE APPS AND INSTALLS
PROPRIETARY PLATFORMS AND
DEVELOPMENT STACKS
VR DOTH BE
HARD!

8. WHY I LOVE THE WEB
 INSTANT PUBLISHING
 INSTANT ACCESS TO INFORMATION
 NO TOLLS
 NOBODY CONTROLS IT
 CULTURE OF COLLABORATION
 VIEW SOURCE
…THE WEB WILL NEVER CLOSE UP SHOP.
image: Mark Surman
http://commonspace.wordpress.com/2014/03/12/happybirthday/
http://www.tonyparisi.com 9/8/2014

9. THE THREE D’S OF THE
WEB
http://www.tonyparisi.com 9/8/2014
 DEVELOPMENT
 CROSS-PLATFORM
 VENDOR-NEUTRAL
 OPEN SOURCE
 DEPLOYMENT
 CLOUD
 PUSH-BUTTON UPDATE AND PUBLISH
 DISTRIBUTION AND DISCOVERY
 EMBED IN OTHER PAGES
 SHARE WITH A HYPERLINK
 NO APP TO DOWNLOAD

10. WEB VR
FAST, CHEAP, AND TOTALLY
DEMOCRATIZED.
 BROWSER-BASED VIRTUAL
REALITY
 WEBGL
 CSS3
 VR EXTENSION HACKS
FOR BROWSERS
 VR SUPPORT NOW IN
BROWSER NIGHTLY
BUILDS!!!
 NO BIG APP DOWNLOADS
AND INSTALLS!!!
http://www.tonyparisi.com 9/8/2014
 JUST ADD SMART PHONE
 “SMARTVR” USING
GOOGLE CARDBOARD
$25 CHEAP!

11. OPEN TOOLS
FOR AN OPEN METAVERSE
http://www.tonyparisi.com 9/8/2014
game engines/IDEs
Goo Enginehttp://www.gootechnologies.com/
Verold http://verold.com/
Turbulenz https://turbulenz.com/
PlayCanvas http://www.playcanvas.com/
Artillery Engine
https://artillery.com/
Sketchfab https://sketchfab.com/
Unreal https://www.unrealengine.com/
Unity http://unity3d.com/#unity-5
scene graph libraries/page frameworks
Three.js
http://threejs.org/
SceneJS
http://scenejs.org/
BabylonJS
http://www.babylonjs.com/
Vizi
https://github.com/tparisi/Vizi
Voodoo.js
http://www.voodoojs.com/
PhiloGL
http://www.senchalabs.org/philogl/
tQuery
http://jeromeetienne.github.io/tquery/

12. VR + ML
A MARKUP LANGUAGE FOR THE
METAVERSE?
http://www.tonyparisi.com 9/8/2014
 GLAM (GL AND MARKUP) - A
DECLARATIVE LANGUAGE FOR 3D
WEB CONTENT
https://github.com/tparisi/glam/
 DEFINE 3D SCENE CONTENT IN
MARKUP; STYLE IT IN CSS
THE MARKUP
<glam>
<renderer type="rift"></renderer>
<scene>
<controller
type="rift"></controller>
<background id="sb1"
class="skybox"></background>
<group y ='1' z='-3'>
<sphere class="bubble
skybox" animation="bubbleBounce"></sphere>
<sphere x='-1' z='-2'
class="bubble skybox"
animation="bubbleBounce2"></sphere>
</group>
…
THE CSS
<style>
.skybox {
envmap-right:url(../images/Park2/posx.jpg);
…
}
.bubble {
radius:.5;
shader-vertex:url(../shaders/fresnel.vs);
shader-fragment:url(../shaders/fresnel.fs);
shader-uniforms:mRefractionRatio f 1.02
mFresnelBias f 0.1 mFresnelPower f 2.0 mFresnelScale
f 1.0 tCube t null;
}
#sb1 {
background-type:box;
}
</style>

13. WEBGL, WEBVR,
AND THE
METAVERSE
TONY PARISI
SEPTEMBER, 2014