Трехмерную графику можно реализовать в браузере не только применяя 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 и отображение моделей на холст без использования этой библиотеки. Можно посмотреть как выглядит программа отображения одного и того же многранника зайдя по очереди или одновременно на оба сайта.
Перечислю некоторые из тех возможностей которые доступны на обоих сайтах, но сделаны они на них по-разному:
- Можно задать практически все параметры модели определяющие размеры ее отдельных частей, наклон граней модели и т.д.
- Просмотр нумерации вершин модели.
- Масштабирование модели.
- Возможность выбора любой грани модели мышью (при использовании three.js это делается с помощью RayCaster'а).
- Возможность просмотра значений координат любой точки находящейся на поверхности модели.
- Проверка корректности построенной модели. При желании можно выключать/включать проверку корректности построения модели.
- Показано как на 3D-модели отобразить размеры ее частей при помощи выносных и размерных линий. На сайте сделанном при помощи 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
Однако в этих двух упомянутых библиотеках практически нет функций для решения задач аналитической геометрии.
Поэтому и была сделана библиотека функций WebGeometry. В библиотеке
Sylvester есть некоторые (но не все требуемые) такие функции и поэтому я решил сделать библиотеку полностью подходящую под мои задачи с нуля на основе уже существующих функций на C/C++.
Для себя я сделал вывод, что простую отрисовку трехмерных моделей без реалистичного освещения на холсте можно сделать достаточно просто и значительно легче чем с использованием 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).
- По ссылке
Pages можно перейти на страницы этого сайта на которых находятся 36 моделей различных огранок.
Вывод на экран на этих страницах осуществляется при помощи чистого API WebGL.
Также отсюда можно скачать exe-файл моей программы под Windows сделаной на C/C++
и OpenGL для просмотра моделей огранок. DLL-файлы нескольких моделей скачиваются с этой же страницы.
- На страницах
Shine on You Crazy Diamond ! того же сайта можно под музыку Pink Floyd и других музыкальных групп двигаться по сцене и рассматривать модели огранок. Управление движением — мышь и клавиатура (←, →, ↑, ↓, <, > ) как в компьютерных играх. Вывод на экран осуществляется при помощи three.js.
На мой взгляд получилось весьма интересно. Не забудьте при прсмотре включить звук!
Надеюсь, что мои сайты окажут помощь изучающим и использующим трехмерную графику и вычислительную геометрию. Кроме просмотра сайтов можете зайти в мой репозиторий.
Спасибо всем за просмотр моей статьи!