Онлайн-сервіс для розробки та візуалізації шейдерів на 3D-модель

Abstract

Актуальність роботи зумовлена зростаючою потребою у зручних та доступних інструментах для створення, навчання й тестування шейдерів та матеріалів у тривимірній графіці, в умовах зростаючого візуального різноманіття вебзастосунків. Сучасні технології реального часу, зокрема GPU-прискорення та шейдерне програмування, потребують високого рівня підготовки, що ускладнює їх використання початківцями та у навчальному процесі. Метою кваліфікаційної бакалаврської роботи є розробка онлайн-сервісу, що поєднує можливості сучасних вебтехнологій з функціональністю професійних графічних редакторів шейдерів для створення, редагування та попереднього перегляду 3D-сцен у реальному часі. Об’єктом роботи є процес створення та візуалізації тривимірних графічних сцен у вебзастосунках за допомогою шейдерного коду із використанням технологій реального часу. Предметом роботи є методи та програмні засоби інтерактивного керування шейдерами, матеріалами й текстурами у веборієнтованих 3D-застосунках на основі бібліотек Three.js, React Three Fiber та мови GLSL. Кваліфікаційна робота складається із вступу, чотирьох розділів, висновків та переліку джерел посилання. У вступі обґрунтовано актуальність теми, визначено мету, завдання, об’єкт та предмет роботи, а також практичне значення отриманих результатів. У першому розділі виконано аналіз предметної області, розглянуто сучасні підходи до створення 3D-графіки у вебсередовищі, проаналізовано існуючі програмні рішення та обґрунтовано доцільність розробки нової платформи. Другий розділ присвячено аналізу сучасних технологій веброзробки та формуванню специфікації функціональних і нефункціональних вимог до програмного забезпечення. У третьому розділі проводиться проєктування програмного забезпечення, визначення архітектури системи, структури її компонентів та взаємодії між ними з використанням UML-діаграм. У четвертому розділі описано програмну реалізацію вебзастосунку для інтерактивного редагування шейдерів і матеріалів, механізми параметризації текстур, валідації користувацького коду, збереження проєктів, а також проводиться тестування розробленого програмного забезпечення. У висновках наведено основні результати виконаної роботи, зроблено узагальнення та визначено напрями подальшого розвитку розробленого програмного продукту. КБР викладена на 81 сторінки (без додатків), вона містить 4 розділи, 45 ілюстрацій, 8 таблиць, 29 джерел в переліку посилання та 2 додатків. The relevance of this work stems from the growing need for user-friendly and accessible tools for creating, learning, and testing shaders and materials in 3D graphics, given the increasing visual diversity of web applications. Modern real-time technologies, particularly GPU acceleration and shader programming, require a high level of training, which makes them difficult for beginners to use and for teaching. The goal of this bachelor’s thesis is to develop an online service that combines the capabilities of modern web technologies with the functionality of professional shader editors to create, edit, and preview 3D scenes in real time. The object of this work is the process of creating and visualizing three-dimensional graphic scenes in web applications using real-time technologies with shader code. The subject of the work is the methods and software tools for interactive control of shaders, materials, and textures in web-oriented 3D applications based on the Three.js, React Three Fiber libraries, and the GLSL language. The thesis consists of an introduction, four chapters, conclusions, and a list of references. The introduction justifies the relevance of the topic, defines the purpose, objectives, scope, and subject of the study, as well as the practical significance of the results obtained. The first chapter analyzes the subject area, examines modern approaches to creating 3D graphics in a web environment, analyzes existing software solutions, and justifies the feasibility of developing a new platform. The second chapter is devoted to the analysis of modern web development technologies and the formulation of specifications for functional and non-functional software requirements. The third chapter covers software design, the definition of the system architecture, the structure of its components, and the interactions between them using UML diagrams. The fourth chapter describes the software implementation of a web application for interactive editing of shaders and materials, mechanisms for parameterizing textures, validating user code, and saving projects, as well as testing the developed software. The conclusions present the main results of the work performed, provide a summary, and identify directions for the further development of the software product. The thesis consists of 81 pages (excluding appendices); it contains 4 chapters, 45 figures, 8 tables, 29 references, and 2 appendices.