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

▶
dom2aframe putting the web back in webvr
SMART_READER_LITE
LIVE PREVIEW

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

Feb 14, 2023 317 likes •671 views

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

slide-1
SLIDE 1

DOM2AFrame: Putting the Web back in WebVR

Robin Marx, Sander Vanhove, Wouter Vanmontfort, Peter Quax, Wim Lamotte

https://webvr.edm.uhasselt.be

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5

no direct control no immersion

slide-6
SLIDE 6

no direct control no immersion

slide-7
SLIDE 7

<canvas>

slide-8
SLIDE 8

no direct control no immersion no HTML/CSS

slide-9
SLIDE 9

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

slide-10
SLIDE 10

5X

slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13

<foreignObject>

Workaround 1

  • rasterizeHTML
  • HTML2Three

<canvas> 2D API

Workaround 2

  • HTML2canvas
  • HTML-GL
slide-14
SLIDE 14

<foreignObject>

  • rasterizeHTML
  • HTML2Three

<canvas> 2D API

  • HTML2canvas
  • HTML-GL
slide-15
SLIDE 15

<svg height="100" width="100"> <circle cx="50" cy="50" r="40" fill="red" />

<foreignObject> <!–- insert your HTML/CSS here --> </foreignObject>

</svg>

slide-16
SLIDE 16

Browser Workaround 1

slide-17
SLIDE 17

Rewrite the browser’s paint logic

slide-18
SLIDE 18

Layout Style + CSS =

slide-19
SLIDE 19

Layout Style + CSS =

Query with JavaScript canvas.fillRect(…)

slide-20
SLIDE 20

Browser Workaround 2

slide-21
SLIDE 21

WebElement  2D Texture  3D Quad 3.63 FPS 2.63 FPS

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

slide-22
SLIDE 22

<foreignObject>

  • rasterizeHTML
  • HTML2Three

<canvas> 2D API

  • HTML2canvas
  • HTML-GL

Web-GL

DOM2AFrame

slide-23
SLIDE 23

Layout Style + CSS =

Query with JavaScript

gl_FragColor = Vec4(…)

slide-24
SLIDE 24

B(r)owser Our contribution

slide-25
SLIDE 25

WebElement  2D Texture  3D Quad WebElement 3D Mesh

Input Animation

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

55.2 FPS

slide-26
SLIDE 26

Mozilla A-Frame

https://aframe.io/

HTML A-Frame

slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32

DOM2AFrame HTML/CSS/JS  3D Usable visual fidelity and performance

Not production ready…

= About bringing the Web into VR

slide-33
SLIDE 33
slide-34
SLIDE 34

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

slide-35
SLIDE 35