From e0c8a51c839b3260449f5924b1118c56738fd608 Mon Sep 17 00:00:00 2001
From: Renaud Rohlinger <renaud.rohlinger@gmail.com>
Date: Mon, 7 Oct 2024 14:14:45 +0900
Subject: [PATCH 1/2] WebGPURenderer: Add HDR Support

---
 examples/webgpu_tsl_vfx_linkedparticles.html |  8 ++++----
 src/renderers/webgpu/WebGPUBackend.js        |  9 +++++++--
 src/renderers/webgpu/utils/WebGPUUtils.js    | 10 +++++++---
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/examples/webgpu_tsl_vfx_linkedparticles.html b/examples/webgpu_tsl_vfx_linkedparticles.html
index 4506144e82d7cd..9b33c327d7f442 100644
--- a/examples/webgpu_tsl_vfx_linkedparticles.html
+++ b/examples/webgpu_tsl_vfx_linkedparticles.html
@@ -17,8 +17,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.webgpu.js",
-					"three/tsl": "../build/three.webgpu.js",
+					"three": "../src/Three.WebGPU.js",
+					"three/tsl": "../src/Three.WebGPU.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -88,7 +88,7 @@
 
 				// renderer
 
-				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, hdr: true } );
 				renderer.setClearColor( 0x14171a );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -369,7 +369,7 @@
 				const gui = new GUI();
 
 				gui.add( controls, 'autoRotate' ).name( 'Auto Rotate' );
-				gui.add( controls, 'autoRotateSpeed', - 10.0, 10.0, 0.01 ).name( 'Auto Rotate Speed' );				
+				gui.add( controls, 'autoRotateSpeed', - 10.0, 10.0, 0.01 ).name( 'Auto Rotate Speed' );
 
 				const partFolder = gui.addFolder( 'Particles' );
 				partFolder.add( timeScale, 'value', 0.0, 4.0, 0.01 ).name( 'timeScale' );
diff --git a/src/renderers/webgpu/WebGPUBackend.js b/src/renderers/webgpu/WebGPUBackend.js
index 62b186f9402c01..4a792b6f5c2117 100644
--- a/src/renderers/webgpu/WebGPUBackend.js
+++ b/src/renderers/webgpu/WebGPUBackend.js
@@ -29,6 +29,7 @@ class WebGPUBackend extends Backend {
 		this.parameters.alpha = ( parameters.alpha === undefined ) ? true : parameters.alpha;
 
 		this.parameters.requiredLimits = ( parameters.requiredLimits === undefined ) ? {} : parameters.requiredLimits;
+		this.parameters.hdr = ( parameters.hdr === true );
 
 		this.trackTimestamp = ( parameters.trackTimestamp === true );
 
@@ -107,14 +108,18 @@ class WebGPUBackend extends Backend {
 		this.context = context;
 
 		const alphaMode = parameters.alpha ? 'premultiplied' : 'opaque';
+		const hdr = parameters.hdr ? 'extended' : 'standard';
 
 		this.trackTimestamp = this.trackTimestamp && this.hasFeature( GPUFeatureName.TimestampQuery );
 
 		this.context.configure( {
 			device: this.device,
-			format: this.utils.getPreferredCanvasFormat(),
+			format: this.utils.getPreferredCanvasFormat( this ),
 			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
-			alphaMode: alphaMode
+			alphaMode: alphaMode,
+			toneMapping: {
+				mode: hdr
+			}
 		} );
 
 		this.updateSize();
diff --git a/src/renderers/webgpu/utils/WebGPUUtils.js b/src/renderers/webgpu/utils/WebGPUUtils.js
index d89ef8fc7880fd..abdbf9c8325b25 100644
--- a/src/renderers/webgpu/utils/WebGPUUtils.js
+++ b/src/renderers/webgpu/utils/WebGPUUtils.js
@@ -111,11 +111,15 @@ class WebGPUUtils {
 
 	getPreferredCanvasFormat() {
 
-		// TODO: Remove this check when Quest 34.5 is out
-		// https://github.com/mrdoob/three.js/pull/29221/files#r1731833949
 
-		if ( navigator.userAgent.includes( 'Quest' ) ) {
+		if ( this.backend.parameters.hdr === true ) {
 
+			return GPUTextureFormat.RGBA16Float;
+
+		} else if ( navigator.userAgent.includes( 'Quest' ) ) {
+
+			// TODO: Remove this check when Quest 34.5 is out
+			// https://github.com/mrdoob/three.js/pull/29221/files#r1731833949
 			return GPUTextureFormat.BGRA8Unorm;
 
 		} else {

From 29655e66724c9e61115e448ea6d893dd24a27953 Mon Sep 17 00:00:00 2001
From: Renaud Rohlinger <renaud.rohlinger@gmail.com>
Date: Mon, 7 Oct 2024 14:18:55 +0900
Subject: [PATCH 2/2] cleanup

---
 src/renderers/webgpu/WebGPUBackend.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderers/webgpu/WebGPUBackend.js b/src/renderers/webgpu/WebGPUBackend.js
index 4a792b6f5c2117..0d5c117b964c14 100644
--- a/src/renderers/webgpu/WebGPUBackend.js
+++ b/src/renderers/webgpu/WebGPUBackend.js
@@ -114,7 +114,7 @@ class WebGPUBackend extends Backend {
 
 		this.context.configure( {
 			device: this.device,
-			format: this.utils.getPreferredCanvasFormat( this ),
+			format: this.utils.getPreferredCanvasFormat(),
 			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
 			alphaMode: alphaMode,
 			toneMapping: {