From 81563d44385c5b7281c166029198292eb7de02ae Mon Sep 17 00:00:00 2001 From: mrdoob Date: Mon, 12 Jan 2026 01:43:39 -0800 Subject: [PATCH 1/3] Editor: Enable logarithmic depth buffer. (#32732) --- editor/js/Editor.js | 2 +- editor/js/Menubar.Render.js | 2 +- editor/js/Sidebar.Project.Renderer.js | 2 +- editor/js/libs/app.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/editor/js/Editor.js b/editor/js/Editor.js index 8cac9464c79d1d..050e06882b2db7 100644 --- a/editor/js/Editor.js +++ b/editor/js/Editor.js @@ -7,7 +7,7 @@ import { Strings } from './Strings.js'; import { Storage as _Storage } from './Storage.js'; import { Selector } from './Selector.js'; -var _DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 ); +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() ); diff --git a/editor/js/Menubar.Render.js b/editor/js/Menubar.Render.js index 4edec9942a74c3..3a2375cbc539a0 100644 --- a/editor/js/Menubar.Render.js +++ b/editor/js/Menubar.Render.js @@ -208,7 +208,7 @@ class RenderImageDialog { const scene = await loader.parseAsync( json.scene ); - const renderer = new THREE.WebGLRenderer( { antialias: true } ); + const renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } ); renderer.setSize( imageWidth.getValue(), imageHeight.getValue() ); if ( project.shadows !== undefined ) renderer.shadowMap.enabled = project.shadows; diff --git a/editor/js/Sidebar.Project.Renderer.js b/editor/js/Sidebar.Project.Renderer.js index 5b9b37ed52eb81..7b833d9496c5b7 100644 --- a/editor/js/Sidebar.Project.Renderer.js +++ b/editor/js/Sidebar.Project.Renderer.js @@ -91,7 +91,7 @@ function SidebarProjectRenderer( editor ) { function createRenderer() { - currentRenderer = new THREE.WebGLRenderer( { antialias: antialiasBoolean.getValue() } ); + currentRenderer = new THREE.WebGLRenderer( { antialias: antialiasBoolean.getValue(), logarithmicDepthBuffer: true } ); currentRenderer.shadowMap.enabled = shadowsBoolean.getValue(); currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() ); currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() ); diff --git a/editor/js/libs/app.js b/editor/js/libs/app.js index 7ff6a4336f1f0d..4c861d266d79d4 100644 --- a/editor/js/libs/app.js +++ b/editor/js/libs/app.js @@ -2,7 +2,7 @@ const APP = { Player: function () { - const renderer = new THREE.WebGLRenderer( { antialias: true } ); + const renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } ); renderer.setPixelRatio( window.devicePixelRatio ); // TODO: Use player.setPixelRatio() const loader = new THREE.ObjectLoader(); From 2ec2102b2dddc66be8ebfd0b216aa592684a78e3 Mon Sep 17 00:00:00 2001 From: Michael Herzog Date: Mon, 12 Jan 2026 10:56:26 +0100 Subject: [PATCH 2/3] Helpers: Clarify the usage of `update()`. (#32717) --- src/helpers/CameraHelper.js | 3 +++ src/helpers/DirectionalLightHelper.js | 5 ++++- src/helpers/HemisphereLightHelper.js | 3 +++ src/helpers/SpotLightHelper.js | 3 +++ 4 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/helpers/CameraHelper.js b/src/helpers/CameraHelper.js index 1d3f8726ae8af8..2ff070c265f6d6 100644 --- a/src/helpers/CameraHelper.js +++ b/src/helpers/CameraHelper.js @@ -18,6 +18,9 @@ const _camera = /*@__PURE__*/ new Camera(); * * `CameraHelper` must be a child of the scene. * + * When the camera is transformed or its projection matrix is changed, it's necessary + * to call the `update()` method of the respective helper. + * * ```js * const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); * const helper = new THREE.CameraHelper( camera ); diff --git a/src/helpers/DirectionalLightHelper.js b/src/helpers/DirectionalLightHelper.js index bbaa16d6993945..fdd8350d0f5d7f 100644 --- a/src/helpers/DirectionalLightHelper.js +++ b/src/helpers/DirectionalLightHelper.js @@ -11,9 +11,12 @@ const _v3 = /*@__PURE__*/ new Vector3(); /** * Helper object to assist with visualizing a {@link DirectionalLight}'s - * effect on the scene. This consists of plane and a line representing the + * effect on the scene. This consists of a plane and a line representing the * light's position and direction. * + * When the directional light or its target are transformed or light properties + * are changed, it's necessary to call the `update()` method of the respective helper. + * * ```js * const light = new THREE.DirectionalLight( 0xFFFFFF ); * scene.add( light ); diff --git a/src/helpers/HemisphereLightHelper.js b/src/helpers/HemisphereLightHelper.js index f7c7c168538304..69bab870851512 100644 --- a/src/helpers/HemisphereLightHelper.js +++ b/src/helpers/HemisphereLightHelper.js @@ -14,6 +14,9 @@ const _color2 = /*@__PURE__*/ new Color(); * Creates a visual aid consisting of a spherical mesh for a * given {@link HemisphereLight}. * + * When the hemisphere light is transformed or its light properties are changed, + * it's necessary to call the `update()` method of the respective helper. + * * ```js * const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 ); * const helper = new THREE.HemisphereLightHelper( light, 5 ); diff --git a/src/helpers/SpotLightHelper.js b/src/helpers/SpotLightHelper.js index 7e90dea51f904b..a4b15bd1f17bbd 100644 --- a/src/helpers/SpotLightHelper.js +++ b/src/helpers/SpotLightHelper.js @@ -10,6 +10,9 @@ const _vector = /*@__PURE__*/ new Vector3(); /** * This displays a cone shaped helper object for a {@link SpotLight}. * + * When the spot light or its target are transformed or light properties are + * changed, it's necessary to call the `update()` method of the respective helper. + * * ```js * const spotLight = new THREE.SpotLight( 0xffffff ); * spotLight.position.set( 10, 10, 10 ); From 3fddc5cec7810814347626097623a1349ac656d9 Mon Sep 17 00:00:00 2001 From: Michael Herzog Date: Mon, 12 Jan 2026 11:52:01 +0100 Subject: [PATCH 3/3] WebGPURenderer: Fix depth/stencil format out-of-sync bug. (#32731) --- src/renderers/webgpu/utils/WebGPUUtils.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/renderers/webgpu/utils/WebGPUUtils.js b/src/renderers/webgpu/utils/WebGPUUtils.js index 098febc1a48561..92cac6975ea372 100644 --- a/src/renderers/webgpu/utils/WebGPUUtils.js +++ b/src/renderers/webgpu/utils/WebGPUUtils.js @@ -34,17 +34,21 @@ class WebGPUUtils { let format; - if ( renderContext.depthTexture !== null ) { + if ( renderContext.depth ) { - format = this.getTextureFormatGPU( renderContext.depthTexture ); + if ( renderContext.depthTexture !== null ) { - } else if ( renderContext.depth && renderContext.stencil ) { + format = this.getTextureFormatGPU( renderContext.depthTexture ); - format = GPUTextureFormat.Depth24PlusStencil8; + } else if ( renderContext.stencil ) { - } else if ( renderContext.depth ) { + format = GPUTextureFormat.Depth24PlusStencil8; - format = GPUTextureFormat.Depth24Plus; + } else { + + format = GPUTextureFormat.Depth24Plus; + + } }