將裁剪添加到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)]。
這應該更適合你的情況。