[Canvas, JavaScript, WebGL, Математика, Работа с 3D-графикой] Canvas и геометрия. Это почти просто
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Трехмерную графику можно реализовать в браузере не только применяя 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.
На мой взгляд получилось весьма интересно. Не забудьте при прсмотре включить звук!
Надеюсь, что мои сайты окажут помощь изучающим и использующим трехмерную графику и вычислительную
геометрию. Кроме просмотра сайтов можете зайти в
мой репозиторий.
Спасибо всем за просмотр моей статьи!
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка веб-сайтов, JavaScript] Самый sexy framework для веб-приложений
- [Бизнес-модели, Математика] Кластерный метод решения транспортной задачи
- [JavaScript, Игры и игровые приставки, Разработка веб-сайтов, Социальные сети и сообщества] Программист создал аналог Club Penguin для взрослых, где можно одновременно общаться как в Zoom и играть
- [Работа с 3D-графикой, Серверная оптимизация, Серверное администрирование, Сетевые технологии, Удалённая работа] Собираем сервер для графических и CAD/CAM приложений для удаленной работы по RDP на базе бу CISCO UCS-C220 M3 v2
- [Математика, Научно-популярное] Бенуа Мандельброт на TED: «Фракталы и искусство изломов» (перевод)
- [Управление продуктом] Что такое Lean Canvas?
- [JavaScript, ReactJS, VueJS, Разработка веб-сайтов] Устройство ленивой загрузки в популярных фронтенд-фреймворках (перевод)
- [DevOps, Отладка, Тестирование IT-систем, Тестирование веб-сервисов] Sentry удаленый мониторинг багов в фронтенд приложениях React
- [Google Chrome, JavaScript, Node.JS] Как обойти запрет доступа к страницам с помощью Chrome в headless-режиме (перевод)
- [JavaScript, Node.JS, ReactJS] Redux store vs React state
Теги для поиска: #_canvas, #_javascript, #_webgl, #_matematika (Математика), #_rabota_s_3dgrafikoj (Работа с 3D-графикой), #_webgl, #_canvas, #_3d, #_javascript, #_matematika (Математика), #_canvas, #_javascript, #_webgl, #_matematika (
Математика
), #_rabota_s_3dgrafikoj (
Работа с 3D-графикой
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 09:40
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Трехмерную графику можно реализовать в браузере не только применяя 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. На мой взгляд получилось весьма интересно. Не забудьте при прсмотре включить звук! Надеюсь, что мои сайты окажут помощь изучающим и использующим трехмерную графику и вычислительную геометрию. Кроме просмотра сайтов можете зайти в мой репозиторий. Спасибо всем за просмотр моей статьи! =========== Источник: habr.com =========== Похожие новости:
Математика ), #_rabota_s_3dgrafikoj ( Работа с 3D-графикой ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 09:40
Часовой пояс: UTC + 5