Virtually Anywhere

1,245 views
1,121 views

Published on

Slides from my talk at WebGL Developers Meetup 11-June-2014 http://www.meetup.com/WebGL-Developers-Meetup/events/184939992/

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,245
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Virtually Anywhere

  1. 1. virtually anywhere: VR and the open web Tony Parisi Vizi, inc. June 11, 2014
  2. 2. VR today closed-system development native 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 6/11/2014http://www.tonyparisi.com
  3. 3. the open web 60FPS mind-blowing graphics in WebGL programming in JavaScript all your web data at your fingertips NO downloads 6/11/2014http://www.tonyparisi.com
  4. 4. two great tastes… ? 6/11/2014http://www.tonyparisi.com
  5. 5. Oculus Rift™ and browsers no native browser support for stereo rendering and head tracking… yet OculusBridge https://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.js https://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 support head tracking stereo rendering or at least a USB interface… (not in an extension) 6/11/2014http://www.tonyparisi.com
  6. 6. early experiments 6/11/2014http://www.tonyparisi.com water world paint with particles! http://vizi.gl/engine/tests/waterworld/waterRif t.html based on PartiArt by Eric Levin (@ericrius) http://ericrius1.github.io/PartiArt/ Futurgo city car test drive http://vizi.gl/engine/tests/futurgo/futurgoCity Rift.html based on Futurgo City from my book examples https://github.com/tparisi/Programming3DAp plications/ frame rate: good latency: seems ok. experience: fun. frame rate: ok latency: not great. experience: meh. the stack: vr.js OculusBridge Three.js Vizi
  7. 7. 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 vr + ml 6/11/2014http://www.tonyparisi.com <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
  8. 8. 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/ 6/11/2014http://www.tonyparisi.com

×