将裁剪添加到THREE.ShaderMaterial

Question

我试图创建一个着色器，它考虑到了我在场景中定义的裁剪平面。这些裁剪平面适用于我正在使用的所有“香草”材质：THREE.MeshLambertMaterial，THREE.MeshPhongMaterial和THREE.MeshPhysicalMaterial，但THREE.ShaderMaterial缺少此实现。这是我的意思的一个例子：https://jsfiddle.net/fraguada/27LrLsv5/

在这个例子中有两个立方体，一个是THREE.MeshStandardMaterial，另一个是由THREE.ShaderMaterial定义的材质。带有THREE.MeshStandardMaterial剪辑的立方体正常。 THREE.ShaderMaterial的立方体不会剪辑。

（我不是一般定义在脚本标记顶点/片段着色器如我在的jsfiddle，而不是我定义它们以类似的方式，以这样的：https://github.com/mrdoob/three.js/blob/dev/examples/js/shaders/BasicShader.js）

所以，几问题：

1. THREE.ShaderMaterial是否包含开箱即用的剪切平面？ （有一个剪辑属性，但不知道它启用了什么）
2. 如果不是，我该如何修改该着色器以包含必要的PARAMS和着色器块以启用剪切？

Answer 1

其实，剪裁是three.js所着色器内部完成。

要使其工作，你必须处理它着色器内，通过将这些4 “渲染块”：

• clipping_planes_pars_vertex.glsl你的顶点着色器的顶部;
• clipping_planes_vertex.glsl里面的顶点着色器的main();
• clipping_planes_pars_fragment.glsl位于片段着色器的顶部;
• clipping_planes_fragment.glsl里面的片段着色器的main()。

只需在着色器中添加#include <(chunk name)>即可访问这些块。

然后，设置material.clipping = true;它应该工作。

检查此fiddle。

---

注意

为了使您的着色器的工作，我还添加了begin_vertex.glsl和project_vertex.glsl。

我检查了当前的phong shader implementation以了解将这些块放在哪里。

---

注2

此代码应与字符串数组实现的着色工作，但请注意，您也可以参考着色器区块与THREE.ShaderChunk[(chunk name)]。
这应该更适合你的情况。