Feature request: set clip style

[NicolasRannou]

Description of the problem

When clipping like in https://threejs.org/examples/webgl_clipping.html, it would be nice to be able to define the style of the clipping: highlight borders, fill intersection, etc.

I know there are some solutions out there ([1], [2]), but would be awesome to be able to set it as a clip property somehow.

My use case it to "highlight" the intersection of the mesh and the clipping plane, in order to overlap nicely the intersection with the clipping plane filled with a texture:

Which would be the best way to follow to achieve such an effect? (in a nice clean/efficient way?) I'd be happy to write a demo with some guidance...

[1] - http://stackoverflow.com/questions/37090942/how-to-render-clipped-surfaces-as-solid-objects/37093210#37093210
[2] - http://stackoverflow.com/questions/36557486/three-js-object-clipping/36558152

[mrdoob]

/ping @tschw

[tschw]

Interesting... To get an idea on how to extend clipping, take a look at the latest submission reviewed in #9470 (the diff should help you see the code you have to edit).

The implementation of the op would need another define with a bitmask for outline, fill, neither or both. Then, depending on that, an outline and a fill color uniform.

Filling is fairly easy, instead of discarding the fragment, simple set gl_FragColor and then return (from the fragment shader's main function, that is).

Outlines are a little more tricky: Basically, you have to check the distance from the plane. However, simply comparing it with a constant will not give you consistent width. Also, you may want anti-aliasing (via GLSL smoothstep). To get a defined width, I guess you will have to consider the derivatives of the 3D eye space coordinates and the projected 2D NDC (scale depends on resolution and is nonuniform, so you'd need at least another vec2 uniform, I believe).

I am not sure whether planes are currently always normalized (a homogeneous plane does not change under uniform "4D" scale, so for what's there right now they don't have to be). In case they are not, however, the distance would come out scaled, so you may have to take care of that with the new modes too.

[NicolasRannou]

Thanks @tschw that is very helpful!

[tschw]

On second thought, maybe it's easier (and looks better) to not bother with outlines at all (because there will be cases where above approach won't work too well, like cutting parallel or near parallel to the surface) and only have a fill mode. Writing alpha != 1 with the fill color would allow to detect the outline from a 2D image filtering pass (external custom shader on a framebuffer-sized render target).

[rwirz]

Hi,

Thanks for your suggestions!

The contour having a filling should be "easy", you are right.
However, about the filling, I did this change to clipping_planes.fragment.glsls as you suggested:

if ( dot( vViewPosition, plane.xyz ) > plane.w ) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
return;
}

And I have this result:

And this is not the filling. Maybe for a concave object is the filling in orthographic view , but this is a good example that it is not correct (or my modifications are incorrect).

Suggestions?

[tschw]

OK, the "filling" seems to be something more specific than a "clip mode fill". For that, I don't think we should touch the clipping code at all and do something as suggested by @WestLangley on StackOverflow. The only problem is, that you currently have to use a custom shader for your material (or hack into Three.js). So what you are really asking for is some way to shade one side of a (built-in) material with a fill color.

[WestLangley]

it would be nice to be able to define the style of the clipping: highlight borders...

I agree that is too application-specific for three.js.

For clipping with a fill color, see https://threejs.org/examples/webgl_clipping_stencil.html.

[sarensabertooth]

it would be nice to be able to define the style of the clipping: highlight borders...

I agree that is too application-specific for three.js.

For clipping with a fill color, see https://threejs.org/examples/webgl_clipping_stencil.html.

It would help if Three examples were simpler. Down to the bones. With all these extra toggles and complexity in the code, it's hard to grasp. I guess I will have to downsample my own example to understand stencil. Just feels like a big let down in the library.

[Mugen87]

@sarensabertooth Absolutely, we should always try to keep the examples as simple as possible. Complex demos are harder to comprehend and maintain.

[mrdoob]

Agreed!