Skip to content

Commit 530f719

Browse files
authored
Examples: Add webgpu_caustics and shadow revisions (#1623)
* Examples: Add webgpu_caustics and shadow revisions * Update three.js * Add examples * Update patch and delete examples * Format
1 parent 560f69e commit 530f719

File tree

4 files changed

+108
-3
lines changed

4 files changed

+108
-3
lines changed

examples-testing/changes.patch

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14139,6 +14139,38 @@ index 15527632..58f5cc14 100644
1413914139
const amount = ev.deltaY;
1414014140
if (amount === 0) return;
1414114141
const dir = amount / Math.abs(amount);
14142+
diff --git a/examples-testing/examples/webgpu_caustics.ts b/examples-testing/examples/webgpu_caustics.ts
14143+
index 7bb91369..7f794094 100644
14144+
--- a/examples-testing/examples/webgpu_caustics.ts
14145+
+++ b/examples-testing/examples/webgpu_caustics.ts
14146+
@@ -1,4 +1,4 @@
14147+
-import * as THREE from 'three';
14148+
+import * as THREE from 'three/webgpu';
14149+
14150+
import {
14151+
uniform,
14152+
@@ -22,9 +22,9 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
14153+
14154+
import Stats from 'three/addons/libs/stats.module.js';
14155+
14156+
-let camera, scene, renderer, controls;
14157+
-let stats;
14158+
-let gltf;
14159+
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer, controls: OrbitControls;
14160+
+let stats: Stats;
14161+
+let gltf: THREE.Group;
14162+
14163+
init();
14164+
14165+
@@ -68,7 +68,7 @@ async function init() {
14166+
14167+
// objects / material
14168+
14169+
- const duck = gltf.children[0];
14170+
+ const duck = gltf.children[0] as THREE.Mesh<THREE.BufferGeometry, THREE.MeshPhysicalNodeMaterial>;
14171+
duck.material = new THREE.MeshPhysicalNodeMaterial();
14172+
duck.material.side = THREE.DoubleSide;
14173+
duck.material.transparent = true;
1414214174
diff --git a/examples-testing/examples/webgpu_centroid_sampling.ts b/examples-testing/examples/webgpu_centroid_sampling.ts
1414314175
index ac77927f..c3c883d9 100644
1414414176
--- a/examples-testing/examples/webgpu_centroid_sampling.ts
@@ -18495,6 +18527,63 @@ index e409b3c0..78885bec 100644
1849518527
if (isUserInteracting === true) {
1849618528
lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
1849718529
lat = (onPointerDownPointerY - event.clientY) * 0.1 + onPointerDownLat;
18530+
diff --git a/examples-testing/examples/webgpu_volume_caustics.ts b/examples-testing/examples/webgpu_volume_caustics.ts
18531+
index a88f55dc..41f6e7eb 100644
18532+
--- a/examples-testing/examples/webgpu_volume_caustics.ts
18533+
+++ b/examples-testing/examples/webgpu_volume_caustics.ts
18534+
@@ -1,4 +1,4 @@
18535+
-import * as THREE from 'three';
18536+
+import * as THREE from 'three/webgpu';
18537+
18538+
import {
18539+
uniform,
18540+
@@ -19,6 +19,7 @@ import {
18541+
Fn,
18542+
vec2,
18543+
vec3,
18544+
+ ShaderNodeObject,
18545+
} from 'three/tsl';
18546+
18547+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
18548+
@@ -33,10 +34,10 @@ import { bloom } from 'three/addons/tsl/display/BloomNode.js';
18549+
18550+
import Stats from 'three/addons/libs/stats.module.js';
18551+
18552+
-let camera, scene, renderer, controls;
18553+
-let postProcessing;
18554+
-let stats;
18555+
-let gltf;
18556+
+let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer, controls: OrbitControls;
18557+
+let postProcessing: THREE.PostProcessing;
18558+
+let stats: Stats;
18559+
+let gltf: THREE.Group;
18560+
18561+
init();
18562+
18563+
@@ -83,7 +84,7 @@ async function init() {
18564+
18565+
// Material
18566+
18567+
- const duck = gltf.children[0];
18568+
+ const duck = gltf.children[0] as THREE.Mesh<THREE.BufferGeometry, THREE.MeshPhysicalNodeMaterial>;
18569+
duck.material = new THREE.MeshPhysicalNodeMaterial();
18570+
duck.material.side = THREE.DoubleSide;
18571+
duck.material.transparent = true;
18572+
@@ -226,12 +227,12 @@ async function init() {
18573+
const volumetricMaterial = new THREE.VolumeNodeMaterial();
18574+
volumetricMaterial.steps = 20;
18575+
volumetricMaterial.offsetNode = bayer16(screenCoordinate.add(frameId)); // Add dithering to reduce banding
18576+
- volumetricMaterial.scatteringNode = Fn(({ positionRay }) => {
18577+
+ volumetricMaterial.scatteringNode = Fn<{ positionRay: ShaderNodeObject<THREE.Node> }>(({ positionRay }) => {
18578+
// Return the amount of fog based on the noise texture
18579+
18580+
const timeScaled = vec3(time.mul(0.01), 0, time.mul(0.03));
18581+
18582+
- const sampleGrain = (scale, timeScale = 1) =>
18583+
+ const sampleGrain = (scale: number, timeScale = 1) =>
18584+
texture3D(noiseTexture3D, positionRay.add(timeScaled.mul(timeScale)).mul(scale).mod(1), 0).r.add(0.5);
18585+
18586+
let density = sampleGrain(1);
1849818587
diff --git a/examples-testing/examples/webgpu_volume_cloud.ts b/examples-testing/examples/webgpu_volume_cloud.ts
1849918588
index 679ce01a..50b5dadf 100644
1850018589
--- a/examples-testing/examples/webgpu_volume_cloud.ts

types/three/src/lights/LightShadow.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Camera } from "../cameras/Camera.js";
2+
import { TextureDataType } from "../constants.js";
23
import { Object3DJSONObject } from "../core/Object3D.js";
34
import { Frustum } from "../math/Frustum.js";
45
import { Matrix4 } from "../math/Matrix4.js";
@@ -86,6 +87,13 @@ export class LightShadow<TCamera extends Camera = Camera> {
8687
*/
8788
mapSize: Vector2;
8889

90+
/**
91+
* The type of shadow texture. The default is `UnsignedByteType`.
92+
*
93+
* @default UnsignedByteType
94+
*/
95+
mapType: TextureDataType;
96+
8997
/**
9098
* The depth map generated using the internal camera; a location beyond a pixel's depth is in shadow. Computed internally during rendering.
9199
* @defaultValue null

types/three/src/materials/nodes/NodeMaterial.d.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ export interface NodeMaterialParameters extends MaterialParameters {
2727
geometryNode?: Node | null | undefined;
2828

2929
depthNode?: Node | null | undefined;
30-
shadowNode?: Node | null | undefined;
30+
receivedShadowPositionNode?: Node | null | undefined;
31+
castShadowPositionNode?: Node | null | undefined;
3132

3233
outputNode?: Node | null | undefined;
3334

@@ -59,7 +60,8 @@ declare class NodeMaterial extends Material {
5960
geometryNode: Node | null;
6061

6162
depthNode: Node | null;
62-
shadowPositionNode: Node | null;
63+
receivedShadowPositionNode: Node | null;
64+
castShadowPositionNode: Node | null;
6365
receivedShadowNode: (() => Node) | null;
6466
castShadowNode: Node | null;
6567

@@ -69,6 +71,12 @@ declare class NodeMaterial extends Material {
6971
fragmentNode: Node | null;
7072
vertexNode: Node | null;
7173

74+
/**
75+
* @deprecated ".shadowPositionNode" was renamed to ".receivedShadowPositionNode".'
76+
*/
77+
get shadowPositionNode(): Node | null;
78+
set shadowPositionNode(value: Node | null);
79+
7280
constructor();
7381

7482
build(builder: NodeBuilder): void;

0 commit comments

Comments
 (0)