From 8a0058e5f1cd28ac242c31651b7c3712f0b67bdf Mon Sep 17 00:00:00 2001
From: WestLangley <WestLangley@users.noreply.github.com>
Date: Fri, 5 Jun 2026 03:20:09 -0400
Subject: [PATCH 1/3] Manual: Update nomenclature (#33723)

---
 manual/en/webgpu-postprocessing.html | 4 ++--
 manual/zh/webgpu-postprocessing.html | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/manual/en/webgpu-postprocessing.html b/manual/en/webgpu-postprocessing.html
index 962f3963fb37c4..5fdb7fc57bfce5 100644
--- a/manual/en/webgpu-postprocessing.html
+++ b/manual/en/webgpu-postprocessing.html
@@ -208,7 +208,7 @@ <h2>MRT</h2>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">
 scenePass.setMRT( mrt( {
   output: output,
-  normal: directionToColor( normalView ),
+  normal: packNormalToRGB( normalView ),
   metalrough: vec2( metalness, roughness )
 } ) );
 
@@ -225,7 +225,7 @@ <h2>MRT</h2>
 
 const sceneNormal = sample( ( uv ) => {
 
-  return colorToDirection( scenePassNormal.sample( uv ) );
+  return unpackRGBToNormal( scenePassNormal.sample( uv ) );
 
 } );
 </pre>
diff --git a/manual/zh/webgpu-postprocessing.html b/manual/zh/webgpu-postprocessing.html
index 1f4a4976c01321..fc559320cdb38b 100644
--- a/manual/zh/webgpu-postprocessing.html
+++ b/manual/zh/webgpu-postprocessing.html
@@ -207,7 +207,7 @@ <h2>MRT（多渲染目标）</h2>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">
 scenePass.setMRT( mrt( {
   output: output,
-  normal: directionToColor( normalView ),
+  normal: packNormalToRGB( normalView ),
   metalrough: vec2( metalness, roughness )
 } ) );
 
@@ -224,7 +224,7 @@ <h2>MRT（多渲染目标）</h2>
 
 const sceneNormal = sample( ( uv ) => {
 
-  return colorToDirection( scenePassNormal.sample( uv ) );
+  return unpackRGBToNormal( scenePassNormal.sample( uv ) );
 
 } );
 </pre>

From 8f60da4a0f30446f1b32aeed4316aca71d8352dd Mon Sep 17 00:00:00 2001
From: Garrett Johnson <garrett.kjohnson@gmail.com>
Date: Fri, 5 Jun 2026 16:23:05 +0900
Subject: [PATCH 2/3] Examples: Migrate examples to new DRACOLoader url config
 (#33724)

---
 examples/webgl_gpgpu_water.html                        | 4 ++--
 examples/webgl_loader_3dtiles.html                     | 4 ++--
 examples/webgl_loader_gltf_animation_pointer.html      | 4 ++--
 examples/webgl_loader_gltf_avif.html                   | 4 ++--
 examples/webgl_loader_gltf_transmission.html           | 4 ++--
 examples/webgl_materials_car.html                      | 4 ++--
 examples/webgl_materials_envmaps_groundprojected.html  | 4 ++--
 examples/webgl_random_uv.html                          | 4 ++--
 examples/webgl_watch.html                              | 4 ++--
 examples/webgpu_compute_water.html                     | 4 ++--
 examples/webgpu_loader_gltf_transmission.html          | 4 ++--
 examples/webgpu_materials_envmaps_groundprojected.html | 4 ++--
 examples/webgpu_performance.html                       | 4 ++--
 examples/webgpu_postprocessing_dof_basic.html          | 4 ++--
 examples/webgpu_postprocessing_sss.html                | 4 ++--
 examples/webgpu_tonemapping.html                       | 4 ++--
 examples/webgpu_water.html                             | 4 ++--
 17 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/examples/webgl_gpgpu_water.html b/examples/webgl_gpgpu_water.html
index c89b4402df30be..89f19de21e9630 100644
--- a/examples/webgl_gpgpu_water.html
+++ b/examples/webgl_gpgpu_water.html
@@ -151,7 +151,7 @@
 			import { SimplexNoise } from 'three/addons/math/SimplexNoise.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 
 			// Texture width for simulation
 			const WIDTH = 128;
@@ -242,7 +242,7 @@
 
 				const hdrLoader = new HDRLoader().setPath( './textures/equirectangular/' );
 				const glbloader = new GLTFLoader().setPath( 'models/gltf/' );
-				glbloader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
+				glbloader.setDRACOLoader( new DRACOLoader().setDecoderPath( DRACO_GLTF_CONFIG ) );
 
 				const [ env, model ] = await Promise.all( [ hdrLoader.loadAsync( 'blouberg_sunrise_2_1k.hdr' ), glbloader.loadAsync( 'duck.glb' ) ] );
 				env.mapping = THREE.EquirectangularReflectionMapping;
diff --git a/examples/webgl_loader_3dtiles.html b/examples/webgl_loader_3dtiles.html
index e168c6aa2918d6..74d4d09867ee9a 100644
--- a/examples/webgl_loader_3dtiles.html
+++ b/examples/webgl_loader_3dtiles.html
@@ -73,7 +73,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 			import { toCreasedNormals } from 'three/addons/utils/BufferGeometryUtils.js';
 			import { TilesRenderer, GlobeControls, CAMERA_FRAME } from '3d-tiles-renderer';
 			import { CesiumIonAuthPlugin } from '3d-tiles-renderer/core/plugins';
@@ -122,7 +122,7 @@
 
 				// loader
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+				dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 
 				const DEG2RAD = Math.PI / 180;
 
diff --git a/examples/webgl_loader_gltf_animation_pointer.html b/examples/webgl_loader_gltf_animation_pointer.html
index a094ee458abd41..efe79eca023c3c 100644
--- a/examples/webgl_loader_gltf_animation_pointer.html
+++ b/examples/webgl_loader_gltf_animation_pointer.html
@@ -50,7 +50,7 @@
 			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
 			import { GLTFAnimationPointerExtension } from '@needle-tools/three-animation-pointer';
 
@@ -84,7 +84,7 @@
 			controls.enableDamping = true;
 
 			const dracoLoader = new DRACOLoader();
-			dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+			dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 			
 
 			const ktx2Loader = new KTX2Loader()
diff --git a/examples/webgl_loader_gltf_avif.html b/examples/webgl_loader_gltf_avif.html
index 57354fe57a9f76..ec38be06485465 100644
--- a/examples/webgl_loader_gltf_avif.html
+++ b/examples/webgl_loader_gltf_avif.html
@@ -42,7 +42,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 
 			let camera, scene, renderer;
 
@@ -60,7 +60,7 @@
 				//
 
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+				dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 
 				const loader = new GLTFLoader();
 				loader.setDRACOLoader( dracoLoader );
diff --git a/examples/webgl_loader_gltf_transmission.html b/examples/webgl_loader_gltf_transmission.html
index 3506e37d8faab1..4f822b528de592 100644
--- a/examples/webgl_loader_gltf_transmission.html
+++ b/examples/webgl_loader_gltf_transmission.html
@@ -35,7 +35,7 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 
 			let camera, scene, renderer, controls, timer, mixer;
 
@@ -69,7 +69,7 @@
 
 						new GLTFLoader()
 							.setPath( 'models/gltf/' )
-							.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) )
+							.setDRACOLoader( new DRACOLoader().setDecoderPath( DRACO_GLTF_CONFIG ) )
 							.load( 'IridescentDishWithOlives.glb', function ( gltf ) {
 
 								mixer = new THREE.AnimationMixer( gltf.scene );
diff --git a/examples/webgl_materials_car.html b/examples/webgl_materials_car.html
index e8d0175d99c525..fe0ce25f710d22 100644
--- a/examples/webgl_materials_car.html
+++ b/examples/webgl_materials_car.html
@@ -54,7 +54,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
 
 			let camera, scene, renderer;
@@ -145,7 +145,7 @@
 				const shadow = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );
 
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+				dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 
 				const loader = new GLTFLoader();
 				loader.setDRACOLoader( dracoLoader );
diff --git a/examples/webgl_materials_envmaps_groundprojected.html b/examples/webgl_materials_envmaps_groundprojected.html
index 9c8d8b2eb1750c..87b200b300a9a2 100644
--- a/examples/webgl_materials_envmaps_groundprojected.html
+++ b/examples/webgl_materials_envmaps_groundprojected.html
@@ -39,7 +39,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GroundedSkybox } from 'three/addons/objects/GroundedSkybox.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
 
 			const params = {
@@ -76,7 +76,7 @@
 				scene.environment = envMap;
 
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+				dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 
 				const loader = new GLTFLoader();
 				loader.setDRACOLoader( dracoLoader );
diff --git a/examples/webgl_random_uv.html b/examples/webgl_random_uv.html
index 10a06b0362c74b..6f4946e6ec69b5 100644
--- a/examples/webgl_random_uv.html
+++ b/examples/webgl_random_uv.html
@@ -33,7 +33,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -114,7 +114,7 @@
 						// model
 
 						const loader = new GLTFLoader().setPath( 'models/gltf/' );
-						loader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
+						loader.setDRACOLoader( new DRACOLoader().setDecoderPath( DRACO_GLTF_CONFIG ) );
 						loader.load( 'ShaderBall2.glb', function ( gltf ) {
 
 							const shaderBall = gltf.scene.children[ 0 ];
diff --git a/examples/webgl_watch.html b/examples/webgl_watch.html
index 99e6ead0599f72..05871490d1262a 100644
--- a/examples/webgl_watch.html
+++ b/examples/webgl_watch.html
@@ -35,7 +35,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -102,7 +102,7 @@
 						// model
 
 						const loader = new GLTFLoader().setPath( 'models/gltf/' );
-						loader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
+						loader.setDRACOLoader( new DRACOLoader().setDecoderPath( DRACO_GLTF_CONFIG ) );
 						loader.load( 'rolex.glb', function ( gltf ) {
 
 							gltf.scene.rotation.x = Math.PI * 0.25;
diff --git a/examples/webgpu_compute_water.html b/examples/webgpu_compute_water.html
index 41ad7963935fb2..ddc1993812f57f 100644
--- a/examples/webgpu_compute_water.html
+++ b/examples/webgpu_compute_water.html
@@ -46,7 +46,7 @@
 			import { SimplexNoise } from 'three/addons/math/SimplexNoise.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
- 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+ 			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
@@ -438,7 +438,7 @@
 
 				const hdrLoader = new HDRLoader().setPath( './textures/equirectangular/' );
  				const glbloader = new GLTFLoader().setPath( 'models/gltf/' );
- 				glbloader.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) );
+ 				glbloader.setDRACOLoader( new DRACOLoader().setDecoderPath( DRACO_GLTF_CONFIG ) );
 
  				const [ env, model ] = await Promise.all( [ hdrLoader.loadAsync( 'blouberg_sunrise_2_1k.hdr' ), glbloader.loadAsync( 'duck.glb' ) ] );
  				env.mapping = THREE.EquirectangularReflectionMapping;
diff --git a/examples/webgpu_loader_gltf_transmission.html b/examples/webgpu_loader_gltf_transmission.html
index 29e8621cda0ace..63885e626b9b70 100644
--- a/examples/webgpu_loader_gltf_transmission.html
+++ b/examples/webgpu_loader_gltf_transmission.html
@@ -44,7 +44,7 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 
 			let camera, scene, renderer, controls, timer, mixer;
 
@@ -78,7 +78,7 @@
 
 						new GLTFLoader()
 							.setPath( 'models/gltf/' )
-							.setDRACOLoader( new DRACOLoader().setDecoderPath( 'jsm/libs/draco/gltf/' ) )
+							.setDRACOLoader( new DRACOLoader().setDecoderPath( DRACO_GLTF_CONFIG ) )
 							.load( 'IridescentDishWithOlives.glb', function ( gltf ) {
 
 								mixer = new THREE.AnimationMixer( gltf.scene );
diff --git a/examples/webgpu_materials_envmaps_groundprojected.html b/examples/webgpu_materials_envmaps_groundprojected.html
index 7680cf65a2bb71..5cd1394bbc6c2e 100644
--- a/examples/webgpu_materials_envmaps_groundprojected.html
+++ b/examples/webgpu_materials_envmaps_groundprojected.html
@@ -41,7 +41,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
 			import { getGroundProjectedNormal } from 'three/addons/tsl/utils/GroundedSkybox.js';
 
@@ -77,7 +77,7 @@
 				scene.environment = envMap;
 
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+				dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 
 				const loader = new GLTFLoader();
 				loader.setDRACOLoader( dracoLoader );
diff --git a/examples/webgpu_performance.html b/examples/webgpu_performance.html
index 564db01fa7a4a7..11a5eb937deab2 100644
--- a/examples/webgpu_performance.html
+++ b/examples/webgpu_performance.html
@@ -47,7 +47,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 
 			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
@@ -105,7 +105,7 @@
 						// model
 
 						const dracoLoader = new DRACOLoader();
-						dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+						dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 
 						const loader = new GLTFLoader().setPath( 'models/gltf/' );
 						loader.setDRACOLoader( dracoLoader );
diff --git a/examples/webgpu_postprocessing_dof_basic.html b/examples/webgpu_postprocessing_dof_basic.html
index f72ca7d7af5231..216ff6f04eb079 100644
--- a/examples/webgpu_postprocessing_dof_basic.html
+++ b/examples/webgpu_postprocessing_dof_basic.html
@@ -47,7 +47,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 			import TWEEN from 'three/addons/libs/tween.module.js';
@@ -78,7 +78,7 @@
 				timer = new THREE.Timer();
 
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+				dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 			
 				const loader = new GLTFLoader();
 				loader.setDRACOLoader( dracoLoader );
diff --git a/examples/webgpu_postprocessing_sss.html b/examples/webgpu_postprocessing_sss.html
index e6eb2d3952d54a..039a38784acf1a 100644
--- a/examples/webgpu_postprocessing_sss.html
+++ b/examples/webgpu_postprocessing_sss.html
@@ -46,7 +46,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer, renderPipeline, controls;
@@ -94,7 +94,7 @@
 				//
 
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+				dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 
 				const loader = new GLTFLoader();
 				loader.setDRACOLoader( dracoLoader );
diff --git a/examples/webgpu_tonemapping.html b/examples/webgpu_tonemapping.html
index 959df4dc9834aa..886f2ee5081f28 100644
--- a/examples/webgpu_tonemapping.html
+++ b/examples/webgpu_tonemapping.html
@@ -46,7 +46,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
 
 			let renderer, scene, camera, controls;
@@ -111,7 +111,7 @@
 					.setPath( 'textures/equirectangular/' );
 
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+				dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 
 				const gltfLoader = new GLTFLoader();
 				gltfLoader.setDRACOLoader( dracoLoader );
diff --git a/examples/webgpu_water.html b/examples/webgpu_water.html
index 4903dcbd89d2de..cc9ca38a875cd6 100644
--- a/examples/webgpu_water.html
+++ b/examples/webgpu_water.html
@@ -52,7 +52,7 @@
 			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			import { WaterMesh } from 'three/addons/objects/Water2Mesh.js';
-			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+			import { DRACOLoader, DRACO_GLTF_CONFIG } from 'three/addons/loaders/DRACOLoader.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			let scene, camera, renderer, water, renderPipeline, controls;
@@ -89,7 +89,7 @@
 				// asset loading
 
 				const dracoLoader = new DRACOLoader();
-				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
+				dracoLoader.setDecoderPath( DRACO_GLTF_CONFIG );
 
 				const gltfLoader = new GLTFLoader();
 				gltfLoader.setDRACOLoader( dracoLoader );

From 0d711cd79bf4a448a4a449816b4143f68778a911 Mon Sep 17 00:00:00 2001
From: Michael Herzog <michael.herzog@human-interactive.org>
Date: Fri, 5 Jun 2026 09:23:29 +0200
Subject: [PATCH 3/3] Editor: Add support for orthographic cameras. (#33701)

---
 editor/index.html                       |  1 +
 editor/js/Config.js                     |  6 ++-
 editor/js/Editor.js                     | 66 +++++++++++++++++++++++++
 editor/js/EditorControls.js             | 36 +++++++++++---
 editor/js/Menubar.Add.js                |  4 +-
 editor/js/Menubar.Render.js             | 19 ++++++-
 editor/js/Sidebar.Project.Renderer.js   | 37 +++++++++++++-
 editor/js/Sidebar.Scene.js              |  2 +
 editor/js/Sidebar.Settings.Shortcuts.js | 14 +++++-
 editor/js/Strings.js                    |  3 ++
 editor/js/Viewport.XR.js                | 13 ++++-
 editor/js/Viewport.js                   | 25 ++++++++--
 editor/js/libs/app.js                   | 29 ++++++++---
 examples/jsm/helpers/ViewHelper.js      | 22 ++++++---
 14 files changed, 247 insertions(+), 30 deletions(-)

diff --git a/editor/index.html b/editor/index.html
index 8c45220c640e59..866b956d1f1757 100644
--- a/editor/index.html
+++ b/editor/index.html
@@ -195,6 +195,7 @@
 
 				const signals = editor.signals;
 
+				signals.cameraResetted.add( saveState );
 				signals.geometryChanged.add( saveState );
 				signals.objectAdded.add( saveState );
 				signals.objectChanged.add( saveState );
diff --git a/editor/js/Config.js b/editor/js/Config.js
index 63d4bf4425bdb3..620596d1dd62bd 100644
--- a/editor/js/Config.js
+++ b/editor/js/Config.js
@@ -15,6 +15,8 @@ function Config() {
 		'project/editable': false,
 		'project/vr': false,
 
+		'project/camera': 'perspective',
+
 		'project/renderer/type': 'WebGLRenderer',
 		'project/renderer/antialias': true,
 		'project/renderer/shadows': true,
@@ -28,7 +30,9 @@ function Config() {
 		'settings/shortcuts/rotate': 'e',
 		'settings/shortcuts/scale': 'r',
 		'settings/shortcuts/undo': 'z',
-		'settings/shortcuts/focus': 'f'
+		'settings/shortcuts/focus': 'f',
+		'settings/shortcuts/perspective': 'p',
+		'settings/shortcuts/orthographic': 'o'
 	};
 
 	if ( window.localStorage[ name ] === undefined ) {
diff --git a/editor/js/Editor.js b/editor/js/Editor.js
index 98873d47289b2e..baa5077221e7f9 100644
--- a/editor/js/Editor.js
+++ b/editor/js/Editor.js
@@ -11,6 +11,7 @@ var _DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.001, 1e10 );
 _DEFAULT_CAMERA.name = 'Camera';
 _DEFAULT_CAMERA.position.set( 0, 5, 10 );
 _DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
+const _ORTHOGRAPHIC_FRUSTUM_SIZE = 100;
 
 function Editor() {
 
@@ -551,6 +552,68 @@ Editor.prototype = {
 
 	},
 
+	setCameraType: function ( type ) {
+
+		const oldCamera = this.camera;
+
+		const isOrthographic = oldCamera.isOrthographicCamera === true;
+
+		if ( ( type === 'orthographic' && isOrthographic ) || ( type === 'perspective' && ! isOrthographic ) ) return;
+
+		// the orbit point the framing should be preserved around
+
+		const center = this.controls ? this.controls.center : new THREE.Vector3();
+		const distance = oldCamera.position.distanceTo( center );
+
+		let newCamera;
+
+		if ( type === 'orthographic' ) {
+
+			const halfSize = _ORTHOGRAPHIC_FRUSTUM_SIZE / 2;
+			newCamera = new THREE.OrthographicCamera( - halfSize, halfSize, halfSize, - halfSize, 0, 10000 );
+			newCamera.position.copy( oldCamera.position );
+			newCamera.quaternion.copy( oldCamera.quaternion );
+
+			// derive the zoom so the orthographic framing matches the perspective view at the orbit center
+
+			const halfFOV = THREE.MathUtils.DEG2RAD * oldCamera.fov / 2;
+			newCamera.zoom = ( newCamera.top - newCamera.bottom ) / ( 2 * Math.max( distance, 0.0001 ) * Math.tan( halfFOV ) );
+
+		} else {
+
+			newCamera = new THREE.PerspectiveCamera( 50, 1, 0.001, 1e10 );
+			newCamera.quaternion.copy( oldCamera.quaternion );
+
+			// reposition along the view direction so the perspective framing matches the orthographic view
+
+			const halfFOV = THREE.MathUtils.DEG2RAD * newCamera.fov / 2;
+			const targetDistance = ( oldCamera.top - oldCamera.bottom ) / ( 2 * oldCamera.zoom * Math.tan( halfFOV ) );
+
+			const offset = new THREE.Vector3().subVectors( oldCamera.position, center );
+			if ( offset.lengthSq() === 0 ) offset.set( 0, 0, 1 ).applyQuaternion( oldCamera.quaternion );
+			offset.normalize().multiplyScalar( targetDistance );
+
+			newCamera.position.copy( center ).add( offset );
+
+		}
+
+		newCamera.name = oldCamera.name;
+		newCamera.uuid = oldCamera.uuid;
+		newCamera.updateProjectionMatrix();
+
+		this.camera = newCamera;
+		this.cameras[ newCamera.uuid ] = newCamera;
+
+		if ( this.viewportCamera === oldCamera ) this.viewportCamera = newCamera;
+
+		this.signals.cameraResetted.dispatch();
+
+		// keep the selection (and thus the sidebar) in sync with the new camera instance
+
+		if ( this.selected === oldCamera ) this.select( newCamera );
+
+	},
+
 	setViewportCamera: function ( uuid ) {
 
 		this.viewportCamera = this.cameras[ uuid ] || this.camera;
@@ -629,6 +692,7 @@ Editor.prototype = {
 		this.history.clear();
 		this.storage.clear();
 
+		this.setCameraType( 'perspective' );
 		this.camera.copy( _DEFAULT_CAMERA );
 		this.signals.cameraResetted.dispatch();
 
@@ -676,6 +740,8 @@ Editor.prototype = {
 		var loader = new THREE.ObjectLoader();
 		var camera = await loader.parseAsync( json.camera );
 
+		this.setCameraType( camera.isOrthographicCamera ? 'orthographic' : 'perspective' );
+
 		const existingUuid = this.camera.uuid;
 		const incomingUuid = camera.uuid;
 
diff --git a/editor/js/EditorControls.js b/editor/js/EditorControls.js
index c8a66add08a0cb..7ad14feb1fc3fb 100644
--- a/editor/js/EditorControls.js
+++ b/editor/js/EditorControls.js
@@ -40,6 +40,12 @@ class EditorControls extends THREE.EventDispatcher {
 
 		var changeEvent = { type: 'change' };
 
+		this.setCamera = function ( camera ) {
+
+			object = camera;
+
+		};
+
 		this.focus = function ( target ) {
 
 			var distance;
@@ -66,13 +72,22 @@ class EditorControls extends THREE.EventDispatcher {
 
 			object.position.copy( center ).add( delta );
 
+			if ( object.isOrthographicCamera ) {
+
+				object.zoom = ( object.top - object.bottom ) / ( distance * 2 );
+				object.updateProjectionMatrix();
+
+			}
+
 			scope.dispatchEvent( changeEvent );
 
 		};
 
 		this.pan = function ( delta ) {
 
-			var distance = object.position.distanceTo( center );
+			var distance = object.isOrthographicCamera
+				? ( object.top - object.bottom ) / object.zoom
+				: object.position.distanceTo( center );
 
 			delta.multiplyScalar( distance * scope.panSpeed );
 			delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
@@ -86,15 +101,24 @@ class EditorControls extends THREE.EventDispatcher {
 
 		this.zoom = function ( delta ) {
 
-			var distance = object.position.distanceTo( center );
+			if ( object.isOrthographicCamera ) {
 
-			delta.multiplyScalar( distance * scope.zoomSpeed );
+				object.zoom = Math.max( 0.0001, object.zoom * Math.pow( 0.95, delta.z ) );
+				object.updateProjectionMatrix();
 
-			if ( delta.length() > distance ) return;
+			} else {
 
-			delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
+				var distance = object.position.distanceTo( center );
 
-			object.position.add( delta );
+				delta.multiplyScalar( distance * scope.zoomSpeed );
+
+				if ( delta.length() > distance ) return;
+
+				delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
+
+				object.position.add( delta );
+
+			}
 
 			scope.dispatchEvent( changeEvent );
 
diff --git a/editor/js/Menubar.Add.js b/editor/js/Menubar.Add.js
index b097e502416d9e..f9e9ba6d347686 100644
--- a/editor/js/Menubar.Add.js
+++ b/editor/js/Menubar.Add.js
@@ -526,7 +526,9 @@ function MenubarAdd( editor ) {
 	option.setTextContent( strings.getKey( 'menubar/add/camera/orthographic' ) );
 	option.onClick( function () {
 
-		const aspect = editor.camera.aspect;
+		const aspect = editor.camera.isPerspectiveCamera
+			? editor.camera.aspect
+			: ( editor.camera.right - editor.camera.left ) / ( editor.camera.top - editor.camera.bottom );
 		const camera = new THREE.OrthographicCamera( - aspect, aspect );
 		camera.name = 'OrthographicCamera';
 
diff --git a/editor/js/Menubar.Render.js b/editor/js/Menubar.Render.js
index 0902f7c8232410..3fef5d1a698fe5 100644
--- a/editor/js/Menubar.Render.js
+++ b/editor/js/Menubar.Render.js
@@ -202,13 +202,28 @@ class RenderImageDialog {
 			const loader = new THREE.ObjectLoader();
 
 			const camera = await loader.parseAsync( json.camera );
-			camera.aspect = imageWidth.getValue() / imageHeight.getValue();
+
+			const aspect = imageWidth.getValue() / imageHeight.getValue();
+
+			if ( camera.isPerspectiveCamera ) {
+
+				camera.aspect = aspect;
+
+			} else {
+
+				const frustumHeight = camera.top - camera.bottom;
+
+				camera.left = - frustumHeight * aspect / 2;
+				camera.right = frustumHeight * aspect / 2;
+
+			}
+
 			camera.updateProjectionMatrix();
 			camera.updateMatrixWorld();
 
 			const scene = await loader.parseAsync( json.scene );
 
-			const renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } );
+			const renderer = new THREE.WebGLRenderer( { antialias: true, reversedDepthBuffer: true } );
 			renderer.setSize( imageWidth.getValue(), imageHeight.getValue() );
 			renderer.setClearColor( editor.viewportColor );
 
diff --git a/editor/js/Sidebar.Project.Renderer.js b/editor/js/Sidebar.Project.Renderer.js
index 8961ed04846aa7..6f6a834601e4d5 100644
--- a/editor/js/Sidebar.Project.Renderer.js
+++ b/editor/js/Sidebar.Project.Renderer.js
@@ -15,6 +15,30 @@ function SidebarProjectRenderer( editor ) {
 	const container = new UIPanel();
 	container.setBorderTop( '0px' );
 
+	// Camera
+
+	const cameraRow = new UIRow();
+	container.add( cameraRow );
+
+	cameraRow.add( new UIText( strings.getKey( 'sidebar/project/camera' ) ).setClass( 'Label' ) );
+
+	const cameraTypeSelect = new UISelect().setOptions( {
+		'perspective': 'Perspective',
+		'orthographic': 'Orthographic'
+	} ).setWidth( '150px' ).onChange( function () {
+
+		editor.setCameraType( this.getValue() );
+
+	} );
+	cameraTypeSelect.setValue( config.getKey( 'project/camera' ) );
+	cameraRow.add( cameraTypeSelect );
+
+	if ( config.getKey( 'project/camera' ) === 'orthographic' ) {
+
+		editor.setCameraType( 'orthographic' );
+
+	}
+
 	// Renderer
 
 	const rendererRow = new UIRow();
@@ -111,12 +135,12 @@ function SidebarProjectRenderer( editor ) {
 
 		if ( rendererType === 'WebGPURenderer' ) {
 
-			currentRenderer = new WebGPURenderer( { antialias: antialias, logarithmicDepthBuffer: true } );
+			currentRenderer = new WebGPURenderer( { antialias: antialias, reversedDepthBuffer: true } );
 			await currentRenderer.init();
 
 		} else {
 
-			currentRenderer = new THREE.WebGLRenderer( { antialias: antialias, logarithmicDepthBuffer: true } );
+			currentRenderer = new THREE.WebGLRenderer( { antialias: antialias, reversedDepthBuffer: true } );
 
 		}
 
@@ -135,6 +159,15 @@ function SidebarProjectRenderer( editor ) {
 
 	// Signals
 
+	signals.cameraResetted.add( function () {
+
+		const type = editor.camera.isOrthographicCamera ? 'orthographic' : 'perspective';
+
+		cameraTypeSelect.setValue( type );
+		config.setKey( 'project/camera', type );
+
+	} );
+
 	signals.editorCleared.add( function () {
 
 		currentRenderer.shadowMap.enabled = true;
diff --git a/editor/js/Sidebar.Scene.js b/editor/js/Sidebar.Scene.js
index efdad601e95a95..d0d31973666c22 100644
--- a/editor/js/Sidebar.Scene.js
+++ b/editor/js/Sidebar.Scene.js
@@ -503,6 +503,8 @@ function SidebarScene( editor ) {
 
 	signals.sceneGraphChanged.add( refreshUI );
 
+	signals.cameraResetted.add( refreshUI );
+
 	signals.objectChanged.add( function ( object ) {
 
 		const options = outliner.options;
diff --git a/editor/js/Sidebar.Settings.Shortcuts.js b/editor/js/Sidebar.Settings.Shortcuts.js
index f09e0a9e9ee486..20b92a5ba0a513 100644
--- a/editor/js/Sidebar.Settings.Shortcuts.js
+++ b/editor/js/Sidebar.Settings.Shortcuts.js
@@ -24,7 +24,7 @@ function SidebarSettingsShortcuts( editor ) {
 	headerRow.add( new UIText( strings.getKey( 'sidebar/settings/shortcuts' ).toUpperCase() ) );
 	container.add( headerRow );
 
-	const shortcuts = [ 'translate', 'rotate', 'scale', 'undo', 'focus' ];
+	const shortcuts = [ 'translate', 'rotate', 'scale', 'undo', 'focus', 'perspective', 'orthographic' ];
 
 	function createShortcutInput( name ) {
 
@@ -175,6 +175,18 @@ function SidebarSettingsShortcuts( editor ) {
 
 				break;
 
+			case config.getKey( 'settings/shortcuts/perspective' ):
+
+				editor.setCameraType( 'perspective' );
+
+				break;
+
+			case config.getKey( 'settings/shortcuts/orthographic' ):
+
+				editor.setCameraType( 'orthographic' );
+
+				break;
+
 		}
 
 	} );
diff --git a/editor/js/Strings.js b/editor/js/Strings.js
index 3246f8cb513fe5..7627143f21731a 100644
--- a/editor/js/Strings.js
+++ b/editor/js/Strings.js
@@ -815,6 +815,7 @@ function Strings( config ) {
 			'sidebar/script/remove': 'Remove',
 
 			'sidebar/project': 'Project',
+			'sidebar/project/camera': 'Camera',
 			'sidebar/project/renderer': 'Renderer',
 			'sidebar/project/antialias': 'Antialias',
 			'sidebar/project/shadows': 'Shadows',
@@ -849,6 +850,8 @@ function Strings( config ) {
 			'sidebar/settings/shortcuts/scale': 'Scale',
 			'sidebar/settings/shortcuts/undo': 'Undo',
 			'sidebar/settings/shortcuts/focus': 'Focus',
+			'sidebar/settings/shortcuts/perspective': 'Perspective',
+			'sidebar/settings/shortcuts/orthographic': 'Orthographic',
 
 			'sidebar/history': 'History',
 			'sidebar/history/clear': 'Clear',
diff --git a/editor/js/Viewport.XR.js b/editor/js/Viewport.XR.js
index 83b59b7cbc8f5b..3aea6446d2d381 100644
--- a/editor/js/Viewport.XR.js
+++ b/editor/js/Viewport.XR.js
@@ -20,7 +20,18 @@ class XR {
 
 		const onSessionStarted = async ( session ) => {
 
-			camera.copy( editor.camera );
+			if ( editor.camera.isPerspectiveCamera ) {
+
+				camera.copy( editor.camera );
+
+			} else {
+
+				// an orthographic default camera can't be mirrored into a perspective XR camera
+
+				camera.position.copy( editor.camera.position );
+				camera.quaternion.copy( editor.camera.quaternion );
+
+			}
 
 			const sidebar = document.getElementById( 'sidebar' );
 			sidebar.style.width = '350px';
diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js
index a4b0eb12cc047d..f399da7235bf74 100644
--- a/editor/js/Viewport.js
+++ b/editor/js/Viewport.js
@@ -39,7 +39,7 @@ function Viewport( editor ) {
 	let pmremGenerator = null;
 	let pathtracer = null;
 
-	const camera = editor.camera;
+	let camera = editor.camera;
 	const scene = editor.scene;
 	const sceneHelpers = editor.sceneHelpers;
 
@@ -166,8 +166,10 @@ function Viewport( editor ) {
 
 			} else {
 
-				camera.left = - aspect;
-				camera.right = aspect;
+				const frustumHeight = camera.top - camera.bottom;
+
+				camera.left = - frustumHeight * aspect / 2;
+				camera.right = frustumHeight * aspect / 2;
 
 			}
 
@@ -812,7 +814,22 @@ function Viewport( editor ) {
 
 	} );
 
-	signals.cameraResetted.add( updateAspectRatio );
+	signals.cameraResetted.add( function () {
+
+		if ( camera !== editor.camera ) {
+
+			camera = editor.camera;
+
+			controls.setCamera( camera );
+			transformControls.camera = camera;
+			viewHelper.camera = camera;
+
+		}
+
+		updateAspectRatio();
+		render();
+
+	} );
 
 	// animations
 
diff --git a/editor/js/libs/app.js b/editor/js/libs/app.js
index 7f26dd0afaeeb5..50ed374818080e 100644
--- a/editor/js/libs/app.js
+++ b/editor/js/libs/app.js
@@ -34,12 +34,12 @@ const APP = {
 			if ( project.renderer === 'WebGPURenderer' ) {
 
 				const { WebGPURenderer } = await import( 'three/webgpu' );
-				renderer = new WebGPURenderer( { antialias: true, logarithmicDepthBuffer: true } );
+				renderer = new WebGPURenderer( { antialias: true, reversedDepthBuffer: true } );
 				await renderer.init();
 
 			} else {
 
-				renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true, reversedDepthBuffer: true } );
 
 			}
 
@@ -125,8 +125,7 @@ const APP = {
 		this.setCamera = function ( value ) {
 
 			camera = value;
-			camera.aspect = this.width / this.height;
-			camera.updateProjectionMatrix();
+			setCameraAspect( camera, this.width / this.height );
 
 		};
 
@@ -155,8 +154,7 @@ const APP = {
 
 			if ( camera ) {
 
-				camera.aspect = this.width / this.height;
-				camera.updateProjectionMatrix();
+				setCameraAspect( camera, this.width / this.height );
 
 			}
 
@@ -168,6 +166,25 @@ const APP = {
 
 		};
 
+		function setCameraAspect( camera, aspect ) {
+
+			if ( camera.isPerspectiveCamera ) {
+
+				camera.aspect = aspect;
+
+			} else {
+
+				const frustumHeight = camera.top - camera.bottom;
+
+				camera.left = - frustumHeight * aspect / 2;
+				camera.right = frustumHeight * aspect / 2;
+
+			}
+
+			camera.updateProjectionMatrix();
+
+		}
+
 		function dispatch( array, event ) {
 
 			for ( let i = 0, l = array.length; i < l; i ++ ) {
diff --git a/examples/jsm/helpers/ViewHelper.js b/examples/jsm/helpers/ViewHelper.js
index ef8b89482b3800..c4e6dbaf773c1a 100644
--- a/examples/jsm/helpers/ViewHelper.js
+++ b/examples/jsm/helpers/ViewHelper.js
@@ -49,6 +49,14 @@ class ViewHelper extends Object3D {
 		 */
 		this.isViewHelper = true;
 
+		/**
+		 * The camera whose transformation is visualized. It can be reassigned at
+		 * any time to rebind the helper to a different camera.
+		 *
+		 * @type {Camera}
+		 */
+		this.camera = camera;
+
 		/**
 		 * Whether the helper is currently animating or not.
 		 *
@@ -86,6 +94,8 @@ class ViewHelper extends Object3D {
 
 		const options = {};
 
+		const scope = this;
+
 		const interactiveObjects = [];
 		const raycaster = new Raycaster();
 		const mouse = new Vector2();
@@ -163,11 +173,11 @@ class ViewHelper extends Object3D {
 		 */
 		this.render = function ( renderer ) {
 
-			this.quaternion.copy( camera.quaternion ).invert();
+			this.quaternion.copy( this.camera.quaternion ).invert();
 			this.updateMatrixWorld();
 
 			point.set( 0, 0, 1 );
-			point.applyQuaternion( camera.quaternion );
+			point.applyQuaternion( this.camera.quaternion );
 
 			//
 
@@ -325,11 +335,11 @@ class ViewHelper extends Object3D {
 			// animate position by doing a slerp and then scaling the position on the unit sphere
 
 			q1.rotateTowards( q2, step );
-			camera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( this.center );
+			this.camera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( this.center );
 
 			// animate orientation
 
-			camera.quaternion.rotateTowards( targetQuaternion, step );
+			this.camera.quaternion.rotateTowards( targetQuaternion, step );
 
 			if ( q1.angleTo( q2 ) === 0 ) {
 
@@ -408,12 +418,12 @@ class ViewHelper extends Object3D {
 
 			//
 
-			radius = camera.position.distanceTo( focusPoint );
+			radius = scope.camera.position.distanceTo( focusPoint );
 			targetPosition.multiplyScalar( radius ).add( focusPoint );
 
 			dummy.position.copy( focusPoint );
 
-			dummy.lookAt( camera.position );
+			dummy.lookAt( scope.camera.position );
 			q1.copy( dummy.quaternion );
 
 			dummy.lookAt( targetPosition );