How to render clipped surfaces as solid objects

Question

In Three.js, I have a 3d object where I am using local clipping planes to only render a part of the object.

However, since 3d objects are "hollow" (meaning only the outer surface is rendered), when we clip anything off that surface we can "see into" the object. Here's an example of what I mean, clipping a corner off a cube. Notice how we can see the backside of the opposite corner.

I would like to give the appearance of the object being solid. Based on this issue, it seems that the best way to accomplish this is to create a surface over the clipped region, thus capping the hole and making the object appear like it isn't hollow.

My question is, how do I know where to build this surface? Does Three.js provide a way to get a list of vertices that intersect between a plane and any arbitrary surface? If not, how might I approach this problem myself?

I found this question, but the author didn't describe how they solved the problem I am having here.

Can you provide a live link to a realistic use case that demonstrates your true constraints? Are textures involved? What material are you using? What are you willing to compromise? — WestLangley
@WestLangley Sure, this simple example demonstrates my problem. I would like to cover up the openings so you can't see inside the shape. I am not using textures, just a basic MeshPhongMaterial. Performance is my priority, so if this can only be done in a performant way on simple shapes, then so be it. But I would like to know if it's possible to do this in a general way that can be applied to any shape. — Cameron Edwards

WestLangley WestLangley · Accepted Answer · 2016-05-07T20:11:29

You want to render a clipped surface as if it were a solid -- i.e., not hollow.

You can achieve that effect with MeshPhongMaterial -- or any three.js material for that matter -- with a simple hack to the material shader.

material.onBeforeCompile = function( shader ) {

    shader.fragmentShader = shader.fragmentShader.replace(

        `gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,

        `gl_FragColor = ( gl_FrontFacing ) ? vec4( outgoingLight, diffuseColor.a ) : vec4( diffuse, opacity );`

    );
};

This should look pretty good. It will require material.side = THREE.DoubleSide;

Alternatively, see https://threejs.org/examples/webgl_clipping_stencil.html.

three.js r.117

How to render clipped surfaces as solid objects

2 Answers