Эта нить давно умерла, я понимаю. Но я публикую этот ответ в надежде, что в будущем он кому-нибудь пригодится. Если вы можете расширить уравнения в правильную разметку SVG, то мы сделали это. Я разработал это конкретное решение для какао, но математика полностью актуальна.
Подход включает в себя небольшую математическую математику, чтобы найти вектор градиента треугольника, который дает направление (x, y) самого крутого подъема по отношению к z - это направление цветового градиента. Начальная / конечная точки цветового градиента определяются пересечением наклона вектора градиента (ограниченного началом координат 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. Я включил диаграмму предметной области с соответствующими линейными уравнениями. Также обратите внимание, что цветовой градиент изменяется линейно по краю каждого треугольника, поэтому вопрос ОП о триангуляции Делоне прямо на цели. Я разработал этот подход именно по этой причине - раскрасить грани триангулированной сетки. На изображении ниже показан случай, когда zmax == p3z > p1z > p2z > zmin.
