Интерактивная серверно-клиентская платформа для построения трехмерных сцен в реальном времени.

Группа компьютерной графики Санкт-Петербургского губернаторского ФИЗИКО-МАТЕМАТИЧЕСКОГО ЛИЦЕЯ № 30

Computer Graphics Support Group of 30 Phys-Math Lyceum

1. Худяков Тимофей 10-4
2. Ильясов Александр 11-5

Научный руководитель проекта: Галинский Виталий Александрович

Постер (PDF, CGSG_UB2025_TH4AI3_Poster.pdf)

Видеоклип (60 секунд, краткая аннотация, MP4)

Тезисы

Данный проект исследует возможность создания интерактивного редактора для построения трёхмерных сцен на основе трассировки лучей с шаговым методом в браузерной среде. Целью работы являлась реализация платформы, позволяющей в реальном времени редактировать сцены любой сложности и мгновенно видеть результат.

Архитектурно проект разделён на три ключевых компонента. Клиентская часть, созданная с использованием TypeScript и библиотеки React, предоставляет удобный и современный интерфейс для интерактивного управления параметрами сцены и обеспечивает сетевое взаимодействие. Сцена редактируется пользователем с помощью удобного интерфейса в виде набора блок-схем. Каждая схема представляет собой настраиваемую фигуру, материал, источник света или операцию, с помощью которых проектируется сцена для отображения. Общие параметры сцены, такие как: наличие теней, фон, уровень сглаживания – настраиваются в общем меню сцены. Шаблоны сцен можно сохранять, редактировать и обмениваться с другими пользователями.

Серверная часть, построенная на платформе NestJS, отвечает за хранение сложных структур данных сцен, обеспечивает их сохранность и организует возможность многопользовательского взаимодействия. Пользователи могут сохранять свои работы, возвращаться к их редактированию и обмениваться своими творениями внутри платформы. Клиентский профиль может быть общедоступным, ограниченным или приватным. В зависимости от настроек конфиденциальности, другие пользователи могут оценивать работы и оставлять комментарии.

Ядром системы является высокопроизводительный графический конвейер, разработанный с применением браузерного API WebGPU. Этот низкоуровневый интерфейс даёт возможность напрямую задействовать вычислительные мощности видеокарты для максимального быстродействия. Для визуализации используется не классический полигональный метод, а алгоритм трассировки лучей с шаговым методом. Этот подход позволяет работать с параметрическими фигурами, описываемыми математическими функциями, и комбинировать их практически любыми способами для получения бесконечно сложных и гладких поверхностей, недоступных традиционным техникам.

В рамках данной работы была успешно реализована концепция интерактивного веб-редактора для создания и редактирования трёхмерных сцен в реальном времени. Таким образом, в ходе работы была доказана принципиальная возможность построения интерактивных браузерных графических редакторов. Разработанная платформа обладает значительным потенциалом для применения в сферах дизайна и цифрового искусства, позволяя пользователям легко создавать, сохранять и обмениваться сложными визуальными композициями.

Литература:

1. J. Bloomenthal, Computer Graphics Implementation and explanation, 2020
2. WebGPU (https://developer.mozilla.org/en-US/docs/Web/)
3. NestJS (https://docs.nestjs.com/)
4. React (https://react.dev/learn)
5. TypeScript (https://www.typescriptlang.org/docs/)