Canvas и геометрия. Это почти просто
- вторник, 7 июля 2020 г. в 00:28:07
Трехмерную графику можно реализовать в браузере не только применяя WebGL или
библиотеки созданные на основе WebGL, но и путем простой отрисовки на 2D-холсте используя для этого функции HTML5 Canvas.
Существует множество книг, статей и информации в интернет о том как использовать холст
HTML5 Canvas для отображения рисунков, графиков и даже анимации в некоторых браузерных играх.
Однако практически никогда не рассматривается возможность непосредственного использования холста для отображения трехмерных объектов.
Остановимся на этом чуть подробнее.
Если создается трехмерная компьютерная игра, например 3D-шутер, то разработчики стараются сделать ее как можно более реалистичной и используют для этого графические ускорители. В этом случае без соответствующих программных инструментов обойтись не удастся. Для таких игр в браузере есть прямой смысл использовать WebGL и Three.js. Самое главное, что с помощью шейдеров предназначенных для этих программных инструментов можно осуществить реалистичное освещение сцены и находящихся на сцене объектов.
Но если требуется просто показать трехмерный объект со всех сторон, то можно обойтись без WebGL и шейдеров. Например некоторые программы CAD/CAM предназначены только для моделирования формы объектов и не предполагают использования реалистичного освещения.
На сайте Canvas и геометрия я последовательно и очень подробно объясняю как используя исключительно HTML5 Canvas можно создать изображения 3D-моделей многогранников.
Полгода тому назад была опубликована моя статья Three.js и геометрия, которая относилась к серии из 30 глав (уроков) на одноименном сайте Three.js и геометрия где
мной описывалось отображение 3D-моделей многогранников при помощи three.js. Теперь все модели на новом сайте созданы только с помощью HTML5 Canvas. Однако сам расчет координат вершин моделей на обеих сайтах сделан абсолютно одинаково. Отличие заключается лишь в способе вывода изображения на экран.
В принципе эти два сайта можно рассматривать как единый учебный курс в котором
рассматриваются два способа отображения одних и тех же моделей на холст — с использованием библиотеки three.js и отображение моделей на холст без использования этой библиотеки. Можно посмотреть как выглядит программа отображения одного и того же многранника зайдя по очереди или одновременно на оба сайта.
Перечислю некоторые из тех возможностей которые доступны на обоих сайтах, но сделаны они на них по-разному:
Если используется WebGL/three.js программист может не заботиться об удалении невидимых линий — это делается автоматически при помощи Z-буфера.
На сайте Canvas и геометрия показано как можно отображать только внешние (направленные к наблюдателю) грани модели двумя различными способами.
При создании online-программ находящихся на сайте использовались лишь самые простые конструкции языка JavaScript.
Самая сложная конструкция этого языка, которая используется на сайтах это prototype в моей библиотеке WebGeometry, при помощи которой производятся геометрические расчеты. Хотя можно было бы в принципе при создании этой библиотеки обойтись и без prototype. В самом начале моей работы по отображению трехмерных моделей в браузере мне было весьма непривычно пользоваться JavaScript. Мне казалось «диким», что в языке нет заранее прдопределенных типов данных. Да и некоторые другие его особенности также казались весьма странными.
В течение многих лет я программировал на C/C++ и поэтому поначалу JavaScript мне показался ущербным языком.
Но спустя некоторое время до меня дошло, что имея только браузер (я в основном использую Chrome и иногда Firefox) и Notepad++ работать на JavaScript очень удобно — результат виден сразу — особенно это относится к небольшим
графическим программам.
Если не относться заранее предвзято к особенностям языка, то он оказывается достаточно комфортен.
Поэтому сейчас я изменил свое отношение к этому языку в гораздо лучшую для него сторону.
Иногда правда я с тоской вспоминаю замечательный (это мое личное мнение) отладчик в Visual Studio.
Поэтому, когда требуется найти сложную ошибку в геометрических вычислениях,
я обращаюсь к Visul C++ и этому отладчику. Но отладчики в Chrome и Firefox тоже производят самое хорошее впечатление.
Сейчас для создания больших программ на JavaScript все время появляются новые инструменты такие как React, Angular, Vue.
Освоение этих программ требует значительных усилий. К счастью для создания простых графических программ можно обойтись без них. У меня даже пока не возникала потребность в использовании новых (на данный момент уже и не новых) возможностей ES6.
Однако для понимания работы этих программ требуется некоторый опыт в использовании обработчиков событий мыши возникающих при ее движении по холсту и при нажатии ее клавиш.
Все online-программы сделаны максимально интерактивными. При помощи мыши можно не только выбрать любую грань модели, но также посмотреть значения координат модели в любой ее точке, координаты точек на самом холсте, вращать модель и (на одной странице сайта) осуществлять масштабирование модели колесиком мыши.
Для отрисовки моделей и нанесения их размеров на холст была сделана библиотека
canvas2D,
которая фактически представляет собой небольшую обертку вокруг функций HTML5 Canvas.
При этом функции входящие в библиотеку canvas2D сделаны таким образом, чтобы их было максимально удобно использовать совместно с функциями входящими в состав библиотеки
WebGeometry
Несколько слов про использование библиотеки WebGeometry. Эта библиотека сделана таким образом, чтобы программист, который создает 3D-модель с нуля не задумывался о том как решить очередную задачу аналитической геометрии на плоскости и в пространстве для прямых и плоскостей. В основном для решения таких задач требуются неплохие знания работы с матрицами, и если у вас нет соответствующих готовых функций то перед вами возникают дополнительные проблемы. В библиотеке WebGeometry нет функций
для перспективных преобразований в пространстве, которые производятся при помощи не трехмерных, а четырехмерных матриц.
Перспективные преобразования не требуются при создании трехмерных моделей. Поэтому они и не включены в состав библиотеки WebGeometry. Если потребуется выполнить такие преобразования, то соответствующие функции можно найти, если вы используете three.js, то в самой этой библиотеке или в популярной библиотеке glMatrix
Для себя я сделал вывод, что простую отрисовку трехмерных моделей без реалистичного освещения на холсте можно сделать достаточно просто и значительно легче чем с использованием three.js.
На мой взгляд это можно сравнить как отрисовку трехмерной модели с помощью OpenGL с фиксированным конвейером с отрисовкой той же модели и использованием OpenGL с программируемым конвейером.
Например, во втором случае придется делать триангуляцию многоугольников, что значительно усложняет процесс программирования.
Тем кого заинтересует этот сайт, возможно, покажутся интересными и некоторые
другие страницы моих сайтов связанные с отображением моделей на экране компьютера:
На сайте Three.js и геометрия все 16 моделей многогранников расчитаны с помощью библиотеки WebGeometry (так же как и на текущем сайте), но отображены они на холст с помощью three.js.
На сайте Diamond Cuts модели 7 многогранников также расчитаны спомощью библиотеки WebGeometry и отображены на холст с помощью three.js. При этом используется несколько типов шейдеров и кубические текстуры. Все программы на этом сайте снабжены подробными комментариями и поэтому на их примере можно посмотреть как
шейдеры встраиваются в three.js.
На страницах Diamond Cuts collection in environments
и Diamond Cuts with Dispersion Light можно найти множество моделей различных многогранников отображенных при помощи шейдеров и кубических текстур.
Вывод на экран моделей с этих страниц осуществляется при помощи three.js.
При определении координат вершин всех этих моделей координаты предварительно рассчитывались на Visual C++ и их значения записывались в файлы. Эти файлы с сохраненными в них значениями координат используются в программах отображения моделей на экран (three.js и API WebGL).
Спасибо всем за просмотр моей статьи!