How to display clipped thininstances (boxes) as solid

Questions
,
1

I want to display several hundred thousands of boxes (maybe millions) of various sizes and colours (but all in the same orientation) and thininstances seems to work really well for this.

However, I want an option to use clipping planes, and when the thininstances are clipped, I want the intersection of the boxes with the planes to be filled in, with their own colour, so they still appear solid. The clipping planes might be at any orientation and the plane normals might not be orthogonal to the boxes. There might be just one or two parallel clipping planes.

A simple illustrative data example of just 10 boxes and two clipping planes is here:

[ https://playground.babylonjs.com/#SAQ3YA#4 ] (https://playground.babylonjs.com/#SAQ3YA#4)

I have struggled with using stencils and am not even sure this approach can be used with thin instances.

Can anyone tell me the correct approach, would a CSG approach work (bearing in mind the number of boxes) or do I have to revert to calculating the polygons of intersection myself. If calculating the intersection, I am probably OK with the maths to do the calculation but I don’t know the best way to construct/architect and minimize the calculations within the BJS framework.

Or perhaps some other approach is possible.

I’ve had a look at similar questions but they all seem to relate to a single mesh and don’t address the multi-colour aspect of my requirement. (e.g. https://www.babylonjs-playground.com/#95MJI8#178 , https://www.babylonjs-playground.com/#M3RNVC#6 , https://playground.babylonjs.com/#95RAN4#4 )

Any help would be much appreciated as I’m new to BJS.

2

@sebavan, @Deltakosh - any thoughts on this one?

3

I removed popov from the loop :slight_smile:

4

I can not think of any easy way to do it at scale.

5

The stencil buffer as used in PG can work, but all boxes will be filled with the same color:

If you want to use a specific “inside” color for each box, you can do it this way:

1 Like
6

Thanks for such a fast response - that’s impressive!

It’s tantalisingly close but not what I require. I need the plane to be coloured with same colour as the boxes. However despite there being a large number of boxes there won’t be many colours used, perhaps only a dozen or so unique colours. I still want the boxes clipped rather than split, so not visible “above” the clipping plane, but I want the intersection with plane and box coloured so the clipped part looks solid.

Do you think that is possible with this approach?

If I need to calculate the polygon intersection manually when the plane changes, I’d need some help to identify as quickly as possible the boxes that intersect the plane - only a small proportion of them would intersect with a plane at any one time. I assume I could fill the polygons. Perhaps that’s a question for a separate post?

Again, I’m new to BJS and already have some great output, but I am appreciative of this response to my first ever question!

7

I notice I missed to add the clip plane to the boxInsideMaterial material:

Is this better?

8

This looks great! Many thanks. I’m looking forward to testing it out properly. Thanks again!