mrdoob · Mugen87 · Dec 15, 2023 · Dec 13, 2023 · Dec 13, 2023 · Dec 13, 2023
diff --git a/build/three.cjs b/build/three.cjs
diff --git a/build/three.js b/build/three.js
diff --git a/build/three.min.js b/build/three.min.js
diff --git a/build/three.module.js b/build/three.module.js
diff --git a/build/three.module.min.js b/build/three.module.min.js
diff --git a/examples/files.json b/examples/files.json
@@ -294,7 +294,8 @@
 		"webgl_shadowmap_pcss",
 		"webgl_shadowmap_progressive",
 		"webgl_simple_gi",
-		"webgl_worker_offscreencanvas"
+		"webgl_worker_offscreencanvas",
+		"webgl_clipculldistance"
 	],
 	"webgl2": [
 		"webgl2_buffergeometry_attributes_integer",

diff --git a/examples/screenshots/webgl_clipculldistance.jpg b/examples/screenshots/webgl_clipculldistance.jpg
diff --git a/examples/webgl_clipculldistance.html b/examples/webgl_clipculldistance.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>three.js webgl2 - 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="container"></div>
+
+    <div id="info">
+      <a
+        href="https://threejs.org"
+        target="_blank"
+        rel="noopener"
+        >three.js</a
+      >
+      - clip cull distance
+      <a
+        href="https://registry.khronos.org/webgl/extensions/EXT_clip_cull_distance/"
+        target="_blank"
+        rel="noopener"
+        >EXT_clip_cull_distance</a
+      >
+	  <div id="notSupported" style="display:none">WEBGL_clip_cull_distance not supported</div>
+    </div>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "../build/three.module.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';
+
+	let stats;
+	let camera, controls, scene, renderer;
+	let geometries, mesh, material;
+	const ids = [];
+	const matrix = new THREE.Matrix4();
+
+	//
+
+	const position = new THREE.Vector3();
+	const rotation = new THREE.Euler();
+	const quaternion = new THREE.Quaternion();
+	const scale = new THREE.Vector3();
+
+	const api = {
+		count: 10000,
+		clipCullExtension: true
+	};
+
+	const time = new THREE.Uniform( 0 );
+
+	//
+
+	init();
+	animate();
+
+	function init() {
+
+		const container = document.getElementById( 'container' );
+
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+
+		camera = new THREE.PerspectiveCamera( 70, width / height, 1, 100 );
+		camera.position.z = 30;
+
+		scene = new THREE.Scene();
+
+		renderer = new THREE.WebGLRenderer();
+		renderer.setPixelRatio( 1 );
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		container.appendChild( renderer.domElement );
+
+		if ( renderer.extensions.has( 'WEBGL_clip_cull_distance' ) === false ) {
+
+			document.getElementById( 'notSupported' ).style.display = '';
+			return;
+
+		}
+
+		// controls
+		controls = new OrbitControls( camera, renderer.domElement );
+
+		// stats
+		stats = new Stats();
+		document.body.appendChild( stats.dom );
+
+
+		const ext = renderer
+			.getContext()
+			.getExtension( 'WEBGL_clip_cull_distance' );
+		const gl = renderer.getContext();
+
+		gl.enable( ext.CLIP_DISTANCE0_WEBGL );
+
+
+		initGeometries();
+		initBatchedMesh();
+		onWindowResize();
+
+		window.addEventListener( 'resize', onWindowResize );
+
+	}
+
+	function onWindowResize() {
+
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+
+		renderer.setSize( window.innerWidth, window.innerHeight );
+
+	}
+
+	function randomizeMatrix( matrix ) {
+
+		position.x = Math.random() * 40 - 20;
+		position.y = Math.random() * 40 - 20;
+		position.z = Math.random() * 40 - 20;
+
+		rotation.x = Math.random() * 2 * Math.PI;
+		rotation.y = Math.random() * 2 * Math.PI;
+		rotation.z = Math.random() * 2 * Math.PI;
+
+		quaternion.setFromEuler( rotation );
+
+		scale.x = scale.y = scale.z = 0.5 + Math.random() * 0.5;
+
+		return matrix.compose( position, quaternion, scale );
+
+	}
+
+	function randomizeRotationSpeed( rotation ) {
+
+		rotation.x = Math.random() * 0.01;
+		rotation.y = Math.random() * 0.01;
+		rotation.z = Math.random() * 0.01;
+		return rotation;
+
+	}
+
+	function initGeometries() {
+
+		geometries = [
+			new THREE.ConeGeometry( 1.0, 2.0 ),
+			new THREE.BoxGeometry( 2.0, 2.0, 2.0 ),
+			new THREE.SphereGeometry( 1.0, 16, 8 ),
+		];
+
+	}
+
+	function initBatchedMesh() {
+
+		const geometryCount = api.count;
+		const vertexCount = api.count * 512;
+		const indexCount = api.count * 1024;
+
+		const euler = new THREE.Euler();
+		const matrix = new THREE.Matrix4();
+
+		material = new THREE.MeshNormalMaterial();
+		material.extensions = {
+			clipCullDistance: true,
+		};
+
+		material.onBeforeCompile = function ( shader ) {
+
+			shader.vertexShader = shader.vertexShader.replace(
+				'#include <common>',
+				`
+				#include <common>
+				uniform float time;
+				`
+			);
+			shader.vertexShader = shader.vertexShader.replace(
+				'#include <project_vertex>',
+				`
+				#include <project_vertex>
+				#ifdef USE_CLIP_DISTANCE
+					vec4 worldPosition = modelMatrix * batchingMatrix * vec4(transformed, 1.);
+					gl_ClipDistance[ 0 ] = worldPosition.x - sin(time) * (20. + 1.5);
+				#endif
+				`
+			);
+
+			shader.uniforms.time = time;
+
+		};
+
+		mesh = new THREE.BatchedMesh(
+			geometryCount,
+			vertexCount,
+			indexCount,
+			material
+		);
+		mesh.userData.rotationSpeeds = [];
+
+		mesh.isMesh = false;
+		mesh.isPoints = true;
+		mesh.frustumCulled = false;
+
+		ids.length = 0;
+
+		for ( let i = 0; i < api.count; i ++ ) {
+
+			const id = mesh.addGeometry( geometries[ i % geometries.length ] );
+			mesh.setMatrixAt( id, randomizeMatrix( matrix ) );
+
+			const rotationMatrix = new THREE.Matrix4();
+			rotationMatrix.makeRotationFromEuler( randomizeRotationSpeed( euler ) );
+			mesh.userData.rotationSpeeds.push( rotationMatrix );
+
+			ids.push( id );
+
+		}
+
+		scene.add( mesh );
+
+	}
+
+	function animateMeshes() {
+
+		const loopNum = Math.min( api.count, api.dynamic );
+
+		for ( let i = 0; i < loopNum; i ++ ) {
+
+			const rotationMatrix = mesh.userData.rotationSpeeds[ i ];
+			const id = ids[ i ];
+
+			mesh.getMatrixAt( id, matrix );
+			matrix.multiply( rotationMatrix );
+			mesh.setMatrixAt( id, matrix );
+
+		}
+
+	}
+	//
+
+	function animate() {
+
+		requestAnimationFrame( animate );
+
+		animateMeshes();
+		controls.update();
+		stats.update();
+		time.value = performance.now() * 0.001;
+
+		renderer.render( scene, camera );
+
+	}
+    </script>
+  </body>
+</html>
diff --git a/src/renderers/webgl/WebGLProgram.js b/src/renderers/webgl/WebGLProgram.js
@@ -147,6 +147,17 @@ function generateExtensions( parameters ) {
 
 }
 
+function generateVertexExtensions( parameters ) {
+
+	const chunks = [
+		parameters.extensionClipCullDistance ? '#extension GL_ANGLE_clip_cull_distance : require' : '',
+		parameters.extensionClipCullDistance ? '#extension GL_EXT_clip_cull_distance : enable' : '',
+	];
+
+	return chunks.filter( filterEmptyLine ).join( '\n' );
+
+}
+
 function generateDefines( defines ) {
 
 	const chunks = [];
@@ -451,6 +462,8 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 
 	const customExtensions = parameters.isWebGL2 ? '' : generateExtensions( parameters );
 
+	const customWebGLVertexExtensions = generateVertexExtensions( parameters );
+
 	const customDefines = generateDefines( defines );
 
 	const program = gl.createProgram();
@@ -503,6 +516,7 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 
 			customDefines,
 
+			parameters.extensionClipCullDistance ? '#define USE_CLIP_DISTANCE' : '',
 			parameters.batching ? '#define USE_BATCHING' : '',
 			parameters.instancing ? '#define USE_INSTANCING' : '',
 			parameters.instancingColor ? '#define USE_INSTANCING_COLOR' : '',
@@ -843,6 +857,7 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 		versionString = '#version 300 es\n';
 
 		prefixVertex = [
+			customWebGLVertexExtensions,
 			'precision mediump sampler2DArray;',
 			'#define attribute in',
 			'#define varying out',

diff --git a/src/renderers/webgl/WebGLPrograms.js b/src/renderers/webgl/WebGLPrograms.js
@@ -356,6 +356,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 			extensionFragDepth: HAS_EXTENSIONS && material.extensions.fragDepth === true,
 			extensionDrawBuffers: HAS_EXTENSIONS && material.extensions.drawBuffers === true,
 			extensionShaderTextureLOD: HAS_EXTENSIONS && material.extensions.shaderTextureLOD === true,
+			extensionClipCullDistance: HAS_EXTENSIONS && material.extensions.clipCullDistance && extensions.has( 'WEBGL_clip_cull_distance' ),
 
 			rendererExtensionFragDepth: IS_WEBGL2 || extensions.has( 'EXT_frag_depth' ),
 			rendererExtensionDrawBuffers: IS_WEBGL2 || extensions.has( 'WEBGL_draw_buffers' ),