three.js - 三JS : How can I use a shader to filter vertices by property?

Question

我使用自定义着色器来允许在粒子系统上的 X、Y 和 Z 坐标上使用 slider 过滤器，方法是 this github问题。

我想扩展它以允许过滤非位置属性，例如与每个顶点相关的成本。

shader 是 ThreeJS 粒子基本着色器的修改版本。

着色器

// snip
// filter by co-ordinate
"if(myWorldPosition.x < xMin) discard;",
"if(myWorldPosition.x > xMax) discard;",
"if(myWorldPosition.y < yMin) discard;",
"if(myWorldPosition.y > yMax) discard;",
"if(myWorldPosition.z < zMin) discard;",
"if(myWorldPosition.z > zMax) discard;", 
// TODO: filter by cost
// ex: if(myCost < minCost || myCost > maxCost) discard; // <-- myCost?

初始化着色器和制服

var uniforms = shader.uniforms;
uniforms.xMin = { type: "f", value: 0 };
uniforms.xMax = { type: "f", value: 100 };
uniforms.yMin = { type: "f", value: 0 };
uniforms.yMax = { type: "f", value: 100 };
uniforms.zMin = { type: "f", value: 0 };
uniforms.zMax = { type: "f", value: 100 };
uniforms.minCost = { type: "f", value: 0 };
uniforms.maxCost = { type: "f", value: 100 };
// TODO: uniforms.cost = { type: "fv1", value: [ 30, 30, 0, 100, 30, 0 ] };

var material = new THREE.ShaderMaterial( {
    uniforms:       uniforms,
    fragmentShader: fragmentShader,
    vertexShader:   vertexShader,
});

我不确定的是如何为每个顶点提供正确的成本(或者如何从数组中获取顶点的成本)。我想要使​​用着色器做的事情是否可行？

Answer 1

你似乎在这里混合了苹果和橙子。上面的着色器是片段着色器，它可以丢弃像素，而在顶点着色器中不能这样做。如果您指的是

// TODO: uniforms.cost = { type: "fv1", value: [ 30, 30, 0, 100, 30, 0 ] };

作为您想要映射到顶点的东西，这不是它的完成方式。制服是整个程序共享的值，即。每个像素/顶点。你需要属性。如果您不想显式使用属性，则可以设置 UV(在 Three.js 框架内)来获取此数据。它是一个 vec2，因此您可以在其中存储两个值。每个顶点都有自己的。