创建平面网格，点定义颜色答案

【问题标题】：Create a plane mesh, with points defining colors创建平面网格，点定义颜色
【发布时间】：2014-07-01 05:23:59
【问题描述】：

我创建了大约 2500 个网格，并使用了一种算法来定义每个网格的颜色。该算法遍历所有网格并根据它与每个“红色起点”点的距离添加一个值。然后该值决定颜色应该是什么。

这是结果：

它滞后，拐角不光滑。我想以其他方式重新创建相同的颜色结果，但不知道如何。如何使用 THREE.Shape 和 FragmentShader 做到这一点？

最终目标说明：

使用一个来增加 FPS，网格 (THREE.Shape) 定义要着色的区域。
能够插入 X 个点作为 RED 颜色为 MAX 的位置，离它越远，它应该从 RED -> GREEN 开始
你应该可以移动点
位于 2 个或更多点之间的网格部分应根据到每个点的距离变为颜色。

编辑：

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

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

编辑解决方案：

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

【问题讨论】：

试着把你目前拥有的东西放在jsfiddle.net，这样人们就可以看到了。
请描述您的最终目标是什么。只是屏幕上的颜色？你想要多少个红色区域？有几种颜色？它们都具有相同的颜色分布吗？你真的需要所有这些对象吗？会修改吗？
@JAre Done，检查编辑！
@KJPrice ：使用片段着色器创建了一个关于我在一个网格中所做的工作的小提琴。 jsfiddle.net/zDh4y/8

标签： javascript colors three.js webgl shape

【解决方案1】：

编辑：现在它很漂亮，在 WebGL 上 http://glsl.heroku.com/e#16831.0（感谢 gman）

它根据点和当前片段之间的距离将点颜色混合到四边形的基础颜色。

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

它适用于任何类型的几何体，并且速度尽可能快。

这里是Rendermonkey file with this shader，您可以随意修改它，而不必担心 OpenGL\WebGL 的东西 - 只有着色器。

【讨论】：

非常感谢！我也能够解决我的问题！在另一个答案中查看我的小提琴。

【解决方案2】：

我已经解决了^^

更流畅、更快、更轻松！

我的算法的主要问题是距离应该是“毫米”，而它应该是“米”。

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

在这里查看：

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

【讨论】：