CC BY
32
DOI 10.36622^Ти.2021.17.6.002 УДК 004.92, 004.94
РАЗРАБОТКА ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ
ДЛЯ ВИЗУАЛИЗАЦИИ ТРЕХМЕРНЫХ ПОВЕРХНОСТЕЙ В ВЕБ-БРАУЗЕРЕ
К.Г. Резников1, С.Н. Медведев2
воронежский государственный технический университет, г. Воронеж, Россия 2Воронежский государственный университет, г. Воронеж, Россия
Аннотация: представлена реализация программного обеспечения для построения трехмерных поверхностей с использованием трассировки лучей, выполняемого в веб-браузере персонального компьютера или смартфона. Подход веб-приложений стал широко применим в последние годы из-за развития сети Интернет. Современные веб-браузеры имеют достаточную вычислительную мощность для реализации сложных веб-приложений, а не ограничиваются только веб-сайтами. В процессе разработки были изучены различные методы построения поверхностей и методы визуализации, чтобы подобрать наиболее оптимальные для реализации веб-приложения. Были проанализированы и представлены базовые способы создания трехмерных поверхностей. Выделены ключевые различия каркасного и полигонального способа задания поверхности. Рассмотрен ряд моделей с процедурно вычисляемыми поверхностями. Подробно описан кинематический способ образования поверхностей, а также описан разработанный алгоритм для преобразования кинематических моделей в поверхность с использованием полигональной сетки. Подробно описан процесс визуализации и метод трассировки лучей. Продемонстрирован способ работы с видеочипом и распараллеливанию вычислений для оптимизации веб-приложения с помощью библиотеки GPU.js. Представлена структура веб-приложения с описанием главных каталогов проекта. Структура проекта основана на фреймворке Vue.js, благодаря чему функционал веб-приложения позволяет безгранично расширять. Для демонстрации работы веб-приложения представлен пример пошагового задания кинематической поверхности и визуализации на сцене с применением графических эффектов, таких как закраска и освещение, а также представлен пример с визуализацией множества объектов на сцене
Ключевые слова: трехмерное моделирование, визуализация поверхностей, кинематические модели, трассировка лучей, веб-приложение
Введение
Визуализация трехмерной поверхности является важной составляющей процесса разработки любой трехмерной модели. Визуализация позволяет наглядно оценить модель и провести ее анализ.
Существует различное программное обеспечение для визуализации трехмерных поверхностей. Каждое имеет свои особенности, достоинства и недостатки. В основном, для использования программного обеспечения программу необходимо установить в долговременную память устройства. При установке программы необходимо учитывать системные требования, что значительно ограничивает ряд поддерживаемых устройств по различным характеристикам: оперативная память, операционная система, размер дискового пространства и т.д. Важно отметить, что при удовлетворении системных требований такой подход имеет максимальную производительность относительно альтернативных подходов на тех же вычислительных системах.
© Резников К.Г., Медведев С.Н., 2021
Вычислительная мощность устройств постоянно возрастает, что позволяет использовать новые технологии и подходы к проектированию программного обеспечения. В настоящее время набирает популярность подход веб-приложений. Веб-приложение - это программное обеспечение, которое не требует установки и не хранится во внутренней памяти вычислительного устройства, а загружается с удаленного сервера в оперативную память устройства и выполняется в браузере.
Далее будет рассмотрена реализация веб-приложения для построения трехмерных поверхностей. Данное веб-приложение является 3D-движком, что значительно расширяет функционал веб-приложения для визуализации, так как он позволяет не только визуализировать поверхность, но и редактировать модель в интерактивном режиме.
Модель поверхности
В компьютерной графике выделяют два базовых способа для визуализации поверхности [1]:
• каркасный, где объект задается по вершинам и ребрам между ними;
• полигональный, где объект задается по полигонам.
Каркасный способ дает неверное представление о геометрии модели. Отрисовывая ребра поверх друг друга, сложно определить, какую визуальную форму имеет объект. Например, как показано на рис. 1, невозможно определить, какая грань находится ближе к наблюдателю без дополнительных данных. Для каркасной модели невозможно применять эффекты компьютерной графики, такие как закраска, освещение и т.д.
а) б) в)
Рис. 1. а) каркасная модель куба; б), в) полигональная модель
Каркасные модели часто используют как вспомогательные для полигональных моделей. Например, для выделения ребер и вершин полигонов. Совокупность каркасной и полигональной моделей образует полигональную сетку. Полигональная сетка дает наиболее верное геометрическое представлении о поверхности.
Полигональную сетку можно задать строго, указав координаты вершин и нормали плоскостей полигонов. Такой способ задания требует много времени для построения поверхности.
Существуют модели, для которых алгоритм построения ее поверхности вычисляется процедурно, такие как кинематические, сплай-новые, Безье и другие. В таблице приведены некоторые достоинства и недостатки перечисленных моделей. В виду данной таблицы и особенностей модели остановимся подробнее на кинематических моделях, так как алгоритм построения кинематической поверхности прост в реализации, но требует много вычислительных мощностей.
Модель Достоинства Недостатки
Кинематическая модель 1. Вычисление точек и ребер при визуализации; 2. Вершины и ребра не хранятся в памяти 1. Сложность реализации; 2. Большое количество вычислений для составляющих модели.
Сплайновая модель 1. Вычисление промежуточных точек для повышения гладкости 1. Сложность реализации; 2. Большое количество вычислений
Безье 1. Вычисление промежуточных точек для повышения гладкости 1. Сложность реализации; 2. Большое количество вычислений
Кинематические модели образуют поверхность непрерывным движением в пространстве некоторой линии, называемой образующей, по определенной траектории, называемой направляющей [2]. Изображение кинематической модели представлено на рис. 2.
Рис. 2. Кинематическая поверхность
(1)
Рассмотрим параметрическое задание кинематической модели:
Р(7,т) = Ро (т) а(7,т) + Рн (7),
t 7п ] , Т^[Т0,Тт ] ,
где ро (т) - образующая линия с центром в начале координат; рн (7) - направляющая линия, вдоль которой переносится центр образующей; А (7,т) - матрица преобразования;
7 е[70,7п], те[т0,тт] - интервалы изменения
параметров.
При задании образующей и направляющей важно учитывать ограничения вычислительной системы, так как в некоторых случаях могут возникать вычислительные проблемы. Например, функции могут быть сложновычис-лимыми или функции невозможно задать без применения дополнительных алгоритмов. Одним из способов избежать подобные проблемы
является использование методов приближения функций [3]. Например, можно использовать сплайны или интерполяционные многочлены Ньютона.
Таким образом, образующую и направляющую можно задавать по точкам в пространстве и с помощью методов приближения получать непрерывную кривую. Для создания более точной кривой достаточно добавить дополнительные промежуточные узловые точки.
Уравнение кинематической поверхности позволяет вычислять конкретные точки поверхности, но для программной реализации необходимо получить набор полигонов для визуализации поверхности.
Рассмотрим алгоритм получения полигональной сетки поверхности кинематической модели.
Алгоритм 1. Построение полигональной сетки поверхности кинематической модели.
1. Зададим количество точек для образующей (кт) и направляющей (кп) для ограничения количества вершин полигональной сетки и получения определенной гладкости кинематической поверхности.
0 тз и Ро(^0)~Ро(^т)
2. Вычислим шаг пт = - и
,п к —1
Кт ±
набор точек ро,г = ро(т0 + Игт)>1 е 1,2, ...,кт для образующей ро. Отметим, что рассматривается случай ро(г0) Ф ро(тт) для незамкнутой кривой. За длину кривой принимается расстояние между первой и последней точкой в наборе. Таким образом, можно избежать дополнительных вычислений на расчет приближенной длины кривой. Дополнительно вычислим шаг И.п и набор точек рн ;- для направляющей, подставив соответствующие значения.
3. Преобразуем полученный набор точек в матрицу координат, приняв за г координату значение 0
/ (Ро,1)х . (Ро,кт)у\ Ро = [(Ро,1)у . (Ро,кт)у ). (2)
\ 0 ... 0 /
4. Чтобы расположить поверхность в определенной позиции в пространстве, зададим координаты точки начального положения д0 и вектор направления поверхности щ.
5. Набор точек образующей в пространстве переместим так, чтобы первая точка набора перешла в начальное положение кинематической поверхности д0. Для этого применим аффинное преобразование перемещения АТ(до,х>Чо,у>Чо,г) к Р0 , , ,
Ро = ^Т(Яо,х,Чо,у,Чо,г)Ро. (3)
6. Сопоставим вектор направления поверхности щ с направляющей кинематической поверхности. Введем аффинное преобразование сопоставления вектора начального положения щ с вектором направления
Рн(аРна0 + О, где к = и
Кп~1
применим к Р0. Получим
Р0 = (4)
7. Вычислим матрицу аффинного преобразования следующей итерации ] е 1,2>...,кп. Применим матрицу аффинного перемещения из точки рн(С/) в рн(^ + к матрице аффинного преобразования кинематической поверхности и к матрице точек Р0. В итоге получим
Ро = Ат (рн(ь)>Рн(Ь + кп)) А(1>])Р0. (5)
8. Преобразуем матрицы Р0 и Р0 в наборы
точек (Р'о,1>Р'о,2> ..■>Ро,т) и (Ро,1>Ро,2>.>Ро,т) соответственно.
9. Для каждого индекса г е (1>2> ...,т — 1) составим набор точек, где каждый такой набор представляет собой вершины четырехугольного полигона
Ро,1>Ро,1+1>Ро,г+1>Ро,г (6)
10. Список полученных наборов добавим в общий список полигонов.
11. Заменим матрицу Р0 на Р0 и повторим заново шаги 7-10. Закончить алгоритм на шаге
] = К — 1.
Таким образом, для всех преобразований в соответствии отрезкам [тт>гт_1] для образующей и отрезкам для направляющей будет получен список из наборов по четыре точки, где каждый набор будет представлен как четырехугольный полигон.
Визуально данный алгоритм представлен на рис. 3.
Рис. 3. Вычисление полигональной сетки
Получив набор полигонов, необходимо визуализировать его с помощью метода визуализации.
Визуализация моделей - это процесс получения изображения модели. Такой процесс может быть реализован различными алгоритмами, в зависимости от целей визуализации, а
также от дополнительных факторов или эффектов, влияющих на модель: закраска, освещение, тени и т.д. Кроме того, чтобы изображение модели было корректным и однозначным, необходимо использовать алгоритмы удаления невидимых граней и наложения.
Рассмотрев ряд наиболее используемых методов визуализации [1], для реализации был выбран метод трассировки лучей.
Метод трассировки лучей
Суть метода трассировки лучей сводится к вычислению для каждого пикселя максимально близкого для наблюдателя полигона. Визуально алгоритм представлен на рис. 4, где
1 - точка наблюдателя в пространстве;
Р - проекция изображения на экран, видимая наблюдателю;
г - точка пикселя изображения на проекции;
] - ближайшая к наблюдателю точка пересечения луча с множеством полигонов.
Точка наблюдателя 1 и полученная точка г образуют луч, который пересекает множество полигонов. Из всех пересечений выбирается полигон с наименьшим расстоянием от наблюдателя. Таким образом, для каждого пикселя вычисляется яркость.
Метод трассировки лучей позволяет визуализировать модели любой сложности, так как для него не нужно проверять пересечение полигонов между собой. Кроме того, для него есть возможность применения любых визуальных эффектов.
Рис. 4. Схема алгоритма трассировки лучей
Для метода трассировки лучей можно выделить следующие преимущества:
1. Низкая сложность реализации;
2. Малая требуемая память;
3. Возможность закраски моделей;
4. Возможность освещения моделей;
5. Удаление невидимых граней.
Единственным и значительным его недостатком является большое количество вычислений, но производительность современных вычислительных устройств позволяет реализовать данный метод для работы в реальном времени.
Далее перейдем к программной реализации и рассмотрим структуру, интерфейс и функционал веб-приложения.
Реализация веб-приложений
Веб-приложение - это программное обеспечение, которое выполняется в браузере, с предварительной загрузкой исходного кода с сервера. После загрузки исходный код интерпретируется и полностью загружается в оперативную память. Веб-приложения разрабатываются на языке программирования JavaScript [4], поддерживаемом всеми современными браузерами. Это позволяет запускать веб-приложения на любых вычислительных устройствах с установленным браузером, таких как персональный компьютер, смартфон, планшет и др., независимо от используемой операционной системы.
При разработке веб-приложения необходимо учитывать ограничения веб-браузеров и вычислительную мощность устройств. Для этого важно спроектировать правильную структуру исходного кода веб-приложения. Для организации структуры проекта веб-приложения и ускорения разработки используются различные фреймворки [5]. В рассматриваемом веб-приложении используется фреймворк Vue.js [6]. Данный фреймворк помогает создать многофункциональное приложение и дает возможность постоянно расширять и поддерживать проект.
Для повышения производительности веб-приложения исходный код необходимо оптимизировать. При использовании метода трассировки лучей для визуализации поверхностей вычислительной мощности центрального процессора может быть недостаточно. Для решения этой проблемы будем использовать процессорную мощность видеокарты, так как большинство современных браузеров имеет внутренний API (анг. application programming interface - программный интерфейс приложения) для работы с видеочипом.
Далее рассмотрим структуру исходного кода.
Структура исходного кода
Корневая структура проекта веб-приложения основана на паттерне Vue-приложения. Главным каталогом исходного кода является src. Каталог src содержит следующие каталоги:
- components - каталог компонентов Vue-приложения;
- functions - каталог переиспользуемых функций;
- math - каталог классов для математической логики;
- models - каталог классов моделей компьютерной графики;
- router - каталог маршрутизации Vue-приложения;
- scene - каталог классов для построения сцены;
- store - каталог модулей хранилища Vue-приложения;
- App.vue - файл корневого компонента Vue-приложения;
- main.js - файл точки сборки проекта. Каждый каталог имеет вложенную структуру с разделением на более мелкие каталоги для удобства разработки и поддержки стиля исходного кода.
Не будем подробно останавливаться на каждом каталоге и его содержимом, а рассмотрим наиболее важную часть проекта - реализация метода трассировки лучей.
Реализация трассировки лучей
Быстродействие веб-приложения и возможность отрисовки сцены в реальном времени с дополнительными эффектами стало возможно благодаря интерфейсу API видеокарты для браузеров. Технология, предоставляющая API видеокарты, называется WebGL. Для взаимодействия Vue-приложения с API видеокарты используется библиотека GPU.js, которая ускоряет процесс разработки и поддерживает автоматическое распараллеливание. Библиотека GPU.js использует WebGL и автоматически транслируют исходный код обработчика в язык шейдеров.
При написании кода, транслируемого библиотекой GPU.js, важно учитывать, что нельзя использовать специализированные функции языка, так как язык шейдеров их не поддерживает. Для примера далее приведен фрагмент транслируемого кода в язык шейдеров. const dA = LengthFPTP(point0,point1); const dCrossO = LengthFPTP(crossPoint, pointO); const dCrossl = LengthFPTP(crossPoint, pointl); const hA = HeightToSegment(dA, dCrossO, dCrossl); if (hA < sizeOfPixel) { isBorder = true; } else {
const dB = LengthFPTP(point1, point2); const dCross2 = LengthFPTP(crossPoint, point2); const hB = HeightToSegment(dB, dCrossl, dCross2); if (hB < sizeOfPixel) { isBorder = true; } else {
const dC = LengthFPTP(point2, pointO);
const hC = HeightToSegment(dC, dCross0,dCross2);
if (hC < sizeOfPixel) { isBorder = true; }
}
}
Представленный фрагмент отвечает за вычисление точки пересечения луча с плоскостью полигона и определения принадлежности точки к полигону либо его границе. Код содержит только базовые функции языка JavaScript, которые также предоставляет язык шейдеров. Функции LengthFPTP и HeightToSegment объявлены вручную и зарегистрированы в ядре GPU.js. Функции, объявленные вручную, также не должны содержать специализированных функций, как и весь транслируемый код для GPU.js.
Перейдем к разбору самой важной функции веб-приложения.
Алгоритм рендер-функции
Алгоритм рендер-функции является самой важной частью веб-приложения. Рендер-функция отвечает за вычисление и вывод изображения сцены. Вызов этой функции происходит при изменении параметров камеры, сцены, объектов сцены, а также при каждом обновлении кадра анимации. Рассмотрим этапы выполнения алгоритма рендер-функции.
Алгоритм 2. Алгоритм рендер-функции.
1. Обнуляются динамические параметры сцены, такие как список полигонов и источников света, а также производится очистка холста (закрашивание области изображения цветом по умолчанию).
2. Производятся предварительные вычисления параметров объектов сцены. Алгоритм проходит по списку объектов моделей сцены и вызывает для каждого объекта рендер-метод (метод отрисовки).
2.1. Предварительно в рендер-функции, определяются параметры для анимации, если они предусмотрены для конкретного типа модели. Далее на основе камеры и параметров анимации к модели применяются преобразования.
2.2. После всех преобразований вычисляется поверхность модели по алгоритму 1, и все полигоны добавляются в общий список.
3. Создается ядро GPU.js библиотеки со статическими параметрами камеры и сцены, такими как разрешение изображения, размер пикселя и функция обратного вызова для каждого пикселя изображения. Функция обратного вызова включает в себя реализацию алгоритма трассировки лучей.
4. После создания ядра запускается выполнение библиотеки GPU.js. Для каждого пикселя вычисления происходят в отдельном потоке. По завершению выполнения всех потоков ядро GPU.js сообщает о статусе выполнения.
5. При получении успешного статуса станет доступен массив пикселей, который транслируется на холст для получения изображения.
При активном режиме анимации, рендер-функция будет запущена снова через вычисленный интервал времени. Изменение параметров сцены и объектов будет изменять соответственно изображение в реальном времени.
Если отключен метод трассировки лучей или сцена является двумерной, то происходит сразу отрисовка сцены на холст. Например, для объектов типа список точек или сплайн.
Важно отметить, что для каждого типа модели определена собственная рендер-функция. Аргументом рендер-функции является камера, чтобы для каждой модели можно было получить доступ к методам камеры.
Веб-приложение имеет также множество других методов и функций, имеющих сложную и многоуровневую логику для работы с моделями, камерой, сценой и другими модулями веб-приложения.
Перейдем к рассмотрению интерфейса веб-приложения.
Пример работы веб-приложения
Воспользуемся итоговым веб-
приложением [7] и рассмотрим процесс создания кинематической поверхности с добавлением эффекта освещения.
Откроем веб-приложение, переключив режим в двухмерную сцену. Создадим несколько объектов с типом набор точек, как показано на рис. 5. Для повышения гладкости поверхности воспользуемся дополнительным функционалом и создадим кривые, основанные на созданных наборах точек.
Далее перейдем в трехмерную сцену и создадим объект кинематической модели, выбрав образующую и направляющую из созданных кривых. Построенная поверхность имеет стандартную закраску черным цветом.
И наконец, добавим источник света и установим в параметрах цвет затемнения и освещения объекта. На рис. 6 слева представлена поверхность без освещения и справа с освещением для одной и той же модели.
Рис. 6. Кинематическая модель без освещения и с освещением
Сцена не ограничивает количество отображаемых объектов. Дополнительный пример работы веб-приложения с несколькими объектам представлен на рис. 7.
Рис. 5. Наборы точек и приближенные функции
Рис. 7. Пример с множеством объектов на сцене
На сцене размещены несколько сфер с различным цветом закраски. Как можно заметить, источник света помещен внутри центральной желтой сферы для добавления эффекта освещения всей сцене.
Заключение
Таким образом, в данной статье рассмотрены и проанализированы различные способы задания поверхностей. Разработан алгоритм построения полигональной сетки поверхности кинематической модели. Рассмотрены особенности и представлены технологии разработки сложновычислительных веб-приложений. Описан метод трассировки лучей и его ключевые отличия от других методов визуализации. Описана структура веб-приложения, взаимодействие веб-браузера с API видеочипа через библиотеку GPU.js и ключевые функции веб-приложения. Описан алгоритм рендер-фукнции веб-приложения.
Литература
1. Роджерс Д. Алгоритмические основы машинной графики. М.: Мир, 1989. 512 с.
2. Никулин Е.А. Компьютерная геометрия и алгоритмы: учеб. пособие. СПб.: БХВ-Петербург, 2003. 560 с.
3. Бахвалов Н.С., Жидков Н.П., Кобельков Г.М. Численные методы: учеб. пособие. СПб.: Физмалит, 2002. 630 с.
4. Браун Э. Изучаем JavaScript. Руководство по
созданию современных веб-сайтов. 3-е изд., перераб. и доп. СПб.: ООО «Альфа-книга», 2017. 368 с.
5. Современный учебник JavaScript. Введение. URL: https://learn.javascript.ru/intro (дата обращения: 30.09.2021)
6. Введение - Vue.js. URL: https://ru.vuejs.org/v2/guide/ (дата обращения: 30.09.2021)
7. GitHub - reznikovkg/nm-vue. URL: https://github.com/reznikovkg/nm-vue (дата обращения: 30.09.2021)
Поступила 06.11.2021; принята к публикации 15.12.2021 Информация об авторах
Резников Константин Георгиевич - аспирант кафедры автоматизированных и вычислительных систем, Воронежский государственный технический университет (394006, Россия, г. Воронеж, ул. 20-летия Октября, 84), e-mail: rkg@reznikovk.ru, тел. +7 (951) 564-36-44
Медведев Сергей Николаевич - канд. физ.-мат. наук, доцент кафедры вычислительной математики и прикладных информационных технологий, Воронежский государственный университет (394036, Россия, г. Воронеж, Университетская пл., 1), e-mail: s_n_medvedev@mail.ru, тел. +7 (906) 671-62-05
SOFTWARE DEVELOPMENT FOR RENDERING THREE-DIMENSIONAL SURFACES IN A WEB BROWSER
K.G. Reznikov1, S.N. Medvedev2
'Voronezh State Technical University, Voronezh, Russia 2Voronezh State University, Voronezh, Russia
Abstract: the article presents the implementation of software for rendering 3D-surfaces using ray tracing, running in a web browser of computers or smartphones. The web application approach has become widespread in recent years due to the development of the Internet. Modern web browsers have enough processing power to run complex web applications and are not limited to just websites. During the development process, various methods for constructing surfaces and visualization methods were analyzed to choose the most optimal solution for web applications. We analyzed and presented basic methods of creating 3D surfaces. We highlighted the key differences between wireframe and polygonal methods of surface definition. We considered several models with dynamic surface computation. We described the kinematic method of surface formation in detail and the developed algorithm for transforming kinematic models into a surface using a polygonal mesh. We described in detail the rendering process and ray tracing method. We demonstrated a way of working with a video chip and parallelizing computations to optimize a web application using the GPU.js library. We presented the structure of a web application with a description of the main project directories. The project structure is based on the Vue.js framework. The framework allows one to endlessly expand the functionality of a web application. The article presents how the web application works and example of step-by-step creation of a kinematic surface and rendering on a scene using graphic effects such as shading and lighting. Also it contains an example of rendering many objects on a scene
Key words: 3D-modeling, rendering on surfaces, kinematic models, ray tracing, web application
References
1. Rogers D. "Algorithmic foundations of computer graphics" ("Algoritmicheskie osnovy mashinnoy grafiki"), Mosow: Mir, 1989, 512 p.
2. Nikulin E.A. "Computing Geometry and Algorithms" ("Computernaya geometriya i algoritmy"), Saint Petersburg: BHW-Petersburg, 2003, 560 p.
3. Bakhvalov N. S. "Number methods" ("Chislennye metody"), textbook, Saint Petersburg: Fizmalit, 2002, 630 p.
4. Brawn E. "Learn JavaScript. Tutorial for making modern websites" ("Izuchaem JavaScript. Rucovodstvo po sozdaniyu sovremennyh saitov"), Saint Petersburg: Alpha-book, 2017, 368 p.
5. Modern tutorial JavaScript. Introduction, available at: https://learn.javascript.ru/intro (date of access: 30.09.2021)
6. Introdution - Vue.js, available at: https://ru.vuejs.org/v2/guide/ (date of access: 30.09.2021)
7. GitHub - reznikovkg/nm-vue, available at: https://github.com/reznikovkg/nm-vue (date of access: 30.09.2021)
Submitted 06.11.2021; revised 15.12.2021 Information about the authors
Konstantin G. Reznikov, graduate student, Voronezh State Technical University (84 20-letiya Oktyabrya str., Voronezh 394006, Russia), e-mail: rkg@reznikovk.ru, tel. +7 (951) 564-36-44
Sergey N. Medvedev, Cand. Sc. (Physics-Mathematics), Associate Professor, Voronezh State University (1 Universitetskaya sq., Voronezh 394006, Russia), e-mail: s_n_medvedev@mail.ru, tel. +7 (906) 671-62-05
