Water: Add WebGPURenderer version. (#1162)

* Water: Add WebGPURenderer version. * Update three.js * Add examples * Update patch and delete examples * Add src * Update patch and delete src * Add examples * Update patch and delete examples
three-types · Aug 22, 2024 · fdf82ad · fdf82ad
1 parent 0e30713
commit fdf82ad
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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<string, string>;
++        fragment?: Map<string, string>;
++        compute?: Map<string, string>;
++    };
 +
 +    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,25 +7339,34 @@ 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) {
 +    isAvailable(name: string) {
          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
diff --git 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<BoxGeometry, NodeMaterial> {

diff --git a/types/three/examples/jsm/objects/WaterGPU.d.ts 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<BufferGeometry, NodeMaterial> {
+    readonly isWater: true;
+
+    resolution: number;
+
+    waterNormals: TextureNode;
+    alpha: UniformNode<number>;
+    size: UniformNode<number>;
+    sunColor: UniformNode<Color>;
+    sunDirection: UniformNode<Vector3>;
+    waterColor: UniformNode<Color>;
+    distortionScale: UniformNode<number>;
+
+    constructor(geometry: BufferGeometry, options: WaterOptions);
+}
+
+export { Water };
+3 −0		examples/files.json
+2 −3		examples/jsm/objects/SkyGPU.js
+103 −0		examples/jsm/objects/WaterGPU.js
+ −		examples/models/gltf/gears.glb
+ −		examples/screenshots/webgpu_ocean.jpg
+ −		examples/screenshots/webgpu_postprocessing_masking.jpg
+ −		examples/screenshots/webgpu_tsl_angular_slicing.jpg
+206 −0		examples/webgpu_ocean.html
+119 −0		examples/webgpu_postprocessing_masking.html
+232 −0		examples/webgpu_tsl_angular_slicing.html
+1 −1		examples/webgpu_tsl_procedural_terrain.html
+31 −3		src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.js