clipping planes in forge viewer not able to clip o

Question

I am trying to add custom objects with THREE.ShaderMaterial in forge-viewer, I am able to add and render the objects in forge-viewer's overlayScene.

I referred this blog for adding the same.

The problem I am facing is: The forge-viewer's clipping planes are not able to clip the custom added objects. If I try to add same object with other material, then clipping planes are able to clip them.

I have tried this. But I am getting error that Cannot resolve #include<clipping_planes_pars_vertex.glsl> (same for other shader sources). I have tried to add these shaders in THREE.ShaderChunk but not worked.

I have seen that the error comes from in ShaderChunk.ts because it didn't found shader in chunks[].

1. Is there any way to use clipping planes with THREE.ShaderMaterial?
2. Do I need to add my custom shaders in chunks[] from ShaderChunk.ts? If yes How?

Please share a demo example if possible.

Answer 1

Similarly to the other Stack Overflow question you found, the section tool in Forge Viewer uses a custom shader logic that is only included in the Viewer's own materials. Try including the following snippets in your material shaders:

In the vertex shader:

...
#if NUM_CUTPLANES > 0
    varying vec3 vWorldPosition;
#endif
...
void main() {
    ...
    #if NUM_CUTPLANES > 0
        vWorldPosition = vec3(/* include your own vertex world position here */);
    #endif
    ...
}
...

In the fragment shader:

...
#if NUM_CUTPLANES > 0
    varying highp vec3 vWorldPosition;
#endif

#include<cutplanes>
...
void main() {
    ...
    #if NUM_CUTPLANES > 0
        checkCutPlanes(vWorldPosition);
    #endif
    ...
}
...

And when defining the new THREE.ShaderMaterial, you also need to include a couple of sectioning-specific uniforms:

const uniforms = {
    ...
    "cutplanes": { type: "v4v", value: [] },
    "hatchParams": { type: "v2", value: new THREE.Vector2(1.0, 10.0) },
    "hatchTintColor": { type: "c", value: new THREE.Color( 0xFFFFFF ) },
    "hatchTintIntensity": { type: "f", value: 1.0 },
    ...
}

See this gist for a complete example of adding sectioning support to a THREE.ShaderMaterial.