Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more webgpu examples #1475

Merged
merged 12 commits into from
Dec 28, 2024
Merged

Add more webgpu examples #1475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
915bc6e
Add examples
Methuselah96 Dec 28, 2024
0cb69ee
Updates
Methuselah96 Dec 28, 2024
c4d8764
Update patch and delete examples
Methuselah96 Dec 28, 2024
6e03753
Add src
Methuselah96 Dec 28, 2024
b6061c6
Update patch and delete src
Methuselah96 Dec 28, 2024
b3d8a04
Update declarations
Methuselah96 Dec 28, 2024
3d7c493
Add examples
Methuselah96 Dec 28, 2024
4c88ed1
Update
Methuselah96 Dec 28, 2024
6b56878
Update patch and delete examples
Methuselah96 Dec 28, 2024
2694461
Format
Methuselah96 Dec 28, 2024
787ea73
Add back Renderer
Methuselah96 Dec 28, 2024
43b231f
Export it
Methuselah96 Dec 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions examples-testing/changes.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13834,6 +13834,100 @@ index a3922dc7..0fd65713 100644
let phase = true;
let lastUpdate = -1;

diff --git a/examples-testing/examples/webgpu_cubemap_adjustments.ts b/examples-testing/examples/webgpu_cubemap_adjustments.ts
index 46419734..73447d66 100644
--- a/examples-testing/examples/webgpu_cubemap_adjustments.ts
+++ b/examples-testing/examples/webgpu_cubemap_adjustments.ts
@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
import {
uniform,
mix,
@@ -11,6 +11,7 @@ import {
normalWorld,
positionWorldDirection,
reflectVector,
+ ShaderNodeObject,
} from 'three/tsl';

import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
@@ -20,7 +21,7 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

-let camera, scene, renderer;
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer;

init();

@@ -71,7 +72,10 @@ async function init() {
const rotateY1Matrix = new THREE.Matrix4();
const rotateY2Matrix = new THREE.Matrix4();

- const getEnvironmentNode = (reflectNode, positionNode) => {
+ const getEnvironmentNode = (
+ reflectNode: ShaderNodeObject<THREE.Node>,
+ positionNode: ShaderNodeObject<THREE.Node>,
+ ) => {
const custom1UV = reflectNode.xyz.mul(uniform(rotateY1Matrix));
const custom2UV = reflectNode.xyz.mul(uniform(rotateY2Matrix));
const mixCubeMaps = mix(
diff --git a/examples-testing/examples/webgpu_cubemap_dynamic.ts b/examples-testing/examples/webgpu_cubemap_dynamic.ts
index 91444a1a..f1c80ef1 100644
--- a/examples-testing/examples/webgpu_cubemap_dynamic.ts
+++ b/examples-testing/examples/webgpu_cubemap_dynamic.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 { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
@@ -6,12 +6,12 @@ import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import Stats from 'three/addons/libs/stats.module.js';

-let camera, scene, renderer, stats;
-let cube, sphere, torus, material;
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer, stats: Stats;
+let cube: THREE.Mesh, sphere: THREE.Mesh, torus: THREE.Mesh, material: THREE.MeshStandardNodeMaterial;

-let cubeCamera, cubeRenderTarget;
+let cubeCamera: THREE.CubeCamera, cubeRenderTarget: THREE.WebGLCubeRenderTarget;

-let controls;
+let controls: OrbitControls;

init();

@@ -108,7 +108,7 @@ function onWindowResized() {
camera.updateProjectionMatrix();
}

-function animation(msTime) {
+function animation(msTime: DOMHighResTimeStamp) {
const time = msTime / 1000;

cube.position.x = Math.cos(time) * 30;
diff --git a/examples-testing/examples/webgpu_cubemap_mix.ts b/examples-testing/examples/webgpu_cubemap_mix.ts
index a0eb4509..fe906f73 100644
--- a/examples-testing/examples/webgpu_cubemap_mix.ts
+++ b/examples-testing/examples/webgpu_cubemap_mix.ts
@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
import { mix, oscSine, time, pmremTexture, float } from 'three/tsl';

import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
@@ -6,7 +6,7 @@ import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

-let camera, scene, renderer;
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer;

init();

diff --git a/examples-testing/examples/webgpu_custom_fog_background.ts b/examples-testing/examples/webgpu_custom_fog_background.ts
index baca16cb..b01cd750 100644
--- a/examples-testing/examples/webgpu_custom_fog_background.ts
Expand Down
3 changes: 0 additions & 3 deletions examples-testing/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,6 @@ const exceptionList = [
'webgpu_compute_particles_rain',
'webgpu_compute_particles_snow',
'webgpu_compute_water',
'webgpu_cubemap_adjustments',
'webgpu_cubemap_dynamic',
'webgpu_cubemap_mix',
'webgpu_custom_fog',
'webgpu_depth_texture',
'webgpu_equirectangular',
Expand Down
Loading
Loading