DOM2AFrame: Putting the Web back in WebVRRobin Marx, Sander Vanhove, Wouter Vanmontfort, Peter Quax, Wim Lamotte

https://webvr.edm.uhasselt.be

no direct controlno immersion

no direct controlno immersion

<canvas>

no direct controlno immersion

no HTML/CSS

no HTML/CSS

use HTML/CSSfull control

VR-specific functionality

no direct controlno immersion

5X

<foreignObject>

Workaround 1

- rasterizeHTML- HTML2Three

<canvas> 2D API

Workaround 2

- HTML2canvas- HTML-GL

<foreignObject>

- rasterizeHTML- HTML2Three

<canvas> 2D API

- HTML2canvas- HTML-GL

<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

Layout Style+CSS =

Layout Style+CSS =

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

<foreignObject>

- rasterizeHTML- HTML2Three

<canvas> 2D API

- HTML2canvas- HTML-GLWeb-GL

DOM2AFrame

Layout Style+CSS =

Query with JavaScript gl_FragColor = Vec4(…)

B(r)owser Our contribution

WebElement 2D Texture 3D Quad

WebElement 3D Mesh

Input

Animation

Chrome 59, Intel I7 7700k, 16GB RAM, Nvidia GTX 1070

55.2 FPS

Mozilla A-Frame

https://aframe.io/

HTML

A-Frame

DOM2AFrame

HTML/CSS/JS 3D

Usable visual fidelity and performance

Not production ready…

= About bringing the Web into VR

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