How to check if sprites overlap?

Questions
1

Hi,

I want to check if two or more sprites overlap each other. Is there a way to check if 2 or more sprites or objects3D do so?

Thx

2

Or can I, cause every sprite is added to a separate Object3D, check, if those overlap/intersect?

Something like:
var bbox = new THREE.Box3().setFromObject(self.markerContainer.children[0]);
var bbox1 = new THREE.Box3().setFromObject(self.markerContainer.children[1]);

if( bbox.intersectsBox( bbox1 ) ) //do something

3

I think what you are looking for is a technique called “Occlusion Query”. I suggest you google this topic and study the related articles or literature since it’s not a trivial implementation. With WebGL 2, it’s possible to implement occlusion queries more easily with API commands.

Example: https://tsherif.github.io/webgl2examples/occlusion.html

1 Like
4

Is that what I need for this. I tried setting up a fiddle:
https://jsfiddle.net/blackInk/1fcdp5qr/15/

The random distributed points (sprites) on the sphere can, ´cause being distributed randomly, possibly be on nearly the same coordinate or position or overlap.

Is there a way to check if they do (overlap or are too close to each other) and based on that, re-position the sprite(s)?

5

I’m a bit confused. The code you have shared has nothing to do with occlusion queries. I think you need exactly this technique.

6

Correct, by now has nothing to do with occlusion queries. Still I was hoping I could check with bbox.intersect or alike… hopeless?

7

Or is it possible to define some like a force (value), so each particle is not able to come closer to a certain defined distance xyz range to another particle, or even repel each other within a certain distance…