Slice contours of a Mesh in shaders

Hi, guys.

I’m trying to make a “flat clipping”. (there is a better word to describe it)
So, I guess orthographic projection is what I need here.

Basically, I wanna slice the scene on a plane.

Even though I restricted near and far planes, Line still seems to render incorrectly.
Line from jsFiddle

I expect it to render the continious line (without spaces).

Visualization from the software


  1. Is this the expected behaviour and that means that I need to create my own camera (use some other projection method) or probably adjust Vertex shader for my use case?

  2. As you can see on the Visualization image the projection appears thin

Sorry if I failed to describe the “flat clipping” part

It seems you just have to change the view frustum of your camera. Try it like so:

var aspect = window.innerWidth / window.innerHeight;
var frustumSize = 100;

const camera = new OrthographicCamera( 0.5 * frustumSize * aspect / - 2, 0.5 * frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0.1, 100 );

1 Like

Thank you for your answer @Mugen87 .

This solves the line part but fill of the polygon geometry is still invisible from that angle.

Is it possible to make it visible without changing the geometry?

This SO issue looks similar to mine.
Another one

Found the exact issue describing the problem.

The solution should be to create a “label” of the mesh in the slice and obtain the contour. All with shaders.

That’s exactly what I was thinking.

Can I achieve something like that using the clippingPlanes? (that’s what I’m trying now)

But I doubt that it would work for the case when camera is perpendicular to the flat mesh.
Well, cuz all the vertices are coplanar and the width is 0.

I can workaround that case with an additional line object if I know the contour but I have some complex bitmaps that I would need to calc the contour for.

Or I can use Extrude geometry which again would work for vector data but I would struggle with UVs in raster