virtually anywhere
DESCRIPTION
Slides from my talk at WebGL Developers Meetup 11-June-2014 http://www.meetup.com/WebGL-Developers-Meetup/events/184939992/TRANSCRIPT
virtually anywhere:VR and the open web
Tony ParisiVizi, inc.
June 11, 2014
04/10/2023
http://www.tonyparisi.com
VR today
closed-system developmentnative code + proprietary development tools (Unity, UDK)
integration with web is whatever you get from those tools…
fine for high-performance games and single isolated experiences…
MASSIVE downloads
04/10/2023
http://www.tonyparisi.com
the open web
60FPS mind-blowing graphics in WebGL
programming in JavaScript
all your web data at your fingertips
NO downloads
04/10/2023
http://www.tonyparisi.com
two great tastes… ?
04/10/2023
http://www.tonyparisi.com
Oculus Rift™ and browsers
no native browser support for stereo rendering and head tracking… yet
OculusBridgehttps://github.com/Instrument/oculus-bridge
Three.js-based renderer and camera controller
native app does head tracking; sends updates to browser via Web Sockets
10ms+ latency, not great
vr.jshttps://github.com/benvanik/vr.js
Three.js-based renderer and camera controller
browser extension (Chrome and FF) does head tracking in native code, talks to JavaScript via plugin API
< 10ms latency, better
it would be ideal if browsers had built-in supporthead tracking
stereo rendering
or at least a USB interface… (not in an extension)
04/10/2023
http://www.tonyparisi.com
early experiments
water worldpaint with particles!
http://vizi.gl/engine/tests/waterworld/waterRift.html
based on PartiArt by Eric Levin (@ericrius)
http://ericrius1.github.io/PartiArt/
Futurgo citycar test drive
http://vizi.gl/engine/tests/futurgo/futurgoCityRift.html
based on Futurgo Cityfrom my book examples
https://github.com/tparisi/Programming3DApplications
/frame rate: goodlatency: seems ok.experience: fun.
frame rate: oklatency: not great.experience: meh.
the stack:vr.js
OculusBridgeThree.js
Vizi
04/10/2023
http://www.tonyparisi.com
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
vr + ml
<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
04/10/2023
http://www.tonyparisi.com
links
the demos (require vr.js)http://vizi.gl/engine/tests/waterworld/waterRift.html
http://vizi.gl/engine/tests/futurgo/futurgoCityRift.html
http://vizi.gl/glam/examples/glamcityvr.html
http://vizi.gl/glam/examples/glamshaderfresnelvr.html
tools and libs
Oculus Bridge https://github.com/Instrument/oculus-bridge
vr.js https://github.com/benvanik/vr.js
Three.js https://github.com/mrdoob/three.js/
Vizi https://github.com/tparisi/vizi
GLAM https://github.com/tparisi/glam/