DOM2AFrame: Putting the Web back in WebVR Robin Marx, Sander - PowerPoint PPT Presentation

DOM2AFrame: Putting the Web back in WebVR Robin Marx, Sander Vanhove, Wouter Vanmontfort, Peter Quax, Wim Lamotte https://webvr.edm.uhasselt.be

no direct control no immersion

no direct control no immersion

<canvas>

no direct control no immersion no HTML/CSS

no direct control no immersion no HTML/CSS use HTML/CSS full control VR-specific functionality

5X

Workaround 2 Workaround 1 - HTML2canvas - HTML-GL - rasterizeHTML - HTML2Three <canvas> 2D API <foreignObject>

- HTML2canvas - HTML-GL - rasterizeHTML - HTML2Three <canvas> 2D API <foreignObject>

<svg height="100" width="100"> <circle cx="50" cy="50" r="40" fill="red" /> <foreignObject> <! – - insert your HTML/CSS here --> </foreignObject> </svg>

Browser Workaround 1

Rewrite the browser’s paint logic

CSS = Layout + Style

CSS = Layout + Style Query with JavaScript canvas.fillRect (…)

Browser Workaround 2

WebElement  2D Texture  3D Quad 3.63 FPS 2.63 FPS Chrome 59, Intel I7 7700k, 16GB RAM, Nvidia GTX 1070

DOM2AFrame - rasterizeHTML - HTML2canvas - HTML2Three Web-GL - HTML-GL <foreignObject> <canvas> 2D API

CSS = Layout + Style gl_FragColor = Vec4(…) Query with JavaScript

B(r)owser Our contribution

WebElement  2D Texture  3D Quad WebElement 3D Mesh Input 55.2 FPS Animation Chrome 59, Intel I7 7700k, 16GB RAM, Nvidia GTX 1070

Mozilla A-Frame HTML A-Frame https://aframe.io/

DOM2AFrame = About bringing the Web into VR HTML/CSS/JS  3D Usable visual fidelity and performance Not production ready…

Image sources https://nimsony.itch.io/walkomotion-smb  http://mashable.com/2016/02/29/mark-zuckerberg-vr-army-response/  https://pixabay.com/en/internet-global-earth-communication-1181586/  https://www.davrous.com/wp-content/uploads/2017/07/Capture005.jpg  https://pre00.deviantart.net/ad21/th/pre/f/2016/051/2/7/wario_real_by_zacmariozero-d9sgus9.png  http://lapis.wikia.com/wiki/File:Waluigi.png  http://demo.spyropress.com/themeforest/bullet/  https://i.pinimg.com/736x/71/0a/a3/710aa307b530d1935c6fb593b84a91c3--funny-things-funny-stuff.jpg  https://i.pinimg.com/originals/e7/91/16/e79116016e107838483ab372f32cc965.png  http://www.instructables.com/id/Minecraft-2d-Mario/  https://vignette1.wikia.nocookie.net/fantendo/images/c/cf/Bowser-mario-kart-wii.jpg/revision/latest  https://vignette2.wikia.nocookie.net/mariokart/images/6/66/Mario-kart-7-artwork-luigi-glider.jpg/revision/latest  http://www.bankingtech.com/files/2013/02/snail-racing1.jpg  https://vignette.wikia.nocookie.net/dragons/images/6/67/Koopa.jpg/revision/latest?cb=20170916172417  http://www.edgeoftheworld.cz/images/ie9_fonts_comparison_big.png  https://www.fastcompany.com/3050016/unraveling-the-enigma-of-nintendos-virtual-boy-20-years-later  https://www.mariowiki.com/Goal_Pole  https://webvr.edm.uhasselt.be