Clipping planes on ShaderMaterial

Questions
1

How to implement clipping on ShaderMaterial?
http://fiddle.jshell.net/sogrey/5wL20k3m/32/show/

2

First advice is to include the clipping ShaderChunks, as is done in the built-in shaders in ShaderLib. Both are found under src/renderers/shaders.

3

In the example, the plane is clipped, but the box is not. The material of the box is ShaderMaterial.

https://jsfiddle.net/5wL20k3m/

1 Like
4

Is that all?

5

Yes. You have to #include them in the same/similar places that they are included in e.g. MeshBasicMaterial, whose shaders you will find in the ShaderLib folder (three.js\src\renderers\shaders\ShaderLib). They are named meshbasic_vert.glsl.js and meshbasic_frag.glsl.js.

6

tks,
I found this question:

and it’s a demo:

https://jsfiddle.net/sogrey/q8bt026y/embedded/

7

Sorry for the bump but found this thread and thought I’d add my findings as I’m having issues implementing clipping planes with clip intersection right now. I’ve included the ShaderChunks as suggested in the original StackOverflow answer and got it working with clipIntersection set to false. But it’s not working the other way with clipIntersection set to true.

I had a play with the advanced clipping example on my local and it seems to have the same limitation so it’s not just my code. Clipping planes can work if you’re trying to reduce an object via it’s outsides, but in my use case I’m using a THREE.Water as an ocean and want to cut a octagon out of it for a submerged mesh with a hollow center.

About to try another approach with Alpha Maps instead.

Update:

  • Alpha Maps worked ok, but unless I write some dynamic canvas drawing code it won’t hold up well when I need multiple transparent spots or want to change things
  • Switched to passing coordinates for doing alpha and it worked great, the vertex shader code already had a worldCoordinate variable so I just evaluate that