Презентация_Geo3D_WebGL_11_слайдов

1.

КУРСОВОЙ ПРОЕКТ · ВАРИАНТ 9
Разработка интернетприложения
«Geo3D» с использованием
API WebGL
WebGL
canvas
Интерактивная визуализация 3D-фигур, расчёты площади и
объёма, сохранение вариантов в PostgreSQL.
Студент: ____________________
Группа: ________
Казань, 2026
01

2.

Актуальность проекта
Почему учебное WebGL-приложение полезно для демонстрации современных веб-технологий
3D
Визуальное
обучение
⚙
Практика WebGL
DB
Полный вебпроект
3D-фигуры проще изучать,
когда пользователь может
менять параметры и сразу
видеть результат.
Проект показывает работу
canvas, WebGL-контекста,
вершин, цветов и перерисовки
сцены.
Кроме 3D-сцены реализованы
регистрация, роли, серверная
часть и сохранение данных в
PostgreSQL.
5
2
2
фигур
роли
таблицы БД
02

3.

Цель и задачи
Логика выполнения курсового проекта
Цель
Разработать интернет-приложение
«Geo3D» с использованием API
WebGL для интерактивной
визуализации объёмных
геометрических фигур, выполнения
расчётов и сохранения
пользовательских вариантов.
Задачи
проекта
проанализировать предметную область 3D-визуализации;
создать HTML/CSS-интерфейс и несколько страниц
приложения;
реализовать WebGL-сцену для отображения фигур;
добавить регистрацию, вход и две роли пользователей;
подключить PostgreSQL и проверить работу приложения.
03

4.

Состав приложения Geo3D
Основные страницы и возможности пользователя
Geo3D
Главная
Тренажёр
Расчёты
Профиль
Функции
выбор одной из 5 фигур;
Фигура
Цвет
Размер
Сохранить
изменение цвета, размера и скорости;
расчёт площади и объёма;
сохранение и применение вариантов;
админ-панель и просмотр данных.
04

5.

Архитектура системы
Взаимодействие браузера, сервера и базы данных
05

6.

Пользовательский сценарий
Как обычный пользователь работает с Geo3D
1
2
3
4
5
Регистрация
Вход
Тренажёр
Сохранение
Применение
пользователь
создаёт аккаунт
сервер проверяет
email и пароль
выбор фигуры и
настройка сцены
параметры
попадают в
PostgreSQL
вариант снова
загружается в
WebGL
Результат: пользователь получает персональное хранилище вариантов фигур
06

7.

Модуль WebGL
Главная особенность варианта 9 — визуализация через WebGL API
<canvas> WebGL scene
Что
реализовано
получение WebGL-контекста через
canvas;
отрисовка вершин и граней фигур;
изменение цвета и масштаба;
анимация вращения по выбранным
осям;
перерисовка сцены после действий
пользователя.
07

8.

Фигуры и расчёты
В приложении реализованы 5 геометрических объектов
Куб
S = 6a²
V = a³
Пирамида
S = a² + 2al
V = a²h/3
Страница
«Расчёты»
Фигура: Цилиндр
r=2
Октаэдр
S = 2√3a²
h=5
V = √2a³/3
Рассчитать
Кубоид
Цилиндр
S = 2(ab+bc+ac)
S = 2πr(r+h)
V = abc
V = πr²h
Результат: площадь и объём выводятся
сразу на странице.
08

9.

База данных и роли
Данные пользователей и сохранённые варианты хранятся в PostgreSQL
ERмодель
Роли доступа
saved_variants
users
id PK
name
email
password_hash
role
A
1:M
id PK
user_id FK
shape
color
area
volume
Администратор
одна заранее созданная учётная
запись, доступ к админ-панели и
данным системы
U
Обычный
пользователь
создаётся через регистрацию, работает
со своими сохранёнными вариантами
фигур
Пароли в БД хранятся как password_hash
09

10.

Развертывание и тестирование
Как проверялась работоспособность приложения
Развертывани
е
создание базы geo3d_db в
pgAdmin 4;
создание таблиц users и
saved_variants;
настройка .env для подключения
к БД;
запуск через npm install и npm
start.
PowerShell
> npm install
> npm start
Geo3D server started
http://localhost:3000
Проверки
регистрация и вход;
открытие страниц приложения;
сохранение и удаление
вариантов;
корректность формул расчётов;
проверка Network и данных в
pgAdmin.
Status: OK
10

11.

Результаты работы
Итоги реализации курсового проекта
Что
получилось
создано интернет-приложение Geo3D;
реализована WebGL-визуализация 3Dфигур;
подключена база данных PostgreSQL;
Практическая
ценность
Приложение можно использовать как
учебный тренажёр для демонстрации
принципов WebGL, работы клиент-серверной
архитектуры и хранения пользовательских
данных.
добавлены роли администратора и
пользователя;
проведено функциональное тестирование.
Спасибо за внимание!
WebGL
API
DB
визуализация
серверная логика
хранение данных
11