SVG: Построение 3D-чертежей

Написал тут неожиданно для себя статейку. Вроде получилось симпатично. Даже немного жалко, что её у меня никто не прочитает. Чтобы не потерялась при очередной аварии винчестера, продублирую её тут.

Построение 3D-чертежей

(принято к публикации 2014-10-24)

Довольно часто возникают ситуации, когда требуется сделать некий чертеж на веб-странице. Обычно для этих целей хватает возможностей SVG. Но иногда появляется необходимость запечатлеть нечто трехмерное. Вовсе необязательно при этом ожидать реалистичной графики - например, для иллюстрации задач по стереометрии используются схематичные "каркасные" рисунки, состоящие из прямых линий или несложных кривых.

Столкнувшись с такой ситуацией мы быстро выяснили, что нам лень самим придумывать, как будет выглядеть тот или иной параллелепипед на чертеже, поэтому решили приложить некоторые усилия и научиться задавать и отображать средствами SVG + Javascript несложную трехмерную графику.

В этой ситуации не требуется заботиться о скорости работы алгоритмов - сцены предполагаются статичными. Таким образом, решение поставленной задачи оказывается под силу даже таким дилетантам, как мы.

Сначала немного теории из проективной геометрии и почти забытого курса компьютерной графики. Физически процесс наблюдения трехмерной схемы выглядит следующим образом:

Наблюдатель находится в некой точке пространства за экраном и наблюдает на экране проекцию сцены. Для расчета, как эта самая сцена выглядит на экране, полезно ввести декартову систему координат. Или даже две: До сих пор мы смотрели картину, что называется, "со стороны" - в системе координат XYZ, связанной со сценой. Попробуем взглянуть на то же самое в системе координат X'Y'Z', связанной с экраном: Как видим, с точки зрения понимания, как всё будет выглядеть на экране, обстановка резко улучшилась. Но не до конца: нам ещё нужно как-то обработать тот факт, что рассматриваемая сцена должна быть спроектирована на экран. Для этого мы "угоним" наблюдателя влево на "минус бесконечность". В этом, главным образом, и заключается отсылка к проективной геометрии. При этом справа к нам "приползёт" "плюс бесконечность", наша сцена чудовищно деформируется и станет похожа на то, что мы видим в реальности (в реальности более далёкие предметы кажутся меньше, чем предметы такого же размера, но расположенные ближе к нам - так называемая перспектива). Если представить эту операцию в виде некого процесса, то он будет выглядеть примерно так: Но, разумеется, данная анимация приведена только для наглядности, а нам важен конечный результат. Короче, после такого преобразования те воображаемые линии, которые тянулись от каждой точки сцены, непонятно где пересекали экран и сходились в глазу наблюдателя, станут параллельными координатной оси 0Y, в результате чего нам останется останется лишь отбросить у точек сцены координату Y и вывести на экран получившиеся двумерные точки с координатами (X, Z), отвечающие соответствующим элементам сцены.

Теперь нужно записать эти действия строгим языком математики. Итак, для точек сцены введем четырехмерные векторы (x, y, z, 1), где x, y, z - обычные трехмерные координаты точки в системе XYZ, а четвертая единица - дань проективной геометрии, о которой было сказано выше и будет сказано дальше.

Кроме того, пусть задана координатная система, связанная с экраном и имеющая в системе XYZ следующие направляющие векторы осей:

0'X': (a_x, b_x, c_x, 1)^T
0'Y': (a_y, b_y, c_y, 1)^T
0'Z': (a_z, b_z, c_z, 1)^T Наконец, будем считать, что положение наблюдателя в системе X'Y'Z'1 задано координатами (0, y_н, 0, 1)^T, а, в свою очередь, центр системы X'Y'Z'1 в системе XYZ1 имеет координаты (x₀, y₀, z₀, 1)^T.

Преобразование, переводящее сцену в координаты, связанные с экраном, является линейным и может быть представлено в виде произведения двух матриц:

ax	bx	cx	0
ay	by	cy	0
az	bz	cz	0
0	0	0	1

*

1	0	0	-x0
0	1	0	-y0
0	0	1	-z0
0	0	0	1

Правая матрица отвечает за параллельный перенос начала координат системы XYZ в начало координат системы X'Y'Z', левая - за переход из системы XYZ в систему X'Y'Z'.

Проективное же преобразование, которое оставляет 0 на месте, а точку с координатами (0, y_н, 0, 1) перегоняет в минус бесконечность, имеет вид:

1	0	0	0
0	1	0	0
0	0	1	0
0	-1/yн	0	1

Таким образом получаем окончательную формулу преобразования вектора (x, y, z, 1) в координаты, связанные с экраном:

xэ

yэ

zэ

tэ

=

1	0	0	0
0	1	0	0
0	0	1	0
0	-1/yн	0	1

*

ax	bx	cx	0
ay	by	cy	0
az	bz	cz	0
0	0	0	1

*

1	0	0	-x0
0	1	0	-y0
0	0	1	-z0
0	0	0	1

*

x

y

z

1

В результате на экране у счастливого пользователя появится точка с координатами (x_э/t_э, z_э/t_э), возможно, умноженными на некий масштабирующий коэффициент, зависящий от того, насколько далеко от экрана расположена сцена.

Конечно, координата y_э/t_э в реальности тоже эффективно используется - она имеет непосредственное отношение к глубине, по ней могут быть упорядочены элементы сцены при отрисовке, чтобы дальние элементы не заслоняли ближние.

Теперь уже можно, будучи вооруженными вышеизложенной теорией, приступить к реализации своих амбициозных планов. Вот, например, простейшая сцена:

Как видим, необязательно ограничивать себя каркасными моделями. Действительно, перейти от отрезков к многоугольникам-граням достаточно просто. Во-первых, следует упорядочить грани, скажем, по координате Y их центров (т.е., по среднему, 1/n ∑ (y_э⁽ⁱ⁾/t_э⁽ⁱ⁾), Y-координат их вершин), тогда последовательная отрисовка граней от дальней к ближней даст примерно верную картину перекрытия их друг другом. Во-вторых, закрашивание граней может быть сделано ориентируясь на абсолютную величину косинуса угла между вектором нормали к грани и вектором 0'Y' - направлением взгляда наблюдателя. Чем меньше этот самый модуль косинуса, тем "темнее" должна быть нарисована грань. Вектор же нормали легко определить, посчитав векторное произведение любых двух смежных рёбер. В результате мы получаем возможность строить нечто более красивое:

Здесь, конечно, видно, что наша реализация несвободна от артефактов (координатные оси должны, по-хорошему, частично перекрываться тором), но в данном случае это связано с несовершенством критерия сортировки "по центрам" граней и отрезков. С этим можно побороться, разбивая объекты сцены на элементы примерно соизмеримых размеров.