Create a plane mesh, with points defining colors

问题:

I've created ~2500 meshes and use an algorithm defining the color of each mesh. The algorithm goes through all meshes and adds a value depending on the distance it has to each "red-start" point. The value then decides what the color should be.

This is the result:

It is lagging and the corners aren't smooth. I want to recreate the same color result in some other way but can't figure out how. How can you do it with THREE.Shape and FragmentShader?

Final Goal Description:

• Using one, for increase in FPS, mesh (THREE.Shape) that defines the area which is to be colored.

• Be able to insert X amount of points that acts as positions where RED color is MAX and the further away from it you get it should go from RED -> GREEN

• You should be able to move the points

• Parts of the mesh that are in between 2 or more points should turn to a color depending on the distance it has to each point.

EDIT:

Here is my jsfiddle of how far I've gotten.

http://jsfiddle.net/zDh4y/9/

EDIT SOLUTION:

http://jsfiddle.net/zDh4y/13/

回答1:

I have solved it ^^

Much smoother, faster and easier!

Main issue with my algorithm was the distance was in 'millimeter' when it should have been in 'm'.

dist = dist / (T * T * T);

Check it out here:

http://jsfiddle.net/zDh4y/13/

回答2:

Edit: Now it's pretty and on WebGL http://glsl.heroku.com/e#16831.0 (Thanks to the gman)

It blends point color to the base color of the quad based on the distance between the point and the current fragment.

uniform vec2 pointA;
uniform vec2 pointB;
uniform vec2 pointC;
uniform vec4 pointColor;
uniform vec4 baseColor;
varying vec2 texCoord;

float  blendF(float val){
   return pow(val, 1.2) * 5;
}

vec4 addPoint(vec4  base, vec2 pointTexCord, vec4 pointColor){
   return mix(pointColor, base, blendF(distance(pointTexCord, texCoord)));
}

void main(void)
{ 
    vec4 accumulator = addPoint(baseColor, pointA, pointColor);
    accumulator = addPoint(accumulator, pointB, pointColor);
    accumulator = addPoint(accumulator, pointC, pointColor);     
    gl_FragColor = accumulator;
}

It would work with any kind of geometry and be as fast as it gets.

Here's Rendermonkey file with this shader You can tinker with it and don't worry about OpenGL\WebGL stuff - only shaders.