# How to display clipped thininstances (boxes) as solid **URL:** \ **Category:** Questions\ **Tags:** thininstances, intersection\ **Created:** [June 28, 2024, 2:59pm UTC](https://forum.babylonjs.com/t/how-to-display-clipped-thininstances-boxes-as-solid/51661 "2024-06-28T14:59:33Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![SamD](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@SamD](https://forum.babylonjs.com/u/SamD)\ **Post date:** [June 28, 2024, 2:59pm UTC](https://forum.babylonjs.com/t/how-to-display-clipped-thininstances-boxes-as-solid/51661/1 "2024-06-28T14:59:33Z")
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) ] ([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/#95MJI8#178) , [https://www.babylonjs-playground.com/#M3RNVC#6](https://www.babylonjs-playground.com/#M3RNVC#6) , [https://playground.babylonjs.com/#95RAN4#4](https://playground.babylonjs.com/#95RAN4#4) ) Any help would be much appreciated as I’m new to BJS. ---
**Author:** ![ryantrem](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ryantrem/32/34010_2.png) [@ryantrem](https://forum.babylonjs.com/u/ryantrem)\ **Post date:** [June 28, 2024, 4:17pm UTC](https://forum.babylonjs.com/t/how-to-display-clipped-thininstances-boxes-as-solid/51661/2 "2024-06-28T16:17:38Z")
@sebavan, @Deltakosh - any thoughts on this one? ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 28, 2024, 7:41pm UTC](https://forum.babylonjs.com/t/how-to-display-clipped-thininstances-boxes-as-solid/51661/3 "2024-06-28T19:41:07Z")
I removed popov from the loop 🙂 ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 28, 2024, 7:42pm UTC](https://forum.babylonjs.com/t/how-to-display-clipped-thininstances-boxes-as-solid/51661/4 "2024-06-28T19:42:37Z")
I can not think of any easy way to do it at scale. ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [June 28, 2024, 9:02pm UTC](https://forum.babylonjs.com/t/how-to-display-clipped-thininstances-boxes-as-solid/51661/5 "2024-06-28T21:02:14Z")
The stencil buffer as used in [PG](https://www.babylonjs-playground.com/#95MJI8#178) can work, but all boxes will be filled with the same color: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#95MJI8%23665)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes If you want to use a specific “inside” color for each box, you can do it this way: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#95MJI8%23667)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![SamD](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@SamD](https://forum.babylonjs.com/u/SamD)\ **Post date:** [June 28, 2024, 9:50pm UTC](https://forum.babylonjs.com/t/how-to-display-clipped-thininstances-boxes-as-solid/51661/6 "2024-06-28T21:50:46Z")
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! ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [June 29, 2024, 9:29am UTC](https://forum.babylonjs.com/t/how-to-display-clipped-thininstances-boxes-as-solid/51661/7 "2024-06-29T09:29:31Z")
I notice I missed to add the clip plane to the `boxInsideMaterial` material: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#95MJI8%23668)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Is this better? ---
**Author:** ![SamD](https://avatars.discourse-cdn.com/v4/letter/s/5e9695/32.png) [@SamD](https://forum.babylonjs.com/u/SamD)\ **Post date:** [June 29, 2024, 6:20pm UTC](https://forum.babylonjs.com/t/how-to-display-clipped-thininstances-boxes-as-solid/51661/8 "2024-06-29T18:20:53Z")
This looks great! Many thanks. I’m looking forward to testing it out properly. Thanks again!