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[].
- Is there any way to use clipping planes with
THREE.ShaderMaterial?
- Do I need to add my custom shaders in
chunks[] from ShaderChunk.ts? If yes How?
Please share a demo example if possible.
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.
