Department of Information Technologies in Design Saint-Petersburg State Polytechnical University www.it-design.org The project by students Nikita Shanin and Maria Garkusha

1. Санкт-Петербургский Государственный Политехнический Университет
Институт Международных Образовательных Программ
Кафедра «Информационные технологии в дизайне»
Разработка Web-ресурса с внедренным
приложением для работы с трехмерными
объектами
Авторы: Гаркуша М. А. , Шанин Н. А.
Руководители: Орлов П. А. , Холина А. А.

2. Цели и задачи
Целью данного проекта является создание сайта компании, занимающейся производством
оборудования для торговли и рекламы, с возможностью просмотра высокодетализированных
трёхмерных моделей продукции компании в окне браузера.
Анализ Художественное решение Программная реализация
• аналоги • логотип • классы анализа и проектные
классы
• 3D-объекты в Web-среде • графическая концепция
проекта • средства реализации
• метод и процесс
проектирования • графический интерфейс • диаграммы действий
• персоны • шейдеры • реализация
• пользовательские задачи
• ритерии оценки проекта
• прототипирование
• тестирование
2

3. Описание проекта. Актуальность
3

4. Этапы работ
Вся работа была поделена на две основные части.
Каждая часть выполнялась отдельнным исполнителем и была поделена на более мелкие этапы.
Web-сайт Приложение
• разработка логотипа • разработка каркаса приложения
• дизайн интерфейса • добавление моделей из 3D Studio Max
• верстка Web-страниц • добавление шейдеров и эффектов
• разработка классов анализа и проектных • оптимизация
классов
• создание Web-апплета
• проектирование базы данных
• интеграция с сайтом
• программирование
• тестирование
• отладка
4

5. Выбор аналогов ресурса
В качестве аналогов было рассмотрено несколько сайтов B2B компаний, работающих в сфере
торговли рекламным оборудованием.
Среди аналогов присутствуют как российские компании, так и зарубежные агенства.
Аналоги
5

6. Определение критериев оценки ресурса
MoSCow — это метод расставления Номер Требование Пользователи MoSCoW
приоритетов при разработке различного 1 Возможность поиска Все пользователи s
2 Возможность авторизации Пользователь m
рода приложений путем использования
3 Поддержка 2D картинок Все пользователи m
слов, принимающих определенные
4 Поддержка 3D моделей Все пользователи m
значения:
5 Возможность заказа изделия Все пользователи s
6 Возможность оставлять Авторизированный m
комментарии пользователь
M — must (должен иметь) 7 Возможность читать Авторизированный s
комментарии (история пользователь
переписки)
S — should (должен иметь, если это
8 Отображение тех. Все пользователи s
вообще возможно) документации изделия
9 Обратная связь Все пользователи m
C — could (может иметь, если это 10 Кросс-платформенность Все пользователи m
будет полезным) 11 Отображение информации о Все пользователи m
компании
W — won’t (не будет иметь, но будет 12 Мобильная версия Все пользователи w
иметь в будущем) 13 Использование HTML5 Все пользователи s
14 Использование CSS3 Все пользователи s
15 Использование ASP.NET MVC Все пользователи m
16 Англоязычная версия Все пользователи w
17 Базы данных Все пользователи m
18 Фиксированная ширина Все пользователи s
19 Отсутствие прокрутки Все пользователи c
Пользователь - лицо, использующее систему
20 Возможность редактирования Администратор m
в своих целях. контента
6

7. Выбор метода и процесса проектирования
При разработке данного проекта использовался унифицированный язык моделирования UML
(Unified Modeling Language).
Диаграммы классов (class diagrams) для моделирования статической структуры классов
системы и связей между ними.
7

8. Выявление персон
Персоны — один из способов сбора и формализации требований к интерфейсу. Персона позволяет:
донести информацию до всех членов команды, сократить ресурсы на разработку интерфейсов,
получить представление об ожиданиях пользователя.
Катя Суворова Иосиф Авраамович Берг Егор Мельников
Менеджер компании Заказчик Посетитель
Цель — общение с заказчиком, Цель — просмотр своих заказов, Цель — узнать о компании,
ведение заказа. общение с изготовителем. посмотреть портфолио, сделать
заказ.
8

9. Формирование вариантов использования
Вариант использования представляет собой последовательность действий, выполняемых системой
в ответ на событие, инициируемое некоторым внешним объектом (действующим лицом).
9

10. Создание пользовательских тестов
Основная цель тестирования – выявить потенциальные проблемы в приложении, проверить, насколько
приложение соответствует потребностям и ожиданиям пользователя и обнаружить расхождения с
требованиями к графическому интерфейсу пользователя.
10

11. Выбор метода прототипирования
Прототипирование — этап разработки программного обеспечения, процесс создания пробной версии
программы, обычно — с целью проверки пригодности предлагаемых для применения концепций,
решений.
Прототипом Web-ресурса данной работы является существующий сайт компании
Создание прототипов приложения для просмотра трехмерных моделей является невозможным, так как
прототипы и будут являтся самим приложением, поэтому в качестве способа прототипирования был
выбран способ создания Alpha и Beta версий с промежуточным функционалом, и их тестирование.
11

12. Выбор средств реализации Web-ресурса
В качестве средств для
реализации Web-ресурса
были выбраны Microsoft SQL
Server — система управления
реляционными базами данных
(СУБД) и технология создания
Web-приложений ASP.NET.
Данный выбор был
обусловлен тем, что
в компании, для которой
создается данный проект,
в настоящее время
используется система
Microsoft SQL Server.
12

13. Художественное решение
13

14. Выбор модульной сетки Web-страниц
В основу верстки сайта легла
система 960 Grid System,
разработанная для создания Web-
приложений.
14

15. Логотип и дополнительная графика
Идея Варианты Дополнительная графика
15

16. Логотип
16

17. Логотип
17

18. Цветовое решение сайта
18

19. Цветовое решение сайта
19

20. Анализ технологий
В ходе работы были проанализированы различные современные технологии, а также аналоги
приложений, реализованные с их использованием.
Flash и silverlight WPF Java WebGl
• просты • новая технология • возможность • библиотека OpenGL
в использовании полноценной работы с
• множество • не до конца
3D-графикой
• не поддерживают возможностей разработанная
аппаратное ускорение • библиотека OpenGL технология
• хорошая
3D-графики
производительность • сложная разработка
• низкая приложений
• запуск приложений
производительность
только из Windows
20

21. Определение критериев оценки технологий
• отображение трехмерной сцены
• возможность поворота камеры
• загрузка моделей из внешних файлов в форматах .obj или .3ds
• высокая производительность
• применение шейдеров для создания реалистичного изображения
• простота использования и программного внедрения
• наличие документации и описания API
21

22. Выбор средств реализации приложения
После анализа требований и аналогов приложения в качестве средства реализации был выбран язык
Java и библиотека JOGL.
Данный выбор был обусловлен:
• возможностью запуска приложения
в окне браузера
• кроссплатформенностью
• высокой производительностью
22

23. Описание оптимизации приложения
В процессе разработки приложения, работающего с высокодетализированными объектами, большое
внимание было уделено оптимизации.
Пути разрешения проблемы
• испробовано несколько алгоритмов рендеринга • произведен анализ использования системных
ресурсов — операционной памяти
• выбран способ с использованием VBO (Vertex
Buffer Object) • выявлены и исправлены «утечки» памяти
23

24. Описание шейдеров
Шейдер — это программа используемая в трёхмерной графике для определения окончательных
параметров объекта или изображения.
24

25. Демонстрация работы сайта и приложения
25