mrdoob · nipmarsh · Oct 23, 2020 · Oct 23, 2020 · Oct 23, 2020 · Oct 26, 2020
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/examples/files.json b/examples/files.json
@@ -202,6 +202,7 @@
 		"webgl_points_dynamic",
 		"webgl_points_sprites",
 		"webgl_points_waves",
+		"webgl_occlusion_queries",
 		"webgl_raycast_sprite",
 		"webgl_raycast_texture",
 		"webgl_read_float_buffer",

diff --git a/examples/screenshots/webgl_occlusion_queries.jpg b/examples/screenshots/webgl_occlusion_queries.jpg
diff --git a/examples/webgl_occlusion_queries.html b/examples/webgl_occlusion_queries.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - Occlusion queries</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> - Occlusion queries
+		</div>
+
+		<script type="module">
+
+			import * as THREE from '../build/three.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			let camera, controls, scene, dirLight, mixer, renderer;
+			var stats, gui, guiStatsEl;
+
+			const container = document.createElement( 'div' );
+			document.body.appendChild( container );
+
+			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+			camera.position.set( 5, 2, 8 );
+
+			var clock = new THREE.Clock();
+
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.occlusionCulling = true;
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.outputEncoding = THREE.sRGBEncoding;
+			container.appendChild( renderer.domElement );
+
+			controls = new OrbitControls( camera, renderer.domElement );
+			controls.target.set( 0, 0.5, 0 );
+			controls.update();
+			controls.enablePan = false;
+			controls.enableDamping = true;
+
+			// scene
+
+			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0xbfe3dd );
+
+			scene.add( new THREE.HemisphereLight( 0xffffff, 0x000000, 0.4 ) );
+
+			dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+			dirLight.position.set( 5, 2, 8 );
+			scene.add( dirLight );
+
+			// envmap
+			var path = 'textures/cube/Park2/';
+			var format = '.jpg';
+			var envMap = new THREE.CubeTextureLoader().load( [
+				path + 'posx' + format, path + 'negx' + format,
+				path + 'posy' + format, path + 'negy' + format,
+				path + 'posz' + format, path + 'negz' + format
+			] );
+
+			var dracoLoader = new DRACOLoader();
+			dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
+
+			var loader = new GLTFLoader();
+			loader.setDRACOLoader( dracoLoader );
+			loader.load( 'models/gltf/LittlestTokyo.glb', function ( gltf ) {
+
+				var model = gltf.scene;
+				model.position.set( 1, 1, 0 );
+				model.scale.set( 0.01, 0.01, 0.01 );
+				model.traverse( function ( child ) {
+
+					if ( child.isMesh ) child.material.envMap = envMap;
+
+				} );
+
+				scene.add( model );
+
+				mixer = new THREE.AnimationMixer( model );
+				mixer.clipAction( gltf.animations[ 0 ] ).play();
+
+				animate();
+
+			}, undefined, function ( e ) {
+
+				console.error( e );
+
+			} );
+
+			var api = {
+				occlusionCulling: true,
+			};
+
+			stats = new Stats();
+			container.appendChild( stats.dom );
+
+			gui = new GUI();
+
+			gui.add( renderer, 'occlusionCulling' ).name( 'Enable Occlusion Culling' );
+			guiStatsEl = document.createElement( 'li' );
+			guiStatsEl.classList.add( 'gui-stats' );
+			gui.__ul.appendChild( guiStatsEl );
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				var delta = clock.getDelta();
+
+				mixer.update( delta );
+
+				controls.update();
+
+				stats.update();
+
+				renderer.render( scene, camera );
+
+				var renderList = renderer.renderLists.get( scene, camera );
+				var opaque = renderList.opaque;
+				var transparent = renderList.transparent;
+
+				if ( renderer.occlusionCulling ) {
+
+					opaque = opaque.filter( function( renderItem ) {
+
+						return renderItem.object._occluded === false;
+
+					} );
+
+					transparent = transparent.filter( function( renderItem ) {
+
+						return renderItem.object._occluded === false;
+
+					} );
+
+				}
+
+				guiStatsEl.innerHTML = [
+
+					'<i>Visible objects</i>: ' + ( opaque.length + transparent.length ),
+
+				].join( '<br/>' );
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/src/renderers/WebGLRenderer.d.ts b/src/renderers/WebGLRenderer.d.ts
@@ -206,6 +206,11 @@ export class WebGLRenderer implements Renderer {
 	 */
 	maxMorphNormals: number;
 
+	/**
+	 * @default false
+	 */
+	occlusionCulling: boolean;
+
 	info: WebGLInfo;
 
 	shadowMap: WebGLShadowMap;

diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
@@ -10,6 +10,7 @@ import { MathUtils } from '../math/MathUtils.js';
 import { DataTexture } from '../textures/DataTexture.js';
 import { Frustum } from '../math/Frustum.js';
 import { Matrix4 } from '../math/Matrix4.js';
+import { ShaderMaterial } from '../materials/ShaderMaterial.js';
 import { Vector2 } from '../math/Vector2.js';
 import { Vector3 } from '../math/Vector3.js';
 import { Vector4 } from '../math/Vector4.js';
@@ -55,6 +56,23 @@ function WebGLRenderer( parameters ) {
 		_powerPreference = parameters.powerPreference !== undefined ? parameters.powerPreference : 'default',
 		_failIfMajorPerformanceCaveat = parameters.failIfMajorPerformanceCaveat !== undefined ? parameters.failIfMajorPerformanceCaveat : false;
 
+	const _occlusionQueryMaterial = new ShaderMaterial( {
+
+		vertexShader: " \
+		void main() { \
+			gl_Position = projectionMatrix  * modelViewMatrix * vec4(position, 1.0); \
+		}",
+
+		fragmentShader: " \
+		void main() { \
+			gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); \
+		}",
+
+		depthWrite: false,
+		colorWrite: false
+
+	} );
+
 	let currentRenderList = null;
 	let currentRenderState = null;
 
@@ -107,6 +125,9 @@ function WebGLRenderer( parameters ) {
 	this.maxMorphTargets = 8;
 	this.maxMorphNormals = 4;
 
+	// occlusion culling
+	this.occlusionCulling = false;
+
 	// internal properties
 
 	const _this = this;
@@ -593,6 +614,7 @@ function WebGLRenderer( parameters ) {
 		bindingStates.dispose();
 
 		xr.dispose();
+		_occlusionQueryMaterial.dispose();
 
 		animation.stop();
 
@@ -1026,6 +1048,30 @@ function WebGLRenderer( parameters ) {
 
 		}
 
+
+		let opaqueObjects = currentRenderList.opaque;
+		let transparentObjects = currentRenderList.transparent;
+		// occlusion culling
+
+		if ( _this.capabilities.isWebGL2 === true && _this.occlusionCulling === true ) {
+
+			if ( opaqueObjects.length > 0 ) renderOcclusionQueryObjects( opaqueObjects, scene, camera );
+			if ( transparentObjects.length > 0 ) renderOcclusionQueryObjects( transparentObjects, scene, camera );
+
+			opaqueObjects = opaqueObjects.filter( function ( renderItem ) {
+
+				return ! renderItem.object._occluded;
+
+			} );
+
+			transparentObjects = transparentObjects.filter( function ( renderItem ) {
+
+				return ! renderItem.object._occluded;
+
+			} );
+
+		}
+
 		//
 
 		if ( _clippingEnabled === true ) clipping.beginShadows();
@@ -1054,9 +1100,6 @@ function WebGLRenderer( parameters ) {
 
 		// render scene
 
-		const opaqueObjects = currentRenderList.opaque;
-		const transparentObjects = currentRenderList.transparent;
-
 		if ( opaqueObjects.length > 0 ) renderObjects( opaqueObjects, scene, camera );
 		if ( transparentObjects.length > 0 ) renderObjects( transparentObjects, scene, camera );
 
@@ -1294,6 +1337,75 @@ function WebGLRenderer( parameters ) {
 
 	}
 
+	function renderOcclusionQueryObjects( renderList, scene, camera ) {
+
+		for ( let i = 0, l = renderList.length; i < l; i ++ ) {
+
+			const renderItem = renderList[ i ];
+
+			if ( renderItem.material.depthWrite === false ) continue;
+
+			const object = renderItem.object;
+			const geometry = renderItem.geometry;
+			const material = _occlusionQueryMaterial;
+			const group = renderItem.group;
+
+			if ( ! object._query ) {
+
+				object._query = _gl.createQuery();
+				object._queryInProgress = false;
+
+			}
+
+			object._occluded = false;
+			if ( object._queryInProgress && _gl.getQueryParameter( object._query, _gl.QUERY_RESULT_AVAILABLE ) ) {
+
+				object._occluded = _gl.getQueryParameter( object._query, _gl.QUERY_RESULT ) === 0;
+				object._queryInProgress = false;
+
+			}
+
+			if ( ! object._queryInProgress ) {
+
+				_gl.beginQuery( _gl.ANY_SAMPLES_PASSED_CONSERVATIVE, object._query );
+
+				if ( camera.isArrayCamera ) {
+
+					_currentArrayCamera = camera;
+
+					const cameras = camera.cameras;
+
+					for ( let j = 0, jl = cameras.length; j < jl; j ++ ) {
+
+						const camera2 = cameras[ j ];
+
+						if ( object.layers.test( camera2.layers ) ) {
+
+							state.viewport( _currentViewport.copy( camera2.viewport ) );
+
+							renderObject( object, scene, camera2, geometry, material, group );
+
+						}
+
+					}
+
+				} else {
+
+					_currentArrayCamera = null;
+
+					renderObject( object, scene, camera, geometry, material, group );
+
+				}
+
+				_gl.endQuery( _gl.ANY_SAMPLES_PASSED_CONSERVATIVE );
+				object._queryInProgress = true;
+
+			}
+
+		}
+
+	}
+
 	function initMaterial( material, scene, object ) {
 
 		if ( scene.isScene !== true ) scene = _emptyScene; // scene could be a Mesh, Line, Points, ...

diff --git a/utils/build/rollup.config.js b/utils/build/rollup.config.js
@@ -154,7 +154,11 @@ function glconstants() {
 		UNPACK_PREMULTIPLY_ALPHA_WEBGL: 37441,
 		MAX_SAMPLES: 36183,
 		READ_FRAMEBUFFER: 36008,
-		DRAW_FRAMEBUFFER: 36009
+		DRAW_FRAMEBUFFER: 36009,
+		QUERY_RESULT_AVAILABLE: 34919,
+		QUERY_RESULT: 34918,
+		ANY_SAMPLES_PASSED_CONSERVATIVE: 36202,
+		ANY_SAMPLES_PASSED: 35887
 	};
 
 	return {