将裁剪添加到 THREE.ShaderMaterial

Question

I'm trying to create a shader that takes into account the clipping planes I'm defining in the scene. These clipping planes work fine for all of the 'vanilla' materials I'm using: THREE.MeshLambertMaterial , THREE.MeshPhongMaterial , and THREE.MeshPhysicalMaterial , but THREE.ShaderMaterial is missing this implementation. This is an example of what I mean: https://jsfiddle.net/fraguada/27LrLsv5/

In this example there are two cubes, one with a THREE.MeshStandardMaterial and one with a material defined by THREE.ShaderMaterial . The cube with a THREE.MeshStandardMaterial clips ok. The cube with THREE.ShaderMaterial does not clip.

(I'm not typically defining the vertex/fragment shader in script tags as I show in the jsfiddle, instead I'm defining them in a similar manner to this: https://github.com/mrdoob/three.js/blob/dev/examples/js/shaders/BasicShader.js .)

So, a few questions:

1. Should THREE.ShaderMaterial include Clipping Planes out of the box? (there is a clipping property, but not sure what it enables)
2. If not, how could I modify this shader to include the necessary params and shader chunks to enable clipping?

Answer 1

Actually, clipping is done inside the Three.js shaders .

To make it work, you have to handle it inside your shader, by adding those 4 "shader chunks" :

• clipping_planes_pars_vertex.glsl at the top of your vertex shader ;
• clipping_planes_vertex.glsl inside the main() of your vertex shader ;
• clipping_planes_pars_fragment.glsl at the top of your fragment shader ;
• clipping_planes_fragment.glsl inside the main() of your fragment shader.

You can access those chunks by simply adding #include <(chunk name)> to your shaders.

Then, set material.clipping = true; and it should work.

Check this fiddle .

---

Note

To make your shader work, I also added begin_vertex.glsl and project_vertex.glsl .

I checked the current phong shader implementation to understand where to put those chunks.

---

Note 2

This code should work with a shader implemented with an array of strings but note that you can also reference shader chunks with THREE.ShaderChunk[(chunk name)] .
This should be more suitable in your case.