diff --git a/examples/files.json b/examples/files.json
index 287f2130bdd0f3..8b87189ae72dae 100644
--- a/examples/files.json
+++ b/examples/files.json
@@ -304,6 +304,9 @@
 		"webgpu_centroid_sampling",
 		"webgpu_clearcoat",
 		"webgpu_clipping",
+		"webgpu_clipping_advanced",
+		"webgpu_clipping_hardware",
+		"webgpu_clipping_intersection",
 		"webgpu_compute_audio",
 		"webgpu_compute_birds",
 		"webgpu_compute_cloth",
diff --git a/examples/screenshots/webgpu_clipping_advanced.jpg b/examples/screenshots/webgpu_clipping_advanced.jpg
new file mode 100644
index 00000000000000..d108b19da7d58f
Binary files /dev/null and b/examples/screenshots/webgpu_clipping_advanced.jpg differ
diff --git a/examples/screenshots/webgpu_clipping_hardware.jpg b/examples/screenshots/webgpu_clipping_hardware.jpg
new file mode 100644
index 00000000000000..b79f658c802c9d
Binary files /dev/null and b/examples/screenshots/webgpu_clipping_hardware.jpg differ
diff --git a/examples/screenshots/webgpu_clipping_intersection.jpg b/examples/screenshots/webgpu_clipping_intersection.jpg
new file mode 100644
index 00000000000000..292521d4a5e2e2
Binary files /dev/null and b/examples/screenshots/webgpu_clipping_intersection.jpg differ
diff --git a/examples/tags.json b/examples/tags.json
index a598a395061dd1..dc570a7501e5d6 100644
--- a/examples/tags.json
+++ b/examples/tags.json
@@ -119,6 +119,8 @@
 	"webxr_xr_ballshooter": [ "physics" ],
 	"webgpu_clearcoat": [ "anisotropy" ],
 	"webgpu_clipping": [ "solid" ],
+	"webgpu_clipping_hardware": ["solid"],
+	"webgpu_clipping_intersection": ["solid"],
 	"webgpu_compute_audio": [ "gpgpu" ],
 	"webgpu_compute_birds": [ "gpgpu" ],
 	"webgpu_compute_geometry": [ "gpgpu" ],
diff --git a/examples/webgpu_clipping_advanced.html b/examples/webgpu_clipping_advanced.html
new file mode 100644
index 00000000000000..16b49445f0b80b
--- /dev/null
+++ b/examples/webgpu_clipping_advanced.html
@@ -0,0 +1,438 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - clipping planes - advanced</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/webgpu": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.tsl.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import Stats from 'three/addons/libs/stats.module.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+			import { ClippingGroup } from 'three/webgpu';
+
+			function planesFromMesh( vertices, indices ) {
+
+				// creates a clipping volume from a convex triangular mesh
+				// specified by the arrays 'vertices' and 'indices'
+
+				const n = indices.length / 3,
+					result = new Array( n );
+
+				for ( let i = 0, j = 0; i < n; ++ i, j += 3 ) {
+
+					const a = vertices[ indices[ j ] ],
+						b = vertices[ indices[ j + 1 ] ],
+						c = vertices[ indices[ j + 2 ] ];
+
+					result[ i ] = new THREE.Plane().
+						setFromCoplanarPoints( a, b, c );
+
+				}
+
+				return result;
+
+			}
+
+			function createPlanes( n ) {
+
+				// creates an array of n uninitialized plane objects
+
+				const result = new Array( n );
+
+				for ( let i = 0; i !== n; ++ i )
+					result[ i ] = new THREE.Plane();
+
+				return result;
+
+			}
+
+			function assignTransformedPlanes( planesOut, planesIn, matrix ) {
+
+				// sets an array of existing planes to transformed 'planesIn'
+
+				for ( let i = 0, n = planesIn.length; i !== n; ++ i )
+					planesOut[ i ].copy( planesIn[ i ] ).applyMatrix4( matrix );
+
+			}
+
+			function cylindricalPlanes( n, innerRadius ) {
+
+				const result = createPlanes( n );
+
+				for ( let i = 0; i !== n; ++ i ) {
+
+					const plane = result[ i ],
+						angle = i * Math.PI * 2 / n;
+
+					plane.normal.set(
+						Math.cos( angle ), 0, Math.sin( angle ) );
+
+					plane.constant = innerRadius;
+
+				}
+
+				return result;
+
+			}
+
+			const planeToMatrix = ( function () {
+
+				// creates a matrix that aligns X/Y to a given plane
+
+				// temporaries:
+				const xAxis = new THREE.Vector3(),
+					yAxis = new THREE.Vector3(),
+					trans = new THREE.Vector3();
+
+				return function planeToMatrix( plane ) {
+
+					const zAxis = plane.normal,
+						matrix = new THREE.Matrix4();
+
+					// Hughes & Moeller '99
+					// "Building an Orthonormal Basis from a Unit Vector."
+
+					if ( Math.abs( zAxis.x ) > Math.abs( zAxis.z ) ) {
+
+						yAxis.set( - zAxis.y, zAxis.x, 0 );
+
+					} else {
+
+						yAxis.set( 0, - zAxis.z, zAxis.y );
+
+					}
+
+					xAxis.crossVectors( yAxis.normalize(), zAxis );
+
+					plane.coplanarPoint( trans );
+					return matrix.set(
+						xAxis.x, yAxis.x, zAxis.x, trans.x,
+						xAxis.y, yAxis.y, zAxis.y, trans.y,
+						xAxis.z, yAxis.z, zAxis.z, trans.z,
+						0,	 0, 0, 1 );
+
+				};
+
+			} )();
+
+
+			// A regular tetrahedron for the clipping volume:
+
+			const Vertices = [
+					new THREE.Vector3( + 1, 0, + Math.SQRT1_2 ),
+					new THREE.Vector3( - 1, 0, + Math.SQRT1_2 ),
+					new THREE.Vector3( 0, + 1, - Math.SQRT1_2 ),
+					new THREE.Vector3( 0, - 1, - Math.SQRT1_2 )
+				],
+
+				Indices = [
+					0, 1, 2,	0, 2, 3,	0, 3, 1,	1, 3, 2
+				],
+
+				Planes = planesFromMesh( Vertices, Indices ),
+				PlaneMatrices = Planes.map( planeToMatrix ),
+
+				GlobalClippingPlanes = cylindricalPlanes( 5, 2.5 ),
+
+				Empty = Object.freeze( [] );
+
+
+			let camera, scene, renderer, startTime, stats;
+			let object, clipMaterial, volumeVisualization, globalClippingPlanes;
+			let localClippingGroup, globalClippingGroup;
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera(
+					36, window.innerWidth / window.innerHeight, 0.25, 16 );
+
+				camera.position.set( 0, 1.5, 3 );
+
+				scene = new THREE.Scene();
+
+				// Lights
+
+				scene.add( new THREE.AmbientLight( 0xffffff ) );
+
+				const spotLight = new THREE.SpotLight( 0xffffff, 60 );
+				spotLight.angle = Math.PI / 5;
+				spotLight.penumbra = 0.2;
+				spotLight.position.set( 2, 3, 3 );
+				spotLight.castShadow = true;
+				spotLight.shadow.camera.near = 3;
+				spotLight.shadow.camera.far = 10;
+				spotLight.shadow.mapSize.width = 1024;
+				spotLight.shadow.mapSize.height = 1024;
+				scene.add( spotLight );
+
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				dirLight.position.set( 0, 2, 0 );
+				dirLight.castShadow = true;
+				dirLight.shadow.camera.near = 1;
+				dirLight.shadow.camera.far = 10;
+
+				dirLight.shadow.camera.right = 1;
+				dirLight.shadow.camera.left = - 1;
+				dirLight.shadow.camera.top	= 1;
+				dirLight.shadow.camera.bottom = - 1;
+
+				dirLight.shadow.mapSize.width = 1024;
+				dirLight.shadow.mapSize.height = 1024;
+				scene.add( dirLight );
+
+				localClippingGroup = new ClippingGroup();
+				localClippingGroup.clippingPlanes = createPlanes( Planes.length );
+				localClippingGroup.clipShadows = true;
+
+				// Geometry
+
+				clipMaterial = new THREE.MeshPhongNodeMaterial( {
+					color: 0xee0a10,
+					shininess: 100,
+					side: THREE.DoubleSide,
+				} );
+
+				const count = 5 * 5 * 5;
+				const geometry = new THREE.BoxGeometry( 0.18, 0.18, 0.18 );
+				object = new THREE.InstancedMesh( geometry, clipMaterial, count );
+				object.castShadow = true;
+
+				let i = 0;
+				const matrix = new THREE.Matrix4();
+
+				for ( let z = - 2; z <= 2; ++ z )
+					for ( let y = - 2; y <= 2; ++ y )
+						for ( let x = - 2; x <= 2; ++ x ) {
+
+							matrix.setPosition( x / 5, y / 5, z / 5 );
+							object.setMatrixAt( i ++, matrix );
+
+						}
+
+				localClippingGroup.add( object );
+
+				scene.add( localClippingGroup );
+
+				const planeGeometry = new THREE.PlaneGeometry( 3, 3, 1, 1 ),
+
+					color = new THREE.Color();
+
+				volumeVisualization = new THREE.Group();
+				volumeVisualization.visible = false;
+
+				for ( let i = 0, n = Planes.length; i !== n; ++ i ) {
+
+
+					const material = new THREE.MeshBasicMaterial( {
+						color: color.setHSL( i / n, 0.5, 0.5 ).getHex(),
+						side: THREE.DoubleSide,
+						opacity: 0.2,
+						transparent: true,
+						clippingPlanes: localClippingGroup.clippingPlanes.filter( ( clipPlane, j ) => {
+
+							return j !== i;
+
+						} )
+					} );
+
+					const mesh = new THREE.Mesh( planeGeometry, material );
+					mesh.matrixAutoUpdate = false;
+
+					volumeVisualization.add( mesh );
+
+				}
+
+				scene.add( volumeVisualization );
+
+
+				const ground = new THREE.Mesh( planeGeometry,
+					new THREE.MeshPhongMaterial( {
+						color: 0xa0adaf, shininess: 10 } ) );
+				ground.rotation.x = - Math.PI / 2;
+				ground.scale.multiplyScalar( 3 );
+				ground.receiveShadow = true;
+
+				globalClippingGroup = new ClippingGroup();
+				globalClippingGroup.clippingPlanes = Empty;
+				globalClippingGroup.add( ground );
+				scene.add( globalClippingGroup );
+
+				// Renderer
+
+				const container = document.body;
+
+				renderer = new THREE.WebGPURenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.shadowMap.enabled = true;
+				container.appendChild( renderer.domElement );
+				// Clipping setup:
+				globalClippingPlanes = createPlanes( GlobalClippingPlanes.length );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+				// Stats
+
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+				// Controls
+
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 1;
+				controls.maxDistance = 8;
+				controls.target.set( 0, 1, 0 );
+				controls.update();
+
+				// GUI
+
+				const gui = new GUI(),
+					folder = gui.addFolder( 'Local Clipping' ),
+					props = {
+						get 'Enabled'() {
+
+							return localClippingGroup.enabled;
+
+						},
+						set 'Enabled'( v ) {
+
+							localClippingGroup.enabled = v;
+							if ( ! v ) volumeVisualization.visible = false;
+
+						},
+
+						get 'Shadows'() {
+
+							return localClippingGroup.clipShadows;
+
+						},
+						set 'Shadows'( v ) {
+
+							localClippingGroup.clipShadows = v;
+
+						},
+
+						get 'Visualize'() {
+
+							return volumeVisualization.visible;
+
+						},
+						set 'Visualize'( v ) {
+
+							volumeVisualization.visible = v;
+
+						}
+					};
+
+				folder.add( props, 'Enabled' );
+				folder.add( props, 'Shadows' );
+				folder.add( props, 'Visualize' ).listen();
+
+				gui.addFolder( 'Global Clipping' ).
+					add( {
+						get 'Enabled'() {
+
+							return globalClippingGroup.clippingPlanes !== Empty;
+
+						},
+						set 'Enabled'( v ) {
+
+							globalClippingGroup.clippingPlanes = v ? globalClippingPlanes : Empty;
+
+						}
+					}, 'Enabled' );
+
+
+				// Start
+
+				startTime = Date.now();
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function setObjectWorldMatrix( object, matrix ) {
+
+				// set the orientation of an object based on a world matrix
+
+				const parent = object.parent;
+				scene.updateMatrixWorld();
+				object.matrix.copy( parent.matrixWorld ).invert();
+				object.applyMatrix4( matrix );
+
+			}
+
+			const transform = new THREE.Matrix4(),
+				tmpMatrix = new THREE.Matrix4();
+
+			function animate() {
+
+				const currentTime = Date.now(),
+					time = ( currentTime - startTime ) / 1000;
+
+				object.position.y = 1;
+				object.rotation.x = time * 0.5;
+				object.rotation.y = time * 0.2;
+
+				object.updateMatrix();
+				transform.copy( object.matrix );
+
+				const bouncy = Math.cos( time * .5 ) * 0.5 + 0.7;
+				transform.multiply(
+					tmpMatrix.makeScale( bouncy, bouncy, bouncy ) );
+
+				assignTransformedPlanes(
+					localClippingGroup.clippingPlanes, Planes, transform );
+
+				const planeMeshes = volumeVisualization.children;
+
+				for ( let i = 0, n = planeMeshes.length; i !== n; ++ i ) {
+
+					tmpMatrix.multiplyMatrices( transform, PlaneMatrices[ i ] );
+					setObjectWorldMatrix( planeMeshes[ i ], tmpMatrix );
+
+				}
+
+				transform.makeRotationY( time * 0.1 );
+
+				assignTransformedPlanes( globalClippingPlanes, GlobalClippingPlanes, transform );
+
+				stats.begin();
+				renderer.render( scene, camera );
+				stats.end();
+
+			}
+
+			init();
+
+		</script>
+
+	</body>
+</html>
\ No newline at end of file
diff --git a/examples/webgpu_clipping_hardware.html b/examples/webgpu_clipping_hardware.html
new file mode 100644
index 00000000000000..3576ccd34bd691
--- /dev/null
+++ b/examples/webgpu_clipping_hardware.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js WebGL 2 - clip cull distance</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
+		<link type="text/css" rel="stylesheet" href="main.css" />
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener" >three.js</a> - vertex shader clipping via
+			<a href="https://registry.khronos.org/webgl/extensions/WEBGL_clip_cull_distance/" target="_blank" rel="noopener" >WEBGL_clip_cull_distance</a>
+			or <a href="https://www.w3.org/TR/WGSL/#built-in-values-clip_distances">clip-distances</a>
+			<div id="notSupported" style="display:none">WEBGL_clip_cull_distance not supported</div>
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/webgpu": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.tsl.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+			import * as THREE from 'three';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import Stats from 'three/addons/libs/stats.module.js';
+			import { attribute, uniform } from 'three/tsl';
+			import { ClippingGroup } from 'three/webgpu';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+			let camera, controls, scene, renderer, stats, gui, clock;
+			let xClippingPlane, yClippingPlane, zClippingPlane;
+
+			const effectController = {
+				xClip: uniform( 0.0 ),
+				yClip: uniform( - 0.5 ),
+				zClip: uniform( - 0.5 ),
+				showHelpers: false,
+				animate: true,
+			};
+
+			init();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
+				camera.position.z = 2;
+
+				scene = new THREE.Scene();
+				clock = new THREE.Clock();
+
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+			
+				// geometry
+
+				const vertexCount = 200 * 4;
+
+				const geometry = new THREE.BufferGeometry();
+
+				const positions = [];
+				const colors = [];
+
+				for ( let i = 0; i < vertexCount; i ++ ) {
+
+					// adding x,y,z
+					positions.push( Math.random() - 0.5 );
+					positions.push( Math.random() - 0.5 );
+					positions.push( Math.random() - 0.5 );
+
+					// adding r,g,b,a
+					colors.push( Math.random() * 255 );
+					colors.push( Math.random() * 255 );
+					colors.push( Math.random() * 255 );
+					colors.push( Math.random() * 255 );
+
+				}
+
+				const positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
+				const colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
+				colorAttribute.normalized = true;
+
+				geometry.setAttribute( 'position', positionAttribute );
+				geometry.setAttribute( 'color', colorAttribute );
+
+				const material = new THREE.MeshBasicNodeMaterial();
+
+				material.colorNode = attribute( 'color', 'vec4' );
+				material.transparent = true;
+
+				xClippingPlane = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), effectController.xClip.value );
+				yClippingPlane = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), - effectController.yClip.value );
+				zClippingPlane = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), - effectController.zClip.value );
+				const globalClippingGroup = new ClippingGroup();
+
+				// Visualize clipping plane
+				const helpers = new THREE.Group();
+				helpers.add( new THREE.PlaneHelper( xClippingPlane, 2, 0xff0000 ) );
+				helpers.add( new THREE.PlaneHelper( yClippingPlane, 2, 0x00ff00 ) );
+				helpers.add( new THREE.PlaneHelper( zClippingPlane, 2, 0x0000ff ) );
+				helpers.visible = false;
+				scene.add( helpers );
+
+				// User can apply eight union clipping planes that will be assigned
+				// to each backend's respective hardware clipping planes
+				globalClippingGroup.clippingPlanes = [ xClippingPlane, yClippingPlane, zClippingPlane ];
+
+				const mesh = new THREE.Mesh( geometry, material );
+				globalClippingGroup.add( mesh );
+				scene.add( globalClippingGroup );
+
+				controls = new OrbitControls( camera, renderer.domElement );
+
+				gui = new GUI();
+				const animateController = gui.add( effectController, 'animate' );
+				gui.add( effectController.xClip, 'value', - 0.5, 0.5, 0.01 ).name( 'X Plane' ).onChange( () => {
+
+					animateController.setValue( false );
+					xClippingPlane.constant = - effectController.xClip.value;
+
+				} );
+				gui.add( effectController.yClip, 'value', - 0.5, 0.5, 0.01 ).name( 'Y Plane' ).onChange( () => {
+
+					animateController.setValue( false );
+					yClippingPlane.constant = - effectController.yClip.value;
+
+				} );
+				gui.add( effectController.zClip, 'value', - 0.5, 0.5, 0.01 ).name( 'Z Plane' ).onChange( () => {
+
+					animateController.setValue( false );
+					zClippingPlane.constant = - effectController.zClip.value;
+
+				} );
+				gui.add( effectController, 'showHelpers' ).onChange( () => {
+
+					helpers.visible = true;
+
+				} );
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				controls.update();
+				stats.update();
+
+				if ( effectController.animate ) {
+
+					const change = Math.sin( clock.getElapsedTime() ) / 2;
+
+					xClippingPlane.constant = - change;
+					yClippingPlane.constant = - change;
+					zClippingPlane.constant = - change;
+
+				}
+
+				renderer.render( scene, camera );
+
+			}
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/examples/webgpu_clipping_intersection.html b/examples/webgpu_clipping_intersection.html
new file mode 100644
index 00000000000000..9ae8aaa6d518b5
--- /dev/null
+++ b/examples/webgpu_clipping_intersection.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - clipIntersection</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/webgpu": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.tsl.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { ClippingGroup } from 'three/webgpu';
+
+			let camera, scene, renderer;
+
+			const params = {
+				clipIntersection: true,
+				planeConstant: 0,
+				showHelpers: false,
+				alphaToCoverage: true,
+			};
+
+			const clipPlanes = [
+				new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 ),
+				new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ),
+				new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), 0 )
+			];
+
+			init();
+			render();
+
+			function init() {
+
+				scene = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
+
+				camera.position.set( - 1.5, 2.5, 3.0 );
+
+				const light = new THREE.HemisphereLight( 0xffffff, 0x080808, 4.5 );
+				light.position.set( - 1.25, 1, 1.25 );
+				scene.add( light );
+
+				//
+
+				const spheresGroup = new THREE.Group();
+				const clippingGroup = new ClippingGroup();
+				clippingGroup.clippingPlanes = clipPlanes;
+
+				for ( let i = 1; i <= 30; i += 2 ) {
+
+					const geometry = new THREE.SphereGeometry( i / 30, 48, 24 );
+
+					const material = new THREE.MeshPhongNodeMaterial( {
+
+						color: new THREE.Color().setHSL( Math.random(), 0.5, 0.5, THREE.SRGBColorSpace ),
+						side: THREE.DoubleSide,
+						alphaToCoverage: true,
+
+					} );
+
+					spheresGroup.add( new THREE.Mesh( geometry, material ) );
+
+				}
+
+				clippingGroup.add( spheresGroup );
+
+				scene.add( clippingGroup );
+
+				// helpers
+
+				const helpers = new THREE.Group();
+				helpers.add( new THREE.PlaneHelper( clipPlanes[ 0 ], 2, 0xff0000 ) );
+				helpers.add( new THREE.PlaneHelper( clipPlanes[ 1 ], 2, 0x00ff00 ) );
+				helpers.add( new THREE.PlaneHelper( clipPlanes[ 2 ], 2, 0x0000ff ) );
+				helpers.visible = false;
+				scene.add( helpers );
+
+				// gui
+
+				const gui = new GUI();
+
+				gui.add( params, 'alphaToCoverage' ).onChange( function ( value ) {
+
+					spheresGroup.children.forEach( c => {
+
+						c.material.alphaToCoverage = Boolean( value );
+						c.material.needsUpdate = true;
+
+					} );
+
+				} );
+
+				gui.add( params, 'clipIntersection' ).name( 'clip intersection' ).onChange( function ( value ) {
+
+					clippingGroup.clipIntersection = value;
+			
+				} );
+
+				gui.add( params, 'planeConstant', - 1, 1 ).step( 0.01 ).name( 'plane constant' ).onChange( function ( value ) {
+
+					for ( let j = 0; j < clipPlanes.length; j ++ ) {
+
+						clipPlanes[ j ].constant = value;
+
+					}
+
+				} );
+
+				gui.add( params, 'showHelpers' ).name( 'show helpers' ).onChange( function ( value ) {
+
+					helpers.visible = value;
+
+				} );
+
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				//renderer.localClippingEnabled = true;
+				renderer.setAnimationLoop( render );
+				document.body.appendChild( renderer.domElement );
+
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.addEventListener( 'change', render ); // use only if there is no animation loop
+				controls.minDistance = 1;
+				controls.maxDistance = 10;
+				controls.enablePan = false;
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
