将剪辑添加到THREE.ShaderMaterial [英] Add clipping to THREE.ShaderMaterial

问题描述

我正在尝试创建一个着色器，该着色器考虑到我在场景中定义的裁剪平面.这些剪切平面对于我正在使用的所有'香草'材料都可以正常工作:THREE.MeshLambertMaterial，THREE.MeshPhongMaterial和THREE.MeshPhysicalMaterial，但是THREE.ShaderMaterial缺少此实现.这是我的意思的示例: https://jsfiddle.net/fraguada/27LrLsv5/

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/

在此示例中，有两个立方体，一个带有THREE.MeshStandardMaterial，另一个带有由THREE.ShaderMaterial定义的材料.带有THREE.MeshStandardMaterial的多维数据集可以确定.具有THREE.ShaderMaterial的多维数据集不会被裁剪.

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.

((我通常不像我在jsfiddle中显示的那样在脚本标签中定义顶点/片段着色器，而是以类似于以下的方式定义它们:

(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.)

所以，有几个问题:

1. 三.ShaderMaterial是否应该开箱即用剪切平面? (有一个裁剪属性，但不确定它启用了什么功能)
2. 如果没有，我如何修改此着色器以包括必要的参数和着色器块以启用剪切?

推荐答案

实际上，剪切是在 Three.js 着色器中完成的.

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 在顶点着色器的顶部；
• clipping_planes_vertex.glsl main()中的a>；
• clipping_planes_pars_fragment.glsl 在片段着色器顶部；
• clipping_planes_fragment.glsl main()中的a>.

• 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.

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

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

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

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

选中此小提琴.

注意

为了使您的着色器正常工作，我还添加了

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

我检查了当前的 phong着色器实现，以了解将这些块放在何处.

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

注释2

此代码应与通过字符串数组实现的着色器一起使用，但请注意，您还可以使用THREE.ShaderChunk[(chunk name)]引用着色器块. 这应该更适合您的情况.

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.

这篇关于将剪辑添加到THREE.ShaderMaterial的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！