Download - Virtually Anywhere

Transcript
Page 1: Virtually Anywhere

virtually anywhere:VR and the open web

Tony ParisiVizi, inc.

June 11, 2014

Page 2: Virtually Anywhere

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

Page 3: Virtually Anywhere

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

Page 4: Virtually Anywhere

04/10/2023

http://www.tonyparisi.com

two great tastes… ?

Page 5: Virtually Anywhere

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)

Page 6: Virtually Anywhere

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

Page 7: Virtually Anywhere

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

Page 8: Virtually Anywhere

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/