daign / clipping-with-caps

Clipping a mesh and covering the openings with caps in WebGL

clipping-with-caps

Clipping a mesh and covering the openings with caps in WebGL

View the demo

Licensed under MIT License

Dependencies:

• three.js

---

Clipping meshes inside a shader program is fast and avoids triangulation problems that can arise when actually constructing a clipped mesh with constructive solid geometry. But since a mesh is just a hollow hull of triangles the clipped object will have an opening along the clipping edge. It is however possible to visually close this gaps without actually constructing the cap faces.

When there is just one clipping plane on an otherwise closed mesh and backface rendering is enabled, then there are backsides visible through the whole opening. Rendered into a stencil this area can be used to define where to render the caps. First a scene showing only the backfaces is used to increment the stencil and then another scene showing the front faces decrements the stencil. The resulting stencil is applied to a scene rendering a plane at the location of the clipping plane.

But this method fails when there is more than one clipping plane. Because clipping planes facing away from the camera result in hidden backfaces, these areas are missing in the stencil. The result would look like this:

The solution is to use a different shader for rendering the stencil areas, that only clipps at clipping planes facing the camera. Since the camera position is known it can be calculated in the shader whether a clipping plane is facing towards the camera or away from it.

clipping-with-caps's Issues

new three.js version be of no effect

new three.js version be of no effect

this.renderer.clear();

	var gl = this.renderer.context;

    if ( this.showCaps ) {

        this.renderer.state.buffers.stencil.setTest( true );

        this.renderer.state.buffers.stencil.setFunc( gl.ALWAYS, 1, 0xff );
        this.renderer.state.buffers.stencil.setOp( gl.KEEP, gl.KEEP, gl.INCR );
        this.renderer.render( this.backStencil, this.camera );

        this.renderer.state.buffers.stencil.setFunc( gl.ALWAYS, 1, 0xff );
        this.renderer.state.buffers.stencil.setOp( gl.KEEP, gl.KEEP, gl.DECR );
        this.renderer.render( this.frontStencil, this.camera );

        this.renderer.state.buffers.stencil.setFunc( gl.EQUAL, 1, 0xff );
        this.renderer.state.buffers.stencil.setOp( gl.KEEP, gl.KEEP, gl.KEEP );
        this.renderer.render( this.capsScene, this.camera );

        this.renderer.state.buffers.stencil.setTest( false );

    }

    this.renderer.render( this.scene, this.camera );

Angled Planes

This is great, however it only seems to work if the section box is aligned to the XYZ axis.

I am trying to get it to work when the box is at any angle, however I cant get the shader to work right, i believe due to the camera position. I am working out the dot product but the results are not always correct. Heres my shader code...

fragmentClipping2: '
uniform vec3 color;
uniform vec3 clippingLow;
uniform vec3 clippingHigh;
uniform vec3 planeNormal1;
uniform vec3 planeNormal2;
uniform vec3 planeNormal3;
uniform vec3 planeNormal4;
uniform vec3 planeNormal5;
uniform vec3 planeNormal6;

uniform float planeDistance1;
uniform float planeDistance2;
uniform float planeDistance3;
uniform float planeDistance4;
uniform float planeDistance5;
uniform float planeDistance6;

uniform int reverse;

varying vec3 pixelNormal;
varying vec4 worldPosition;
varying vec3 camPosition;

bool isClipped(vec4 point){

vec4 planes[6];
planes[0]=vec4(planeNormal1.x,planeNormal1.y,planeNormal1.z,planeDistance1);
planes[1]=vec4(planeNormal2.x,planeNormal2.y,planeNormal2.z,planeDistance2);
planes[2]=vec4(planeNormal3.x,planeNormal3.y,planeNormal3.z,planeDistance3);
planes[3]=vec4(planeNormal4.x,planeNormal4.y,planeNormal4.z,planeDistance4);
planes[4]=vec4(planeNormal5.x,planeNormal5.y,planeNormal5.z,planeDistance5);
planes[5]=vec4(planeNormal6.x,planeNormal6.y,planeNormal6.z,planeDistance6);

for (int i=0;i<6;i++){
float dotProduct=dot(point.xyz,planes[i].xyz)+planes[i].w;
float dotProduct2=dot(camPosition.xyz,planes[i].xyz);

if(dotProduct<0.0 && dotProduct2 <0.0){
return true;
}

if(dotProduct<0.0 && dotProduct2>0.0){
return false;
}
}
return false;
}

void main( void ) {

float shade = (
3.0 * pow ( abs ( pixelNormal.y ), 2.0 )
+ 2.0 * pow ( abs ( pixelNormal.z ), 2.0 )
+ 1.0 * pow ( abs ( pixelNormal.x ), 2.0 )
) / 3.0;


if(isClipped(worldPosition)){

discard;
}
else{
gl_FragColor = vec4( color * shade, 1.0 );
return;
}
}'

looks good here...

but if i rotate the camera you can see its not capping correctly

Any help or suggestions would be greatly appriciated

There is a problem when using the OrthographicCamera

as shown below：

加载.json文件的时候，剖切面显示正常，但是模型显示不出来

加载.json文件的时候，剖切面显示正常，但是模型显示不出来

When loading the.json file, the profile is displayed correctly, but the model is not displayed

When loading the.json file, the profile is displayed correctly, but the model is not displayed

Anti-Aliasing on Caps

Caps are rendered with sharp pixels. Anti-aliasing does not seem to work. Specifying antialias:true on WebGLRenderer is not enough.

Is there any way of doing this?

What is the main difference with the threejs example

I'm trying to implement clipping with caps on a complex scene with a lot of geometries.
I struggle a bit but I was wondering what's the main difference / advantages / disadvantages with the following example : https://threejs.org/examples/?q=clip#webgl_clipping_stencil

Many thanks!

Version issue

A very useful plugin.
threejs The new version cannot be used.
Hope to update soon

Discard caps created by back faces clipped by planes on the other side

Hi. I'm confused about one certain cases of the clipping algorithm

So in the fragmentClippingFront, you are discarding the fragments only when it's on the same side of a clipping plane as the camera is.

But how do you manage to handle this certain case:

The geometry is the large cube, and the clippingLow High X/Y/Z cube is the smaller one on the lower right corner. The fragment we are looking at is the dot.

This fragment is on the back face. And it satisfy worldPosition.x < clippingLow.x. However, the camera fails the camPosition.x < clippingLow.x test so this fragment is preserved and it will increase the stencil value so that it will lead to a cap fragment being drawn at that position, which will end up with something like this

Do you use any extra shader to discard every fragments lying outside the clipping Cube? Or is there any misunderstanding?

Thank you!

have you done this in react-three-fiber?

this is great, I wonder how could I use it in r3f

Is there a way to remove the limits of the faces?

This is more of a question, than an issue.
I wanted to make the clipping faces to be arbirarily moved to any extension, is that possible?
What part o the code controls this?

Thanks!
Fran

how to release as a module