WebGPURenderer: Introduce Bind Groups (#1053)

* Update three.js

* Add examples

* Add BindGroup

* Update patch

* Delete examples

* Update declarations

* Manual declarations

* Add examples

* Update patch

* Delete examples

examples-jsm/create-examples.js

@@ -45,6 +45,7 @@ const files = [
     'renderers/common/Attributes',
     'renderers/common/Backend',
     'renderers/common/Background',
+    'renderers/common/BindGroup',
     'renderers/common/Binding',
     'renderers/common/Bindings',
     'renderers/common/Buffer',

examples-jsm/declarations.js

@@ -22,6 +22,7 @@ const files = [
     'renderers/common/Animation',
     'renderers/common/Attributes',
     'renderers/common/Background',
+    'renderers/common/BindGroup',
     'renderers/common/Binding',
     'renderers/common/Bindings',
     'renderers/common/Buffer',

examples-testing/changes.patch

@@ -12634,7 +12634,7 @@ index 366a2791..74077e99 100644
 +    console.log('after', renderer.info.programs!.length);
  }
 diff --git a/examples-testing/examples/webgl_test_wide_gamut.ts b/examples-testing/examples/webgl_test_wide_gamut.ts
-index 57c38ba0..1da45af5 100644
+index 620caaf1..6699085b 100644
 --- a/examples-testing/examples/webgl_test_wide_gamut.ts
 +++ b/examples-testing/examples/webgl_test_wide_gamut.ts
 @@ -2,8 +2,8 @@ import * as THREE from 'three';
@@ -12682,29 +12682,21 @@ index 57c38ba0..1da45af5 100644
 
          slider.style.left = sliderPos - slider.offsetWidth / 2 + 'px';
      }
-@@ -90,18 +90,18 @@ function onWindowResize() {
+@@ -90,11 +90,11 @@ function onWindowResize() {
 
      renderer.setSize(window.innerWidth, window.innerHeight);
 
--    containTexture(window.innerWidth / window.innerHeight, sceneL.background);
--    containTexture(window.innerWidth / window.innerHeight, sceneR.background);
-+    containTexture(window.innerWidth / window.innerHeight, sceneL.background as THREE.Texture);
-+    containTexture(window.innerWidth / window.innerHeight, sceneR.background as THREE.Texture);
+-    THREE.TextureUtils.contain(sceneL.background, window.innerWidth / window.innerHeight);
+-    THREE.TextureUtils.contain(sceneR.background, window.innerWidth / window.innerHeight);
++    THREE.TextureUtils.contain(sceneL.background as THREE.Texture, window.innerWidth / window.innerHeight);
++    THREE.TextureUtils.contain(sceneR.background as THREE.Texture, window.innerWidth / window.innerHeight);
  }
 
 -function onGamutChange({ matches }) {
 +function onGamutChange({ matches }: MediaQueryListEvent) {
      renderer.outputColorSpace = isP3Context && matches ? THREE.DisplayP3ColorSpace : THREE.SRGBColorSpace;
 
      textureL.needsUpdate = true;
-     textureR.needsUpdate = true;
- }
-
--function containTexture(aspect, target) {
-+function containTexture(aspect: number, target: THREE.Texture) {
-     // Sets the matrix uv transform so the texture image is contained in a region having the specified aspect ratio,
-     // and does so without distortion. Akin to CSS object-fit: contain.
-     // Source: https://github.com/mrdoob/three.js/pull/17199
 diff --git a/examples-testing/examples/webgl_texture2darray_compressed.ts b/examples-testing/examples/webgl_texture2darray_compressed.ts
 index f263be70..bc8f8622 100644
 --- a/examples-testing/examples/webgl_texture2darray_compressed.ts

types/three/examples/jsm/nodes/core/NodeUniform.d.ts

@@ -5,7 +5,7 @@ declare class NodeUniform<TValue> {
     type: string | null;
     node: UniformNode<TValue>;
     needsUpdate: boolean | undefined;
-    constructor(name: string, type: string | null, node: UniformNode<TValue>, needsUpdate?: undefined);
+    constructor(name: string, type: string | null, node: UniformNode<TValue>);
     get value(): TValue;
     set value(val: TValue);
     get id(): number;

types/three/examples/jsm/renderers/common/BindGroup.d.ts

@@ -0,0 +1,9 @@
+import Binding from "./Binding.js";
+import NodeUniformsGroup from "./nodes/NodeUniformsGroup.js";
+declare class BindGroup {
+    name: string;
+    bindings: NodeUniformsGroup[] | Binding[];
+    id: number;
+    constructor(name?: string, bindings?: NodeUniformsGroup[]);
+}
+export default BindGroup;

types/three/examples/jsm/renderers/common/Bindings.d.ts

@@ -1,24 +1,20 @@
 import ComputeNode from "../../nodes/gpgpu/ComputeNode.js";
 import Attributes from "./Attributes.js";
 import Backend from "./Backend.js";
-import Binding from "./Binding.js";
+import BindGroup from "./BindGroup.js";
 import DataMap from "./DataMap.js";
 import Info from "./Info.js";
 import Nodes from "./nodes/Nodes.js";
 import Pipelines from "./Pipelines.js";
 import RenderObject from "./RenderObject.js";
 import Textures from "./Textures.js";
-interface Data {
-    bindings?: Binding[] | undefined;
+interface BindGroupData {
+    bindGroup?: BindGroup | undefined;
 }
 declare class Bindings extends DataMap<{
-    renderObject: {
-        key: RenderObject;
-        value: Data;
-    };
-    computeNode: {
-        key: ComputeNode;
-        value: Data;
+    bindGroup: {
+        key: BindGroup;
+        value: BindGroupData;
     };
 }> {
     backend: Backend;
@@ -35,11 +31,12 @@ declare class Bindings extends DataMap<{
         pipelines: Pipelines,
         info: Info,
     );
-    getForRender(renderObject: RenderObject): Binding[];
-    getForCompute(computeNode: ComputeNode): Binding[];
+    getForRender(renderObject: RenderObject): BindGroup[];
+    getForCompute(computeNode: ComputeNode): BindGroup[];
     updateForCompute(computeNode: ComputeNode): void;
     updateForRender(renderObject: RenderObject): void;
-    _init(bindings: Binding[]): void;
-    _update(object: ComputeNode | RenderObject, bindings: Binding[]): void;
+    _updateBindings(object: ComputeNode | RenderObject, bindings: BindGroup[]): void;
+    _init(bindGroup: BindGroup): void;
+    _update(object: ComputeNode | RenderObject, bindGroup: BindGroup, bindings: BindGroup[]): void;
 }
 export default Bindings;

types/three/examples/jsm/renderers/common/RenderObject.d.ts

@@ -9,7 +9,7 @@ import {
     Scene,
 } from "three";
 import LightsNode from "../../nodes/lighting/LightsNode.js";
-import Binding from "./Binding.js";
+import BindGroup from "./BindGroup.js";
 import ClippingContext from "./ClippingContext.js";
 import Geometries from "./Geometries.js";
 import NodeBuilderState from "./nodes/NodeBuilderState.js";
@@ -42,7 +42,7 @@ export default class RenderObject {
     initialNodesCacheKey: string;
     initialCacheKey: string;
     _nodeBuilderState: NodeBuilderState | null;
-    _bindings: Binding[] | null;
+    _bindings: BindGroup[] | null;
     onDispose: (() => void) | null;
     readonly isRenderObject: true;
     onMaterialDispose: () => void;
@@ -60,7 +60,7 @@ export default class RenderObject {
     updateClipping(parent: ClippingContext): void;
     get clippingNeedsUpdate(): boolean;
     getNodeBuilderState(): NodeBuilderState;
-    getBindings(): Binding[];
+    getBindings(): BindGroup[];
     getIndex(): BufferAttribute | null;
     getChainArray(): readonly [Object3D<import("three").Object3DEventMap>, Material, RenderContext, LightsNode];
     getAttributes(): (InterleavedBufferAttribute | BufferAttribute)[];

types/three/examples/jsm/renderers/common/nodes/NodeBuilderState.d.ts

@@ -1,28 +1,30 @@
 import Node from "../../../nodes/core/Node.js";
 import NodeAttribute from "../../../nodes/core/NodeAttribute.js";
-import Binding from "../Binding.js";
+import BindGroup from "../BindGroup.js";
 declare class NodeBuilderState {
     vertexShader: string | null;
     fragmentShader: string | null;
     computeShader: string | null;
     transforms: never[];
     nodeAttributes: NodeAttribute[];
-    bindings: Binding[];
+    bindings: BindGroup[];
     updateNodes: Node[];
     updateBeforeNodes: Node[];
     updateAfterNodes: Node[];
+    instanceBindGroups: boolean;
     usedTimes: number;
     constructor(
         vertexShader: string | null,
         fragmentShader: string | null,
         computeShader: string | null,
         nodeAttributes: NodeAttribute[],
-        bindings: Binding[],
+        bindings: BindGroup[],
         updateNodes: Node[],
         updateBeforeNodes: Node[],
         updateAfterNodes: Node[],
+        instanceBindGroups?: boolean,
         transforms?: never[],
     );
-    createBindings(): Binding[];
+    createBindings(): BindGroup[];
 }
 export default NodeBuilderState;

types/three/examples/jsm/renderers/common/nodes/NodeSampledTexture.d.ts

@@ -1,12 +1,19 @@
 import TextureNode from "../../../nodes/accessors/TextureNode.js";
+import UniformGroupNode from "../../../nodes/core/UniformGroupNode.js";
 import { SampledTexture } from "../SampledTexture.js";
 
 type GPUStorageTextureAccess = "read-only" | "read-write" | "write-only";
 
 declare class NodeSampledTexture extends SampledTexture {
     textureNode: TextureNode | undefined;
+    groupNode: UniformGroupNode;
     access: "read-write" | "read-only" | "write-only";
-    constructor(name: string, textureNode: TextureNode | undefined, access: GPUStorageTextureAccess | null);
+    constructor(
+        name: string,
+        textureNode: TextureNode | undefined,
+        groupNode: UniformGroupNode,
+        access: GPUStorageTextureAccess | null,
+    );
     get needsBindingsUpdate(): boolean;
     update(): boolean;
 }

types/three/examples/jsm/renderers/common/nodes/NodeSampler.d.ts

@@ -1,9 +1,11 @@
 import TextureNode from "../../../nodes/accessors/TextureNode.js";
+import UniformGroupNode from "../../../nodes/core/UniformGroupNode.js";
 import Sampler from "../Sampler.js";
 
 declare class NodeSampler extends Sampler {
     textureNode: TextureNode | undefined;
-    constructor(name: string, textureNode: TextureNode | undefined);
+    groupNode: UniformGroupNode;
+    constructor(name: string, textureNode: TextureNode | undefined, groupNode: UniformGroupNode);
     update(): void;
 }
 

types/three/examples/jsm/renderers/common/nodes/NodeUniformsGroup.d.ts

@@ -6,7 +6,6 @@ declare class NodeUniformsGroup extends UniformsGroup {
     groupNode: UniformGroupNode;
     readonly isNodeUniformsGroup: true;
     constructor(name: string, groupNode: UniformGroupNode);
-    get shared(): boolean;
     getNodes(): UniformNode<unknown>[];
 }
 export default NodeUniformsGroup;