Как построить точку в пространстве
Начертательная геометрия: конспект лекций
Данное учебное пособие представляет собой курс лекций и предназначено для студентов, сдающих экзамен по специальности «Начертательная геометрия». Подготовлено с учетом требований Министерства образования РФ.
Оглавление
Приведённый ознакомительный фрагмент книги Начертательная геометрия: конспект лекций предоставлен нашим книжным партнёром — компанией ЛитРес.
1. Проекции точки на две плоскости проекций
Рассмотрим проекции точек на две плоскости, для чего возьмем две перпендикулярные плоскости (рис. 4), которые будем называть горизонтальной фронтальной и плоскостями. Линию пересечения данных плоскостей называют осью проекций. На рассмотренные плоскости спроецируем одну точку А с помощью плоской проекции. Для этого необходимо опустить из данной точки перпендикуляры Аа и A на рассмотренные плоскости.
Проекцию на горизонтальную плоскость называют горизонтальной проекцией точки А, а проекцию а́ на фронтальную плоскость называют фронтальной проекцией.
Точки, которые подлежат проецированию, в начертательной геометрии принято обозначать с помощью больших латинских букв А, В, С. Для обозначения горизонтальных проекций точек применяют малые буквы а, b, с… Фронтальные проекции обозначают малыми буквами со штрихом вверху а́, b́, с́…
Применяется также и обозначение точек римскими цифрами I, II,… а для их проекций — арабскими цифрами 1, 2… и 1́, 2́…
При повороте горизонтальной плоскости на 90° можно получить чертеж, в котором обе плоскости находятся в одной плоскости (рис. 5). Данная картина называется эпюром точки.
Через перпендикулярные прямые Аа и Аа́ проведем плоскость (рис. 4). Полученная плоскость является перпендикулярной фронтальной и горизонтальной плоскостям, потому что содержит перпендикуляры к этим плоскостям. Следовательно, данная плоскость перпендикулярна линии пересечения плоскостей. Полученная прямая пересекает горизонтальную плоскость по прямой аах, а фронтальную плоскость — по прямой а́ах. Прямые аах и а́ах являются перпендикулярными оси пересечения плоскостей. То есть Аааха́ является прямоугольником.
При совмещении горизонтальной и фронтальной плоскостей проекции а и а́ будут лежать на одном перпендикуляре к оси пересечения плоскостей, так как при вращении горизонтальной плоскости перпендикулярность отрезков аах и а́ах не нарушится.
Получаем, что на эпюре проекции а и а́ некоторой точки А всегда лежат на одном перпендикуляре к оси пересечения плоскостей.
Две проекции а и а́ некоторой точки А могут однозначно определить ее положение в пространстве (рис. 4). Это подтверждается тем, что при построении перпендикуляра из проекции а к горизонтальной плоскости он пройдет через точку А. Точно так же перпендикуляр из проекции а́ к фронтальной плоскости пройдет через точку А, т. е. точка А находится одновременно на двух определенных прямых. Точка А является их точкой пересечения, т. е. является определенной.
Рассмотрим прямоугольник Aaaха́ (рис. 5), для которого справедливы следующие утверждения:
1) Расстояние точки А от фронтальной плоскости равно расстоянию ее горизонтальной проекции а от оси пересечения плоскостей, т. е.
2) расстояние точки А от горизонтальной плоскости проекций равно расстоянию ее фронтальной проекции а́ от оси пересечения плоскостей, т. е.
Иначе говоря, даже без самой точки на эпюре, используя только две ее проекции, можно узнать, на каком расстоянии от каждой из плоскостей проекций находится данная точка.
Пересечение двух плоскостей проекций разделяет пространство на четыре части, которые называют четвертями (рис. 6).
Ось пересечения плоскостей делит горизонтальную плоскость на две четверти — переднюю и заднюю, а фронтальную плоскость — на верхнюю и нижнюю четверти. Верхнюю часть фронтальной плоскости и переднюю часть горизонтальной плоскости рассматривают как границы первой четверти.
При получении эпюра вращается горизонтальная плоскость и совмещается с фронтальной плоскостью (рис. 7). В этом случае передняя часть горизонтальной плоскости совпадет с нижней частью фронтальной плоскости, а задняя часть горизонтальной плоскости — с верхней частью фронтальной плоскости.
На рисунках 8-11 показаны точки А, В, С, D, располагающиеся в различных четвертях пространства. Точка А расположена в первой четверти, точка В — во второй, точка С — в третьей и точка D — в четвертой.
При расположении точек в первой или четвертой четвертях их горизонтальные проекции находятся на передней части горизонтальной плоскости, а на эпюре они лягут ниже оси пересечения плоскостей. Когда точка расположена во второй или третьей четверти, ее горизонтальная проекция будет лежать на задней части горизонтальной плоскости, а на эпюре будет находиться выше оси пересечения плоскостей.
Фронтальные проекции точек, которые расположены в первой или второй четвертях, будут лежать на верхней части фронтальной плоскости, а на эпюре будут находиться выше оси пересечения плоскостей. Когда точка расположена в третьей или четвертой четверти, ее фронтальная проекция — ниже оси пересечения плоскостей.
Чаще всего при реальных построениях фигуру располагают в первой четверти пространства.
В некоторых частных случаях точка (Е) может лежать на горизонтальной плоскости (рис. 12). В этом случае ее горизонтальная проекция е и сама точка будут совпадать. Фронтальная проекция такой точки будет находиться на оси пересечения плоскостей.
В случае, когда точка К лежит на фронтальной плоскости (рис. 13), ее горизонтальная проекция k лежит на оси пересечения плоскостей, а фронтальная ḱ показывает фактическое местонахождение этой точки.
Для подобных точек признаком того, что она лежит на одной из плоскостей проекций, служит то, что одна ее проекция находится на оси пересечения плоскостей.
Если точка лежит на оси пересечения плоскостей проекций, она и обе ее проекции совпадают.
Когда точка не лежит на плоскостях проекций, она называется точкой общего положения. В дальнейшем, если нет особых отметок, рассматриваемая точка является точкой общего положения.
2. Отсутствие оси проекций
Для пояснения получения на модели проекций точки на перпендикулярные плоскости проекций (рис. 4) необходимо взять кусок плотной бумаги в форме удлиненного прямоугольника. Его нужно согнуть между проекциями. Линия сгиба будет изображать ось пересечения плоскостей. Если после этого согнутый кусок бумаги вновь расправить, получим эпюр, похожий на тот, что изображен на рисунке.
Совмещая две плоскости проекций с плоскостью чертежа, можно не показывать линию сгиба, т. е. не проводить на эпюре ось пересечения плоскостей.
При построениях на эпюре всегда следует располагать проекции а и а́ точки А на одной вертикальной прямой (рис. 14), которая перпендикулярна оси пересечения плоскостей. Поэтому, даже если положение оси пересечения плоскостей остается неопределенным, но ее направление определено, ось пересечения плоскостей может находиться на эпюре только перпендикулярно прямой аа́.
Если на эпюре точки нет оси проекций, как на первом рисунке 14 а, можно представить положение этой точки в пространстве. Для этого проведем в любом месте перпендикулярно прямой аа́ ось проекции, как на втором рисунке (рис. 14) и согнем чертеж по этой оси. Если восстановить перпендикуляры в точках а и а́ до их пересечения, можно получить точку А. При изменении положения оси проекций получаются различные положения точки относительно плоскостей проекций, но неопределенность положения оси проекций не влияет на взаимное расположение нескольких точек или фигур в пространстве.
3. Проекции точки на три плоскости проекций
Рассмотрим профильную плоскость проекций. Проекции на две перпендикулярные плоскости обычно определяют положение фигуры и дают возможность узнать ее настоящие размеры и форму. Но бывают случаи, когда двух проекций оказывается недостаточно. Тогда применяют построение третьей проекции.
Третью плоскость проекции проводят так, чтобы она была перпендикулярна одновременно обеим плоскостям проекций (рис. 15). Третью плоскость принято называть профильной.
В таких построениях общую прямую горизонтальной и фронтальной плоскостей называют осью х, общую прямую горизонтальной и профильной плоскостей — осью у, а общую прямую фронтальной и профильной плоскостей — осью z. Точка О, которая принадлежит всем трем плоскостям, называется точкой начала координат.
Построение ортогональных проекций точек
Положение точки в пространстве может быть задано двумя её ортогональными проекциями, например, горизонтальной и фронтальной, фронтальной и профильной. Сочетание любых двух ортогональных проекций позволяет узнать значение всех координат точки, построить третью проекцию, определить октант, в котором она находится. Рассмотрим несколько типичных задач из курса начертательной геометрии.
По заданному комплексному чертежу точек A и B необходимо:
Определение координат точек по их проекциям
Определим сначала координаты т. A, которые можно записать в виде A (x, y, z). Горизонтальная проекция т. A – точка A’, имеющая координаты x, y. Проведем из т. A’ перпендикуляры к осям x, y и найдем соответственно Aх, Aу. Координата х для т. A равна длине отрезка AхO со знаком плюс, так как Aх лежит в области положительных значений оси х. С учетом масштаба чертежа находим х = 10. Координата у равна длине отрезка AуO со знаком минус, так как т. Aу лежит в области отрицательных значений оси у. С учетом масштаба чертежа у = –30. Фронтальная проекция т. A – т. A» имеет координаты х и z. Опустим перпендикуляр из A» на ось z и найдем Az. Координата z точки A равна длине отрезка AzO со знаком минус, так как Az лежит в области отрицательных значений оси z. С учетом масштаба чертежа z = –10. Таким образом, координаты т. A (10, –30, –10).
Построение проекций точек
Точки A и B в плоскости П3 имеют следующие координаты: A»’ (y, z); B»’ (y, z). При этом A» и A»’ лежат одном перпендикуляре к оси z, так как координата z у них общая. Точно также на общем перпендикуляре к оси z лежат B» и B»’. Чтобы найти профильную проекцию т. A, отложим по оси у значение соответствующей координаты, найденное ранее. На рисунке это сделано с помощью дуги окружности радиуса AуO. После этого проведем перпендикуляр из Aу до пересечения с перпендикуляром, восстановленным из точки A» к оси z. Точка пересечения этих двух перпендикуляров определяет положение A»’.
Точка B»’ лежит на оси z, так как ордината y этой точки равна нулю. Для нахождения профильной проекции т. B в данной задаче необходимо лишь провести перпендикуляр из B» к оси z. Точка пересечении этого перпендикуляра с осью z есть B»’.
Определение положения точек в пространстве
Наглядно представляя себе пространственный макет, составленный из плоскостей проекций П1, П2 и П3, расположение октантов, а также порядок трансформации макета в эпюр, можно непосредственно определить, что т. A расположена в III октанте, а т. B лежит в плоскости П2.
| Октанты | Знаки координат | ||
| x | y | z | |
| 1 | + | + | + |
| 2 | + | – | + |
| 3 | + | – | – |
| 4 | + | + | – |
| 5 | – | + | + |
| 6 | – | – | + |
| 7 | – | – | – |
| 8 | – | + | – |
Построение наглядного изображения точек в системе плоскостей П1, П2, П3
Используя фронтальную изометрическую проекцию, мы построили пространственный макет III октанта. Он представляет собой прямоугольный трехгранник, у которого гранями являются плоскости П1, П2, П3, а угол (-y0x) равен 45 º. В этой системе отрезки по осям x, y, z будут откладываться в натуральную величину без искажений.
Как построить точку в пространстве
Образование отрезка прямой линии АА1 можно представить как результат перемещения точки А в какой-либо плоскости Н (рис. 84, а), а образование плоскости — как перемещение отрезка прямой линии АВ (рис. 84, б).
Точка — основной геометрический элемент линии и поверхности, поэтому изучение прямоугольного проецирования предмета начинается с построения прямоугольных проекций точки.
В пространство двугранного угла, образованного двумя перпендикулярными плоскостями — фронтальной (вертикальной) плоскостью проекций V и горизонтальной плоскостью проекций Н, поместим точку А (рис. 85, а).
Линия пересечения плоскостей проекций — прямая, которая называется осью проекций и обозначается буквой х.
Плоскость V здесь изображена в виде прямоугольника, а плоскость Н — в виде параллелограмма. Наклонную сторону этого параллелограмма обычно проводят под углом 45° к его горизонтальной стороне. Длина наклонной стороны берется равной 0,5 ее действительной длины.
Из точки А опускают перпендикуляры на плоскости V и Н. Точки а’и а пересечения перпендикуляров с плоскостями проекций V и Н являются прямоугольными проекциями точки А. Фигура Аааха’ в пространстве — прямоугольник. Сторона аах этого прямоугольника на наглядном изображении уменьшается в 2 раза.
Для упрощения комплексного чертежа границы плоскостей проекций V и Н не указывают (рис. 85, в).
Перпендикуляры, проведенные из точки А к плоскостям проекций, называются проецирующими линиями, а основания этих проецирующих линий — точки а и а’ — называются проекциями точки А: а’ — фронтальная проекция точки А, а — горизонтальная проекция точки А.
Линия а’ а называется вертикальной линией проекционной связи.
Расположение проекции точки на комплексном чертеже зависит от положения этой точки в пространстве.
ПРОЕЦИРОВАНИЕ ТОЧКИ НА ТРИ ПЛОСКОСТИ ПРОЕКЦИЙ
В тех случаях, когда по двум проекциям нельзя представить себе форму предмета, его проецируют на три плоскости проекций. В этом случае вводится профильная плоскость проекций W, перпендикулярная плоскостям V и Н. Наглядное изображение системы из трех плоскостей проекций дано на рис. 87, а.
Ребра трехгранного угла (пересечение плоскостей проекций) называются осями проекций и обозначаются x, у и z. Пересечение осей проекций называется началом осей проекций и обозначается буквой О. Опустим из точки А перпендикуляр на плоскость проекций W и, отметив основание перпендикуляра буквой а», получим профильную проекцию точки А.
Для получения комплексного чертежа точки А плоскости Н и W совмещают с плоскостью V, вращая их вокруг осей Ох и Oz. Комплексный чертеж точки А показан на рис. 87, б и в.
Отрезки проецирующих линий от точки А до плоскостей проекций называются координатами точки А и обозначаются: хА, уА и zA.
Например, координата zA точки А, равная отрезку а’ах (рис. 88, а и б), есть расстояние от точки А до горизонтальной плоскости проекций Н. Координата у точки А, равная отрезку аах, есть расстояние от точки А до фронтальной плоскости проекций V. Координата хА, равная отрезку аау — расстояние от точки А до профильной плоскости проекций W.
Таким образом, расстояние между проекцией точки и осью проекции определяют координаты точки и являются ключом к чтению ее комплексного чертежа. По двум проекциям точки можно определить все три координаты точки.
Если заданы координаты точки А (например, хА=20 мм, уА=22мм и zA= 25 мм), то можно построить три проекции этой точки.
Для этого от начала координат О по направлению оси Oz откладывают вверх координату zA и вниз координату уА.Из концов отложенных отрезков — точек az и ау (рис. 88, а) — проводят прямые, параллельные оси Ох, и на них откладывают отрезки, равные координате хА. Полученные точки а’ и а — фронтальная и горизонтальная проекции точки А.
По двум проекциям а’ и а точки А построить ее профильную проекцию можно тремя способами:
1) из начала координат О проводят вспомогательную дугу радиусом Оау, равным координате (рис. 87, б и в), из полученной точки ау1 проводят прямую, параллельную оси Oz, и откладывают отрезок, равный zA;
2) из точки ау проводят вспомогательную прямую под углом 45° к оси Оу (рис. 88, а), получают точку ау1 и т. д.;
3) из начала координат О проводят вспомогательную прямую под углом 45° к оси Оу (рис. 88, б), получают точку ау1 и т. д.
Прямоугольная система координат на плоскости и в пространстве
При введении системы координат на плоскости или в трехмерном пространстве появляется уникальная возможность описания геометрических фигур и их свойств при помощи уравнений и неравенств. Это имеет иное название – методы алгебры.
Данная статья поможет разобраться с заданием прямоугольной декартовой системой координат и с определением координат точек. Более наглядное и подробное изображение имеется на графических иллюстрациях.
Прямоугольная декартова система координат на плоскости
Изображение прямоугольной системы координат на плоскости.
Оси абсцисс и ординат имеют одинаковую единицу изменения и масштаб, что показано в виде штрихе в начале координатных осей. Стандартное направление О х слева направо, а O y – снизу вверх. Иногда используется альтернативный поворот под необходимым углом.
Прямоугольная система координат получила название декартовой в честь ее первооткрывателя Рене Декарта. Часто можно встретить название как прямоугольная декартовая система координат.
Прямоугольная система координат в трехмерном пространстве
По направлению координатных осей делят на правую и левую прямоугольные системы координат трехмерного пространства.
Аналогично образуется левая система координат. Обе системы совместить невозможно, так как соответствующие оси не совпадут.
Координаты точки в декартовой системе координат на плоскости
Имеющееся число x M называют координатой точки М на заданной координатной прямой.
Координаты точки в прямоугольной системе координат в трехмерном пространстве
3D своими руками. Часть 2: оно трехмерное
В предыдущей части мы разобрались, как выводить на экран двумерные объекты, такие как пиксель и линия (отрезок), но ведь хочется поскорее создать что-то трехмерное. В этой статье впервые попробуем вывести 3D-объект на экран и познакомимся с новыми математическими объектами, такими как вектор и матрица, а также некоторыми операциями над ними, но только с теми, которые применим на практике.
Во второй части мы рассмотрим:
Системы координат
Хочется отметить, что некоторые примеры и операции в статьях изложены неточно и сильно упрощены для улучшения понимания материала, ухватив суть, вы сможете самостоятельно найти лучшее решение или исправить ошибки и неточности в демонстрационном коде. Перед тем как нарисуем что-то трехмерное, важно помнить, что все трехмерное на экране выводится двухмерными пикселями. Для того, чтобы объекты нарисованные пикселями выглядели трехмерными, нам необходимо разобрать немного математики. Мы не будем рассматривать формулы и объекты, не видя их применения. Именно поэтому, все математические операции, которые вы встретите в данной статье, будут применены на практике, что упростит их понимание.
Первое что необходимо разобрать – это системы координат. Посмотрим, какие системы координат используются, а также выберем, какую использовать нам.
Что такое система координат? Это способ определять положение точки или персонажа игры состоящего из точек при помощи чисел. Система координат имеет 2 направления осей (будем их обозначать как X, Y), если мы работаем с 2D графикой. Если мы 2D-объекту зададим больший Y и он станет выше, чем был до этого – это значит, что ось Y направлена вверх. Если мы объекту зададим больший Х и он станет правее – это значит, что ось Х направлена вправо. Это и есть направления осей, а вместе они называются системой координат. Если в месте пересечения осей Х и Y образуется угол 90 градусов, то такую систему координат называют прямоугольной (еще называют Декартовой системой координат) (см. Рисунок выше).
Но это была система координат в 2D мире, в трехмерном же, появляется еще одна ось – Z. Если ось Y (еще говорят ордината) позволяет рисовать выше/ниже, ось Х (еще говорят абсцисса) левее/правее, то ось Z (еще говорят аппликата) позволяет отдалять/приближать объекты. В трехмерной графике часто (но не всегда) используется система координат, в которой ось Y направлена вверх, ось Х направлена вправо, а вот Z может быть направлена, либо в одном направление, либо в другом. Именно поэтому системы координат мы разделим на 2 типа – левостороннюю и правостороннюю (см. Рисунок выше).
Как видно из рисунка, левосторонней системой координат (еще говорят левая система координат) называют когда ось Z, направлена от нас (чем больше Z, тем дальше объект), если же ось Z направлена к нам, то это – правосторонняя система координат (еще говорят правая система координат). Почему их так назвали? Левая, потому что, если левую руку направить ладонью вверх, а пальцами в сторону оси Х, то большой палец укажет направление Z, то есть, будет направлен в сторону монитора, если Х направлен вправо. Тоже проделайте с правой рукой, и ось Z будет направлена от монитора, при Х вправо. Запутались с пальцами? В интернете есть разные способы ставить руку и пальцы, чтобы получить нужные направления осей, но это не обязательная часть.
Для работы с 3D-графикой есть много библиотек для разные языков, где используются разные системы координат. Например, в библиотеке Direct3D используется левосторонняя система координат, а в OpenGL и WebGL правосторонняя, в VulkanAPI ось Y направлена вниз (чем меньше Y тем выше будет объект) а Z от нас, но это всего лишь соглашения, в библиотеках мы можем сами указать ту систему координат, которую считаем более удобной.
Какую систему координат выбрать нам? Подойдет любая, мы только учимся и направления осей сейчас на усвоение материала не повлияют. В примерах мы будем использовать правостороннюю систему координат и чем меньше мы укажем Z для точки, тем дальше она будет от экрана, при этом X,Y будут направлены вправо/вверх.
Точка и вектор
Теперь вы базово знаете, что такое системы координат и какие есть направления осей. Далее необходимо разобрать, что такое точка и вектор, т.к. они нам понадобятся в этой статье для практики. Точкой в 3D-пространстве называют какое-то местоположение, заданное через [X, Y, Z]. Например, мы своего персонажа хотим разместить в самом начале координат (возможно, в центре окна), тогда его положение будет [0, 0, 0], или же можно сказать, что он расположен в точке [0, 0, 0]. Теперь, мы хотим разместить противника левее игрока на 20 единиц (к примеру, пикселей), значит, он будет расположен в точке [-20, 0, 0]. Мы постоянно будем работать с точками, поэтому подробнее их разберем позже.
У вектора нет положения, а [X, Y, Z] обозначают направление. Вектор можно прибавлять к точке, для того, чтобы получить новую точку, смещенную на вектор. Например, выше я уже упомянул, что если мы хотим двигать 3D-объект (например, игрового персонажа) каждую секунду на 5 единиц вверх, то вектор смещения будет таким: [0, 5, 0]. Но как его использовать для перемещения?
Допустим, персонаж находится в точке [5, 7, 0], а вектор смещения [0, 5, 0]. Если мы прибавим к точке вектор, то получим новое положение игрока. Складывать точку с вектором, или вектор с вектором можно по следующему правилу.
Пример сложения точки и вектора :
Мы уже знаем, что такое точка, вектор, как суммировать точку и вектор (или 2 вектора), и как вычислять длину вектора. Давайте добавим класс вектора и реализуем в нем суммирование и вычисление длины. Хочу также обратить внимание на то, что мы не будем создавать класс для точки, если нам понадобится точка, то мы будем использовать класс вектора, т.к. и точка и вектор хранят в себе X, Y, Z, просто для точки это положение, а для вектора направление.
Добавьте в проект с предыдущей статьи класс вектора, можно его добавить ниже класса Drawer. Я свой класс назвал Vector и добавил в него 3 свойства X, Y, Z:
Заметьте, что поля x, y, z без функций «аксессоров», так мы можем напрямую обращаться к данным в объекте, это сделано для более быстрого доступа. Позднее, мы оптимизируем этот код еще сильнее, но сейчас оставим так, чтобы улучшить читаемость.
Теперь реализуем суммирование векторов. Функция будет принимать 2 суммируемых вектора, поэтому я думаю сделать ее статической. Тело функции будет работать согласно формуле выше. Результатом нашего суммирования получится новый вектор, которым мы и будем возвращать:
Осталось реализовать функцию вычисления длины вектора. Опять же, все реализовываем по формулам, которые были выше:
Метод normalize нормализует вектор и возвращает его (this), это нужно чтобы в дальнейшем можно было normalize использовать в выражениях.
Теперь, когда мы знаем что такое нормализация вектора, и знаем что ее лучше выполнять перед использованием вектора, возникает вопрос. Если нормализация вектора – это приведение к единичной длине, то есть скорость перемещения объекта (персонажа) будет равна 1, то как ускорить персонаж? Например, при перемещении персонажа по диагонали вверх/вправо со скоростью 1, его вектор будет [0.707, 0.707, 0], а какой вектор будет если мы захотим персонажа перемещать в 6 раз быстрее? Для этого существует операция, которая называется «умножение вектора на скаляр». Скаляром называют обычное число на которое умножают вектор. Если скаляр будет равен 6, то вектор станет в 6 раз длиннее, а наш персонаж в 6 раз быстрее соответственно. Как же выполнить умножение на скаляр? Для этого необходимо умножить каждую компоненту вектора на скаляр. Например, решим задачу выше, когда персонажа перемещающегося на вектор [0.707, 0.707, 0] (скорость 1) необходимо ускорить в 6 раз, то есть умножить вектор на скаляр 6. Формула умножения вектора «V» на скаляр «s» следующая:
В нашем случае это будет:
– новый вектор перемещения, длина которого равна 6.
Важно знать, что положительный скаляр масштабирует вектор не меняя его направления, если же скаляр отрицательный, то он также масштабирует вектор (увеличивает его длину) но вдобавок меняет направление вектора на противоположное.
Давайте реализуем функцию multiplyByScalar умножения вектора на скаляр в нашем классе Vector:
Матрица
Мы немного разобрались с векторами и некоторыми операциями над ними, которые понадобятся в этой статье. Далее необходимо разобраться с матрицами.
Можно сказать, что матрица – это самый обычный двумерный массив. Просто в программирования используют термин «двумерный массив», а в математике «матрица». Для чего же в 3D-программировании нужны матрицы? Это мы разберем, как только немного научимся с ними работать.
Мы будем использовать только числовые матрицы (массив чисел). У каждой матрицы есть свой размер (как у любого 2-мерного массива). Вот несколько примеров матриц:
Из всех операций над матрицами, мы сейчас рассмотрим лишь умножение (остальные позже). Так получается, что умножение матриц не самая простая операция, она способна легко запутать, если не внимательно проследить за порядком умножения. Но не переживайте, у вас все получится, т.к. тут мы будем только умножать и суммировать. Для начала, нужно запомнить пару особенностей умножения, которые нам понадобятся:
Умножение M1 на M2 возможно, т.к. в первой матрице 2 столбца, а во второй 2 строки.
Умножение М1 на М2 возможно, т.к. в первой матрице 3 столбца, а во второй 3 строки.
Умножение М1 на М2 невозможно, т.к. в первой матрице 2 столбца, а во второй 3 строки.
Думаю, данные примеры немного разъяснили картину, когда возможно умножение. Результатом умножения матриц, будет всегда матрица, количество строк которой будет равно количеству строк 1-й матрицы, а количество столбцов, равно количеству столбцов 2-й. Например, если умножить матрицу 2 на 6 и 6 на 8, то получится матрица размером 2 на 8. Теперь перейдем, непосредственно к самому умножению.
Для умножения важно помнить, что столбцы и строки в матрице нумеруются начиная с 1, а в массиве с 0. Первый индекс в элементе матрицы, указывает на номер строки, а второй на номер столбца. То есть, если элемент матрицы (элемент массива) записан в виде: m28, это значит что мы обращаемся ко второй строке и восьмому столбцу. Но поскольку в коде мы будем работать с массивами, вся индексация строк и столбцов у нас будет начинаться с 0.
Давайте попробуем перемножить 2 матрицы A и B с конкретными размерами и элементами:
Видно, что матрица А имеет размер 3 на 2, а матрица В размер 2 на 2, умножение возможно:
Как видим, у нас получилась матрица 3 на 2, умножение поначалу запутанное, но если есть цель научиться умножать «без напряга», необходимо решить несколько примеров. Вот еще пример умножения матриц A и В:
Если не до конца понятно умножение – ничего страшного, т.к. умножать на листике нам не придется. Мы напишем один раз функцию умножения матриц и будем использовать её. Вообще, все эти функции уже написаны, но мы делаем все самостоятельно.
Теперь еще немного терминов, которые будут в дальнейшем использоваться:
Квадратная матрица 2 на 2
Квадратная матрица 3 на 3
Квадратная матрица 4 на 4
Еще важно запомнить такое свойство, что если умножить любую матрицу M на подходящую по размеру единичную матрицу, к примеру назовем ее I, то получим исходную матрицу M, например: M * I = M или I * M = M. Т.е. умножение матрицы на единичную матрицу никак не влияет на результат. К единичной матрице мы вернемся позднее. В 3D-программировании мы часто будем использовать квадратную матрицу 4 на 4.
Теперь немного разберем, зачем нам нужны будут матрицы и зачем их умножать? В 3D-программировании существует множество различных матриц 4 на 4, которые если умножить на вектор или точку, будут выполнять нужные нам действия. Например, нам необходимо повернуть персонажа в трехмерном пространстве вокруг оси Х, как это сделать? Умножить вектор на специальную матрицу, которая отвечает за поворот вокруг оси X. Если нужно переместить и повернуть точку вокруг начала координат, то нужно умножить эту точку на специальную матрицу. У матриц есть прекрасное свойство – комбинирования преобразований (рассмотрим в этой статье). Допустим, нам необходимо персонажа состоящего из 100 точек (вершин, но об этом тоже будет немного ниже) в приложении увеличить в 5 раз, потом повернуть на 90 градусов по Х, потом перенести на 30 единиц вверх. Как уже было сказано – для разных действий уже существуют специальные матрицы, которые мы рассмотрим. Для выполнения задачи выше, мы, к примеру, в цикле перебираем все 100 точек и каждую сначала умножаем на 1-ю матрицу, чтобы увеличить персонажа, затем умножаем на 2-ю матрицу, чтобы повернуть на 90 градусов по Х, потом умножаем на 3-ю для перемещения на 30 единиц вверх. Итого, для каждой точки у нас 3 умножения матрицы, а точек 100, значит, умножений будет 300. Но если мы возьмем и перемножим между собой матрицы для увеличения в 5-ть раз, поворота на 90 градусов по Х и перемещение на 30 ед. вверх, то получим матрицу, которая в себе содержит все эти действия. Умножив точку на такую матрицу, точка окажется там, где нужно. Подсчитаем теперь, сколько действий выполняется: 2 умножения для 3-х матриц, и 100 умножений для 100 точек, итого 102 умножения – точно лучше, чем 300 умножений до этого. Тот момент, когда мы перемножили 3 матрицы для объединения различных действий в одну матрицу – называется комбинированием преобразований и мы его обязательно сделаем на примере.
Как умножить матрицу на матрицу мы разбирали, но в прочитанном выше абзаце говорится об умножении матрицы на точку или вектор. Для умножения точки или вектора достаточно их представить матрицей.
Например, у нас есть вектор [10, 2, 5] и есть матрица:
Видно, что вектор можно представить матрицей 1 на 3 или матрицей 3 на 1. Поэтому мы можем умножить вектор на матрицу 2 способами:
Здесь мы представили вектор, как матрицу 1 на 3 (еще говорят вектор-строка). Такое умножение возможно, т.к. в первой матрице (векторе-строке) 3 столбца, а во второй матрице 3 строки.
Здесь мы представили вектор, как матрицу 3 на 1 (еще говорят вектор-столбец). Такое умножение возможно, т.к. в первой матрице 3 столбца, а во второй (векторе-столбце) 3 строки.
Как видно, мы можем представить вектор как вектор-строку и умножать его на матрицу, или представить вектор, как вектор-столбец и умножать матрицу на него. Давайте проверим, будет ли результат умножения одинаковым в обоих случаях:
Умножаем вектор-строку на матрицу:
Теперь, умножим матрицу на вектор-столбец:
Мы видим, что умножая вектор-строку на матрицу и матрицу на вектор-столбец, мы получили совершенно разные результаты (вспоминаем про коммутативность). Поэтому, в 3D-программировании существую матрицы, которые предназначены для умножения только на вектор строку, или только на вектор столбец. Если мы умножим матрицу предназначенную для вектора-строки на вектор-столбец, то получим результат, который нам ничего не даст. Используйте удобное вам представление вектора/точки (строка или столбец), только в дальнейшем используйте для вашего представления вектора/точки соответствующие матрицы. В Direct3D, например, используют строковое представление векторов, и все матрицы в Direct3D предназначение для умножения вектора-строки на матрицу. В OpenGL используется представление вектора (или точки), как столбца, и все матрицы предназначены для умножения матрицы на вектор-столбец. В статьях будем использовать вектор-столбец и будем умножать, матрицу на вектор-столбец.
Подведем небольшой итог прочитанного про матрицы.
Давайте добавим в проект класс Matrix. Еще иногда класс для работы с матрицами 4 на 4 называют Matrix4, и эта 4 в названии говорит нам о размере матрицы (еще говорят матрица 4-го порядка). Все данные матриц мы будем хранить в двумерном массиве 4 на 4.
Перейдем к реализации операций умножения. Я не рекомендую использовать циклы для этого. Чтобы повысить быстродействие, мы все должны умножать построчно – так получится сделать за счет того, что все умножения у нас будут происходить с матрицами фиксированного размера. Я буду использовать циклы для операции умножения, только для экономии объема кода, вы же можете написать все умножение без циклов вообще. У меня код умножения выглядит так:
Как видите, метод принимает матрицы a и b, умножает их и возвращает результат в виде такого же массива 4 на 4. В начале метода я создал матрицу m заполненную нулями, но это не обязательно, так я хотел показать какой размерности будет результат, вы же можете создать массив 4 на 4, без каких либо данных.
Теперь необходимо реализовать умножение матрицы на вектор-столбец, как обсудили выше. Но если представить вектор столбцом, то получится матрица вида: 
на которую нам нужно будет умножать на матрицы 4 на 4 для выполнения различных действий. Но на этом примере прекрасно видно, что такое умножение выполнить нельзя, ведь у вектора-столбца 3 строки, а у матрицы 4 столбца. Что же тогда делать? Нужен какой-то четвертый элемент, тогда у вектора станет 4 строки, которые будут равны количеству столбцов у матрицы. Давайте добавим вектору такой 4-й параметр и назовем его W, теперь у нас все вектора в 3D будут вида [X, Y, Z, W] и такие вектора уже можно будет умножать на матрицу 4 на 4. На самом деле у компоненты W более глубокое назначение, но с ним мы познакомимся в следующей части (ведь не зря у нас матрица 4 на 4, а не 3 на 3). Добавляем в класс Vector, который мы создавали выше компоненту w. Теперь начало класса Vector выглядит так:
Я проинициализировал W единицей, но почему 1? Если мы присмотримся к тому, как умножаются компоненты матрицы и вектора (пример кода ниже), можно заметить, что если поставить в качестве W значение 0 или любое другое отличное от 1, тогда при умножении этот W будет влиять на результат, а мы пока не знаем, как им пользоваться, а если мы его сделаем 1, то он в векторе будет, но результат никак не поменяет.
Теперь вернемся к матрице и реализуем в классе Matrix (можно и в классе Vector, разницы нет) умножения матрицы на вектор, которое уже возможно, благодаря W:
Обратите внимание, что матрицу мы представили массивом 4 на 4, а вектор объектом со свойствами x, y, z, w, в будущем мы вектор поменяем и он тоже будет представлен массивом 1 на 4, т.к. это ускорит умножение. Но сейчас, для того чтобы лучше видеть, как происходит умножение и улучшить понимание кода, мы менять вектор не будем.
Код для умножения матриц между собой и умножения матрицы на вектор мы написали, но все еще не понятно как это нам поможет в трехмерной графике.
Хочу также напомнить, что я вектором называю как точку (положение в пространстве) так и направление, т.к. оба объекта содержат одинаковую структуру данных x, y, z и нововведенный w.
Давайте рассмотрим некоторые из матриц, которые выполняют базовые операции над векторами. Первой из таких матриц будет матрица перемещения (Translation matrix). Умножив матрицу перемещения на вектор (местоположение) он сместится на указанное число единиц в пространстве. А вот и матрица перемещения:
В этом примере, в матрицу перемещения мы подставили нужное смещение персонажа (translationMatrix), проинициализировали его начальное положение (characterPosition) и потом перемножили его с матрицей, а результат вывели через console.log (это отладочный вывод в JS). Если вы используете не JS, то выведите X, Y, Z самостоятельно при помощи инструментов вашего языка. Результат, который мы получили в консоли: [20, 15, 9, 1], все сходится с результатом, который мы посчитали выше. У вас может возникнуть вопрос, зачем получать такой же результат умножением вектора на специальную матрицу, если мы его гораздо проще получили просуммировав вектор со смещением покомпонентно. Ответ не самый простой и мы подробнее его еще обсудим, но сейчас можно отметить что как обсуждалось ранее, мы матрицы с разными преобразованиями можем комбинировать между собой, таким образом сокращая очень много вычислений. Матрицу translationMatrix в примере выше, мы создали в виде массива вручную и подставили туда необходимое смещение, но поскольку мы этой и другими матрицами будем пользоваться часто, то давайте вынесем ее в метод в классе Matrix, и смещение в нее будем передавать аргументами:
Присмотритесь еще раз к матрице перемещения, вы увидите, что dx, dy, dz находятся в последнем столбце и если мы посмотрим код умножения матрицы на вектор, то заметим, что именно этот столбец умножается на W компоненту вектора. И если бы она была, например 0, то dx, dy, dz, мы бы умножали на 0 и перемещение не работало бы. Но мы можем W делать равное 0, если мы хотим в классе Vector хранить направление, т.к. направление перемещать нельзя, то так бы мы обезопасили себя, и даже если мы умножим такое направление на матрицу перемещения, то это никак не поломает вектор направления, т.к. все перемещение будем умножаться на 0.
Итого можем применить такое правило, местоположение мы создаем так:
А направление создам так:
Так мы сможем отличать местоположение и направление, и при умножении направления на матрицу перемещения мы случайно не сломаем вектор направления.
Вершины и индексы
Прежде чем посмотрим какие еще есть матрицы, разберемся немного с тем, как нам применить уже имеющиеся знания для вывода чего-то трехмерного на экран. Все что мы выводили до этого – линии и пиксели. Но давай теперь при помощи этих инструментов, выведем, например куб. Для того чтобы это сделать нам необходимо разобраться из чего состоит трехмерная модель. Самая основная составляющая любой 3D-модели – это точки (далее будем называть вершины) по которым мы можем ее нарисовать, это, по сути, много векторов местоположений, которые, если мы правильно их соединим между собой линиями, получим 3D-модель (сетку модели) на экране, она будет без текстуры и без многих других свойств, но всему свое время. Взглянем на куб, который мы хотим вывести, и попробуем понять сколько у него вершин:
На изображении мы видим, что у куба 8 вершин (для удобства я их пронумеровал). И все вершины между собой соединены линиями (ребра куба). Т.е., чтобы описать куб и нарисовать его линиями, нам нужно 8 координат каждой вершины, и также нужно указать из какой вершины до какой нам рисовать линию, чтобы получился куб, ведь если мы мы неправильно соединим вершины, например проведем линию из вершины 0 в вершину 6, то это точно будет не куб, а другой объект. Давайте сейчас опишем координаты каждой из 8 вершин. В современной графике 3D-модели могут состоять из десятков тысяч вершин, и конечно же никто вручную их не прописывает. Модели рисуют в 3D-редакторах и когда экспортируют 3D-модель, в ее коде уже есть все вершины, нам нужно только их загрузить и нарисовать, но мы пока что учимся и не умеем читать форматы 3D-моделей, поэтому куб опишем вручную, он очень простой.
Представим, что куб выше, находится в центре координат, его середина находится в точке 0, 0, 0 и он должен отображаться вокруг этого центра:
Каждую вершину я положил в экземпляр класса Vector, это не лучший вариант для производительности (лучше в массиве), но сейчас наша цель разобраться как все работает.
Давайте сейчас воспринимать значения координат вершин куба как пиксели, которые мы будем рисовать на экране, в таком случае мы видим что размер куба 2 на 2 на 2 пикселей. Мы создали такой маленький куб, чтобы в т.ч. посмотреть на работу матрицы масштабирования, при помощи которой мы его увеличим. В дальнейшем очень хорошая практика делать модели маленькими, даже еще меньше, чем у нас, чтобы увеличивать их до нужного размера не сильно разными скалярами.
Просто точки куба рисовать пикселями не очень наглядно, т.к. все что мы увидим – это 8 пикселей, по одному на каждую вершину, гораздо лучше нарисовать куб линиями используя функцию drawLine из прошлой статьи. Но для этого нам нужно понять из каких вершин в какие у нас проходят линии. Взглянем на изображение куба с индексами еще раз и мы увидим, что он состоит из 12 линий (или ребер). Также очень легко увидеть что мы знаем координаты начала и конца каждой линии. Например одна из линий (верхняя ближняя) должна быть нарисована из вершины 0 в вершину 3, или же из координат [-1, 1, 1] в координаты [1, 1, 1]. Информацию о каждой линии нам придется записать в коде вручную смотря на изображение куба, но как правильно это сделать? Если у нас 12 линий и у каждой линии есть начало и конец, т.е. 2 точки, тогда, чтобы нарисовать куб нам понадобится 24 точки? Это правильный ответ, но давайте взглянем на изображение куба еще раз и обратим внимание на то что у куба каждая линия имеет общие вершины, например, в вершине 0 соединяются 3 линии, и так с каждой вершиной. Мы можем сэкономить память и не записывать координаты начала и конца каждой линии, достаточно создать массив и указать индексы вершин из массива vertices в которых эти линии начинаются и заканчиваются. Давайте создадим такой массив и опишем его только индексами вершин, по 2 индекса на каждую линию (начало линии и конец). А немного далее, когда будем рисовать эти линии, мы с легкостью достанем их координаты из массива vertices. Мой массив линий (я назвал его edges, т.к. это ребра куба) я создал ниже массив вершин и выглядит он так:
В этом массиве 12 пар индексов, по 2 индекса вершин на каждую линию.
Давайте сейчас познакомимся еще с одной матрицей, которая увеличит наш куб, и наконец, попробуем его нарисовать на экране. Матрица масштабирования (Scale Matrix) выглядит так:
Параметры sx, sy, sz на главной диагонали означают во сколько раз мы хотим увеличить объект. Если мы в матрицу подставим 10, 10, 10 вместо sx, sy, sz, и умножим эту матрицу на вершины куба, это сделает что наш куб в десять раз больше и он уже будет не 2 на 2 на 2, а 20 на 20 на 20.
Для матрицы масштабирования, так же, как и для матрицы перемещения реализуем метод в классе Matrix, который будет возвращать матрицу с уже подставленными аргументами:
Конвейер визуализации
Если мы сейчас попытаемся нарисовать куб линиями используя текущие координаты вершин, то мы получим очень маленький двухпиксельный куб, в верхнем левом углу экрана, т.к. начало координат canvas находится именно там. Давайте пройдем циклом по всем вершинам куба и умножим их на матрицу масштабирования, чтобы сделать куб больше, а потом еще и на матрицу смещения, чтобы увидеть куб не в верхнем левом углу, а посередине экрана, у меня код перебора вершин с умножением матриц находится ниже массива edges, и выглядит так:
С вершинам мы пока что закончили, но еще нужно все это нарисовать используя drawLine и массив edges, давайте ниже цикла с вершинами напишем еще один цикл для перебора edges и в нем нарисуем все линии:
Вспомним, в прошлой статье все рисование мы начинаем с очистки экрана от предыдущего состояния вызовом метод clearSurface, затем я перебираю все грани куба и рисую куб линиями синего цвета (0, 0, 255), а сами координаты линий я беру из массива sceneVertices, т.к. там лежат уже отмасштабированные и перемещенные вершины в предыдущем цикле, но индексы этих вершин совпадают с индексами оригинальных вершин из массива vertices, т.к. я обрабатывал их и ложил в массив sceneVertices без изменения порядка.
Если мы сейчас запустим код, то ничего не увидим на экране. Это потому что в нашей системе координат Y смотрит вверх, а в системе координат canvas вниз. Получается, что наш куб есть, но он находится за пределами экрана и чтобы это исправить, нам нужно перед рисованием пикселя в классе Drawer перевернуть картинку по Y (отзеркалировать). Пока что такого варианта нам будет достаточно, в итоге код рисования пикселя у меня выглядит так:
Видно что в формуле получения offset, Y теперь со знаком минус и ось теперь смотрит в нужном нам направлении, также в этом методе я добавил проверку выхода за пределы массива пикселей. В классе Drawer появились и некоторые другие оптимизации благодаря комментариям к предыдущей статье, поэтому выкладываю весь класс Drawer с небольшими оптимизациями и вы можете заменить старый Drawer на этот:
Если сейчас вы запустите код, то на экране будет такое изображение:
Матрица поворота вокруг оси X
Матрица поворота вокруг оси Y
Матрица поворота вокруг оси Z
Если мы умножим вершины куба на одну из этих матриц, то куб повернется на указанный угол (a) вокруг той оси, матрицу поворота вокруг которой мы выберем. Тут есть некоторые особенности при повороте вокруг сразу нескольких осей и на них мы посмотрим ниже. Из примера матриц видно, что они используют 2 функции sin и cos и в JavaScript уже есть функционал для их вычисления Math.sin(a) и Math.cos(a), но они работают с радианной мерой углов, которая может показаться не самой удобной, если мы хотим повернуть модель. Мне, например, гораздо удобнее что-то повернуть на 90 градусов (градусная мера), что в радианной мере будет означать Pi / 2 (В JS также есть приблизительное значение Pi это константа Math.PI). Давайте в класс Matrix добавим 3 метода для получения матриц вращения, с принимаемым углом поворота в градусах, который мы преобразуем в радианы, т.к. они нужны для работы функций sin / cos:
Все 3 метода начинаются с преобразования градусов в радианы, после чего мы подставляем угол поворота в радианах в матрицу поворота, передавая углы в функции sin и cos. Почему матрица именно такая, вы можете подробнее прочитать на хабре в тематических статьях, с очень подробным разъяснением, в противном случае – вы можете воспринимать эти матрицы как формулы, которые вычислили для нас и мы можем быть уверенными в том, что они рабочие.
Выше в коде мы реализовали 2 цикла, первый – преобразовывает вершины, второй – выводит линии по индексам вершин, в итоге мы получаем из вершин картинку на экране, и давайте этот участок кода назовем конвейер визуализации. Конвейер потому что мы берем вершину и поочередно делаем с ней разные операции, масштаб, сдвиг, поворот, отрисовку, как на обычном промышленном конвейере. Теперь давайте в первый цикл в конвейере визуализации добавим помимо масштабирования, еще и поворот вокруг осей. Сначала я поверну вокруг X, потом вокруг Y, затем увеличу модель и перемещу ее (2 последних действия уже есть), итого весь код цикла у меня будет таким:
В этом примере я повернул все вершины вокруг оси X на 20 градусов, потом вокруг Y на 20 градусов и 2 оставшихся преобразования у меня уже были. Если вы все сделали правильно, то ваш куб, теперь должен выглядеть трехмерным:
У поворота вокруг осей есть одна особенность, например, если вы повернете куб сначала вокруг оси Y, а потом вокруг оси X, то результаты будут отличаться:
Есть и другие особенности, например, если куб повернуть на 90 градусов по оси Х, затем на 90 градусов по оси Y, и наконец, на 90 градусов вокруг оси Z, то последний поворот вокруг Z, отменит поворот вокруг Х, и получится такой же результат как если бы вы просто повернули фигуру на 90 градусов вокруг оси Y. Чтобы посмотреть почему так происходит, возьмите любой прямоугольный (или кубический) объект в руки (напр. собранный кубик Рубика), запомните начальное положение объекта и проверните его сначала на 90 градусов вокруг воображаемого Х, а затем на 90 градусов вокруг Y и на 90 градусов вокруг Z и запомните, какой стороной он к вам стал, затем начните с запомненного ранее начального положения и проделайте то же самое, убрав повороты повороты X и Z, повернути только вокруг Y — вы увидите, что результат одинаковый. Сейчас мы не будем решать эту проблему и вдаваться в ее подробности, такое вращение на данный момент нас полностью устраивает, но мы эту проблему еще упомянем в третьей части (если хочется подробнее разобраться сейчас, попробуйте поискать статьи на хабре по запросу «шарнирный замок»).
Теперь давайте немного оптимизируем наш код, выше упоминалось, что матричные преобразования можно комбинировать между собой, путем перемножения матриц преобразований. Давайте попробуем не умножать каждый вектор сначала на матрицу поворота вокруг X, затем вокруг Y, затем масштабирования и в конце перемещения, а сначала, до цикла, перемножим все матрицы, а в цикле будем умножать каждую вершину лишь на одну результирующую матрицу, у меня код вышел таким:
В данном примере комбинирование преобразований выполняется до цикла 1 раз, и поэтому у нас всего 1 умножение матрицы с каждой вершиной. Если вы запустите этот код, то рисунок куба должен остаться прежним.
Давайте добавим простейшую анимацию, а именно – будем менять угол вращения вокруг оси Y в интервале, например, будем изменять угол вращения вокруг оси Y на 1 градус, каждые 100 миллисекунд. Для этого нужно положить код конвейера визуализации в функцию setInterval, которую мы впервые использовали в 1-й статье. Код конвейера с анимацией выглядит так:
Результат должен быть таким:
Последнее, что мы сделаем в этой части – вывод осей системы координат на экран, чтобы было видно вокруг чего вращается наш куб. Ось Y нарисуем из центра вверх, длинной в 200 пикселей, ось X – вправо, тоже длинной 200 пикселей, а ось Z, нарисуем вниз и влево (по диагонали) длинной 150 пикселей, как это показано в самом начале статьи на рисунке правосторонней системы координат. Начнем с самой простой части, это оси X, Y, т.к. их линия смещается лишь в одном направлении. После цикла, который рисует куб (цикл перебора edges) добавим отрисовку X, Y осей:
И в результате вы получите все 3 оси нужной длины:
В этом примере ось Z, лишь показывает какая у нас система координат, мы ее нарисовали по диагонали чтобы ее было видно, т.к. настоящая ось Z перпендикулярна нашем взгляду, и ее мы могли бы нарисовать точкой на экране, что было бы не красиво.
Итого, в это статье мы базово разобрались в системах координат, векторах и с некоторыми операциями над ними, матрицами и их роли в преобразованиях координат, разобрались с вершинами и написали простенький конвейер визуализации куба и осей системы координат, закрепив теорию практикой. Весь код приложения доступен под спойлером: