Hi everyone,
I am working with ClippingPlaneCollection in CesiumJS to cut 3D models (3D Tiles / GlTF). Currently, when a model is clipped, the interior appears hollow.
I want to achieve a “solid” look for the clipped area. Specifically, I am looking for solutions or workarounds to do one of the following:
-
Solid Cap / Color Fill: Fill the cross-section (the clipped surface) with a solid color.
-
Hatch Pattern: Apply a custom texture or hatch pattern to the visual cross-section.
-
Geometry Extraction: Get the exact intersection points/lines between the clipping plane and the 3D model geometry so that I can manually generate a custom polygon/geometry to cover the cut.
Thank you!
Hey @mhphuc,
Unfortunately none of these are supported out of the box in CesiumJS, clipping planes clip rendered geometry but don’t generate any cap or intersection data at the cut surface.
Two directions if you want to build something custom:
Screen-space approximation (PostProcessStage): After the scene renders, I think you can use a PostProcessStage fragment shader to reconstruct each pixel’s eye-space position by passing gl_FragCoord directly to czm_windowToEyeCoordinates (a CesiumJS built-in GLSL function that handles depth internally). You can then check whether that position lies on the clip plane and fill those pixels with a cap color. This is the lower-effort path. It works well head-on but doesn’t produce a geometrically exact silhouette at glancing angles.
Stencil buffer (geometrically accurate): The classic real-time technique is a two-pass stencil approach, render back-faces through the clip region into the stencil buffer, then draw a full-screen quad at the clip plane depth masked by the stencil. CesiumJS doesn’t expose stencil operations publicly, so this requires dropping down to the raw WebGL context and hooking into the render loop with a custom Primitive. More involved, but geometrically correct.
Let us know how that goes!
