clipping groups

mrdoob · Apr 29, 2024 · 55d04d6 · 55d04d6
1 parent aedb9c7
commit 55d04d6
Show file tree

Hide file tree

Showing 9 changed files with 335 additions and 40 deletions.
diff --git a/examples/files.json b/examples/files.json
@@ -311,6 +311,7 @@
 		"webgpu_camera_logarithmicdepthbuffer",
 		"webgpu_clearcoat",
 		"webgpu_clipping",
+		"webgpu_clipping_groups",
 		"webgpu_compute_audio",
 		"webgpu_compute_geometry",
 		"webgpu_compute_particles",

diff --git a/examples/jsm/renderers/common/ClippingContext.js b/examples/jsm/renderers/common/ClippingContext.js
@@ -2,6 +2,7 @@ import { Matrix3, Plane, Vector4 } from 'three';
 
 const _plane = new Plane();
 const _viewNormalMatrix = new Matrix3();
+const _clippingGroupContexts = new WeakMap();
 
 let _clippingContextVersion = 0;
 
@@ -13,10 +14,12 @@ class ClippingContext {
 
 		this.globalClippingCount = 0;
 
-		this.localClippingCount = 0;
+		this._localClippingCount = 0;
 		this.localClippingEnabled = false;
 		this.localClipIntersection = false;
 
+		this.offset = 0;
+
 		this.planes = [];
 
 		this.parentVersion = 0;
@@ -39,7 +42,6 @@ class ClippingContext {
 			v.y = - normal.y;
 			v.z = - normal.z;
 			v.w = _plane.constant;
-
 		}
 
 	}
@@ -106,7 +108,8 @@ class ClippingContext {
 			this.planes = Array.from( parent.planes );
 			this.parentVersion = parent.version;
 			this.viewMatrix = parent.viewMatrix;
-
+			this.offset = parent._localClippingCount + parent.offset;
+			this.isGroup = material.isClippingGroup;
 
 			update = true;
 
@@ -120,9 +123,9 @@ class ClippingContext {
 
 				const l = localClippingPlanes.length;
 				const planes = this.planes;
-				const offset = this.globalClippingCount;
+				const offset = this.globalClippingCount + this.offset;
 
-				if ( update || l !== this.localClippingCount ) {
+				if ( update || l !== this._localClippingCount ) {
 
 					planes.length = offset + l;
 
@@ -132,17 +135,17 @@ class ClippingContext {
 
 					}
 
-					this.localClippingCount = l;
+					this._localClippingCount = l;
 					update = true;
 
 				}
 
 				this.projectPlanes( localClippingPlanes, offset );
 
 
-			} else if ( this.localClippingCount !== 0 ) {
+			} else if ( this._localClippingCount !== 0 ) {
 
-				this.localClippingCount = 0;
+				this._localClippingCount = 0;
 				update = true;
 
 			}
@@ -160,6 +163,29 @@ class ClippingContext {
 
 	}
 
+	get localClippingCount() {
+
+		return this.localClippingEnabled ? this._localClippingCount + this.offset : 0;
+
+	}
+
+	static getGroupContext( clippingGroup, parentContext ) {
+
+		let context = _clippingGroupContexts.get( clippingGroup );
+
+		if ( context === undefined ) {
+
+			context = new ClippingContext()
+			_clippingGroupContexts.set( clippingGroup, context );
+
+		}
+
+		context.update( parentContext, clippingGroup );
+
+		return context;
+
+	}
+
 }
 
 export default ClippingContext;
diff --git a/examples/jsm/renderers/common/ClippingGroup.js b/examples/jsm/renderers/common/ClippingGroup.js
@@ -0,0 +1,17 @@
+import { Group } from 'three';
+
+class ClippingGroup extends Group {
+
+
+    constructor() {
+
+        super();
+
+        this.isClippingGroup = true;
+        this.clippingPlanes = [];
+
+    }
+
+}
+
+export default ClippingGroup;
diff --git a/examples/jsm/renderers/common/RenderList.js b/examples/jsm/renderers/common/RenderList.js
@@ -79,7 +79,7 @@ class RenderList {
 
 	}
 
-	getNextRenderItem( object, geometry, material, groupOrder, z, group ) {
+	getNextRenderItem( object, geometry, material, groupOrder, z, group, clippingContext ) {
 
 		let renderItem = this.renderItems[ this.renderItemsIndex ];
 
@@ -93,7 +93,8 @@ class RenderList {
 				groupOrder: groupOrder,
 				renderOrder: object.renderOrder,
 				z: z,
-				group: group
+				group: group,
+				clippingContext: clippingContext
 			};
 
 			this.renderItems[ this.renderItemsIndex ] = renderItem;
@@ -108,6 +109,7 @@ class RenderList {
 			renderItem.renderOrder = object.renderOrder;
 			renderItem.z = z;
 			renderItem.group = group;
+			renderItem.clippingContext = clippingContext;
 
 		}
 
@@ -117,19 +119,19 @@ class RenderList {
 
 	}
 
-	push( object, geometry, material, groupOrder, z, group ) {
+	push( object, geometry, material, groupOrder, z, group, clippingContext) {
 
-		const renderItem = this.getNextRenderItem( object, geometry, material, groupOrder, z, group );
+		const renderItem = this.getNextRenderItem( object, geometry, material, groupOrder, z, group, clippingContext );
 
 		if ( object.occlusionTest === true ) this.occlusionQueryCount ++;
 
 		( material.transparent === true || material.transmission > 0 ? this.transparent : this.opaque ).push( renderItem );
 
 	}
 
-	unshift( object, geometry, material, groupOrder, z, group ) {
+	unshift( object, geometry, material, groupOrder, z, group, clippingContext ) {
 
-		const renderItem = this.getNextRenderItem( object, geometry, material, groupOrder, z, group );
+		const renderItem = this.getNextRenderItem( object, geometry, material, groupOrder, z, group, clippingContext );
 
 		( material.transparent === true ? this.transparent : this.opaque ).unshift( renderItem );
 
@@ -176,6 +178,7 @@ class RenderList {
 			renderItem.renderOrder = null;
 			renderItem.z = null;
 			renderItem.group = null;
+			renderItem.clippingContext = null;
 
 		}
 

diff --git a/examples/jsm/renderers/common/RenderObject.js b/examples/jsm/renderers/common/RenderObject.js
@@ -38,7 +38,7 @@ function getKeys( obj ) {
 
 export default class RenderObject {
 
-	constructor( nodes, geometries, renderer, object, material, scene, camera, lightsNode, renderContext ) {
+	constructor( nodes, geometries, renderer, object, material, scene, camera, lightsNode, renderContext, clippingContext ) {
 
 		this._nodes = nodes;
 		this._geometries = geometries;
@@ -62,7 +62,7 @@ export default class RenderObject {
 		this.pipeline = null;
 		this.vertexBuffers = null;
 
-		this.updateClipping( renderContext.clippingContext );
+		this.updateClipping( clippingContext );
 
 		this.clippingContextVersion = this.clippingContext.version;
 

diff --git a/examples/jsm/renderers/common/RenderObjects.js b/examples/jsm/renderers/common/RenderObjects.js
@@ -16,7 +16,7 @@ class RenderObjects {
 
 	}
 
-	get( object, material, scene, camera, lightsNode, renderContext, passId ) {
+	get( object, material, scene, camera, lightsNode, renderContext, clippingContext, passId ) {
 
 		const chainMap = this.getChainMap( passId );
 		const chainArray = [ object, material, renderContext, lightsNode ];
@@ -25,21 +25,21 @@ class RenderObjects {
 
 		if ( renderObject === undefined ) {
 
-			renderObject = this.createRenderObject( this.nodes, this.geometries, this.renderer, object, material, scene, camera, lightsNode, renderContext, passId );
+			renderObject = this.createRenderObject( this.nodes, this.geometries, this.renderer, object, material, scene, camera, lightsNode, renderContext, clippingContext, passId );
 
 			chainMap.set( chainArray, renderObject );
 
 		} else {
 
-			renderObject.updateClipping( renderContext.clippingContext );
+			renderObject.updateClipping( clippingContext );
 
 			if ( renderObject.version !== material.version || renderObject.needsUpdate ) {
 
 				if ( renderObject.initialCacheKey !== renderObject.getCacheKey() ) {
 
 					renderObject.dispose();
 
-					renderObject = this.get( object, material, scene, camera, lightsNode, renderContext, passId );
+					renderObject = this.get( object, material, scene, camera, lightsNode, renderContext, clippingContext, passId );
 
 				} else {
 
@@ -67,11 +67,11 @@ class RenderObjects {
 
 	}
 
-	createRenderObject( nodes, geometries, renderer, object, material, scene, camera, lightsNode, renderContext, passId ) {
+	createRenderObject( nodes, geometries, renderer, object, material, scene, camera, lightsNode, renderContext, clippingContext, passId ) {
 
 		const chainMap = this.getChainMap( passId );
 
-		const renderObject = new RenderObject( nodes, geometries, renderer, object, material, scene, camera, lightsNode, renderContext );
+		const renderObject = new RenderObject( nodes, geometries, renderer, object, material, scene, camera, lightsNode, renderContext, clippingContext );
 
 		renderObject.onDispose = () => {