Immersive Earth: Teaching Earth and Space with Inexpensive Immersive Technology
IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement...
Transcript of IMMERSIVE WEBWhat’s the “Immersive Web”? WebXR’s GOAL How WebXR App Works? How to implement...
![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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051604/5ff8491e38e34d1f7253e4ca/html5/thumbnails/129.jpg)
\o/Thank you