![Page 2: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/2.jpg)
WHO ARE WE?
Samsung ElectronicsChromium/Blink OWNERW3C Spec EditorNode.js Contributor
Samsung ElectronicsChromium/Blink Member
![Page 3: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/3.jpg)
INTRODUCTION
![Page 4: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/4.jpg)
Play�VR�&�AR�Movies
![Page 5: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/5.jpg)
● What’s the “Immersive Web”?● WebXR’s GOAL● How WebXR App Works?● How to implement WebXR App● WebXR Internals in Chromium
CONTENTS
![Page 6: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/6.jpg)
● How to write/render WebXR contents?● Complex graphics theory● Specific frameworks or XR engine
NON-GOAL
![Page 7: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/7.jpg)
WHAT’S THE IMMERSIVE WEB
![Page 8: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/8.jpg)
Immersive..
Non-immersive Immersive
![Page 9: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/9.jpg)
The�immersive�web�means
virtual�world�experienceshosted�through�the�browser.
![Page 10: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/10.jpg)
WebAR�+�WebVR�+�…�+�=�WebXR
![Page 11: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/11.jpg)
WebAR�+�WebVR�+�…�+�=�WebXR=�“Immersive�Web”
![Page 12: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/12.jpg)
![Page 13: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/13.jpg)
Open�Web�Platform
![Page 14: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/14.jpg)
● WebXR Standard Spec● Web Platform(Browser) Implementation● Web Platform Tests● MDN (Documents)
You can contribute to..
![Page 15: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/15.jpg)
WEB XR’S GOAL
![Page 16: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/16.jpg)
세상에는�다양한�XR�디바이스
제조사�및�브랜드가�존재합니다
![Page 17: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/17.jpg)
또한�세상에는
다양한�XR�디바이스들이�있습니다
![Page 18: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/18.jpg)
각�제조사�및�브랜드�기기마다�지원하는
XR�엔진�또한�다양합니다
![Page 19: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/19.jpg)
XR�컨텐츠�개발자들은�각각의�엔진�위에서
앱이나�서비스를�개발합니다
![Page 20: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/20.jpg)
![Page 21: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/21.jpg)
![Page 22: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/22.jpg)
XR시장�성장감소↓�야기
![Page 23: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/23.jpg)
한�번의�XR�컨텐츠�작성으로
여러�디바이스와�플랫폼을�지원할�수�없을까?
![Page 24: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/24.jpg)
문제�해결의�핵심
Open�Web�Platform
![Page 25: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/25.jpg)
웹�브라우저는�데스크탑이든�모바일이든
플랫폼에�관계�없이�동작합니다
![Page 26: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/26.jpg)
Your�XR�App/Service
![Page 27: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/27.jpg)
WebXR�VS�OpenXR
![Page 28: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/28.jpg)
![Page 29: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/29.jpg)
WebXR은�한�번의�XR�컨텐츠�작성으로
광범위한�디바이스와�플랫폼을�커버할�수�있다!
![Page 30: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/30.jpg)
HOW WEB XR APP WORKS?
![Page 31: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/31.jpg)
DetectDevice
OpenSession
SetupXRLayer
RequestFrameOfRef
RenderContents
How WebXR App works
![Page 32: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/32.jpg)
DetectDevice
OpenSession
SetupXRLayer
RequestFrameOfRef
RenderContents
STEP1: Detect Device
![Page 33: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/33.jpg)
navigator.xr.requestDevice();
![Page 34: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/34.jpg)
XRDevice
XRDevice
XRDevice
XRDevice
PC/Mobile Web
navigator.xr.requestDevice();
![Page 35: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/35.jpg)
DefaultXRDevice
XRDevice
XRDevice
XRDevice
PC/Mobile Web
navigator.xr.requestDevice();
![Page 36: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/36.jpg)
“XRDevice”�객체는
XR�디바이스들의�추상화이다
![Page 37: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/37.jpg)
OpenSession
SetupXRLayer
RequestFrameOfRef
RenderContents
STEP2: Open Session
DetectDevice
![Page 38: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/38.jpg)
“XRSession”을�생성하면
XR�디바이스와�상호작용을�할�수�있다
![Page 39: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/39.jpg)
device.requestSession();
![Page 40: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/40.jpg)
device.requestSession({ immersive: false});
device.requestSession({ immersive: true});
![Page 41: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/41.jpg)
device.requestSession({ immersive: true });
![Page 42: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/42.jpg)
SecurityError: The requested session requires user activation.
![Page 43: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/43.jpg)
● event.isTrusted should be true● event’s type is one of:
○ change○ click○ contextmenu○ dblclick○ mouseup○ pointerup○ reset○ submit○ touchend
User Activation
![Page 44: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/44.jpg)
WTF
![Page 45: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/45.jpg)
User�Interaction이�요구된다
![Page 46: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/46.jpg)
Open WebXR device.requestSession({
immersive: true});
![Page 47: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/47.jpg)
SetupXRLayer
RenderContents
STEP3: Setup XRLayer
DetectDevice
OpenSession
RequestFrameOfRef
![Page 48: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/48.jpg)
![Page 49: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/49.jpg)
<canvas></canvas>
![Page 50: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/50.jpg)
![Page 51: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/51.jpg)
XRLayer
![Page 52: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/52.jpg)
session.baseLayer = new XRWebGLLayer(session, gl);
![Page 53: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/53.jpg)
XRWebGLLayer
drawScene(gl);
![Page 54: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/54.jpg)
RenderContents
STEP4: Request FrameOfReference
DetectDevice
OpenSession
SetupXRLayer
RequestFrameOfRef
![Page 55: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/55.jpg)
FrameOfReference란�무엇일까?
![Page 56: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/56.jpg)
Frame�Of�Ref�== Ref�Coordinate�System
![Page 57: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/57.jpg)
● head-model○ The origin is approximately the location of the viewer's head and does not change if the
viewer moves.
● eye-level○ The origin is the viewer's head and moves with the viewer.
● stage○ The origin is implied to be the center of the room at floor level and does not change if the
viewer moves.
Frame Of Reference Types
![Page 58: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/58.jpg)
session.requestFrameOfReference(‘eye-level’);
![Page 59: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/59.jpg)
RenderContents
STEP5: Render Contents
DetectDevice
OpenSession
SetupXRLayer
RequestFrameOfRef
![Page 60: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/60.jpg)
그냥 WebGL을�사용해서�그리면�된다
![Page 61: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/61.jpg)
requestAnimationFrame(onDrawFrame);
![Page 62: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/62.jpg)
60 MHz 90 MHz
![Page 63: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/63.jpg)
window.requestAnimationFrame()
16.67 ms16.67 ms
PaintJavascriptRender thread PaintJavascript
![Page 64: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/64.jpg)
session.requestAnimationFrame()
11.11 ms11.11 ms
PaintJavascriptRender thread PaintJavascript
![Page 65: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/65.jpg)
function onDrawFrame(time, frame) { ... }
![Page 66: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/66.jpg)
● Pose○ In general, the position and orientation of a thing in AR/VR is called a pose.
● Views○ Each view corresponds to a display or portion of a display used by an XR device to
present imagery to the user.
XRFrame’s informations
![Page 67: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/67.jpg)
![Page 68: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/68.jpg)
HOW TO IMPLEMENT WEB XR APP
![Page 69: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/69.jpg)
DetectDevice
OpenSession
SetupXRLayer
RequestFrameOfRef
RenderContents
Summary: How WebXR App Works
![Page 70: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/70.jpg)
Request Device// Detect default XRDevice
const device = await navigator.xr.requestDevice();
![Page 71: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/71.jpg)
Not Found Available XRDevice Available XRDevice
![Page 72: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/72.jpg)
Request Sessionconst xrButton = document.querySelector(‘button’);
try {
await device.supportsSession({ immersive: true });
xrButton.innerText = ‘Enter VR’;
xrButton.disabled = false;
xrButton.addEventListener('click', onEnterXR);
} catch(error) {
// Not support session
}
Enter XR
![Page 73: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/73.jpg)
Request Sessionfunction onEnterXR() {
session = await device.requestSession({
immersive: true
});
...
}
![Page 74: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/74.jpg)
Enter XR
device.requestSession({ immersive: true});
![Page 75: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/75.jpg)
Setup XRLayerfunction setupXRLayer() {
const canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', {
compatibleXRDevice: session.device
});
}
![Page 76: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/76.jpg)
Setup XRLayerfunction setupXRLayer() {
const canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', {
compatibleXRDevice: session.device
});
session.baseLayer = new XRWebGLLayer(session, gl);
}
![Page 77: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/77.jpg)
XRWebGLLayer
drawScene(gl);
![Page 78: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/78.jpg)
Request FrameOfReferenceframeOfRef = await session.requestFrameOfReference('stage');
![Page 79: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/79.jpg)
Rendering Loopfunction onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame);
}
session.requestAnimationFrame(onXRFrame);
![Page 80: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/80.jpg)
Get Device Posefunction onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame);
const pose = frame.getDevicePose(frameOfRef);
if (!pose)
return;
}
session.requestAnimationFrame(onXRFrame);
![Page 81: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/81.jpg)
Bind Frame Bufferfunction onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame);
const pose = frame.getDevicePose(frameOfRef);
if (!pose)
return;
gl.bindFramebuffer(session.baseLayer.framebuffer);
}
session.requestAnimationFrame(onXRFrame);
![Page 82: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/82.jpg)
Renderingfunction onXRFrame(time, frame) {
...
for(let view of frame.views) {
const viewport = session.baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y,
viewport.width, viewport.height);
gl.clearColor(0.1, 0.5, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
}
![Page 83: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/83.jpg)
function onXRFrame(time, frame) {
...
for(let view of frame.views) {
const viewport = session.baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y,
viewport.width, viewport.height);
draw(view.projectionMatrix,
pose.getViewMatrix(view), gl);
}
}
Rendering with Three.js
![Page 84: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/84.jpg)
Demo & Source Codehttps://codeimpl.github.io/webxr-samples/
![Page 85: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/85.jpg)
WEB XR INTERNALS IN CHROMIUM
![Page 86: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/86.jpg)
왜�Chromium인가?
![Page 87: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/87.jpg)
WebXR의�가장�최신�구현체이다
![Page 88: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/88.jpg)
Chromium은�널리알려진�것처럼
Multi-process�architecture를�사용한다
![Page 89: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/89.jpg)
![Page 90: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/90.jpg)
Browser
Renderer
![Page 91: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/91.jpg)
WebXR의�관점에서..
![Page 92: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/92.jpg)
BrowserProcess
RendererProcess
XRRuntimeProcess
![Page 93: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/93.jpg)
XRService
Renderer
XRRuntime
Renderer와�Device를�중계해주는�역할
Web개발자에게�제공되는�WebXR�API의�Javascript�Binding�구현
GVR,�OpenVR�등�다양한�XRDevice의�드라이버�역할
![Page 94: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/94.jpg)
DetectDevice
OpenSession
SetupXRLayer
RequestFrameOfRef
RenderContents
How WebXR App works
![Page 95: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/95.jpg)
DetectDevice
OpenSession
SetupXRLayer
RequestFrameOfRef
RenderContents
STEP1: Detect Device
![Page 96: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/96.jpg)
navigator.xr.requestDevice();
![Page 97: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/97.jpg)
XRService
Renderer
XRRuntime
![Page 98: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/98.jpg)
XRService
Renderer
XRRuntime
requestDevice()
![Page 99: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/99.jpg)
XRService
Renderer
XRRuntimeXRDevice
requestDevice()
Create�XRDevice
![Page 100: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/100.jpg)
XRService
Renderer
XRRuntimeXRDevice
Create�XRDevice
requestDevice() callback
![Page 101: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/101.jpg)
XRService
Renderer
XRRuntimeXRDevice
Create�XRDevice
requestDevice() callback
XRDevice
Create�XRDevice
![Page 102: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/102.jpg)
XRService
Renderer
XRRuntimeXRDevice
Create�XRDevice
requestDevice() callback
XRDevice
Create�XRDevice
Mojo�IPC
![Page 103: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/103.jpg)
OpenSession
SetupXRLayer
RequestFrameOfRef
RenderContents
STEP2: Open Session
DetectDevice
![Page 104: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/104.jpg)
device.requestSession();
![Page 105: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/105.jpg)
XRService
Renderer
XRRuntimeXRDevice
XRDevice
![Page 106: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/106.jpg)
XRService
Renderer
XRRuntimeXRDevice
XRDevice
requestSession()
![Page 107: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/107.jpg)
XRService
Renderer
XRRuntimeXRDevice
XRDevice
requestSession()
requestSession()
![Page 108: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/108.jpg)
XRService
Renderer
XRRuntimeXRDevice
XRDevice
requestSession()
requestSession()
requestSession()
![Page 109: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/109.jpg)
XRService
Renderer
XRRuntimeXRDevice
XRDevice
XRSession
requestSession()
requestSession()
requestSession()
Create�XRSession
![Page 110: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/110.jpg)
XRService
Renderer
XRRuntimeXRDevice
XRDevice
XRSession
requestSession()
requestSession()
requestSession()
Create�XRSession
callback
![Page 111: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/111.jpg)
XRService
Renderer
XRRuntimeXRDevice
XRDevice
XRSession
requestSession()
requestSession()
requestSession()
Create�XRSession
callback
callback
![Page 112: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/112.jpg)
XRService
Renderer
XRRuntimeXRDevice
XRDevice
XRSession
requestSession()
requestSession()
requestSession()
Create�XRSession
callback
callback
XRSession
Mojo�IPC
![Page 113: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/113.jpg)
XRSession이�생성되고나면,
Renderer와�Device는�IPC로�연결된다
![Page 114: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/114.jpg)
XRService
Renderer
XRRuntime
XRDevice
XRSession
XRSession
Mojo�IPC
![Page 115: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/115.jpg)
XRService
Renderer
XRRuntime
Mojo�IPC
![Page 116: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/116.jpg)
SetupXRLayer
STEP3,4,5: Render Contents
DetectDevice
OpenSession
RequestFrameOfRef
RenderContents
![Page 117: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/117.jpg)
session.requestAnimationFrame();
![Page 118: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/118.jpg)
Renderer XRRuntimeMojo�IPC
XRSession XRSession
XRFrameDataProvider
XRFrameDataProvider
requestAnimationFrame()
![Page 119: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/119.jpg)
Renderer XRRuntimeMojo�IPC
XRSession XRSession
XRFrameDataProvider
XRFrameDataProvider
requestAnimationFrame()
GetFrameData()
![Page 120: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/120.jpg)
Renderer XRRuntimeMojo�IPC
XRSession XRSession
XRFrameDataProvider
XRFrameDataProvider
requestAnimationFrame()
GetFrameData()
callback
![Page 121: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/121.jpg)
Renderer XRRuntimeMojo�IPC
XRSession XRSession
XRFrameDataProvider
XRFrameDataProvider
OnFrame() requestAnimationFrame()
GetFrameData()
callback
![Page 122: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/122.jpg)
WebGLLayer,�FrameOfReference는
Renderer�측에서�생성된다
![Page 123: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/123.jpg)
Renderer XRRuntimeMojo�IPC
XRSession XRSession
XRFrameDataProvider
XRFrameDataProvider
![Page 124: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/124.jpg)
Renderer XRRuntimeMojo�IPC
XRSession XRSession
XRFrameDataProvider
XRFrameDataProvider
WebGLLayer
![Page 125: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/125.jpg)
Renderer XRRuntimeMojo�IPC
XRSession XRSession
XRFrameDataProvider
XRFrameDataProvider
WebGLLayer
onFrameStart,�onFrameEnd
![Page 126: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/126.jpg)
Renderer XRRuntimeMojo�IPC
XRSession XRSession
XRFrameDataProvider
XRFrameDataProvider
WebGLLayer
onFrameStart,�onFrameEnd
submitWebGLLayer()
![Page 127: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/127.jpg)
Renderer XRRuntimeMojo�IPC
XRSession XRSession
XRFrameDataProvider
XRFrameDataProvider
WebGLLayer
onFrameStart,�onFrameEnd
submitWebGLLayer()
XRPresentationProviderSubmitFrame()
![Page 128: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/128.jpg)
Q & A
![Page 129: IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement WebXR App WebXR Internals in Chromium CONTENTS event.isTrusted should be …](https://reader034.vdocuments.site/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/129.jpg)
\o/Thank you