SOFTWARE DEVELOPMENT FOR RENDERING THREE-DIMENSIONAL SURFACES IN A WEB BROWSER
Authors: Резников К.Г. , Медведев С.Н. 
Published: January 2022

Представлена реализация программного обеспечения для построения трехмерных поверхностей с использованием трассировки лучей, выполняемого в веб-браузере персонального компьютера или смартфона. Подход веб-приложений стал широко применим в последние годы из-за развития сети Интернет. Современные веб-браузеры имеют достаточную вычислительную мощность для реализации сложных веб-приложений, а не ограничиваются только веб-сайтами. В процессе разработки были изучены различные методы построения поверхностей и методы визуализации, чтобы подобрать наиболее оптимальные для реализации веб-приложения. Были проанализированы и представлены базовые способы создания трехмерных поверхностей. Выделены ключевые различия каркасного и полигонального способа задания поверхности. Рассмотрен ряд моделей с процедурно вычисляемыми поверхностями. Подробно описан кинематический способ образования поверхностей, а также описан разработанный алгоритм для преобразования кинематических моделей в поверхность с использованием полигональной сетки. Подробно описан процесс визуализации и метод трассировки лучей. Продемонстрирован способ работы с видеочипом и распараллеливанию вычислений для оптимизации веб-приложения с помощью библиотеки GPU.js. Представлена структура веб-приложения с описанием главных каталогов проекта. Структура проекта основана на фреймворке Vue.js, благодаря чему функционал веб-приложения позволяет безгранично расширять. Для демонстрации работы веб-приложения представлен пример пошагового задания кинематической поверхности и визуализации на сцене с применением графических эффектов, таких как закраска и освещение, а также представлен пример с визуализацией множества объектов на сцене
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