Добавьте отсечение в 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. Если нет, то как я могу изменить этот шейдер, добавив в него необходимые параметры и фрагменты шейдера, чтобы включить отсечение?

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; и это должно работать.

Проверьте эту скрипку.

---

Заметка

Чтобы ваш шейдер работал, я также добавил begin_vertex.glsl а также project_vertex.glsl,

Я проверил текущую реализацию phong-шейдера, чтобы понять, куда поместить эти куски.

---

Заметка 2

Этот код должен работать с шейдером, реализованным с массивом строк, но учтите, что вы также можете ссылаться на блоки шейдеров с помощью THREE.ShaderChunk[(chunk name)],
Это должно быть более подходящим в вашем случае.