From 749b381a7540672e8666a208d3700a96b6e87e0d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 3 Apr 2023 10:58:48 +0900 Subject: [PATCH 1/4] Update devDependencies (non-major) (#25754) * Update devDependencies (non-major) * Update puppeteer.js https://github.com/mrdoob/three.js/pull/25715#issuecomment-1486653879 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michael Herzog From fe59e3d26ae4058559829f84bb01fb4744ab7a93 Mon Sep 17 00:00:00 2001 From: Emmett Lalish Date: Thu, 9 Nov 2023 12:27:39 -0800 Subject: [PATCH 2/4] fix ssl error (#27163) From 08618a8c46a0851b199742dab9c53bac156765cf Mon Sep 17 00:00:00 2001 From: ycw Date: Sat, 4 May 2024 22:55:08 +0800 Subject: [PATCH 3/4] bump pathtracer mior -> 0.0.22 (#28280) From 0d8bdf6649be0e029dd959a731bc91efb41d84cb Mon Sep 17 00:00:00 2001 From: Rik Cabanier Date: Tue, 12 May 2026 11:47:49 -0700 Subject: [PATCH 4/4] feature check webgpu based on XRGPUBinding interface --- examples/jsm/webxr/WebGLXRFallback.js | 70 +++++---------------------- examples/webgpu_xr_cubes.html | 49 ++++--------------- examples/webgpu_xr_native_layers.html | 6 ++- examples/webgpu_xr_rollercoaster.html | 48 ++++-------------- 4 files changed, 34 insertions(+), 139 deletions(-) diff --git a/examples/jsm/webxr/WebGLXRFallback.js b/examples/jsm/webxr/WebGLXRFallback.js index 269b3d77c4d224..387139b3fe4762 100644 --- a/examples/jsm/webxr/WebGLXRFallback.js +++ b/examples/jsm/webxr/WebGLXRFallback.js @@ -1,71 +1,23 @@ /** * Sets up a construction-time WebGL fallback for WebGPU XR examples. * - * @param {WebGPURenderer} renderer - The initial renderer. - * @param {Function} createFallbackRenderer - A function that returns a new renderer with a WebGL backend. - * @param {Function} onFallback - A function that installs the new renderer in the app. + * WebGPU XR requires the browser to expose `XRGPUBinding`. If the API is not + * available, this helper mutates the renderer parameters to use the existing + * WebGL fallback backend. + * + * @param {Object} parameters - The parameters passed to `WebGPURenderer`. + * @return {Object} The same parameters object. */ -function setupWebGLXRFallback( renderer, createFallbackRenderer, onFallback = () => {} ) { - - let currentRenderer = renderer; - const patchedRenderers = new WeakSet(); - - function patchRenderer( renderer ) { - - if ( patchedRenderers.has( renderer ) ) return; - - patchedRenderers.add( renderer ); - - const setSession = renderer.xr.setSession.bind( renderer.xr ); - - renderer.xr.setSession = async function ( session ) { - - if ( renderer !== currentRenderer ) { - - return currentRenderer.xr.setSession( session ); - - } - - try { - - return await setSession( session ); - - } catch ( error ) { - - if ( session === null || renderer.backend.isWebGPUBackend !== true ) { - - throw error; - - } - - const fallbackRenderer = createFallbackRenderer( renderer ); - - if ( fallbackRenderer.backend.isWebGLBackend !== true ) { - - throw new Error( 'WebGLXRFallback: createFallbackRenderer() must return a renderer with a WebGL backend.' ); - - } - - fallbackRenderer.xr.enabled = renderer.xr.enabled; - fallbackRenderer.xr.cameraAutoUpdate = renderer.xr.cameraAutoUpdate; - fallbackRenderer.xr.setFramebufferScaleFactor( renderer.xr.getFramebufferScaleFactor() ); - fallbackRenderer.xr.setReferenceSpaceType( renderer.xr.getReferenceSpaceType() ); - - await onFallback( fallbackRenderer, renderer ); - - currentRenderer = fallbackRenderer; - patchRenderer( fallbackRenderer ); - - return fallbackRenderer.xr.setSession( session ); +function setWebGLXRFallback( parameters ) { - } + if ( ! ( 'XRGPUBinding' in window ) ) { - }; + parameters.forceWebGL = true; } - patchRenderer( renderer ); + return parameters; } -export { setupWebGLXRFallback }; +export { setWebGLXRFallback }; diff --git a/examples/webgpu_xr_cubes.html b/examples/webgpu_xr_cubes.html index 603cc1b5f3d9c5..fc4dbcfac2ec54 100644 --- a/examples/webgpu_xr_cubes.html +++ b/examples/webgpu_xr_cubes.html @@ -34,12 +34,13 @@ import { BoxLineGeometry } from 'three/addons/geometries/BoxLineGeometry.js'; import { XRButton } from 'three/addons/webxr/XRButton.js'; import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js'; - import { setupWebGLXRFallback } from 'three/addons/webxr/WebGLXRFallback.js'; + import { setWebGLXRFallback } from 'three/addons/webxr/WebGLXRFallback.js'; const timer = new THREE.Timer(); timer.connect( document ); const rendererParameters = { antialias: true, outputBufferType: THREE.UnsignedByteType, multiview: true }; + setWebGLXRFallback( rendererParameters ); const controllerModelFactory = new XRControllerModelFactory(); let container; @@ -105,54 +106,22 @@ raycaster = new THREE.Raycaster(); - renderer = createRenderer(); - setRenderer( renderer ); - setupWebGLXRFallback( renderer, () => createRenderer( true ), setRenderer ); - - // - - window.addEventListener( 'resize', onWindowResize ); - - // - - document.body.appendChild( XRButton.createButton( renderer ) ); - - } - - function createRenderer( forceWebGL = false ) { - - const parameters = { ...rendererParameters }; - - if ( forceWebGL === true ) parameters.forceWebGL = true; - - const renderer = new THREE.WebGPURenderer( parameters ); + renderer = new THREE.WebGPURenderer( rendererParameters ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animate ); renderer.xr.enabled = true; + container.appendChild( renderer.domElement ); - return renderer; - - } - - function setRenderer( newRenderer, oldRenderer = null ) { - - if ( controller !== undefined ) scene.remove( controller ); - if ( controllerGrip !== undefined ) scene.remove( controllerGrip ); - - if ( oldRenderer === null ) { - - container.appendChild( newRenderer.domElement ); + setupControllers(); - } else { + // - container.replaceChild( newRenderer.domElement, oldRenderer.domElement ); - oldRenderer.dispose(); + window.addEventListener( 'resize', onWindowResize ); - } + // - renderer = newRenderer; - setupControllers(); + document.body.appendChild( XRButton.createButton( renderer ) ); } diff --git a/examples/webgpu_xr_native_layers.html b/examples/webgpu_xr_native_layers.html index 78315245482533..fbb0c8b50723be 100644 --- a/examples/webgpu_xr_native_layers.html +++ b/examples/webgpu_xr_native_layers.html @@ -45,6 +45,7 @@ } from 'three/addons/misc/RollerCoaster.js'; import { HTMLMesh } from 'three/addons/interactive/HTMLMesh.js'; import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + import { setWebGLXRFallback } from 'three/addons/webxr/WebGLXRFallback.js'; let camera, scene, renderer; let controller1, controller2; @@ -185,7 +186,10 @@ // - renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true, outputBufferType: THREE.UnsignedByteType, multiview: true } ); + const rendererParameters = { antialias: true, outputBufferType: THREE.UnsignedByteType, multiview: true }; + setWebGLXRFallback( rendererParameters ); + + renderer = new THREE.WebGPURenderer( rendererParameters ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); diff --git a/examples/webgpu_xr_rollercoaster.html b/examples/webgpu_xr_rollercoaster.html index 71e87b378872d4..802ff1d95d483d 100644 --- a/examples/webgpu_xr_rollercoaster.html +++ b/examples/webgpu_xr_rollercoaster.html @@ -33,55 +33,25 @@ SkyGeometry } from 'three/addons/misc/RollerCoaster.js'; import { VRButton } from 'three/addons/webxr/VRButton.js'; - import { setupWebGLXRFallback } from 'three/addons/webxr/WebGLXRFallback.js'; + import { setWebGLXRFallback } from 'three/addons/webxr/WebGLXRFallback.js'; let mesh, material, geometry; - let renderer; const rendererParameters = { antialias: true, outputBufferType: THREE.UnsignedByteType, multiview: false }; + setWebGLXRFallback( rendererParameters ); - renderer = createRenderer(); - setRenderer( renderer ); - setupWebGLXRFallback( renderer, () => createRenderer( true ), setRenderer ); + const renderer = new THREE.WebGPURenderer( rendererParameters ); + renderer.setPixelRatio( window.devicePixelRatio ); + renderer.setSize( window.innerWidth, window.innerHeight ); + renderer.setAnimationLoop( animate ); + renderer.xr.enabled = true; + renderer.xr.setReferenceSpaceType( 'local' ); + document.body.appendChild( renderer.domElement ); document.body.appendChild( VRButton.createButton( renderer ) ); // - function createRenderer( forceWebGL = false ) { - - const parameters = { ...rendererParameters }; - - if ( forceWebGL === true ) parameters.forceWebGL = true; - - const renderer = new THREE.WebGPURenderer( parameters ); - renderer.setPixelRatio( window.devicePixelRatio ); - renderer.setSize( window.innerWidth, window.innerHeight ); - renderer.setAnimationLoop( animate ); - renderer.xr.enabled = true; - renderer.xr.setReferenceSpaceType( 'local' ); - - return renderer; - - } - - function setRenderer( newRenderer, oldRenderer = null ) { - - if ( oldRenderer === null ) { - - document.body.appendChild( newRenderer.domElement ); - - } else { - - document.body.replaceChild( newRenderer.domElement, oldRenderer.domElement ); - oldRenderer.dispose(); - - } - - renderer = newRenderer; - - } - const scene = new THREE.Scene(); scene.background = new THREE.Color( 0xf0f0ff );