WebGL2 Occlusion Queries feature #15450

simon-paris · 2018-12-19T09:00:59Z

Example: https://raw.githack.com/simon-paris/three.js/occlusion-queries-with-build/examples/webgl_occlusionqueries.html

Documentation: https://raw.githack.com/simon-paris/three.js/occlusion-queries-with-build/docs/api/en/objects/OcclusionQueryMesh.html

This change integrates WebGL2 queries into the renderer, allowing occlusion querying like this:

var queryMesh = new THREE.OcclusionQueryMesh(
	new THREE.BoxBufferGeometry( 1, 1, 1 ),
	new THREE.MeshBasicMaterial( { depthWrite: false, colorWrite: false } )
);
queryMesh.frustumCulled = false;
queryMesh.renderOrder = Infinity;
var highestFrame = 0;
queryMesh.occlusionQueryCallback = function ( result, frame, camera ) {

	if ( camera === myMainCamera && frame > highestFrame ) {
		highestFrame = frame;
		doStuff( result ); // queryMesh was visible if result === true
	}

};
scene.add( queryMesh );

Hope you like it

examples/webgl_occlusionqueries.html

Mugen87 · 2018-12-19T11:06:48Z

src/objects/OcclusionQueryMesh.js

+ * @author simon paris / https://github.com/simon-paris
+ */
+
+function OcclusionQueryMesh() {


If you introduce a new object type, it's necessary to adjust ObjectLoader and Object3D.toJSON() so it's possible to serialize/deserialize a scene with objects of type OcclusionQueryMesh.

Since OcclusionQueryMesh has a callback function property, and also needs to be disposed properly, would it be acceptable to leave serialization unsupported and just print a warning?

Um, I see what you mean. Let me think about this...

src/objects/OcclusionQueryMesh.js

Mugen87 · 2018-12-20T10:46:48Z

Have you considered to choose a different API style similar to BabylonJS? Objects have a property isOccluded which indicates whether the mesh is occluded or not. If you assign a specific value to occlusiontype, an occlusion query is configured for the respective object. You can now evaluate isOccluded e.g. in your render loop and react accordingly. Check out this approach right here:

https://www.babylonjs-playground.com/#QDAZ80#5

Mugen87 · 2018-12-20T11:13:34Z

I personally tend to prefer such an API since it feels easier to use. I'm curious how others think about this 😇

simon-paris · 2018-12-21T03:47:08Z

Can I instead output the result by pushing it to an array?

If I output the result as a single boolean, you wouldn't get a result for each frame. A guarantee to get one output for each frame rendered would be useful for some people. A single boolean also wouldn't work with multi-camera setups.

For the serialization problem, I could always deserialize it into a disabled state? Then programs that aren't aware of the occlusion query don't have to worry about leaks or disposal.

Mugen87 · 2018-12-21T09:36:01Z

A guarantee to get one output for each frame rendered would be useful for some people. A single boolean also wouldn't work with multi-camera setups.

I like to keep things simple. I would prefer an API that is easy to use and covers 90% of use cases. Better than a more complex one which also regards edge cases. A single boolean value for 3d objects should be sufficient for most scenarios even for VR applications.

But like I said before, this is just my opinion. Let's see how others think about the API style.

Ben-Mack · 2019-01-28T23:38:42Z

Any update on this? This would be a great feature for Three.js.

mrdoob · 2019-01-30T19:38:31Z

Do you mind resolving the rollup.config.js conflicts?

simon-paris · 2019-03-13T10:17:53Z

Sorry! I've been busy at work.

I've resolved the conflict.

luisfonsivevo · 2024-02-02T02:45:53Z

Hi! I come from the future where #26335 has been merged. It'd be great to have occlusion queries for WebGL as well since WebGPU isn't widely supported yet. I haven't looked at how either PR is implemented yet, but I'm sure this PR could use some polishing to get it up to the same standard as the WebGPU version. We're willing to allocate some development time to this project if anyone's interested. @mrdoob @Mugen87

LeviPesin · 2024-02-02T12:18:59Z

"WebGPURenderer" is a confusing name for the universal renderer that works for both WebGPU and WebGL2. You can try replacing WebGLRenderer in your project with it.

Mugen87 · 2024-10-24T10:01:21Z

Occlusion queries have been implemented in WebGPURenderer for the WebGPU and WebGL 2 backend.

https://threejs.org/examples/webgpu_occlusion

Since we want to focus on the development of WebGPURenderer with its new architecture and node material system, occlusion queries are not going to be implemented for WebGLRenderer.