mrdoob · anischelly26 · Apr 11, 2025 · Apr 11, 2025 · Apr 14, 2025 · Apr 15, 2025
diff --git a/build/three.cjs b/build/three.cjs
diff --git a/build/three.core.js b/build/three.core.js
diff --git a/build/three.core.min.js b/build/three.core.min.js
diff --git a/build/three.module.js b/build/three.module.js
diff --git a/build/three.module.min.js b/build/three.module.min.js
diff --git a/build/three.tsl.js b/build/three.tsl.js
diff --git a/build/three.tsl.min.js b/build/three.tsl.min.js
diff --git a/build/three.webgpu.js b/build/three.webgpu.js
diff --git a/build/three.webgpu.min.js b/build/three.webgpu.min.js
diff --git a/build/three.webgpu.nodes.js b/build/three.webgpu.nodes.js
diff --git a/build/three.webgpu.nodes.min.js b/build/three.webgpu.nodes.min.js
diff --git a/docs/api/en/textures/Texture.html b/docs/api/en/textures/Texture.html
diff --git a/examples/jsm/renderers/webgpu/WebGPUBackend.js b/examples/jsm/renderers/webgpu/WebGPUBackend.js
diff --git a/examples/jsm/renderers/webgpu/WebGPURenderer (1).js b/examples/jsm/renderers/webgpu/WebGPURenderer (1).js
@@ -0,0 +1,98 @@
+import Renderer from '../common/Renderer.js';
+import WebGLBackend from '../webgl-fallback/WebGLBackend.js';
+import WebGPUBackend from './WebGPUBackend.js';
+import StandardNodeLibrary from './nodes/StandardNodeLibrary.js';
+/*
+const debugHandler = {
+
+	get: function ( target, name ) {
+
+		// Add |update
+		if ( /^(create|destroy)/.test( name ) ) console.log( 'WebGPUBackend.' + name );
+
+		return target[ name ];
+
+	}
+
+};
+*/
+
+/**
+ * This renderer is the new alternative of `WebGLRenderer`. `WebGPURenderer` has the ability
+ * to target different backends. By default, the renderer tries to use a WebGPU backend if the
+ * browser supports WebGPU. If not, `WebGPURenderer` falls backs to a WebGL 2 backend.
+ *
+ * @augments Renderer
+ */
+class WebGPURenderer extends Renderer {
+
+	/**
+	 * WebGPURenderer options.
+	 *
+	 * @typedef {Object} WebGPURenderer~Options
+	 * @property {boolean} [logarithmicDepthBuffer=false] - Whether logarithmic depth buffer is enabled or not.
+	 * @property {boolean} [alpha=true] - Whether the default framebuffer (which represents the final contents of the canvas) should be transparent or opaque.
+	 * @property {boolean} [depth=true] - Whether the default framebuffer should have a depth buffer or not.
+	 * @property {boolean} [stencil=false] - Whether the default framebuffer should have a stencil buffer or not.
+	 * @property {boolean} [antialias=false] - Whether MSAA as the default anti-aliasing should be enabled or not.
+	 * @property {number} [samples=0] - When `antialias` is `true`, `4` samples are used by default. Set this parameter to any other integer value than 0 to overwrite the default.
+	 * @property {boolean} [forceWebGL=false] - If set to `true`, the renderer uses a WebGL 2 backend no matter if WebGPU is supported or not.
+	 * @property {number} [outputType=undefined] - Texture type for output to canvas. By default, device's preferred format is used; other formats may incur overhead.
+	 * @property {number} [colorBufferType=HalfFloatType] - Defines the type of color buffers. The default `HalfFloatType` is recommend for best
+	 * quality. To save memory and bandwidth, `UnsignedByteType` might be used. This will reduce rendering quality though.
+	 */
+
+	/**
+	 * Constructs a new WebGPU renderer.
+	 *
+	 * @param {WebGPURenderer~Options} [parameters] - The configuration parameter.
+	 */
+	constructor( parameters = {} ) {
+
+		let BackendClass;
+
+		if ( parameters.forceWebGL ) {
+
+			BackendClass = WebGLBackend;
+
+		} else {
+
+			BackendClass = WebGPUBackend;
+
+			parameters.getFallback = () => {
+
+				console.warn( 'THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend.' );
+
+				return new WebGLBackend( parameters );
+
+			};
+
+		}
+
+		const backend = new BackendClass( parameters );
+
+		//super( new Proxy( backend, debugHandler ) );
+		super( backend, parameters );
+
+		/**
+		 * The generic default value is overwritten with the
+		 * standard node library for type mapping.
+		 *
+		 * @type {StandardNodeLibrary}
+		 */
+		this.library = new StandardNodeLibrary();
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isWebGPURenderer = true;
+
+	}
+
+}
+
+export default WebGPURenderer;
diff --git a/examples/webgpu_box_basic.html b/examples/webgpu_box_basic.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>WebGPU Box Example</title>
+  <style>
+    body { margin: 0; overflow: hidden; }
+    canvas { display: block; }
+  </style>
+</head>
+<body>
+  <script type="module">
+    import * as THREE from '../build/three.module.js';
+    import { WebGPURenderer } from './jsm/renderers/webgpu/WebGPURenderer.js';
+
+
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x222222);
+
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
+    camera.position.z = 2;
+
+    const geometry = new THREE.BoxGeometry();
+    const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    const light = new THREE.DirectionalLight(0xffffff, 1);
+    light.position.set(1, 2, 3);
+    scene.add(light);
+
+    const renderer = new WebGPURenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+    function animate() {
+      requestAnimationFrame(animate);
+      cube.rotation.x += 0.01;
+      cube.rotation.y += 0.01;
+      renderer.render(scene, camera);
+    }
+
+    animate();
+  </script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/math/Frustum.js b/src/math/Frustum.js
@@ -204,29 +204,29 @@ class Frustum {
 	 */
 	intersectsBox( box ) {
 
-		const planes = this.planes;
-
+		const { min, max } = box;
+		const p1 = _vector;
+
 		for ( let i = 0; i < 6; i ++ ) {
-
-			const plane = planes[ i ];
-
-			// corner at max distance
-
-			_vector.x = plane.normal.x > 0 ? box.max.x : box.min.x;
-			_vector.y = plane.normal.y > 0 ? box.max.y : box.min.y;
-			_vector.z = plane.normal.z > 0 ? box.max.z : box.min.z;
-
-			if ( plane.distanceToPoint( _vector ) < 0 ) {
-
+
+			const plane = this.planes[ i ];
+
+			p1.x = plane.normal.x > 0 ? max.x : min.x;
+			p1.y = plane.normal.y > 0 ? max.y : min.y;
+			p1.z = plane.normal.z > 0 ? max.z : min.z;
+
+			if ( plane.distanceToPoint( p1 ) <= 0 ) {
+
 				return false;
-
+	
 			}
-
+	
 		}
-
+	
 		return true;
-
+	
 	}
+
 
 	/**
 	 * Returns `true` if the given point lies within the frustum.

diff --git a/src/renderers/webgl/WebGLArrayRenderTarget.js b/src/renderers/webgl/WebGLArrayRenderTarget.js
diff --git a/src/renderers/webgl/WebGLTextures.js b/src/renderers/webgl/WebGLTextures.js
@@ -3,6 +3,11 @@ import { createElementNS } from '../../utils.js';
 import { ColorManagement } from '../../math/ColorManagement.js';
 import { Vector2 } from '../../math/Vector2.js';
 import { getByteLength } from '../../extras/TextureUtils.js';
+import {
+	LuminanceFormat, NoColorSpace, LinearSRGBColorSpace, RGBAFormat,
+	UnsignedByteType
+} from '../../constants.js';
+
 
 function WebGLTextures( _gl, extensions, state, properties, capabilities, utils, info ) {
 
@@ -2105,7 +2110,13 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 	}
 
 	function verifyColorSpace( texture, image ) {
-
+        if ( format === LuminanceFormat ) {
+			// LuminanceFormat must use NoColorSpace (since sRGB with RED not allowed in WebGL2)
+			if ( colorSpace !== NoColorSpace ) {
+				console.warn( 'THREE.WebGLTextures: LuminanceFormat textures must use NoColorSpace.' );
+			}
+		}
+
 		const colorSpace = texture.colorSpace;
 		const format = texture.format;
 		const type = texture.type;