three-types · Methuselah96 · Jun 10, 2025 · Jun 10, 2025 · Jun 10, 2025 · Jun 10, 2025
diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch
@@ -7376,62 +7376,18 @@ index 5b13e8f4..83aad15c 100644
  init();
 
 diff --git a/examples-testing/examples/webgl_loader_obj.ts b/examples-testing/examples/webgl_loader_obj.ts
-index f61eeb75..44b29b66 100644
+index d393c5ef..64e08310 100644
 --- a/examples-testing/examples/webgl_loader_obj.ts
 +++ b/examples-testing/examples/webgl_loader_obj.ts
-@@ -3,9 +3,9 @@ import * as THREE from 'three';
- import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
--let camera, scene, renderer;
-+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
-
--let object;
-+let object: THREE.Group;
-
- init();
-
-@@ -28,7 +28,8 @@ function init() {
-
-     function loadModel() {
-         object.traverse(function (child) {
--            if (child.isMesh) child.material.map = texture;
-+            if ((child as THREE.Mesh).isMesh)
-+                (child as THREE.Mesh<THREE.BufferGeometry, THREE.MeshPhongMaterial>).material.map = texture;
-         });
-
-         object.position.y = -0.95;
-@@ -48,7 +49,7 @@ function init() {
-
-     // model
-
--    function onProgress(xhr) {
-+    function onProgress(xhr: ProgressEvent) {
-         if (xhr.lengthComputable) {
-             const percentComplete = (xhr.loaded / xhr.total) * 100;
-             console.log('model ' + percentComplete.toFixed(2) + '% downloaded');
-diff --git a/examples-testing/examples/webgl_loader_obj_mtl.ts b/examples-testing/examples/webgl_loader_obj_mtl.ts
-index 4308aee7..f27d82d9 100644
---- a/examples-testing/examples/webgl_loader_obj_mtl.ts
-+++ b/examples-testing/examples/webgl_loader_obj_mtl.ts
 @@ -4,7 +4,7 @@ import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
  import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
--let camera, scene, renderer;
-+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
+-let camera, scene, renderer, controls;
++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, controls: OrbitControls;
 
  init();
 
-@@ -25,7 +25,7 @@ function init() {
-
-     // model
-
--    const onProgress = function (xhr) {
-+    const onProgress = function (xhr: ProgressEvent) {
-         if (xhr.lengthComputable) {
-             const percentComplete = (xhr.loaded / xhr.total) * 100;
-             console.log(percentComplete.toFixed(2) + '% downloaded');
 diff --git a/examples-testing/examples/webgl_loader_pcd.ts b/examples-testing/examples/webgl_loader_pcd.ts
 index dd0f0b0f..e47005a8 100644
 --- a/examples-testing/examples/webgl_loader_pcd.ts
@@ -14134,10 +14090,10 @@ index 7bb91369..7f794094 100644
      duck.material.side = THREE.DoubleSide;
      duck.material.transparent = true;
 diff --git a/examples-testing/examples/webgpu_centroid_sampling.ts b/examples-testing/examples/webgpu_centroid_sampling.ts
-index 18fbc872..c3c883d9 100644
+index 4168292c..9d02417c 100644
 --- a/examples-testing/examples/webgpu_centroid_sampling.ts
 +++ b/examples-testing/examples/webgpu_centroid_sampling.ts
-@@ -1,15 +1,15 @@
+@@ -1,15 +1,22 @@
 -import * as THREE from 'three';
 +import * as THREE from 'three/webgpu';
  import { varying, uv, texture, Fn } from 'three/tsl';
@@ -14149,18 +14105,26 @@ index 18fbc872..c3c883d9 100644
 -let camera;
 -let scene;
 -let gui;
+-
+-const effectController = {
 +let rendererAntialiasingEnabled: THREE.WebGPURenderer;
 +let rendererAntialiasingDisabled: THREE.WebGPURenderer;
 +let camera: THREE.PerspectiveCamera;
 +let scene: THREE.Scene;
 +let gui: GUI;
-
--const effectController = {
-+const effectController: { sampling: THREE.InterpolationSamplingMode } = {
++
++const effectController: {
++    sampling:
++        | typeof THREE.InterpolationSamplingMode.NORMAL
++        | typeof THREE.InterpolationSamplingMode.CENTROID
++        | typeof THREE.InterpolationSamplingMode.SAMPLE
++        | 'flat first'
++        | 'flat either';
++} = {
      sampling: 'normal',
  };
 
-@@ -17,7 +17,7 @@ const atlasCanvas = document.createElement('canvas');
+@@ -17,7 +24,7 @@ const atlasCanvas = document.createElement('canvas');
  atlasCanvas.width = 16;
  atlasCanvas.height = 16;
 
@@ -14169,7 +14133,7 @@ index 18fbc872..c3c883d9 100644
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 8, 8);
 
-@@ -62,7 +62,7 @@ function init() {
+@@ -62,7 +69,7 @@ function init() {
 
      scene = new THREE.Scene();
 
@@ -14178,7 +14142,7 @@ index 18fbc872..c3c883d9 100644
          const geometry = new THREE.BufferGeometry();
          const positions = [-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0];
          geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
-@@ -78,7 +78,7 @@ function init() {
+@@ -78,7 +85,7 @@ function init() {
      const material = new THREE.MeshBasicNodeMaterial();
      const testUV = varying(uv(), 'testUV');
 
@@ -14187,7 +14151,7 @@ index 18fbc872..c3c883d9 100644
          return Fn(() => {
              testUV.setInterpolation(type, sampling);
 
-@@ -113,7 +113,7 @@ function init() {
+@@ -113,7 +120,7 @@ function init() {
 
      material.colorNode = withoutInterpolationShader();
 
@@ -14196,7 +14160,7 @@ index 18fbc872..c3c883d9 100644
 
      for (let x = -5; x < 5; x++) {
          for (let y = -5; y < 5; y++) {
-@@ -142,13 +142,13 @@ function init() {
+@@ -142,13 +149,13 @@ function init() {
          forceWebGL: forceWebGL,
      });
 
@@ -14660,6 +14624,45 @@ index c3c78ca0..d964d0cd 100644
      position.x = matrix.elements[12];
      position.y = matrix.elements[13];
      position.z = matrix.elements[14];
+diff --git a/examples-testing/examples/webgpu_instance_path.ts b/examples-testing/examples/webgpu_instance_path.ts
+index 49879418..0f1977f7 100644
+--- a/examples-testing/examples/webgpu_instance_path.ts
++++ b/examples-testing/examples/webgpu_instance_path.ts
+@@ -1,4 +1,4 @@
+-import * as THREE from 'three';
++import * as THREE from 'three/webgpu';
+
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+ import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+@@ -18,7 +18,7 @@ import {
+     color,
+ } from 'three/tsl';
+
+-let camera, scene, renderer, controls;
++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer, controls: OrbitControls;
+
+ const count = 1000;
+
+@@ -62,14 +62,14 @@ async function init() {
+     const v = new THREE.Vector3();
+     const c = new THREE.Color();
+
+-    const positions = [];
+-    const times = [];
+-    const seeds = [];
+-    const colors = [];
++    const positions: number[] = [];
++    const times: number[] = [];
++    const seeds: number[] = [];
++    const colors: number[] = [];
+
+     for (let i = 0; i < count; i++) {
+         const t = i / count;
+-        path.getPointAt(t, v);
++        path.getPointAt(t, v as unknown as THREE.Vector2);
+
+         v.x += 0.5 - Math.random();
+         v.y += 0.5 - Math.random();
 diff --git a/examples-testing/examples/webgpu_instance_points.ts b/examples-testing/examples/webgpu_instance_points.ts
 index 4b29d389..c793ca87 100644
 --- a/examples-testing/examples/webgpu_instance_points.ts

diff --git a/three.js b/three.js
diff --git a/types/three/src/constants.d.ts b/types/three/src/constants.d.ts
@@ -780,23 +780,31 @@ export const TimestampQuery: {
     COMPUTE: "compute";
     RENDER: "render";
 };
-export type TimestampQuery = "compute" | "render";
+export type TimestampQuery = typeof TimestampQuery.COMPUTE | typeof TimestampQuery.RENDER;
 
 export const InterpolationSamplingType: {
     PERSPECTIVE: "perspective";
     LINEAR: "linear";
     FLAT: "flat";
 };
-export type InterpolationSamplingType = "perspective" | "linear" | "flat";
+export type InterpolationSamplingType =
+    | typeof InterpolationSamplingType.PERSPECTIVE
+    | typeof InterpolationSamplingType.LINEAR
+    | typeof InterpolationSamplingType.FLAT;
 
 export const InterpolationSamplingMode: {
     NORMAL: "normal";
     CENTROID: "centroid";
     SAMPLE: "sample";
-    FLAT_FIRST: "flat first";
-    FLAT_EITHER: "flat either";
+    FIRST: "first";
+    EITHER: "either";
 };
-export type InterpolationSamplingMode = "normal" | "centroid" | "sample" | "flat first" | "flat either";
+export type InterpolationSamplingMode =
+    | typeof InterpolationSamplingMode.NORMAL
+    | typeof InterpolationSamplingMode.CENTROID
+    | typeof InterpolationSamplingMode.SAMPLE
+    | typeof InterpolationSamplingMode.FIRST
+    | typeof InterpolationSamplingMode.EITHER;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Texture - Internal Pixel Formats
+1 −1		examples/files.json
+ −		examples/screenshots/webgl_loader_obj.jpg
+ −		examples/screenshots/webgl_loader_obj_mtl.jpg
+ −		examples/screenshots/webgpu_instance_path.jpg
+ −		examples/screenshots/webgpu_sandbox.jpg
+20 −51		examples/webgl_loader_obj.html
+0 −125		examples/webgl_loader_obj_mtl.html
+6 −6		examples/webgpu_centroid_sampling.html
+171 −0		examples/webgpu_instance_path.html
+1 −1		examples/webgpu_sandbox.html
+67 −140		package-lock.json
+3 −3		src/constants.js
+3 −1		src/nodes/tsl/TSLCore.js
+13 −7		src/renderers/webgl-fallback/WebGLBackend.js
+1 −3		src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.js
+0 −1		test/e2e/puppeteer.js