SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
HACKING REALITY: 
HTML5 AND 
JAVASCRIPT 
FOR CROSS-PLATFORM 
VR 
TONY PARISI 
OCTOBER, 2014
ABOUT ME 
CREDS 
Co-creator, VRML and X3D 
http://www.tonyparisi.com 10/21/2014 
CONTACT 
tony@vizi.gl 
skype: auradeluxe 
http://twitter.com/auradeluxe 
http://www.tonyparisi.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/
THE PROMISED LAND! 
CONSUMER VR 
http://www.tonyparisi.com 10/21/2014
VR TODAY 
http://www.tonyparisi.com 10/21/2014 
GIANT DOWNLOADS 
SILO EXPERIENCES 
CUMBERSOME NATIVE APPS AND INSTALLS 
PROPRIETARY PLATFORMS AND 
DEVELOPMENT STACKS 
VR DOTH BE 
HARD!
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 10/21/2014
THE THREE D’S OF THE 
WEB 
http://www.tonyparisi.com 10/21/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
VR AND THE WEB: 
TWO GREAT TASTES… ? 
http://www.tonyparisi.com 10/21/2014
WEB VR 
FAST, CHEAP, AND TOTALLY 
DEMOCRATIZED. 
 BROWSER-BASED VIRTUAL 
REALITY 
 WEBGL 
 CSS3 
 VR SUPPORT NOW IN 
BROWSER DEV BUILDS!!! 
 NO BIG APP DOWNLOADS 
AND INSTALLS!!! 
http://www.tonyparisi.com 10/21/2014 
 JUST ADD SMART PHONE 
 “SMARTVR” USING 
GOOGLE CARDBOARD 
$25 CHEAP!
AN EXAMPLE 
http://www.tonyparisi.com 10/21/2014 
INFORMATION DIVING SHOWCASE 
http://mozvr.github.io/infodive/ 
POWERED BY FIREFOX BUILT WITH VIZI 
https://github.com/tparisi/Vizi
THE WEBVR API 
1. QUERY FOR VR DEVICE(S) TO RENDER 
// polyfill 
var getVRDevices = navigator.mozGetVRDevices /* FF */ || 
navigator.getVRDevices; /* webkit */ 
http://www.tonyparisi.com 10/21/2014 
var self = this; 
getVRDevices().then( gotVRDevices ); 
function gotVRDevices( devices ) { 
var vrHMD; 
var error; 
for ( var i = 0; i < devices.length; ++i ) { 
if ( devices[i] instanceof HMDVRDevice ) { 
vrHMD = devices[i]; 
self._vrHMD = vrHMD; 
self.leftEyeTranslation = vrHMD.getEyeTranslation( "left" ); 
self.rightEyeTranslation = vrHMD.getEyeTranslation( "right" ); 
self.leftEyeFOV = vrHMD.getRecommendedEyeFieldOfView( "left" ); 
self.rightEyeFOV = vrHMD.getRecommendedEyeFieldOfView( "right" ); 
break; // We keep the first we encounter 
} 
} 
} 
get left/right eye 
(camera) positions 
get per-eye camera field of view; use 
WebGL to render scene from two cameras
THE WEBVR API 
2. GO FULLSCREEN (VR MODE) 
fullscreen mode requires a DOM 
element 
http://www.tonyparisi.com 10/21/2014 
var self = this; 
var renderer = this._renderer; 
var vrHMD = this._vrHMD; 
var canvas = renderer.domElement; 
var fullScreenChange = 
canvas.mozRequestFullScreen? 'mozfullscreenchange' : 'webkitfullscreenchange'; 
document.addEventListener( fullScreenChange, onFullScreenChanged, false ); 
function onFullScreenChanged() { 
if ( !document.mozFullScreenElement 
&& !document.webkitFullScreenElement ) { 
self.setFullScreen( false ); 
} 
} 
if ( canvas.mozRequestFullScreen ) { 
canvas.mozRequestFullScreen( { vrDisplay: vrHMD } ); 
} else { 
canvas.webkitRequestFullscreen( { vrDisplay: vrHMD } ); 
} 
handle exiting fullscreen 
mode 
request fullscreen mode 
for this VR device
THE WEBVR API 
3. HEAD TRACKING 
query HMD device state 
http://www.tonyparisi.com 10/21/2014 
// polyfill 
var getVRDevices = navigator.mozGetVRDevices /* FF */ || 
navigator.getVRDevices; /* webkit */ 
var self = this; 
getVRDevices().then( gotVRDevices ); 
function gotVRDevices( devices ) { 
var vrInput; 
var error; 
for ( var i = 0; i < devices.length; ++i ) { 
if ( devices[i] instanceof PositionSensorVRDevice ) { 
vrInput = devices[i] 
self._vrInput = vrInput; 
break; // We keep the first we encounter 
} 
} 
} 
… 
// called once per tick from requestAnimationFrame() 
var update = function() { 
var vrState = this.getVRState(); 
if ( !vrState ) { 
return; 
} 
// vrState.hmd.rotation contains four floats, quaternion x,y,z,w 
setCameraRotation(vrState.hmd.rotation); 
}; 
get head-tracking VR device 
update camera to match HMD 
device orientation
WEBVR AND CARDBOARD 
 GOOGLE CARDBOARD SHOWCASE 
 Mobile Chrome http://g.co/chromevr 
 Desktop Chrome http://vr.chromeexperiments.com/ 
 EVEN EASIER 
 RENDER WEBGL SIDE-BY-SIDE STEREO (NO NEED TO QUERY 
DEVICES) 
 USE BROWSER DEVICE ORIENTATION API FOR HEAD TRACKING 
http://www.tonyparisi.com 10/21/2014
WEBVR AND THREE.JS 
 THE MOST POPULAR WEBGL LIBRARY 
 http://threejs.org/ 
 LATEST STABLE VERSION (r68) INCLUDES STEREO 
RENDERING AND HEAD TRACKING 
 RENDERING 
examples/js/effects/StereoEffect.js (Cardboard) 
examples/js/effects/VREffect.js (Rift) 
 HEAD TRACKING 
examples/js/controls/DeviceOrientationControls.js (Cardboard) 
examples/js/controls/VRControls.js (Rift) 
http://www.tonyparisi.com 10/21/2014
VIZI: A FRAMEWORK FOR 
WEBVR APPLICATIONS 
 GOAL: MAKE IT EASY TO QUICKLY BUILD INTERESTING 3D 
APPLICATIONS 
 ARCHITECTURE INSPIRED INSPIRED BY MODERN GAME ENGINE 
DESIGN 
 COMPONENT-BASED DESIGN – EASILY PLUG NEW FEATURES INTO OBJECTS 
 APPLICATION OBJECT – HANDLES EVENT LOOP, THREE.JS CREATION, PAGE RESIZE, 
ROUTING EVENTS TO OBJECTS 
 INTERACTIONS – MAKE IT EASY TO PUT MOUSE AND TOUCH INTERACTION ON OBJECTS 
 BEHAVIORS – PREBUILT BEHAVIORS AUTOMATICALLY ROTATE, MOVE ETC. 
 PRE-BUILT OBJECTS – FOR COMMONLY USED DESIGN PATTERNS 
 SIMILAR IN DESIGN TO UNITY3D 
 USES THREE.JS FOR ALL GRAPHICS 
 ENHANCES THREE.JS VR RENDERING AND CONTROLLERS 
http://www.tonyparisi.com 10/21/2014
OPEN TOOLS 
FOR CROSS-PLATFORM VR 
http://www.tonyparisi.com 10/21/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/
PRO TOOLS FOR WEB VR 
Unreal 4 in WebGL 
https://www.youtube.com/watch?v=c2uNDlP4RiE#t=42 
60FPS 
ported in 5 days 
Unreal native C++ engine -> JavaScript 
Emscripten + asm.js 
http://www.tonyparisi.com 10/21/2014 
EMSCRIPTEN - 
THE COOLEST HACK 
EVER! 
https://github.com/kripken/ems 
cripten 
 CROSS-COMPILE C++ 
NATIVE CODE TO 
JAVASCRIPT 
 asm.js- LOW-LEVEL 
OPTIMIZED JAVASCRIPT 
 UNITY, UNREAL ENGINES 
USE THIS TO DEPLOY ON 
THE WEB 
 WATCH OUT: HUGE 
DOWNLOADS AND HARD TO 
DEBUG…. !
WEBVR AND CSS 
http://www.tonyparisi.com 10/21/2014 
MOZILLA VR CSS SHOWCASE 
http://mozvr.github.io/vr-web-examples/domvr-birds/
WEBVR AND CSS 
http://www.tonyparisi.com 10/21/2014 
<script type="text/javascript" src="js/vrutils.js"></script> 
<script> 
/* VR Headset and its associated orientation/position sensor */ 
var vrHMD, vrSensor; 
/* Element that will serve as our camera, moving the rest of the scene around */ 
var cssCamera = document.getElementById("camera"); 
/* the camera's position, as a css transform string. For right now, we want it just in the middle. */ 
var cssCameraPositionTransform = "translate3d(0, 0, 0)"; 
/* Request animation frame loop. */ 
function animate() { 
/* Acquire positional data from VR headset and convert into a transformation that can be applied to CSS. */ 
if (vrSensor !== undefined) { 
var state = vrSensor.getState(); 
var cssOrientationMatrix = cssMatrixFromOrientation(state.orientation, true); 
} 
/* Apply positional data to camera element */ 
cssCamera.style.transform = cssOrientationMatrix + " " + cssCameraPositionTransform; 
window.requestAnimationFrame(animate); 
} 
query HMD device state 
calculate “camera” orientation 
update “camera’s” CSS 3D transform
VR + ML 
A MARKUP LANGUAGE FOR THE 
METAVERSE? 
http://www.tonyparisi.com 10/21/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”> 
</sphere> 
<sphere class="bubble skybox”> 
</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>
CHALLENGES 
 WEBVR ON OCULUS IS NOT READY FOR PRIME TIME 
 (THAT’S OK NEITHER IS OCULUS!) 
 LATENCY IS THE BIGGEST ISSUE – BROWSER NEEDS TO UN-THROTTLE 
AT 60FPS 
 BUT WE’RE GOOD TO GO ON CARDBOARD! 
 60FPS WORKS GREAT 
 NEARLY 2 BILLION VR DEVICES ALREADY DEPLOYED! 
 FRAMEWORKS AND TOOLS ARE TYPICALLY WEB-ISH: UNDER 
DEVELOPMENT, ALWAYS IN FLUX, PRETTY MUCH OUT OF 
CONTROL 
 BUT OPEN SOURCE SO WE CAN LIVE WITH IT 
http://www.tonyparisi.com 10/21/2014
LINKS 
 BROWSER DEV BUILDS 
Firefox http://blog.bitops.com/blog/2014/08/20/updated-firefox-vr-builds/ 
Chrome https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ 
 MOZILLA NEXT STEPS FOR VR (THURSDAY 23 OCT 2014) 
https://air.mozilla.org/virtual-reality-the-web-next-steps/ 
 SAN FRANCISCO WEBVR MEETUP 
http://www.meetup.com/Web-VR/ 
 WEBVR MAILING LIST 
web-vr-discuss@mozilla.org 
 CARDBOARD VR SHOWCASE 
http://vr.chromeexperiments.com/ 
http://www.tonyparisi.com 10/21/2014
KEEP IN TOUCH 
CREDS 
Co-creator, VRML and X3D 
http://www.tonyparisi.com 10/21/2014 
CONTACT 
tony@vizi.gl 
skype: auradeluxe 
http://twitter.com/auradeluxe 
http://www.tonyparisi.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/
HACKING REALITY: 
HTML5 AND 
JAVASCRIPT 
FOR CROSS-PLATFORM 
VR 
TONY PARISI 
OCTOBER, 2014

Weitere ähnliche Inhalte

Was ist angesagt?

WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseTony Parisi
 
The Immersive Web
The Immersive WebThe Immersive Web
The Immersive WebTony Parisi
 
Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive WebTony Parisi
 
WebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateWebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateTony Parisi
 
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...GeilDanke
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: CanvasMartin Kliehm
 
And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?Tony Parisi
 
WebGL Crash Course
WebGL Crash CourseWebGL Crash Course
WebGL Crash CourseTony Parisi
 
HTML5 for Web Designers
HTML5 for Web DesignersHTML5 for Web Designers
HTML5 for Web DesignersGoodbytes
 
TechEvent BASTA von WPF nach Angular in 60 Minuten
TechEvent BASTA von WPF nach Angular in 60 MinutenTechEvent BASTA von WPF nach Angular in 60 Minuten
TechEvent BASTA von WPF nach Angular in 60 MinutenTrivadis
 
How to create 360 Image/panorama & share with WebVR?
How to create  360 Image/panorama & share with WebVR?How to create  360 Image/panorama & share with WebVR?
How to create 360 Image/panorama & share with WebVR?Fred Lin
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3DMartin Kliehm
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Managing Responsive Design Projects
Managing Responsive Design ProjectsManaging Responsive Design Projects
Managing Responsive Design ProjectsAndrew Smyk
 
Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Tony Parisi
 
Tools that help and speed up RWD dev
Tools that help  and speed up RWD devTools that help  and speed up RWD dev
Tools that help and speed up RWD devMatjaž Korošec
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010ianloh13
 
Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardwareAndrew Fisher
 

Was ist angesagt? (20)

WebGL, WebVR and the Metaverse
WebGL, WebVR and the MetaverseWebGL, WebVR and the Metaverse
WebGL, WebVR and the Metaverse
 
The Immersive Web
The Immersive WebThe Immersive Web
The Immersive Web
 
WebVR
WebVRWebVR
WebVR
 
Foundations of the Immersive Web
Foundations of the Immersive WebFoundations of the Immersive Web
Foundations of the Immersive Web
 
WebVR Ecosystem and API Update
WebVR Ecosystem and API UpdateWebVR Ecosystem and API Update
WebVR Ecosystem and API Update
 
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
 
And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?And Who Shall Control the Metaverse?
And Who Shall Control the Metaverse?
 
WebGL Crash Course
WebGL Crash CourseWebGL Crash Course
WebGL Crash Course
 
HTML5 for Web Designers
HTML5 for Web DesignersHTML5 for Web Designers
HTML5 for Web Designers
 
TechEvent BASTA von WPF nach Angular in 60 Minuten
TechEvent BASTA von WPF nach Angular in 60 MinutenTechEvent BASTA von WPF nach Angular in 60 Minuten
TechEvent BASTA von WPF nach Angular in 60 Minuten
 
How to create 360 Image/panorama & share with WebVR?
How to create  360 Image/panorama & share with WebVR?How to create  360 Image/panorama & share with WebVR?
How to create 360 Image/panorama & share with WebVR?
 
Accessibility in Canvas 3D
Accessibility in Canvas 3DAccessibility in Canvas 3D
Accessibility in Canvas 3D
 
[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
 
Managing Responsive Design Projects
Managing Responsive Design ProjectsManaging Responsive Design Projects
Managing Responsive Design Projects
 
Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17Powering the VR/AR Ecosystem 2017-01-17
Powering the VR/AR Ecosystem 2017-01-17
 
Tools that help and speed up RWD dev
Tools that help  and speed up RWD devTools that help  and speed up RWD dev
Tools that help and speed up RWD dev
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design
 
GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010GermaniumWeb training for CXA2010
GermaniumWeb training for CXA2010
 
Droids, java script and web connected hardware
Droids, java script and web connected hardwareDroids, java script and web connected hardware
Droids, java script and web connected hardware
 

Andere mochten auch

WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016Carsten Sandtner
 
Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGLTony Parisi
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!FITC
 
The Long Game: It’s Not Prime Time for VR… Yet | Clive Downie
The Long Game: It’s Not Prime Time for VR… Yet | Clive DownieThe Long Game: It’s Not Prime Time for VR… Yet | Clive Downie
The Long Game: It’s Not Prime Time for VR… Yet | Clive DownieJessica Tams
 
AR Gamers – The Next Generation | Mark Shovman
AR Gamers – The Next Generation | Mark ShovmanAR Gamers – The Next Generation | Mark Shovman
AR Gamers – The Next Generation | Mark ShovmanJessica Tams
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.jsJosh Staples
 
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan JungLocation Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan JungJessica Tams
 
A-Frame: VR for Web Developers
A-Frame: VR for Web DevelopersA-Frame: VR for Web Developers
A-Frame: VR for Web DevelopersKevin Ngo
 
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics PSTechSerbia
 
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameBuild the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameMozilla VR
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instrumentsIvano Malavolta
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVRDaosheng Mu
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRCodemotion
 
From Players to Leaders with Quizizz
From Players to Leaders with QuizizzFrom Players to Leaders with Quizizz
From Players to Leaders with QuizizzMiguel Perez
 
Roxar sand-monitor -pig-detector brochure
Roxar sand-monitor -pig-detector brochureRoxar sand-monitor -pig-detector brochure
Roxar sand-monitor -pig-detector brochureFermin Pablo
 
Bringing VR to the Masses | Yannis Bolman
Bringing VR to the Masses | Yannis BolmanBringing VR to the Masses | Yannis Bolman
Bringing VR to the Masses | Yannis BolmanJessica Tams
 
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsAn Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsGeilDanke
 

Andere mochten auch (19)

WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016WebVR - MobileTechCon Berlin 2016
WebVR - MobileTechCon Berlin 2016
 
Developing Web Graphics with WebGL
Developing Web Graphics with WebGLDeveloping Web Graphics with WebGL
Developing Web Graphics with WebGL
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
 
JavaCro'15 - Service Discovery in OSGi Beyond the JVM using Docker and Consul...
JavaCro'15 - Service Discovery in OSGi Beyond the JVM using Docker and Consul...JavaCro'15 - Service Discovery in OSGi Beyond the JVM using Docker and Consul...
JavaCro'15 - Service Discovery in OSGi Beyond the JVM using Docker and Consul...
 
The Long Game: It’s Not Prime Time for VR… Yet | Clive Downie
The Long Game: It’s Not Prime Time for VR… Yet | Clive DownieThe Long Game: It’s Not Prime Time for VR… Yet | Clive Downie
The Long Game: It’s Not Prime Time for VR… Yet | Clive Downie
 
AR Gamers – The Next Generation | Mark Shovman
AR Gamers – The Next Generation | Mark ShovmanAR Gamers – The Next Generation | Mark Shovman
AR Gamers – The Next Generation | Mark Shovman
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.js
 
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan JungLocation Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
Location Based VR: VR Internet Cafe & VR Arcade | Jikhan Jung
 
Intro to Three.js
Intro to Three.jsIntro to Three.js
Intro to Three.js
 
A-Frame: VR for Web Developers
A-Frame: VR for Web DevelopersA-Frame: VR for Web Developers
A-Frame: VR for Web Developers
 
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics
 
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameBuild the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-Frame
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVR
 
The next frontier: WebGL and WebVR
The next frontier: WebGL and WebVRThe next frontier: WebGL and WebVR
The next frontier: WebGL and WebVR
 
From Players to Leaders with Quizizz
From Players to Leaders with QuizizzFrom Players to Leaders with Quizizz
From Players to Leaders with Quizizz
 
Roxar sand-monitor -pig-detector brochure
Roxar sand-monitor -pig-detector brochureRoxar sand-monitor -pig-detector brochure
Roxar sand-monitor -pig-detector brochure
 
Bringing VR to the Masses | Yannis Bolman
Bringing VR to the Masses | Yannis BolmanBringing VR to the Masses | Yannis Bolman
Bringing VR to the Masses | Yannis Bolman
 
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsAn Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 seconds
 

Ähnlich wie Hacking Reality: Browser-Based VR with HTML5

Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Tony Parisi
 
VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015Tony Parisi
 
Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Tony Parisi
 
Drones, Flying robots and Javascript
Drones, Flying robots and JavascriptDrones, Flying robots and Javascript
Drones, Flying robots and JavascriptLaurent Eschenauer
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptFITC
 
Writing Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web TechnologyWriting Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web TechnologyMichaela Lehr
 
Writing Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web TechnologyWriting Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web TechnologyGeilDanke
 
Non Conventional Android Programming En
Non Conventional Android Programming EnNon Conventional Android Programming En
Non Conventional Android Programming Enguest9bcef2f
 
Non Conventional Android Programming (English)
Non Conventional Android Programming (English)Non Conventional Android Programming (English)
Non Conventional Android Programming (English)Davide Cerbo
 
Getting Started with Web VR
Getting Started with Web VR Getting Started with Web VR
Getting Started with Web VR Saurabh Badhwar
 
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018Codemotion
 
JSConfBP JavaScript for VR
JSConfBP JavaScript for VR JSConfBP JavaScript for VR
JSConfBP JavaScript for VR Liv Erickson
 
Advanced programming with #nodecopter
Advanced programming with #nodecopterAdvanced programming with #nodecopter
Advanced programming with #nodecopterLaurent Eschenauer
 
Quick dive into WebVR
Quick dive into WebVRQuick dive into WebVR
Quick dive into WebVRJanne Aukia
 
Hitchhicker's Guide to Using Xamarin Forms with RESTful Services
Hitchhicker's Guide to Using Xamarin Forms with RESTful ServicesHitchhicker's Guide to Using Xamarin Forms with RESTful Services
Hitchhicker's Guide to Using Xamarin Forms with RESTful ServicesHeather Downing
 
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Matt Raible
 
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Chris Griffith
 

Ähnlich wie Hacking Reality: Browser-Based VR with HTML5 (20)

Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014
 
VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015VR Without Borders RIVER WebVR April 2015
VR Without Borders RIVER WebVR April 2015
 
Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015Browser-Based Virtual Reality April 2015
Browser-Based Virtual Reality April 2015
 
Drones, Flying robots and Javascript
Drones, Flying robots and JavascriptDrones, Flying robots and Javascript
Drones, Flying robots and Javascript
 
WebVR - JAX 2016
WebVR -  JAX 2016WebVR -  JAX 2016
WebVR - JAX 2016
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
 
Writing Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web TechnologyWriting Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web Technology
 
Writing Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web TechnologyWriting Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web Technology
 
Non Conventional Android Programming En
Non Conventional Android Programming EnNon Conventional Android Programming En
Non Conventional Android Programming En
 
Non Conventional Android Programming (English)
Non Conventional Android Programming (English)Non Conventional Android Programming (English)
Non Conventional Android Programming (English)
 
Getting Started with Web VR
Getting Started with Web VR Getting Started with Web VR
Getting Started with Web VR
 
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018
 
Ferguson VR Hackathon - May 6, 2017
Ferguson VR Hackathon - May 6, 2017Ferguson VR Hackathon - May 6, 2017
Ferguson VR Hackathon - May 6, 2017
 
JSConfBP JavaScript for VR
JSConfBP JavaScript for VR JSConfBP JavaScript for VR
JSConfBP JavaScript for VR
 
Advanced programming with #nodecopter
Advanced programming with #nodecopterAdvanced programming with #nodecopter
Advanced programming with #nodecopter
 
Quick dive into WebVR
Quick dive into WebVRQuick dive into WebVR
Quick dive into WebVR
 
FLAR Workflow
FLAR WorkflowFLAR Workflow
FLAR Workflow
 
Hitchhicker's Guide to Using Xamarin Forms with RESTful Services
Hitchhicker's Guide to Using Xamarin Forms with RESTful ServicesHitchhicker's Guide to Using Xamarin Forms with RESTful Services
Hitchhicker's Guide to Using Xamarin Forms with RESTful Services
 
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
 
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5
 

Mehr von Tony Parisi

The New Fine Arts
The New Fine ArtsThe New Fine Arts
The New Fine ArtsTony Parisi
 
Face the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldFace the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldTony Parisi
 
Vrml, or There and Back Again
Vrml, or There and Back AgainVrml, or There and Back Again
Vrml, or There and Back AgainTony Parisi
 
The Coming Distribution War
The Coming Distribution WarThe Coming Distribution War
The Coming Distribution WarTony Parisi
 
glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015Tony Parisi
 
The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014Tony Parisi
 
WebGL Primetime!
WebGL Primetime!WebGL Primetime!
WebGL Primetime!Tony Parisi
 
Virtually Anywhere
Virtually AnywhereVirtually Anywhere
Virtually AnywhereTony Parisi
 
The Browser As Console - HTML5 and WebGL for Game Development
The Browser As Console - HTML5 and WebGL for Game DevelopmentThe Browser As Console - HTML5 and WebGL for Game Development
The Browser As Console - HTML5 and WebGL for Game DevelopmentTony Parisi
 
WebGL - It's GO Time
WebGL - It's GO TimeWebGL - It's GO Time
WebGL - It's GO TimeTony Parisi
 
glTF Update with Tony Parisi WebGL Meetup August 2013
glTF Update with Tony Parisi WebGL Meetup August 2013glTF Update with Tony Parisi WebGL Meetup August 2013
glTF Update with Tony Parisi WebGL Meetup August 2013Tony Parisi
 
Building Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGLBuilding Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGLTony Parisi
 

Mehr von Tony Parisi (13)

The New Fine Arts
The New Fine ArtsThe New Fine Arts
The New Fine Arts
 
Face the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented WorldFace the Future: Computing in an Augmented World
Face the Future: Computing in an Augmented World
 
Vrml, or There and Back Again
Vrml, or There and Back AgainVrml, or There and Back Again
Vrml, or There and Back Again
 
The Coming Distribution War
The Coming Distribution WarThe Coming Distribution War
The Coming Distribution War
 
glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015glTF and the WebGL Art Pipeline March 2015
glTF and the WebGL Art Pipeline March 2015
 
The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014The Web Eats Everything In Its Path Fall 2014
The Web Eats Everything In Its Path Fall 2014
 
WebGL Primetime!
WebGL Primetime!WebGL Primetime!
WebGL Primetime!
 
Virtually Anywhere
Virtually AnywhereVirtually Anywhere
Virtually Anywhere
 
The Browser As Console - HTML5 and WebGL for Game Development
The Browser As Console - HTML5 and WebGL for Game DevelopmentThe Browser As Console - HTML5 and WebGL for Game Development
The Browser As Console - HTML5 and WebGL for Game Development
 
WebGL - It's GO Time
WebGL - It's GO TimeWebGL - It's GO Time
WebGL - It's GO Time
 
glTF Update with Tony Parisi WebGL Meetup August 2013
glTF Update with Tony Parisi WebGL Meetup August 2013glTF Update with Tony Parisi WebGL Meetup August 2013
glTF Update with Tony Parisi WebGL Meetup August 2013
 
Building Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGLBuilding Rich Internet Applications with HTML5 and WebGL
Building Rich Internet Applications with HTML5 and WebGL
 
Artists Only
Artists OnlyArtists Only
Artists Only
 

Kürzlich hochgeladen

How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 

Kürzlich hochgeladen (20)

How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 

Hacking Reality: Browser-Based VR with HTML5

  • 1. HACKING REALITY: HTML5 AND JAVASCRIPT FOR CROSS-PLATFORM VR TONY PARISI OCTOBER, 2014
  • 2. ABOUT ME CREDS Co-creator, VRML and X3D http://www.tonyparisi.com 10/21/2014 CONTACT tony@vizi.gl skype: auradeluxe http://twitter.com/auradeluxe http://www.tonyparisi.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 PROMISED LAND! CONSUMER VR http://www.tonyparisi.com 10/21/2014
  • 4. VR TODAY http://www.tonyparisi.com 10/21/2014 GIANT DOWNLOADS SILO EXPERIENCES CUMBERSOME NATIVE APPS AND INSTALLS PROPRIETARY PLATFORMS AND DEVELOPMENT STACKS VR DOTH BE HARD!
  • 5. 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 10/21/2014
  • 6. THE THREE D’S OF THE WEB http://www.tonyparisi.com 10/21/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
  • 7. VR AND THE WEB: TWO GREAT TASTES… ? http://www.tonyparisi.com 10/21/2014
  • 8. WEB VR FAST, CHEAP, AND TOTALLY DEMOCRATIZED.  BROWSER-BASED VIRTUAL REALITY  WEBGL  CSS3  VR SUPPORT NOW IN BROWSER DEV BUILDS!!!  NO BIG APP DOWNLOADS AND INSTALLS!!! http://www.tonyparisi.com 10/21/2014  JUST ADD SMART PHONE  “SMARTVR” USING GOOGLE CARDBOARD $25 CHEAP!
  • 9. AN EXAMPLE http://www.tonyparisi.com 10/21/2014 INFORMATION DIVING SHOWCASE http://mozvr.github.io/infodive/ POWERED BY FIREFOX BUILT WITH VIZI https://github.com/tparisi/Vizi
  • 10. THE WEBVR API 1. QUERY FOR VR DEVICE(S) TO RENDER // polyfill var getVRDevices = navigator.mozGetVRDevices /* FF */ || navigator.getVRDevices; /* webkit */ http://www.tonyparisi.com 10/21/2014 var self = this; getVRDevices().then( gotVRDevices ); function gotVRDevices( devices ) { var vrHMD; var error; for ( var i = 0; i < devices.length; ++i ) { if ( devices[i] instanceof HMDVRDevice ) { vrHMD = devices[i]; self._vrHMD = vrHMD; self.leftEyeTranslation = vrHMD.getEyeTranslation( "left" ); self.rightEyeTranslation = vrHMD.getEyeTranslation( "right" ); self.leftEyeFOV = vrHMD.getRecommendedEyeFieldOfView( "left" ); self.rightEyeFOV = vrHMD.getRecommendedEyeFieldOfView( "right" ); break; // We keep the first we encounter } } } get left/right eye (camera) positions get per-eye camera field of view; use WebGL to render scene from two cameras
  • 11. THE WEBVR API 2. GO FULLSCREEN (VR MODE) fullscreen mode requires a DOM element http://www.tonyparisi.com 10/21/2014 var self = this; var renderer = this._renderer; var vrHMD = this._vrHMD; var canvas = renderer.domElement; var fullScreenChange = canvas.mozRequestFullScreen? 'mozfullscreenchange' : 'webkitfullscreenchange'; document.addEventListener( fullScreenChange, onFullScreenChanged, false ); function onFullScreenChanged() { if ( !document.mozFullScreenElement && !document.webkitFullScreenElement ) { self.setFullScreen( false ); } } if ( canvas.mozRequestFullScreen ) { canvas.mozRequestFullScreen( { vrDisplay: vrHMD } ); } else { canvas.webkitRequestFullscreen( { vrDisplay: vrHMD } ); } handle exiting fullscreen mode request fullscreen mode for this VR device
  • 12. THE WEBVR API 3. HEAD TRACKING query HMD device state http://www.tonyparisi.com 10/21/2014 // polyfill var getVRDevices = navigator.mozGetVRDevices /* FF */ || navigator.getVRDevices; /* webkit */ var self = this; getVRDevices().then( gotVRDevices ); function gotVRDevices( devices ) { var vrInput; var error; for ( var i = 0; i < devices.length; ++i ) { if ( devices[i] instanceof PositionSensorVRDevice ) { vrInput = devices[i] self._vrInput = vrInput; break; // We keep the first we encounter } } } … // called once per tick from requestAnimationFrame() var update = function() { var vrState = this.getVRState(); if ( !vrState ) { return; } // vrState.hmd.rotation contains four floats, quaternion x,y,z,w setCameraRotation(vrState.hmd.rotation); }; get head-tracking VR device update camera to match HMD device orientation
  • 13. WEBVR AND CARDBOARD  GOOGLE CARDBOARD SHOWCASE  Mobile Chrome http://g.co/chromevr  Desktop Chrome http://vr.chromeexperiments.com/  EVEN EASIER  RENDER WEBGL SIDE-BY-SIDE STEREO (NO NEED TO QUERY DEVICES)  USE BROWSER DEVICE ORIENTATION API FOR HEAD TRACKING http://www.tonyparisi.com 10/21/2014
  • 14. WEBVR AND THREE.JS  THE MOST POPULAR WEBGL LIBRARY  http://threejs.org/  LATEST STABLE VERSION (r68) INCLUDES STEREO RENDERING AND HEAD TRACKING  RENDERING examples/js/effects/StereoEffect.js (Cardboard) examples/js/effects/VREffect.js (Rift)  HEAD TRACKING examples/js/controls/DeviceOrientationControls.js (Cardboard) examples/js/controls/VRControls.js (Rift) http://www.tonyparisi.com 10/21/2014
  • 15. VIZI: A FRAMEWORK FOR WEBVR APPLICATIONS  GOAL: MAKE IT EASY TO QUICKLY BUILD INTERESTING 3D APPLICATIONS  ARCHITECTURE INSPIRED INSPIRED BY MODERN GAME ENGINE DESIGN  COMPONENT-BASED DESIGN – EASILY PLUG NEW FEATURES INTO OBJECTS  APPLICATION OBJECT – HANDLES EVENT LOOP, THREE.JS CREATION, PAGE RESIZE, ROUTING EVENTS TO OBJECTS  INTERACTIONS – MAKE IT EASY TO PUT MOUSE AND TOUCH INTERACTION ON OBJECTS  BEHAVIORS – PREBUILT BEHAVIORS AUTOMATICALLY ROTATE, MOVE ETC.  PRE-BUILT OBJECTS – FOR COMMONLY USED DESIGN PATTERNS  SIMILAR IN DESIGN TO UNITY3D  USES THREE.JS FOR ALL GRAPHICS  ENHANCES THREE.JS VR RENDERING AND CONTROLLERS http://www.tonyparisi.com 10/21/2014
  • 16. OPEN TOOLS FOR CROSS-PLATFORM VR http://www.tonyparisi.com 10/21/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/
  • 17. PRO TOOLS FOR WEB VR Unreal 4 in WebGL https://www.youtube.com/watch?v=c2uNDlP4RiE#t=42 60FPS ported in 5 days Unreal native C++ engine -> JavaScript Emscripten + asm.js http://www.tonyparisi.com 10/21/2014 EMSCRIPTEN - THE COOLEST HACK EVER! https://github.com/kripken/ems cripten  CROSS-COMPILE C++ NATIVE CODE TO JAVASCRIPT  asm.js- LOW-LEVEL OPTIMIZED JAVASCRIPT  UNITY, UNREAL ENGINES USE THIS TO DEPLOY ON THE WEB  WATCH OUT: HUGE DOWNLOADS AND HARD TO DEBUG…. !
  • 18. WEBVR AND CSS http://www.tonyparisi.com 10/21/2014 MOZILLA VR CSS SHOWCASE http://mozvr.github.io/vr-web-examples/domvr-birds/
  • 19. WEBVR AND CSS http://www.tonyparisi.com 10/21/2014 <script type="text/javascript" src="js/vrutils.js"></script> <script> /* VR Headset and its associated orientation/position sensor */ var vrHMD, vrSensor; /* Element that will serve as our camera, moving the rest of the scene around */ var cssCamera = document.getElementById("camera"); /* the camera's position, as a css transform string. For right now, we want it just in the middle. */ var cssCameraPositionTransform = "translate3d(0, 0, 0)"; /* Request animation frame loop. */ function animate() { /* Acquire positional data from VR headset and convert into a transformation that can be applied to CSS. */ if (vrSensor !== undefined) { var state = vrSensor.getState(); var cssOrientationMatrix = cssMatrixFromOrientation(state.orientation, true); } /* Apply positional data to camera element */ cssCamera.style.transform = cssOrientationMatrix + " " + cssCameraPositionTransform; window.requestAnimationFrame(animate); } query HMD device state calculate “camera” orientation update “camera’s” CSS 3D transform
  • 20. VR + ML A MARKUP LANGUAGE FOR THE METAVERSE? http://www.tonyparisi.com 10/21/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”> </sphere> <sphere class="bubble skybox”> </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>
  • 21. CHALLENGES  WEBVR ON OCULUS IS NOT READY FOR PRIME TIME  (THAT’S OK NEITHER IS OCULUS!)  LATENCY IS THE BIGGEST ISSUE – BROWSER NEEDS TO UN-THROTTLE AT 60FPS  BUT WE’RE GOOD TO GO ON CARDBOARD!  60FPS WORKS GREAT  NEARLY 2 BILLION VR DEVICES ALREADY DEPLOYED!  FRAMEWORKS AND TOOLS ARE TYPICALLY WEB-ISH: UNDER DEVELOPMENT, ALWAYS IN FLUX, PRETTY MUCH OUT OF CONTROL  BUT OPEN SOURCE SO WE CAN LIVE WITH IT http://www.tonyparisi.com 10/21/2014
  • 22. LINKS  BROWSER DEV BUILDS Firefox http://blog.bitops.com/blog/2014/08/20/updated-firefox-vr-builds/ Chrome https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ  MOZILLA NEXT STEPS FOR VR (THURSDAY 23 OCT 2014) https://air.mozilla.org/virtual-reality-the-web-next-steps/  SAN FRANCISCO WEBVR MEETUP http://www.meetup.com/Web-VR/  WEBVR MAILING LIST web-vr-discuss@mozilla.org  CARDBOARD VR SHOWCASE http://vr.chromeexperiments.com/ http://www.tonyparisi.com 10/21/2014
  • 23. KEEP IN TOUCH CREDS Co-creator, VRML and X3D http://www.tonyparisi.com 10/21/2014 CONTACT tony@vizi.gl skype: auradeluxe http://twitter.com/auradeluxe http://www.tonyparisi.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/
  • 24. HACKING REALITY: HTML5 AND JAVASCRIPT FOR CROSS-PLATFORM VR TONY PARISI OCTOBER, 2014