Multiple Angle Clipping in Volume

Questions
1

I am clipping a volume and currently supports clipping through all the axis plain i.e. X & Y & Z. I have also used padding along with sin and cos which rotates the clipping plane in x&y direction.
Code is here for above operation. Also posting the current GIF demo of the working condition.com-video-to-gif

bool withinBoundaries( vec3 pos ) {
	    if (
	        pos.x*sin(thetaVal) + pos.y*cos(thetaVal) + yPadding < 0.0 ||
		pos.x < xClippingPlaneMin ||
		pos.y < yClippingPlaneMin ||
	        pos.z < zClippingPlaneMin ||
	        pos.x > xClippingPlaneMax ||
	        pos.y > yClippingPlaneMax ||
	        pos.z > zClippingPlaneMax
	    ) return false;
	    return true;
		}

Here is the complete code for reference.
I can write same way for y&z , but I think this is not a very effective way to have a plane which I can rotate in all possible direction. Is there any effective way to have a condition and that be used to rotate the clipping plane in all possible direction of X,Y and Z?

This code is an extension of lebarba’s code .

2

Three.js also has built-in support for clipping planes, specified as an array of (Math/)Plane objects on the renderer for global clipping and on the Material for local clipping.

WebGLRenderer:

.clippingPlanes : Array

User-defined clipping planes specified as THREE.Plane objects in world space. These planes apply globally. Points in space whose dot product with the plane is negative are cut away. Default is .

.localClippingEnabled : Boolean

Defines whether the renderer respects object-level clipping planes. Default is false .

Material:

.clippingPlanes : Array

User-defined clipping planes specified as THREE.Plane objects in world space. These planes apply to the objects this material is attached to. Points in space whose signed distance to the plane is negative are clipped (not rendered). This requires WebGLRenderer.localClippingEnabledto be true . See the WebGL / clipping /intersection example. Default is null .

I recommend building upon this API. You can copy-paste the clipping ShaderChunks into your shader and modify them there. The Plane objects can be modified in JS.

1 Like
3

A typical approach is to store the plane as a Vector4 with the xyz components representing the plane normal and w representing the distance along the normal to the surface.

With that you should be able to check the side of the plane a point is on using something like the following:

bool withinBoundaries(vec3 point) {
   return dot(point, clippingPlane.xyz) < clippingPlane.w;
}
1 Like
4

I tried using this approach in the first place but was unable to combine this clipping plane with my scene as well as the values and their update from the slider associated wrt to all the three planes. You can check it here

5

Yeah this works well. Thanks. It’s more like a simpler version of having three separate planes.