Embed Size (px)
DESCRIPTION
My talk for tonight's Tales of JavaScript 3D Night Meetup http://www.meetup.com/talesofjavascript/events/200396932/
Citation preview
WEBGL, WEBVR, AND
THE METAVERSE
TONY PARISISEPTEMBER, 2014
ABOUT ME
http://www.tonyparisi.com
04/10/2023
[email protected]: auradeluxehttp://twitter.com/auradeluxe http://www.tonyparisi.com/http://www.learningwebgl.com/
GET THE BOOKS!
WebGL: Up and Runninghttp://www.amazon.com/dp/144932357XProgramming 3D Applications with HTML and WebGLhttp://www.amazon.com/Programming-Applications-HTML5-WebGL-Visualization/dp/1449362966
GET VIZIhttps://github.com/tparisi/Vizi
MEETUPShttp://www.meetup.com/WebGL-Developers-Meetup/
http://www.meetup.com/Web-VR/
BOOK CODEhttps://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
GET GLAMhttp://www.glamjs.org/https://github.com/tparisi/glam/
WORKhttp://www.vizi.gl/
CREDSCo-creator, VRML and X3D
04/10/2023
http://www.tonyparisi.com
“The Web IS the Metaverse— only with a 2D interface.”
— Vladimir Vukicevic,Mozilla
Creator, WebGL
04/10/2023
THE UBIQUITOUS 3D PLATFORM
SEPTEMBER 2014:
http://www.tonyparisi.com
3B seats.Q.E.D.
REAL-WORLD APPS TODAY
https://www.youtube.com/watch?v=io5snCcQ0ss
http://ogreen.special-t.com/en/
http://cityofdrones.io/
http://riskeverything.nike.com/
branding
art andarchitecture games
ads
John Cale and Liam Young’sCity of Drones
Nike’s Risk Everything campaign Nestle O Green tea experience
Oort Online multiplayer sandbox game
04/10/2023
http://www.tonyparisi.com
04/10/2023
http://www.tonyparisi.com
THE PROTO-METAVERSE
http://www.highfidelity.io/
High FidelityFrom the creators of Second Life
OPEN VIRTUAL WORLDS
• 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!
04/10/2023
http://www.tonyparisi.com
GIANT DOWNLOADS
SILO EXPERIENCES
CUMBERSOME NATIVE APPS AND INSTALLS
PROPRIETARY PLATFORMS AND DEVELOPMENT STACKS
VR DOTH BE
HARD!
VR TODAY
04/10/2023
http://www.tonyparisi.com
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 Surmanhttp://commonspace.wordpress.com/2014/03/12/happybirthday/
04/10/2023
http://www.tonyparisi.com
THE THREE D’S OF THE WEB
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
04/10/2023
http://www.tonyparisi.com
WEB VRFAST, 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!!!
JUST ADD SMART PHONE “SMARTVR” USING
GOOGLE CARDBOARD
$25 CHEAP!
04/10/2023
http://www.tonyparisi.com
OPEN TOOLSFOR AN OPEN METAVERSE
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/
04/10/2023
http://www.tonyparisi.com
VR + MLA MARKUP LANGUAGE FOR THE METAVERSE?
GLAM (GL AND MARKUP) - A DECLARATIVE LANGUAGE FOR 3D WEB CONTENThttps://github.com/tparisi/glam/
DEFINE 3D SCENE CONTENT IN MARKUP; STYLE IT IN CSS
<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 MARKUP<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>
THE CSS
TONY PARISISEPTEMBER, 2014
WEBGL, WEBVR, AND
THE METAVERSE
