Question

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

结果如下：

enter image description here

落后，角落不光滑。我想以其他方式重新创建相同的颜色结果，但无法弄清楚如何。你怎么能用THREE.Shape和FragmentShader来做呢？

最终目标描述：

使用一个，增加FPS，网格（THREE.Shape）即可定义要着色的区域。
能够插入X量的点作为RED颜色为MAX的位置，距离它更远，你应该从RED - ＆gt; GREEN
你应该可以移动点
两个或多个点之间的网格部分应根据每个点的距离变为颜色。

编辑：

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

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

编辑解决方案：

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

Answer 1

我已经解决了它^^

更顺畅，更快速，更轻松！

我的算法的主要问题是当它应该在'm'时，距离是'毫米'。

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

在这里查看：

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

Answer 2

修改现在它很漂亮并且在WebGL上http://glsl.heroku.com/e#16831.0（感谢gman）

enter image description here

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

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 个答案: