The document discusses the integration of WebGL, WebVR, and the concept of the metaverse, highlighting its potential as a 3D platform accessible via the web. It emphasizes the advantages of web-based development such as cross-platform compatibility, instant publishing, and open-source tools, while providing examples of real-world applications and game engines. The author advocates for collaboration and ease of access in creating immersive virtual experiences without the need for cumbersome downloads or proprietary systems.

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