ThreeJS: How can I use a shader to filter vertices

问题:

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 is a modified version of ThreeJS's particle_basic shader.

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?

Initializing shader and uniforms

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?

回答1:

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 ] };

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.