From 4d7ea03c5bacf9bde8939a15d4c3eda30724a97b Mon Sep 17 00:00:00 2001 From: Rik Cabanier Date: Tue, 24 Nov 2020 04:11:10 -0800 Subject: [PATCH 1/5] Add preliminary support for WebXR Layers --- examples/files.json | 3 +- examples/jsm/webxr/VRButton.js | 2 +- examples/screenshots/webxr_layers.jpg | Bin 0 -> 3413 bytes examples/webxr_layers.html | 171 ++++++++++++++++++++++++++ src/renderers/webxr/WebXRManager.js | 2 +- 5 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 examples/screenshots/webxr_layers.jpg create mode 100644 examples/webxr_layers.html diff --git a/examples/files.json b/examples/files.json index b5e001af515a8b..6052319f4817ae 100644 --- a/examples/files.json +++ b/examples/files.json @@ -355,7 +355,8 @@ "webxr_vr_rollercoaster", "webxr_vr_sandbox", "webxr_vr_sculpt", - "webxr_vr_video" + "webxr_vr_video", + "webxr_layers" ], "games": [ "games_fps" diff --git a/examples/jsm/webxr/VRButton.js b/examples/jsm/webxr/VRButton.js index f40ed854865d53..20687329b6f110 100644 --- a/examples/jsm/webxr/VRButton.js +++ b/examples/jsm/webxr/VRButton.js @@ -68,7 +68,7 @@ class VRButton { // ('local' is always available for immersive sessions and doesn't need to // be requested separately.) - const sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor', 'hand-tracking' ] }; + const sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor', 'hand-tracking', 'layers' ] }; navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted ); } else { diff --git a/examples/screenshots/webxr_layers.jpg b/examples/screenshots/webxr_layers.jpg new file mode 100644 index 0000000000000000000000000000000000000000..001fe203e0b94e476d12e5c1c76aa979a0fbc77f GIT binary patch literal 3413 zcmex=iF;N$`UAd82aiwDGkXk%h!W@hDLXJZFTlSKSKz#z!M@QZN*Gov5_lOQ9r zAmjfdjEjJ7WCc47=uik?WMXDvWn%|Afm;CRY-VPlV_AVN1*)tC$}zAAvI;30I#U-U>$dGXcJ4ZK_{h;?$4{I*b?NeztJkjIxOwa0qsLF4K70P+<*SdMK7aZ8?fZ|P zzZe;qA>IL!82$lzoRJ9>=IkK_0Zp(e6?1osf!KmTtr@Gvt1BaB&)!Jgq?{R@T#ObuKN n8l%)`5R9gR(Tp%!7K|2$qcy^4Z8%yRj@E|5u{QkA@c$+N?bpn5 literal 0 HcmV?d00001 diff --git a/examples/webxr_layers.html b/examples/webxr_layers.html new file mode 100644 index 00000000000000..288f4357ad6dcf --- /dev/null +++ b/examples/webxr_layers.html @@ -0,0 +1,171 @@ + + + + three.js vr - handinput + + + + + + +
+ three.js media and projection layers
+ (Oculus Browser with #webxr-hands and #webxr-layers flags enabled) +
+ + + + diff --git a/src/renderers/webxr/WebXRManager.js b/src/renderers/webxr/WebXRManager.js index f56fd33a0b9d1e..ed3a0fe4140132 100644 --- a/src/renderers/webxr/WebXRManager.js +++ b/src/renderers/webxr/WebXRManager.js @@ -16,7 +16,6 @@ class WebXRManager extends EventDispatcher { const state = renderer.state; let session = null; - let framebufferScaleFactor = 1.0; let referenceSpace = null; @@ -442,6 +441,7 @@ class WebXRManager extends EventDispatcher { cameraVR.cameras.length = 0; cameraVRNeedsUpdate = true; + } for ( let i = 0; i < views.length; i ++ ) { From aa1b8e45828f2a1aba6389cbf595c0efef0c5e19 Mon Sep 17 00:00:00 2001 From: Rik Cabanier Date: Mon, 21 Dec 2020 15:40:04 -0800 Subject: [PATCH 2/5] WebXR Layers: rename sample --- examples/files.json | 2 +- .../{webxr_layers.jpg => webxr_vr_layers.jpg} | Bin .../{webxr_layers.html => webxr_vr_layers.html} | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename examples/screenshots/{webxr_layers.jpg => webxr_vr_layers.jpg} (100%) rename examples/{webxr_layers.html => webxr_vr_layers.html} (100%) diff --git a/examples/files.json b/examples/files.json index 6052319f4817ae..7bdc29100ec131 100644 --- a/examples/files.json +++ b/examples/files.json @@ -356,7 +356,7 @@ "webxr_vr_sandbox", "webxr_vr_sculpt", "webxr_vr_video", - "webxr_layers" + "webxr_vr_layers" ], "games": [ "games_fps" diff --git a/examples/screenshots/webxr_layers.jpg b/examples/screenshots/webxr_vr_layers.jpg similarity index 100% rename from examples/screenshots/webxr_layers.jpg rename to examples/screenshots/webxr_vr_layers.jpg diff --git a/examples/webxr_layers.html b/examples/webxr_vr_layers.html similarity index 100% rename from examples/webxr_layers.html rename to examples/webxr_vr_layers.html From 15e7ec8b0eaa30eb56b10c590d031871de248dfb Mon Sep 17 00:00:00 2001 From: Rik Cabanier Date: Tue, 29 Jun 2021 07:27:25 -0700 Subject: [PATCH 3/5] Resolve merge conflicts for WebXR Layers --- src/renderers/webxr/WebXRManager.js | 91 +++++++++++++++++++++++++---- 1 file changed, 79 insertions(+), 12 deletions(-) diff --git a/src/renderers/webxr/WebXRManager.js b/src/renderers/webxr/WebXRManager.js index ed3a0fe4140132..d8b2f51b1e5ec3 100644 --- a/src/renderers/webxr/WebXRManager.js +++ b/src/renderers/webxr/WebXRManager.js @@ -22,6 +22,9 @@ class WebXRManager extends EventDispatcher { let referenceSpaceType = 'local-floor'; let pose = null; + let glBinding = null; + let glFramebuffer = null; + let glProjLayer = null; const controllers = []; const inputSourcesMap = new Map(); @@ -198,18 +201,46 @@ class WebXRManager extends EventDispatcher { } - const layerInit = { - antialias: attributes.antialias, - alpha: attributes.alpha, - depth: attributes.depth, - stencil: attributes.stencil, - framebufferScaleFactor: framebufferScaleFactor - }; + if ( session.renderState.layers === undefined ) { - // eslint-disable-next-line no-undef - const baseLayer = new XRWebGLLayer( session, gl, layerInit ); + const layerInit = { + antialias: attributes.antialias, + alpha: attributes.alpha, + depth: attributes.depth, + stencil: attributes.stencil, + framebufferScaleFactor: framebufferScaleFactor + }; - session.updateRenderState( { baseLayer: baseLayer } ); + // eslint-disable-next-line no-undef + const baseLayer = new XRWebGLLayer( session, gl, layerInit ); + + session.updateRenderState( { baseLayer: baseLayer } ); + + } else { + + let depthFormat = 0; + + if ( attributes.depth ) { + + depthFormat = attributes.stencil ? gl.DEPTH_STENCIL : gl.DEPTH_COMPONENT; + + } + + const projectionlayerInit = { + colorFormat: attributes.alpha ? gl.RGBA : gl.RGB, + depthFormat: depthFormat, + scaleFactor: framebufferScaleFactor + }; + + // eslint-disable-next-line no-undef + glBinding = new XRWebGLBinding( session, gl ); + + glProjLayer = glBinding.createProjectionLayer( projectionlayerInit ); + + glFramebuffer = gl.createFramebuffer(); + + session.updateRenderState( { layers: [ glProjLayer ] } ); + } referenceSpace = await session.requestReferenceSpace( referenceSpaceType ); @@ -428,9 +459,14 @@ class WebXRManager extends EventDispatcher { if ( pose !== null ) { const views = pose.views; + const baseLayer = session.renderState.baseLayer; - state.bindXRFramebuffer( baseLayer.framebuffer ); + if ( session.renderState.layers === undefined ) { + + state.bindXRFramebuffer( baseLayer.framebuffer ); + + } let cameraVRNeedsUpdate = false; @@ -439,6 +475,7 @@ class WebXRManager extends EventDispatcher { if ( views.length !== cameraVR.cameras.length ) { cameraVR.cameras.length = 0; + cameraVRNeedsUpdate = true; @@ -447,11 +484,41 @@ class WebXRManager extends EventDispatcher { for ( let i = 0; i < views.length; i ++ ) { const view = views[ i ]; - const viewport = baseLayer.getViewport( view ); + + let viewport = null; + + if ( session.renderState.layers === undefined ) { + + viewport = baseLayer.getViewport( view ); + + } else { + + const glSubImage = glBinding.getViewSubImage( glProjLayer, view ); + + gl.bindFramebuffer( gl.FRAMEBUFFER, glFramebuffer ); + + gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, glSubImage.colorTexture, 0 ); + + if ( glSubImage.depthStencilTexture !== undefined ) { + + gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, glSubImage.depthStencilTexture, 0 ); + + } + + gl.bindFramebuffer( gl.FRAMEBUFFER, null ); + + state.bindXRFramebuffer( glFramebuffer ); + + viewport = glSubImage.viewport; + + } const camera = cameras[ i ]; + camera.matrix.fromArray( view.transform.matrix ); + camera.projectionMatrix.fromArray( view.projectionMatrix ); + camera.viewport.set( viewport.x, viewport.y, viewport.width, viewport.height ); if ( i === 0 ) { From 90276534d9b243bb8cade7ceee2ac07c5d4829e6 Mon Sep 17 00:00:00 2001 From: Michael Herzog Date: Tue, 29 Jun 2021 17:02:52 +0200 Subject: [PATCH 4/5] Update WebXRManager.js Clean up. --- src/renderers/webxr/WebXRManager.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/renderers/webxr/WebXRManager.js b/src/renderers/webxr/WebXRManager.js index d8b2f51b1e5ec3..54f12ca32d780a 100644 --- a/src/renderers/webxr/WebXRManager.js +++ b/src/renderers/webxr/WebXRManager.js @@ -240,6 +240,7 @@ class WebXRManager extends EventDispatcher { glFramebuffer = gl.createFramebuffer(); session.updateRenderState( { layers: [ glProjLayer ] } ); + } referenceSpace = await session.requestReferenceSpace( referenceSpaceType ); From aae111f770ed22bfbf272d61299511c1429664b9 Mon Sep 17 00:00:00 2001 From: Michael Herzog Date: Tue, 29 Jun 2021 17:03:36 +0200 Subject: [PATCH 5/5] Update webxr_vr_layers.html Correct title. --- examples/webxr_vr_layers.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/webxr_vr_layers.html b/examples/webxr_vr_layers.html index 288f4357ad6dcf..dc8686ff404bc0 100644 --- a/examples/webxr_vr_layers.html +++ b/examples/webxr_vr_layers.html @@ -1,7 +1,7 @@ - three.js vr - handinput + three.js vr - layers