three.js - 将裁剪添加到 THREE.ShaderMaterial

Question

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

在这个例子中，有两个多维数据集，一个带有 THREE.MeshStandardMaterial和一个由 THREE.ShaderMaterial 定义的 Material .带有 THREE.MeshStandardMaterial 的立方体剪辑没问题。带有 THREE.ShaderMaterial 的立方体不会剪裁。

(我通常不会像在 jsfiddle 中显示的那样在脚本标签中定义顶点/片段着色器，而是以与此类似的方式定义它们: https://github.com/mrdoob/three.js/blob/dev/examples/js/shaders/BasicShader.js 。)

所以，有几个问题:

THREE.ShaderMaterial 应该包括开箱即用的剪切平面吗？ (有一个剪辑属性，但不确定它启用了什么)

如果没有，我如何修改此着色器以包含必要的参数和着色器块以启用剪辑？

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)] 引用着色器块。 .
这应该更适合您的情况。