Skip to content

Commit 33c4a75

Browse files
Methuselah96Methuselah96
authored
WebGPURenderer: hardware clipping support. (#1391)
* Some updates * Update three.js * Add src * Update patch and delete src * Update declarations * Add src * Update patch and delete src * Update declarations * Format
1 parent 47d3fe2 commit 33c4a75

File tree

8 files changed

+62
-38
lines changed

8 files changed

+62
-38
lines changed

‎src-testing/changes.patch

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3675,7 +3675,7 @@ index b17e7080..e2b545b7 100644
36753675
if (map === undefined) return false;
36763676
}
36773677
diff --git a/src-testing/src/renderers/common/ClippingContext.ts b/src-testing/src/renderers/common/ClippingContext.ts
3678-
index 1488999a..2de7e35d 100644
3678+
index f7ac6960..5b8b4893 100644
36793679
--- a/src-testing/src/renderers/common/ClippingContext.ts
36803680
+++ b/src-testing/src/renderers/common/ClippingContext.ts
36813681
@@ -1,11 +1,33 @@
@@ -4880,7 +4880,7 @@ index 0486f793..5c8d620c 100644
48804880
}
48814881

48824882
diff --git a/src-testing/src/renderers/common/RenderObject.ts b/src-testing/src/renderers/common/RenderObject.ts
4883-
index bceef2c6..2acb1ac3 100644
4883+
index 4d179411..4e41a679 100644
48844884
--- a/src-testing/src/renderers/common/RenderObject.ts
48854885
+++ b/src-testing/src/renderers/common/RenderObject.ts
48864886
@@ -1,8 +1,27 @@
@@ -5000,7 +5000,7 @@ index bceef2c6..2acb1ac3 100644
50005000

50015001
return true;
50025002
}
5003-
@@ -119,7 +180,7 @@ export default class RenderObject {
5003+
@@ -123,7 +184,7 @@ export default class RenderObject {
50045004
}
50055005

50065006
getChainArray() {
@@ -5009,7 +5009,7 @@ index bceef2c6..2acb1ac3 100644
50095009
}
50105010

50115011
getAttributes() {
5012-
@@ -128,8 +189,8 @@ export default class RenderObject {
5012+
@@ -132,8 +193,8 @@ export default class RenderObject {
50135013
const nodeAttributes = this.getNodeBuilderState().nodeAttributes;
50145014
const geometry = this.geometry;
50155015

@@ -5020,7 +5020,7 @@ index bceef2c6..2acb1ac3 100644
50205020

50215021
for (const nodeAttribute of nodeAttributes) {
50225022
const attribute =
5023-
@@ -342,6 +403,6 @@ export default class RenderObject {
5023+
@@ -346,6 +407,6 @@ export default class RenderObject {
50245024
dispose() {
50255025
this.material.removeEventListener('dispose', this.onMaterialDispose);
50265026

@@ -7503,7 +7503,7 @@ index 3b16e861..99874f36 100644
75037503
const monitor = renderObject.getMonitor();
75047504

75057505
diff --git a/src-testing/src/renderers/webgl-fallback/WebGLBackend.ts b/src-testing/src/renderers/webgl-fallback/WebGLBackend.ts
7506-
index b9713fd2..e52f74d8 100644
7506+
index 7db9864a..bb852529 100644
75077507
--- a/src-testing/src/renderers/webgl-fallback/WebGLBackend.ts
75087508
+++ b/src-testing/src/renderers/webgl-fallback/WebGLBackend.ts
75097509
@@ -13,6 +13,7 @@ import { WebGLBufferRenderer } from './WebGLBufferRenderer.js';
@@ -7524,7 +7524,7 @@ index b9713fd2..e52f74d8 100644
75247524
}
75257525

75267526
diff --git a/src-testing/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.ts b/src-testing/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.ts
7527-
index b1e72064..40f26bf1 100644
7527+
index 2ac9e7c4..beef6e0e 100644
75287528
--- a/src-testing/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.ts
75297529
+++ b/src-testing/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.ts
75307530
@@ -1,4 +1,4 @@
@@ -7594,7 +7594,7 @@ index b1e72064..40f26bf1 100644
75947594
super(object, renderer, new GLSLNodeParser());
75957595

75967596
this.uniformGroups = {};
7597-
@@ -82,7 +122,7 @@ class GLSLNodeBuilder extends NodeBuilder {
7597+
@@ -83,7 +123,7 @@ class GLSLNodeBuilder extends NodeBuilder {
75987598
return texture.isVideoTexture === true && texture.colorSpace !== NoColorSpace;
75997599
}
76007600

@@ -7603,7 +7603,7 @@ index b1e72064..40f26bf1 100644
76037603
return glslMethods[method] || method;
76047604
}
76057605

7606-
@@ -90,7 +130,7 @@ class GLSLNodeBuilder extends NodeBuilder {
7606+
@@ -91,7 +131,7 @@ class GLSLNodeBuilder extends NodeBuilder {
76077607
return '';
76087608
}
76097609

@@ -7612,7 +7612,7 @@ index b1e72064..40f26bf1 100644
76127612
const layout = shaderNode.layout;
76137613
const flowData = this.flowShaderNode(shaderNode);
76147614

7615-
@@ -116,7 +156,7 @@ ${flowData.code}
7615+
@@ -117,7 +157,7 @@ ${flowData.code}
76167616
return code;
76177617
}
76187618

@@ -7621,7 +7621,7 @@ index b1e72064..40f26bf1 100644
76217621
const attribute = storageBufferNode.value;
76227622

76237623
if (attribute.pbo === undefined) {
7624-
@@ -180,7 +220,7 @@ ${flowData.code}
7624+
@@ -181,7 +221,7 @@ ${flowData.code}
76257625
}
76267626
}
76277627

@@ -7630,7 +7630,7 @@ index b1e72064..40f26bf1 100644
76307630
if (node.isNodeUniform && node.node.isTextureNode !== true && node.node.isBufferNode !== true) {
76317631
return shaderStage.charAt(0) + '_' + node.name;
76327632
}
7633-
@@ -188,7 +228,7 @@ ${flowData.code}
7633+
@@ -189,7 +229,7 @@ ${flowData.code}
76347634
return super.getPropertyName(node, shaderStage);
76357635
}
76367636

@@ -7639,7 +7639,7 @@ index b1e72064..40f26bf1 100644
76397639
const { node, indexNode } = storageArrayElementNode;
76407640
const attribute = node.value;
76417641

7642-
@@ -260,7 +300,13 @@ ${flowData.code}
7642+
@@ -261,7 +301,13 @@ ${flowData.code}
76437643
return propertyName;
76447644
}
76457645

@@ -7654,7 +7654,7 @@ index b1e72064..40f26bf1 100644
76547654
if (depthSnippet) {
76557655
return `texelFetch( ${textureProperty}, ivec3( ${uvIndexSnippet}, ${depthSnippet} ), ${levelSnippet} )`;
76567656
} else {
7657-
@@ -268,7 +314,7 @@ ${flowData.code}
7657+
@@ -269,7 +315,7 @@ ${flowData.code}
76587658
}
76597659
}
76607660

@@ -7663,7 +7663,7 @@ index b1e72064..40f26bf1 100644
76637663
if (texture.isDepthTexture) {
76647664
return `texture( ${textureProperty}, ${uvSnippet} ).x`;
76657665
} else {
7666-
@@ -278,24 +324,39 @@ ${flowData.code}
7666+
@@ -279,24 +325,39 @@ ${flowData.code}
76677667
}
76687668
}
76697669

@@ -7711,7 +7711,7 @@ index b1e72064..40f26bf1 100644
77117711
shaderStage = this.shaderStage,
77127712
) {
77137713
if (shaderStage === 'fragment') {
7714-
@@ -304,11 +365,12 @@ ${flowData.code}
7714+
@@ -305,11 +366,12 @@ ${flowData.code}
77157715
console.error(
77167716
`WebGPURenderer: THREE.DepthTexture.compareFunction() does not support ${shaderStage} shader.`,
77177717
);
@@ -7726,7 +7726,7 @@ index b1e72064..40f26bf1 100644
77267726

77277727
const vars = this.vars[shaderStage];
77287728

7729-
@@ -321,7 +383,7 @@ ${flowData.code}
7729+
@@ -322,7 +384,7 @@ ${flowData.code}
77307730
return snippets.join('\n\t');
77317731
}
77327732

@@ -7735,7 +7735,7 @@ index b1e72064..40f26bf1 100644
77357735
const uniforms = this.uniforms[shaderStage];
77367736

77377737
const bindingSnippets = [];
7738-
@@ -403,7 +465,7 @@ ${flowData.code}
7738+
@@ -404,7 +466,7 @@ ${flowData.code}
77397739
return output;
77407740
}
77417741

@@ -7744,7 +7744,7 @@ index b1e72064..40f26bf1 100644
77447744
let nodeType = super.getTypeFromAttribute(attribute);
77457745

77467746
if (/^[iu]/.test(nodeType) && attribute.gpuType !== IntType) {
7747-
@@ -421,7 +483,7 @@ ${flowData.code}
7747+
@@ -422,7 +484,7 @@ ${flowData.code}
77487748
return nodeType;
77497749
}
77507750

@@ -7753,7 +7753,7 @@ index b1e72064..40f26bf1 100644
77537753
let snippet = '';
77547754

77557755
if (shaderStage === 'vertex' || shaderStage === 'compute') {
7756-
@@ -437,8 +499,8 @@ ${flowData.code}
7756+
@@ -438,8 +500,8 @@ ${flowData.code}
77577757
return snippet;
77587758
}
77597759

@@ -7764,7 +7764,7 @@ index b1e72064..40f26bf1 100644
77647764
const members = struct.getMemberTypes();
77657765

77667766
for (let i = 0; i < members.length; i++) {
7767-
@@ -449,7 +511,7 @@ ${flowData.code}
7767+
@@ -450,7 +512,7 @@ ${flowData.code}
77687768
return snippets.join('\n');
77697769
}
77707770

@@ -7773,7 +7773,7 @@ index b1e72064..40f26bf1 100644
77737773
const snippets = [];
77747774
const structs = this.structs[shaderStage];
77757775

7776-
@@ -470,7 +532,7 @@ ${flowData.code}
7776+
@@ -471,7 +533,7 @@ ${flowData.code}
77777777
return snippets.join('\n\n');
77787778
}
77797779

@@ -7782,7 +7782,7 @@ index b1e72064..40f26bf1 100644
77827782
let snippet = '';
77837783

77847784
const varyings = this.varyings;
7785-
@@ -535,7 +597,7 @@ ${flowData.code}
7785+
@@ -540,7 +602,7 @@ ${flowData.code}
77867786
return 'gl_FragDepth';
77877787
}
77887788

@@ -7791,7 +7791,7 @@ index b1e72064..40f26bf1 100644
77917791
const map = this.extensions[shaderStage] || (this.extensions[shaderStage] = new Map());
77927792

77937793
if (map.has(name) === false) {
7794-
@@ -546,7 +608,7 @@ ${flowData.code}
7794+
@@ -551,7 +613,7 @@ ${flowData.code}
77957795
}
77967796
}
77977797

@@ -7800,17 +7800,17 @@ index b1e72064..40f26bf1 100644
78007800
const snippets = [];
78017801

78027802
if (shaderStage === 'vertex') {
7803-
@@ -569,7 +631,7 @@ ${flowData.code}
7804-
return snippets.join('\n');
7803+
@@ -578,7 +640,7 @@ ${flowData.code}
7804+
return 'gl_ClipDistance';
78057805
}
78067806

78077807
- isAvailable(name) {
78087808
+ isAvailable(name: string) {
78097809
let result = supports[name];
78107810

78117811
if (result === undefined) {
7812-
@@ -594,11 +656,11 @@ ${flowData.code}
7813-
return true;
7812+
@@ -621,11 +683,11 @@ ${flowData.code}
7813+
this.builtins['vertex'].push(`out float gl_ClipDistance[ ${planeCount} ]`);
78147814
}
78157815

78167816
- registerTransform(varyingName, attributeNode) {
@@ -7823,7 +7823,7 @@ index b1e72064..40f26bf1 100644
78237823
const transforms = this.transforms;
78247824

78257825
let snippet = '';
7826-
@@ -614,14 +676,14 @@ ${flowData.code}
7826+
@@ -641,14 +703,14 @@ ${flowData.code}
78277827
return snippet;
78287828
}
78297829

@@ -7840,7 +7840,7 @@ index b1e72064..40f26bf1 100644
78407840
return `#version 300 es
78417841

78427842
${this.getSignature()}
7843-
@@ -661,7 +723,7 @@ void main() {
7843+
@@ -688,7 +750,7 @@ void main() {
78447844
`;
78457845
}
78467846

@@ -7849,7 +7849,7 @@ index b1e72064..40f26bf1 100644
78497849
return `#version 300 es
78507850

78517851
${this.getSignature()}
7852-
@@ -693,19 +755,20 @@ void main() {
7852+
@@ -720,19 +782,20 @@ void main() {
78537853
}
78547854

78557855
buildCode() {
@@ -7874,7 +7874,7 @@ index b1e72064..40f26bf1 100644
78747874
const slotName = node.name;
78757875

78767876
if (slotName) {
7877-
@@ -731,28 +794,33 @@ void main() {
7877+
@@ -758,28 +821,33 @@ void main() {
78787878
}
78797879
}
78807880

@@ -7935,7 +7935,7 @@ index 36f987a9..8c774ec4 100644
79357935
}
79367936

79377937
diff --git a/src-testing/src/renderers/webgpu/nodes/WGSLNodeBuilder.ts b/src-testing/src/renderers/webgpu/nodes/WGSLNodeBuilder.ts
7938-
index 2b4d0266..f967399c 100644
7938+
index 615f446e..fa8d418a 100644
79397939
--- a/src-testing/src/renderers/webgpu/nodes/WGSLNodeBuilder.ts
79407940
+++ b/src-testing/src/renderers/webgpu/nodes/WGSLNodeBuilder.ts
79417941
@@ -10,7 +10,7 @@ import {
@@ -8100,7 +8100,7 @@ index 2b4d0266..f967399c 100644
81008100
const layout = shaderNode.layout;
81018101
const flowData = this.flowShaderNode(shaderNode);
81028102

8103-
@@ -689,8 +713,8 @@ ${flowData.code}
8103+
@@ -698,8 +722,8 @@ ${flowData.code}
81048104
return snippets.join('\n');
81058105
}
81068106

@@ -8111,7 +8111,7 @@ index 2b4d0266..f967399c 100644
81118111

81128112
if (shaderStage === 'compute') {
81138113
this.getBuiltin('global_invocation_id', 'id', 'vec3<u32>', 'attribute');
8114-
@@ -776,8 +800,8 @@ ${flowData.code}
8114+
@@ -785,8 +809,8 @@ ${flowData.code}
81158115
return `\n${snippets.join('\n')}\n`;
81168116
}
81178117

@@ -8122,7 +8122,7 @@ index 2b4d0266..f967399c 100644
81228122

81238123
if (shaderStage === 'vertex') {
81248124
this.getBuiltin('position', 'Vertex', 'vec4<f32>', 'vertex');
8125-
@@ -813,7 +837,7 @@ ${flowData.code}
8125+
@@ -822,7 +846,7 @@ ${flowData.code}
81268126
return shaderStage === 'vertex' ? this._getWGSLStruct('VaryingsStruct', '\t' + code) : code;
81278127
}
81288128

‎three.js

Submodule three.js updated 38 files

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ declare class NodeMaterial extends Material {
4242

4343
fog: boolean;
4444
lights: boolean;
45+
hardwareClipping: boolean;
4546

4647
lightsNode: LightsNode | null;
4748
envNode: Node | null;
@@ -72,6 +73,7 @@ declare class NodeMaterial extends Material {
7273
build(builder: NodeBuilder): void;
7374
setup(builder: NodeBuilder): void;
7475
setupClipping(builder: NodeBuilder): ClippingNode | null;
76+
setupHardwareClipping(builder: NodeBuilder): void;
7577
setupDepth(builder: NodeBuilder): void;
7678
setupPosition(builder: NodeBuilder): Node;
7779
setupDiffuseColor(builder: NodeBuilder): void;

‎types/three/src/nodes/accessors/BuiltinNode.d.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Node from "../core/Node.js";
2+
import { ShaderNodeObject } from "../tsl/TSLCore.js";
3+
4+
declare class BuiltinNode extends Node {
5+
name: string;
6+
7+
readonly isBuiltinNode: true;
8+
9+
constructor(name: string);
10+
}
11+
12+
export default BuiltinNode;
13+
14+
export const builtin: (name: string) => ShaderNodeObject<BuiltinNode>;

‎types/three/src/nodes/accessors/ClippingNode.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
1+
import { Plane } from "../../math/Plane.js";
12
import Node from "../core/Node.js";
3+
import NodeBuilder from "../core/NodeBuilder.js";
24
import { ShaderNodeObject } from "../tsl/TSLCore.js";
35

46
export type ClippingNodeScope = typeof ClippingNode.ALPHA_TO_COVERAGE | typeof ClippingNode.DEFAULT;
57

68
export default class ClippingNode extends Node {
79
scope: ClippingNodeScope;
810

11+
hardwareClipping?: boolean;
12+
913
constructor(scope?: ClippingNodeScope);
1014

1115
static ALPHA_TO_COVERAGE: "alphaToCoverage";
1216
static DEFAULT: "default";
17+
static HARDWARE: "hardware";
1318
}
1419

1520
export const clipping: () => ShaderNodeObject<ClippingNode>;
1621
export const clippingAlpha: () => ShaderNodeObject<ClippingNode>;
22+
export const hardwareClipping: () => ShaderNodeObject<ClippingNode>;

‎types/three/src/renderers/common/ClippingContext.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@ declare class ClippingContext {
2121
updateGlobal(scene: Scene, camera: Camera): void;
2222
update(parentContext: ClippingContext, clippingGroup: ClippingGroup): void;
2323
getGroupContext(clippingGroup: ClippingGroup): ClippingContext;
24+
get unionClippingCount(): number;
2425
}
2526
export default ClippingContext;

‎types/three/src/renderers/common/RenderObject.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export default class RenderObject {
6868
);
6969
updateClipping(parent: ClippingContext): void;
7070
get clippingNeedsUpdate(): boolean;
71+
get hardwareClippingPlanes(): number;
7172
getNodeBuilderState(): NodeBuilderState;
7273
getMonitor(): NodeMaterialObserver;
7374
getBindings(): BindGroup[];

‎types/three/src/renderers/webgl/WebGLState.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ declare class WebGLState {
6767
blendDstAlpha?: BlendingDstFactor,
6868
premultiplyAlpha?: boolean,
6969
): void;
70-
setMaterial(material: Material, frontFaceCW: boolean): void;
70+
setMaterial(material: Material, frontFaceCW: boolean, hardwareClippingPlanes: number): void;
7171
setFlipSided(flipSided: boolean): void;
7272
setCullFace(cullFace: CullFace): void;
7373
setLineWidth(width: number): void;

0 commit comments

Comments
 (0)