Skip to content

Commit e90f48f

Browse files
Methuselah96Methuselah96
authored
NodeBuilder - Fix Interpolation (#1673)
* NodeBuilder - Fix Interpolation * Update three.js * Add examples * Update patch and delete examples * Add examples * Update patch and delete examples
1 parent 58c0541 commit e90f48f

File tree

3 files changed

+74
-63
lines changed

3 files changed

+74
-63
lines changed

‎examples-testing/changes.patch

Lines changed: 60 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -7376,62 +7376,18 @@ index 5b13e8f4..83aad15c 100644
73767376
init();
73777377

73787378
diff --git a/examples-testing/examples/webgl_loader_obj.ts b/examples-testing/examples/webgl_loader_obj.ts
7379-
index f61eeb75..44b29b66 100644
7379+
index d393c5ef..64e08310 100644
73807380
--- a/examples-testing/examples/webgl_loader_obj.ts
73817381
+++ b/examples-testing/examples/webgl_loader_obj.ts
7382-
@@ -3,9 +3,9 @@ import * as THREE from 'three';
7383-
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
7384-
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
7385-
7386-
-let camera, scene, renderer;
7387-
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
7388-
7389-
-let object;
7390-
+let object: THREE.Group;
7391-
7392-
init();
7393-
7394-
@@ -28,7 +28,8 @@ function init() {
7395-
7396-
function loadModel() {
7397-
object.traverse(function (child) {
7398-
- if (child.isMesh) child.material.map = texture;
7399-
+ if ((child as THREE.Mesh).isMesh)
7400-
+ (child as THREE.Mesh<THREE.BufferGeometry, THREE.MeshPhongMaterial>).material.map = texture;
7401-
});
7402-
7403-
object.position.y = -0.95;
7404-
@@ -48,7 +49,7 @@ function init() {
7405-
7406-
// model
7407-
7408-
- function onProgress(xhr) {
7409-
+ function onProgress(xhr: ProgressEvent) {
7410-
if (xhr.lengthComputable) {
7411-
const percentComplete = (xhr.loaded / xhr.total) * 100;
7412-
console.log('model ' + percentComplete.toFixed(2) + '% downloaded');
7413-
diff --git a/examples-testing/examples/webgl_loader_obj_mtl.ts b/examples-testing/examples/webgl_loader_obj_mtl.ts
7414-
index 4308aee7..f27d82d9 100644
7415-
--- a/examples-testing/examples/webgl_loader_obj_mtl.ts
7416-
+++ b/examples-testing/examples/webgl_loader_obj_mtl.ts
74177382
@@ -4,7 +4,7 @@ import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
74187383
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
74197384
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
74207385

7421-
-let camera, scene, renderer;
7422-
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
7386+
-let camera, scene, renderer, controls;
7387+
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, controls: OrbitControls;
74237388

74247389
init();
74257390

7426-
@@ -25,7 +25,7 @@ function init() {
7427-
7428-
// model
7429-
7430-
- const onProgress = function (xhr) {
7431-
+ const onProgress = function (xhr: ProgressEvent) {
7432-
if (xhr.lengthComputable) {
7433-
const percentComplete = (xhr.loaded / xhr.total) * 100;
7434-
console.log(percentComplete.toFixed(2) + '% downloaded');
74357391
diff --git a/examples-testing/examples/webgl_loader_pcd.ts b/examples-testing/examples/webgl_loader_pcd.ts
74367392
index dd0f0b0f..e47005a8 100644
74377393
--- a/examples-testing/examples/webgl_loader_pcd.ts
@@ -14134,10 +14090,10 @@ index 7bb91369..7f794094 100644
1413414090
duck.material.side = THREE.DoubleSide;
1413514091
duck.material.transparent = true;
1413614092
diff --git a/examples-testing/examples/webgpu_centroid_sampling.ts b/examples-testing/examples/webgpu_centroid_sampling.ts
14137-
index 18fbc872..c3c883d9 100644
14093+
index 4168292c..9d02417c 100644
1413814094
--- a/examples-testing/examples/webgpu_centroid_sampling.ts
1413914095
+++ b/examples-testing/examples/webgpu_centroid_sampling.ts
14140-
@@ -1,15 +1,15 @@
14096+
@@ -1,15 +1,22 @@
1414114097
-import * as THREE from 'three';
1414214098
+import * as THREE from 'three/webgpu';
1414314099
import { varying, uv, texture, Fn } from 'three/tsl';
@@ -14149,18 +14105,26 @@ index 18fbc872..c3c883d9 100644
1414914105
-let camera;
1415014106
-let scene;
1415114107
-let gui;
14108+
-
14109+
-const effectController = {
1415214110
+let rendererAntialiasingEnabled: THREE.WebGPURenderer;
1415314111
+let rendererAntialiasingDisabled: THREE.WebGPURenderer;
1415414112
+let camera: THREE.PerspectiveCamera;
1415514113
+let scene: THREE.Scene;
1415614114
+let gui: GUI;
14157-
14158-
-const effectController = {
14159-
+const effectController: { sampling: THREE.InterpolationSamplingMode } = {
14115+
+
14116+
+const effectController: {
14117+
+ sampling:
14118+
+ | typeof THREE.InterpolationSamplingMode.NORMAL
14119+
+ | typeof THREE.InterpolationSamplingMode.CENTROID
14120+
+ | typeof THREE.InterpolationSamplingMode.SAMPLE
14121+
+ | 'flat first'
14122+
+ | 'flat either';
14123+
+} = {
1416014124
sampling: 'normal',
1416114125
};
1416214126

14163-
@@ -17,7 +17,7 @@ const atlasCanvas = document.createElement('canvas');
14127+
@@ -17,7 +24,7 @@ const atlasCanvas = document.createElement('canvas');
1416414128
atlasCanvas.width = 16;
1416514129
atlasCanvas.height = 16;
1416614130

@@ -14169,7 +14133,7 @@ index 18fbc872..c3c883d9 100644
1416914133
ctx.fillStyle = 'red';
1417014134
ctx.fillRect(0, 0, 8, 8);
1417114135

14172-
@@ -62,7 +62,7 @@ function init() {
14136+
@@ -62,7 +69,7 @@ function init() {
1417314137

1417414138
scene = new THREE.Scene();
1417514139

@@ -14178,7 +14142,7 @@ index 18fbc872..c3c883d9 100644
1417814142
const geometry = new THREE.BufferGeometry();
1417914143
const positions = [-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0];
1418014144
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
14181-
@@ -78,7 +78,7 @@ function init() {
14145+
@@ -78,7 +85,7 @@ function init() {
1418214146
const material = new THREE.MeshBasicNodeMaterial();
1418314147
const testUV = varying(uv(), 'testUV');
1418414148

@@ -14187,7 +14151,7 @@ index 18fbc872..c3c883d9 100644
1418714151
return Fn(() => {
1418814152
testUV.setInterpolation(type, sampling);
1418914153

14190-
@@ -113,7 +113,7 @@ function init() {
14154+
@@ -113,7 +120,7 @@ function init() {
1419114155

1419214156
material.colorNode = withoutInterpolationShader();
1419314157

@@ -14196,7 +14160,7 @@ index 18fbc872..c3c883d9 100644
1419614160

1419714161
for (let x = -5; x < 5; x++) {
1419814162
for (let y = -5; y < 5; y++) {
14199-
@@ -142,13 +142,13 @@ function init() {
14163+
@@ -142,13 +149,13 @@ function init() {
1420014164
forceWebGL: forceWebGL,
1420114165
});
1420214166

@@ -14660,6 +14624,45 @@ index c3c78ca0..d964d0cd 100644
1466014624
position.x = matrix.elements[12];
1466114625
position.y = matrix.elements[13];
1466214626
position.z = matrix.elements[14];
14627+
diff --git a/examples-testing/examples/webgpu_instance_path.ts b/examples-testing/examples/webgpu_instance_path.ts
14628+
index 49879418..0f1977f7 100644
14629+
--- a/examples-testing/examples/webgpu_instance_path.ts
14630+
+++ b/examples-testing/examples/webgpu_instance_path.ts
14631+
@@ -1,4 +1,4 @@
14632+
-import * as THREE from 'three';
14633+
+import * as THREE from 'three/webgpu';
14634+
14635+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
14636+
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
14637+
@@ -18,7 +18,7 @@ import {
14638+
color,
14639+
} from 'three/tsl';
14640+
14641+
-let camera, scene, renderer, controls;
14642+
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer, controls: OrbitControls;
14643+
14644+
const count = 1000;
14645+
14646+
@@ -62,14 +62,14 @@ async function init() {
14647+
const v = new THREE.Vector3();
14648+
const c = new THREE.Color();
14649+
14650+
- const positions = [];
14651+
- const times = [];
14652+
- const seeds = [];
14653+
- const colors = [];
14654+
+ const positions: number[] = [];
14655+
+ const times: number[] = [];
14656+
+ const seeds: number[] = [];
14657+
+ const colors: number[] = [];
14658+
14659+
for (let i = 0; i < count; i++) {
14660+
const t = i / count;
14661+
- path.getPointAt(t, v);
14662+
+ path.getPointAt(t, v as unknown as THREE.Vector2);
14663+
14664+
v.x += 0.5 - Math.random();
14665+
v.y += 0.5 - Math.random();
1466314666
diff --git a/examples-testing/examples/webgpu_instance_points.ts b/examples-testing/examples/webgpu_instance_points.ts
1466414667
index 4b29d389..c793ca87 100644
1466514668
--- a/examples-testing/examples/webgpu_instance_points.ts

‎three.js

‎types/three/src/constants.d.ts

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -780,23 +780,31 @@ export const TimestampQuery: {
780780
COMPUTE: "compute";
781781
RENDER: "render";
782782
};
783-
export type TimestampQuery = "compute" | "render";
783+
export type TimestampQuery = typeof TimestampQuery.COMPUTE | typeof TimestampQuery.RENDER;
784784

785785
export const InterpolationSamplingType: {
786786
PERSPECTIVE: "perspective";
787787
LINEAR: "linear";
788788
FLAT: "flat";
789789
};
790-
export type InterpolationSamplingType = "perspective" | "linear" | "flat";
790+
export type InterpolationSamplingType =
791+
| typeof InterpolationSamplingType.PERSPECTIVE
792+
| typeof InterpolationSamplingType.LINEAR
793+
| typeof InterpolationSamplingType.FLAT;
791794

792795
export const InterpolationSamplingMode: {
793796
NORMAL: "normal";
794797
CENTROID: "centroid";
795798
SAMPLE: "sample";
796-
FLAT_FIRST: "flat first";
797-
FLAT_EITHER: "flat either";
799+
FIRST: "first";
800+
EITHER: "either";
798801
};
799-
export type InterpolationSamplingMode = "normal" | "centroid" | "sample" | "flat first" | "flat either";
802+
export type InterpolationSamplingMode =
803+
| typeof InterpolationSamplingMode.NORMAL
804+
| typeof InterpolationSamplingMode.CENTROID
805+
| typeof InterpolationSamplingMode.SAMPLE
806+
| typeof InterpolationSamplingMode.FIRST
807+
| typeof InterpolationSamplingMode.EITHER;
800808

801809
///////////////////////////////////////////////////////////////////////////////
802810
// Texture - Internal Pixel Formats

0 commit comments

Comments
 (0)