diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch index 593a02cbf..5a67f8808 100644 --- a/examples-testing/changes.patch +++ b/examples-testing/changes.patch @@ -14431,6 +14431,44 @@ index 2405b8ad..bd503c49 100644 pixelBufferTexture.image.data = pixelBuffer; pixelBufferTexture.needsUpdate = true; +diff --git a/examples-testing/examples/webgpu_ocean.ts b/examples-testing/examples/webgpu_ocean.ts +index f27ed18c..ea15cbee 100644 +--- a/examples-testing/examples/webgpu_ocean.ts ++++ b/examples-testing/examples/webgpu_ocean.ts +@@ -1,4 +1,4 @@ +-import * as THREE from 'three'; ++import * as THREE from 'three/webgpu'; + + import Stats from 'three/addons/libs/stats.module.js'; + +@@ -7,14 +7,14 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; + import { Water } from 'three/addons/objects/WaterGPU.js'; + import { Sky } from 'three/addons/objects/SkyGPU.js'; + +-let container, stats; +-let camera, scene, renderer; +-let controls, water, sun, mesh; ++let container: HTMLElement, stats: Stats; ++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer; ++let controls: OrbitControls, water: Water, sun: THREE.Vector3, mesh: THREE.Mesh; + + init(); + + function init() { +- container = document.getElementById('container'); ++ container = document.getElementById('container')!; + + // + +@@ -75,7 +75,7 @@ function init() { + const pmremGenerator = new THREE.PMREMGenerator(renderer); + const sceneEnv = new THREE.Scene(); + +- let renderTarget; ++ let renderTarget: THREE.RenderTarget | undefined; + + function updateSun() { + const phi = THREE.MathUtils.degToRad(90 - parameters.elevation); diff --git a/examples-testing/examples/webgpu_parallax_uv.ts b/examples-testing/examples/webgpu_parallax_uv.ts index c11a18ed..bfcafe6d 100644 --- a/examples-testing/examples/webgpu_parallax_uv.ts @@ -14804,6 +14842,32 @@ index 5e75fa7a..dfebe406 100644 init(); +diff --git a/examples-testing/examples/webgpu_postprocessing_masking.ts b/examples-testing/examples/webgpu_postprocessing_masking.ts +index a4f56b17..ce7e7ad3 100644 +--- a/examples-testing/examples/webgpu_postprocessing_masking.ts ++++ b/examples-testing/examples/webgpu_postprocessing_masking.ts +@@ -1,8 +1,8 @@ +-import * as THREE from 'three'; +-import { pass, texture } from 'three/tsl'; ++import * as THREE from 'three/webgpu'; ++import { Node, pass, texture } from 'three/tsl'; + +-let camera, postProcessing, renderer; +-let box, torus; ++let camera: THREE.PerspectiveCamera, postProcessing: THREE.PostProcessing, renderer: THREE.WebGPURenderer; ++let box: THREE.Mesh, torus: THREE.Mesh; + + init(); + +@@ -50,7 +50,7 @@ function init() { + const sceneMask1 = pass(maskScene1, camera).a; + const sceneMask2 = pass(maskScene2, camera).a; + +- let compose = base; ++ let compose: Node = base; + compose = sceneMask1.mix(compose, texture(texture1)); + compose = sceneMask2.mix(compose, texture(texture2)); + diff --git a/examples-testing/examples/webgpu_postprocessing_pixel.ts b/examples-testing/examples/webgpu_postprocessing_pixel.ts index d7e51008..a9decd46 100644 --- a/examples-testing/examples/webgpu_postprocessing_pixel.ts diff --git a/examples-testing/index.js b/examples-testing/index.js index d3dc679f0..dd548d9a8 100644 --- a/examples-testing/index.js +++ b/examples-testing/index.js @@ -100,6 +100,7 @@ const exceptionList = [ 'webgpu_storage_buffer', 'webgpu_texturegrad', 'webgpu_textures_2d-array', + 'webgpu_tsl_angular_slicing', 'webgpu_tsl_compute_attractors_particles', 'webgpu_tsl_earth', 'webgpu_tsl_editor', diff --git a/src-testing/changes.patch b/src-testing/changes.patch index 52e23ccf8..209ba0e35 100644 --- a/src-testing/changes.patch +++ b/src-testing/changes.patch @@ -7073,7 +7073,7 @@ index 63c66ce4..6f3e94ce 100644 } diff --git a/src-testing/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.ts b/src-testing/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.ts -index 7cec834b..3dc04eeb 100644 +index 61db9d23..dd2b3042 100644 --- a/src-testing/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.ts +++ b/src-testing/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.ts @@ -1,4 +1,15 @@ @@ -7112,7 +7112,7 @@ index 7cec834b..3dc04eeb 100644 [MathNode.ATAN2]: 'atan', textureDimensions: 'textureSize', equals: 'equal', -@@ -66,8 +85,32 @@ precision highp isampler2DArray; +@@ -66,8 +85,37 @@ precision highp isampler2DArray; precision lowp sampler2DShadow; `; @@ -7141,12 +7141,17 @@ index 7cec834b..3dc04eeb 100644 + compute?: { [groupName: string]: NodeUniformsGroup | undefined }; + }; + transforms: Transform[]; ++ extensions: { ++ vertex?: Map; ++ fragment?: Map; ++ compute?: Map; ++ }; + + constructor(object: Object3D, renderer: Renderer) { super(object, renderer, new GLSLNodeParser()); this.uniformGroups = {}; -@@ -76,7 +119,7 @@ class GLSLNodeBuilder extends NodeBuilder { +@@ -77,7 +125,7 @@ class GLSLNodeBuilder extends NodeBuilder { this.instanceBindGroups = false; } @@ -7155,7 +7160,7 @@ index 7cec834b..3dc04eeb 100644 return glslMethods[method] || method; } -@@ -84,7 +127,7 @@ class GLSLNodeBuilder extends NodeBuilder { +@@ -85,7 +133,7 @@ class GLSLNodeBuilder extends NodeBuilder { return ''; } @@ -7164,7 +7169,7 @@ index 7cec834b..3dc04eeb 100644 const layout = shaderNode.layout; const flowData = this.flowShaderNode(shaderNode); -@@ -110,7 +153,7 @@ ${flowData.code} +@@ -111,7 +159,7 @@ ${flowData.code} return code; } @@ -7173,7 +7178,7 @@ index 7cec834b..3dc04eeb 100644 const attribute = storageBufferNode.value; if (attribute.pbo === undefined) { -@@ -174,7 +217,7 @@ ${flowData.code} +@@ -175,7 +223,7 @@ ${flowData.code} } } @@ -7182,7 +7187,7 @@ index 7cec834b..3dc04eeb 100644 if (node.isNodeUniform && node.node.isTextureNode !== true && node.node.isBufferNode !== true) { return shaderStage.charAt(0) + '_' + node.name; } -@@ -182,7 +225,7 @@ ${flowData.code} +@@ -183,7 +231,7 @@ ${flowData.code} return super.getPropertyName(node, shaderStage); } @@ -7191,7 +7196,7 @@ index 7cec834b..3dc04eeb 100644 const { node, indexNode } = storageArrayElementNode; const attribute = node.value; -@@ -251,7 +294,13 @@ ${flowData.code} +@@ -252,7 +300,13 @@ ${flowData.code} return propertyName; } @@ -7206,7 +7211,7 @@ index 7cec834b..3dc04eeb 100644 if (depthSnippet) { return `texelFetch( ${textureProperty}, ivec3( ${uvIndexSnippet}, ${depthSnippet} ), ${levelSnippet} )`; } else { -@@ -259,7 +308,7 @@ ${flowData.code} +@@ -260,7 +314,7 @@ ${flowData.code} } } @@ -7215,7 +7220,7 @@ index 7cec834b..3dc04eeb 100644 if (texture.isDepthTexture) { return `texture( ${textureProperty}, ${uvSnippet} ).x`; } else { -@@ -269,24 +318,39 @@ ${flowData.code} +@@ -270,24 +324,39 @@ ${flowData.code} } } @@ -7263,7 +7268,7 @@ index 7cec834b..3dc04eeb 100644 shaderStage = this.shaderStage, ) { if (shaderStage === 'fragment') { -@@ -295,11 +359,12 @@ ${flowData.code} +@@ -296,11 +365,12 @@ ${flowData.code} console.error( `WebGPURenderer: THREE.DepthTexture.compareFunction() does not support ${shaderStage} shader.`, ); @@ -7278,7 +7283,7 @@ index 7cec834b..3dc04eeb 100644 const vars = this.vars[shaderStage]; -@@ -312,7 +377,7 @@ ${flowData.code} +@@ -313,7 +383,7 @@ ${flowData.code} return snippets.join('\n\t'); } @@ -7287,7 +7292,7 @@ index 7cec834b..3dc04eeb 100644 const uniforms = this.uniforms[shaderStage]; const bindingSnippets = []; -@@ -394,7 +459,7 @@ ${flowData.code} +@@ -395,7 +465,7 @@ ${flowData.code} return output; } @@ -7296,7 +7301,7 @@ index 7cec834b..3dc04eeb 100644 let nodeType = super.getTypeFromAttribute(attribute); if (/^[iu]/.test(nodeType) && attribute.gpuType !== IntType) { -@@ -412,7 +477,7 @@ ${flowData.code} +@@ -413,7 +483,7 @@ ${flowData.code} return nodeType; } @@ -7305,7 +7310,7 @@ index 7cec834b..3dc04eeb 100644 let snippet = ''; if (shaderStage === 'vertex' || shaderStage === 'compute') { -@@ -428,8 +493,8 @@ ${flowData.code} +@@ -429,8 +499,8 @@ ${flowData.code} return snippet; } @@ -7316,7 +7321,7 @@ index 7cec834b..3dc04eeb 100644 const members = struct.getMemberTypes(); for (let i = 0; i < members.length; i++) { -@@ -440,7 +505,7 @@ ${flowData.code} +@@ -441,7 +511,7 @@ ${flowData.code} return snippets.join('\n'); } @@ -7325,7 +7330,7 @@ index 7cec834b..3dc04eeb 100644 const snippets = []; const structs = this.structs[shaderStage]; -@@ -461,7 +526,7 @@ ${flowData.code} +@@ -462,7 +532,7 @@ ${flowData.code} return snippets.join('\n\n'); } @@ -7334,17 +7339,26 @@ index 7cec834b..3dc04eeb 100644 let snippet = ''; const varyings = this.varyings; -@@ -518,7 +583,7 @@ ${flowData.code} +@@ -519,7 +589,7 @@ ${flowData.code} return 'gl_FragDepth'; } +- enableExtension(name, behavior, shaderStage = this.shaderStage) { ++ enableExtension(name: string, behavior: string, shaderStage = this.shaderStage!) { + const map = this.extensions[shaderStage] || (this.extensions[shaderStage] = new Map()); + + if (map.has(name) === false) { +@@ -530,7 +600,7 @@ ${flowData.code} + } + } + - getExtensions(shaderStage) { + getExtensions(shaderStage: NodeShaderStage) { - let extensions = ''; + const snippets = []; if (shaderStage === 'vertex') { -@@ -533,7 +598,7 @@ ${flowData.code} - return extensions; +@@ -553,7 +623,7 @@ ${flowData.code} + return snippets.join('\n'); } - isAvailable(name) { @@ -7352,7 +7366,7 @@ index 7cec834b..3dc04eeb 100644 let result = supports[name]; if (result === undefined) { -@@ -558,11 +623,11 @@ ${flowData.code} +@@ -578,11 +648,11 @@ ${flowData.code} return true; } @@ -7366,7 +7380,7 @@ index 7cec834b..3dc04eeb 100644 const transforms = this.transforms; let snippet = ''; -@@ -578,14 +643,14 @@ ${flowData.code} +@@ -598,14 +668,14 @@ ${flowData.code} return snippet; } @@ -7383,7 +7397,7 @@ index 7cec834b..3dc04eeb 100644 return `#version 300 es // extensions -@@ -623,7 +688,7 @@ void main() { +@@ -643,7 +713,7 @@ void main() { `; } @@ -7392,7 +7406,7 @@ index 7cec834b..3dc04eeb 100644 return `#version 300 es ${this.getSignature()} -@@ -655,17 +720,18 @@ void main() { +@@ -675,17 +745,18 @@ void main() { } buildCode() { @@ -7415,7 +7429,7 @@ index 7cec834b..3dc04eeb 100644 const slotName = node.name; if (slotName) { -@@ -691,28 +757,33 @@ void main() { +@@ -711,28 +782,33 @@ void main() { } } diff --git a/three.js b/three.js index baf66ab01..97d2d20dd 160000 --- a/three.js +++ b/three.js @@ -1 +1 @@ -Subproject commit baf66ab01115652c59622842f034ea9a5df2a224 +Subproject commit 97d2d20dd689a9370db8668745f1045e2abb34ef diff --git a/types/three/examples/jsm/objects/SkyGPU.d.ts b/types/three/examples/jsm/objects/SkyGPU.d.ts index 4ea1da25a..79cf7dab8 100644 --- a/types/three/examples/jsm/objects/SkyGPU.d.ts +++ b/types/three/examples/jsm/objects/SkyGPU.d.ts @@ -1,4 +1,4 @@ -import { Node, ShaderNodeObject, UniformNode } from "three/tsl"; +import { ShaderNodeObject, UniformNode } from "three/tsl"; import { BoxGeometry, Mesh, NodeMaterial, Vector3 } from "three/webgpu"; declare class Sky extends Mesh { diff --git a/types/three/examples/jsm/objects/WaterGPU.d.ts b/types/three/examples/jsm/objects/WaterGPU.d.ts new file mode 100644 index 000000000..040dc9731 --- /dev/null +++ b/types/three/examples/jsm/objects/WaterGPU.d.ts @@ -0,0 +1,31 @@ +import { TextureNode, UniformNode } from "three/tsl"; +import { BufferGeometry, Color, ColorRepresentation, Mesh, NodeMaterial, Texture, Vector3 } from "three/webgpu"; + +export interface WaterOptions { + resolution?: number | undefined; + waterNormals: Texture; + alpha?: number | undefined; + size?: number | undefined; + sunColor?: ColorRepresentation | undefined; + sunDirection?: Vector3 | undefined; + waterColor?: ColorRepresentation | undefined; + distortionScale?: number | undefined; +} + +declare class Water extends Mesh { + readonly isWater: true; + + resolution: number; + + waterNormals: TextureNode; + alpha: UniformNode; + size: UniformNode; + sunColor: UniformNode; + sunDirection: UniformNode; + waterColor: UniformNode; + distortionScale: UniformNode; + + constructor(geometry: BufferGeometry, options: WaterOptions); +} + +export { Water };