ThreeJS:如何使用着色器按属性过滤顶点? [英] ThreeJS: How can I use a shader to filter vertices by property?

问题描述

我正在使用自定义着色器，通过遵循 this github 问题.

I'm using custom shaders to allow for slider filters on X, Y, and Z co-ordinates on a particle system by following this github issue.

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

I'd like to expand this to allow filtering on non-positional properties such as a cost associated with each vertex.

shader 是 ThreeJS 的particle_basic 着色器的修改版.

shader is a modified version of ThreeJS's particle_basic shader.

// 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,
});

我不确定如何为每个顶点提供正确的成本(或如何从数组中获取顶点的成本).使用着色器可以实现我想要做的事情吗?

What I'm not sure of is how to provide each vertex with the correct cost (or how to get the vertex's cost from the array). Is what I want to do even possible using shaders?

推荐答案

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

You seem to be mixing apples and oranges here. That shader above is a fragment shader, and it can discard pixels, you can't do that in the vertex shader. If you are referring to

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

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

as something you want to map to the vertices, this is not how it's done. A uniform is a value shared across the program ie. every pixel / vertex. You need attributes. If you don't want to play with attributes explicitly, you can set up your UVs (within the three.js framework) to take this data. It's a vec2 so you can store two values in it. Each vertex will have its own.

这篇关于ThreeJS:如何使用着色器按属性过滤顶点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！