使用SVG渐变"自然地"着色三角形

Question

我有3个点H1,H2和H3,其中每个Hi具有100%的饱和度和值,只有色调变化.换句话说,这些是"彩虹"颜色.

我想使用SVG的渐变功能"自然地"为三角形着色.换句话说,接近H1的点应该具有色调H1,着色应该是连续的等等.

这个问题定义明确吗？真的有这种(独特的？)着色吗？

轻微:我不认为色调"环绕".换句话说,色调.995和.003之间的颜色是.499,而不是.999.

如果这个问题有解决方案,可以使用Delaunay三角测量法将它扩展为"自然"为平面上任何一组彩色点的凸包上色吗？

Answer 1

我意识到这个线程已经死了.但我发布这个答案,希望它对未来的某些人有用.如果你可以将方程扩展到正确的SVG标记,那么我们就完成了它.我为可可开发了这个特殊的解决方案,但数学是完全相关的.

该方法涉及一个小矩阵数学,以找到三角形的梯度向量,其给出相对于z的最陡上升的(x,y)方向 - 这是颜色梯度的方向.颜色梯度的起点/终点由梯度矢量斜率(通过x,y原点约束)与描述zmin和zmax的三角形平面上的等值线的交点确定.

首先,{p1, p2, p3}可以用以下等式描述与三角形的三个点相交的平面:

A1(x) + A2(y) + A3(z) - A = 0

其中A是决定因素:

    |p1x  p1y  p1z|
A = |p2x  p2y  p2z|
    |p3x  p3y  p3z|

并且Ai是相同的决定因素,但用i列向量替换列:

            1                     |p1x  1  p1z|
column(i) = 1          e.g., A2 = |p2x  1  p2z|
            1                     |p3x  1  p3z|

渐变矢量grad(z)描述最陡上升的方向,这也是颜色渐变的轨迹:

grad(z) = [-A1/A3 (i), -A2/A3 (j)]

所以在x,y平面上,这个梯度向量位于一条直线上:

y = x * A2/A1 + b, 

其中b可以是任何东西,但让我们设置b = 0.这会将颜色渐变轨迹限制为与原点相交的直线:

y = x * A2/A1                 [eqn 1]

该线描述了颜色渐变方向.起点和终点将由该线与zmax和zmin等线的交点确定.

现在,对于任何定义的值zmax和zmin,我们可以描述在由我们的三角形从而限定的平面平行线:

A1(x) + A2(y) + A3(zmax) - A = 0                 [eqn 2]
and
A1(x) + A2(y) + A3(zmin) - A = 0                 [eqn 3]

从上面使用等式1-3,就可以解决对于G1和G2分别,颜色梯度的起点和终点.

G1 = (xmin,ymin)
G2 = (xmax,ymax)

哪里

xmin = (A - A3*zmin) / (A1 + A2^2 / A1)
ymin = xmin * A2/A1

xmax = (A - A3*zmax) / (A1 + A2^2 / A1)
ymax = xmax * A2/A1

请注意特殊情况,其中A1 = 0,对应于完美垂直的颜色渐变路径.在这种情况下:

for A1 == 0:

G1 = (0,ymin)
G2 = (0,ymax),
where
ymin = (A - A3*zmin) / A2
ymax = (A - A3*zmax) / A2

唯一的另一个特例是何时p1z = p2z = p3z.这将尝试将渐变路径拉伸为无限长.在这种特殊情况下,三角形应该是稳固的,而不是通过所有的数学运算.

剩下要做的事情是设置三角为裁剪区域并从中汲取梯度G1来G2.我将包含一个问题域图和相关的线性方程.另请注意,颜色渐变沿着每个三角形边缘线性变化,因此OP关于delaunay三角剖分的问题正好在目标上.出于这个原因,我开发了这种方法 - 为三角网格的面部着色.下图显示了一个案例zmax == p3z > p1z > p2z > zmin.

Answer 2

您需要多个渐变才能在三角形上实现所需的渐变,因为渐变是颜色空间中两个点之间的插值,但您有三个不同的非共线点.使用重心插值,您应该为每个顶点应用一个渐变,使得渐变方向在垂直于相对边缘的方向上远离顶点.当梯度到达边缘时,梯度从顶点的完全饱和度到零饱和度.

在凸多边形上存在各种用于重心插值的类比,但是我没有详细阅读该文章以了解它是否可以作为线性渐变的叠加来实现.

最后,您的问题归结为多边形内的插值,每个插值方案将产生不同的(可能是唯一的)着色.

Answer 3

也许您应该检查Gouraud Shading，它似乎适合您正在寻找的东西。它在三角形的顶点上插入给定的三种颜色。