dom2aframe: putting the web back in webvr › files › ic3d-robinmarx... · 2017-12-06 ·...
TRANSCRIPT
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