Создание электронного каталога с помощью 3D-моделирования

V-Ray мощный инструмент визуализации, поддерживающий Depth of Field (глубина резкости), Motion Blur (эффект «размытия» в движении), Displacement (карта смещения, с увеличением детализации трехмерных объектов). Кроме этого, V-ray имеет собственные источники освещения, систему солнце-небосвод для реалистичного освещения естественным светом, и физическую камеру с параметрами, аналогичными реальным фото- и видеокамерам.

Система V-ray Proxy позволяет производить просчет чрезвычайно больших массивов однотипных объектов, состоящих суммарно из десятков миллиардов полигонов. Встроенные шейдеры предоставляют пользователю широкие возможности для имитации практически любых материалов.

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

Проект динамично развивается, например, анонсирован выход интерактивной версии рендера для Autodesk 3ds Max, способной в реальном времени считать и обновлять изображение в окне во время работы. Но имеются небольшие минусы. К недостаткам можно отнести недостаточно полную документацию, особенно в части SDK, отсутствие кросплатформенности и недоработанную версию standalone.

В последние годы Autodesk по экономическим соображениям выпускает новые релизы пакета не реже раза в год.

2.4 Программные средства для разработки электронного каталога

ActionScript -- объектно-ориентированный язык программирования, один из диалектов ECMAScript, который добавляет интерактивность, обработку данных и многое другое в содержимое Flash-приложений. ActionScript исполняется виртуальной машиной (ActionScript Virtual Machine), которая является составной частью Flash Player.

ActionScript компилируется в байт-код, который включается в SWF-файл.

SWF-файлы исполняются Flash Player-ом. Flash Player существует в виде плагина веб-браузеру, а также как самостоятельное исполняемое приложение (standalone). Во втором случае возможно создание исполняемых exe-файлов (projector), когда swf-файл включается во Flash Player. С помощью ActionScript можно создавать интерактивные мультимедиа-приложения, электронные каталоги, интернет магазины, игры, веб-сайты и многое другое.

ActionScript как язык появился с выходом 5 версии Macromedia Flash, которая стала первой программируемой на ActionScript средой. Первый релиз языка назывался ActionScript 1.0. Flash 6. В 2004 году Macromedia представила новую версию ActionScript 2.0 вместе с выходом Flash 7, в которой было введено строгое определение типов, основанное на классах программирование.

То есть появились новые ключевые слова:

- class (класс),

- interface (интерфейс),

- extends (установка наследования)

- модификаторы доступа: private, public;

и прочие.

Также Macromedia была выпущена модификация языка Flash Lite для программирования под мобильные телефоны.

ActionScript 1.0 является прототипным языком программирования. То есть он вполне реализует все три принципа объектно-ориентированного программирования.

ActionScript 2.0 является надстройкой над ActionScript 1.0. Проверка типов и работа с иерархией классов осуществляется во время компиляции, которая заканчивается генерацией байт-кода, аналогичного ActionScript 1.0.

В 2006 году вышел ActionScript 3.0 в среде программирования Adobe Flex, а позже в Adobe Flash 9.

ActionScript 3.0 представляет, по сравнению с ActionScript 2.0 качественное изменение, он использует новую виртуальную машину AVM 2.0 и даёт взамен прежнего формального синтаксиса классов настоящее классовое объектно-ориентированное программирование. ActionScript 3.0 обеспечивает возрастание производительности, по сравнению с ActionScript 1.0/2.0, до 700 раз (это лишь обработка инструкций, не затрагивая графику). ActionScript 3.0 позволяет работать с бинарными данными, с BitMap (что обеспечивает значительный прирост производительности: до 10000 раз). ActionScript 3.0 по скорости приблизился к таким языкам программирования, как Java и C#. Увеличение производительности основано на динамической трансляции кода (JIT). Такое увеличение производительности возможно лишь для некоторых типов данных и требует особой организации кода. Объём кода, как правило, увеличивается в несколько раз (по сравнению с AS1).

2.5 Программные средства для создания дизайна

Программа Adobe Photoshop

Adobe Photoshop это растровый графический редактор, разработанный и распространяемый фирмой Adobe Systems.

Этот продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop. В настоящее время Photoshop доступен на платформах Mac OS X/Mac OS и Microsoft Windows. Ранние версии редактора были сортированы под SGI IRIX, но официальная поддержка была прекращена начиная с третьей версии продукта.

Версии Photoshop v.10.0, датируемый апрелем 2007 года, имеет название «Photoshop CS3». Аббревиатура «CS3» означает, что продукт интегрирован в третью версию пакета программ «Adobe Creative Suite». В предыдущих продуктах -- Photoshop CS и CS 2, c целью отличия от прежних версий и укрепления принадлежности к новой линейке продуктов, был изменён символ программы. Вместо изображения глаза, которое присутствовало в версиях с 3-й по 7-ю, в стилевом решении использовалось изображение перьев. В Photoshop CS3 в иконке приложения и экране-заставке используются буквы из названия продукта «Ps» на синем градиентном фоне.

Список нововведений включает в себя новый интерфейс, увеличенную скорость работы, новый Adobe Bridge, новые фильтры и инструменты, а также приложение Device Central, позволяющее осуществлять предварительный просмотр работы в шаблонах популярных устройств, например мобильных телефонов.

Хотя Photoshop практически монополизирует профессиональный рынок, высокая цена привела к появлению конкурирующих программных продуктов, занимающих среднюю и низшую ценовую нишу рынка, некоторые из которых, к примеру GIMP, совершенно бесплатны. Для завоевания этой части рынка и для противостояния необычайно высоким показателям нелегального использования своих профессиональных продуктов, Adobe представил программы среднего и низшего класса Photoshop Elements и Photoshop Album, первая из которых является платной урезанной версией Photoshop, а вторая распространяется бесплатно и служит для организации и элементарной обработки фотографий. Продукт нацелен на любительский рынок, так как ограниченная функциональность делает Photoshop Elements неподходящим для подготовки изображений к печати. Программа Adobe Photoshop Lightroom служит исключительно для «проявки» цифровых негативов, простой ретуши фотоснимков и организации их каталога.

3. Проектирование электронного каталога

3.1 Предпроектная подготовка

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

На этапе предпроектной подготовки была определена цель:

- используя возможности технологии Adobe Flash разработать электронный каталог мебели с использованием 3d моделирования.

Задача каталога:

- информация должна быть представлена в форме, понятной потребителю, и в виде, позволяющем пользоваться системой потребителю, не подготовленному для этого специально.

Также на этапе предпроектной подготовки были разработаны различные варианты дизайна, были разработаны варианты моделей мебели в программе 3d studio max.

3.2 Разработка сценария каталога

На этом этапе был разработан сценарий электронного каталога.

Графически сценарий выглядит следующим образом:

3.3 Моделирование предметов мебели в 3d studio max

Для разработки трехмерной модели мебели в 3ds max необходимо для начала рассмотреть данный объект. Выяснить из каких частей он состоит, какие из них являются сложными, а какие простыми. А так же узнать свойства материала, из которых состоит данный объект: его отражение - если это зеркало, или прозрачность - если это стекло. На примере рассмотрим создание простого кухонного стола, обычно вся мебель или любые другие предметы интерьера создаются из примитивов бокса, сферы, пирамиды или сплайнов. Кухонный стол на примере которого я собираюсь показать моделирование с помощью примитивов, строится таким образом: в окне top рисуем box, сразу же задаем настройки, примерная высота кухонного стола 70-80см и 60-50 см в длину и ширину.

Рисунок 2 Заготовка под кухонный шкаф

Далее необходимо построить дверцу, для этого удобнее всего использовать сплайн

Rectangel. В окне Front рисуем где примерно дверца должна находится, далее применяем модификатор Bevel и ставим примерно такие настройки: level;2,0/0,0

Level2;1,0/-4,0 и Level 3;-1,5/0,0. C такими настройками должно получиться примерно как на следующем рисунке.

Рисунок 3 Дверца кухонного шкафчика

Рисунок 4 Фасад дверцы

Далее делаем подобие того что чаще всего можно встретить на фасаде шкафчиков классической кухни:

Резьба на дверце делается так же с помощью сплайна Rectangle с применением модификатора Sweep. Далее переходим к построению столешницы, она строится так же сплайнами с применением модификатора Bevel, настройки модификатора примерно такие же, как и у дверцы, но необходимо отключить уровень 3 (level3).

Рисунок 5 Построение столешницы

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

После установки дверной ручки шкафчик должен выглядеть примерно таким образом:

Рисунок 6 Установка ручки

После проделанных работ с материалами шкафчик должен выглядеть таким образом:

Рисунок 7 Применение материалов

С огромными возможностями 3d studio max, были построены и спроектированы такие варианты кухонных гарнитуров:

Рисунок 8 Кухонный гарнитур «Бордо»

Рисунок 9 Кухонный гарнитур «Наталия»

Остальные варианты доступны в приложении А

3.4 Разработка дизайна каталога

Был разработан дизайн электронного каталога. Он разрабатывался в программе Adobe Photoshop:

Дизайн страницы меню было разработано несколько решений (смотреть в приложении А)

В последствие был выбран вариант серого цвета с текстурой вензелей, Серый цвет является промежуточным между черным и белым цветами, поэтому считается нейтральным. Серый - это цвет "серого вещества", то есть мозга. Это цвет интеллекта.

На главной странице размещен анимированный баннер и три кнопки меню «Каталог», «Гид по стилям» и «Галерея».

Рисунок 10 Скриншот главной страницы каталога

Далее если перейти по кнопке «Каталог» следует меню из фотографий которые исполняют роль кнопок, каждое из четырех изображений подписано названиями стилей, пользователю не составит труда выбрать нужное направление и просмотреть представленную мебель. Так же присутствует раздел «Гид по стилям» в этом разделе находится информация о том, что представляет из себя каждый из представленных стилей. В разделе «Галерея» можно просмотреть каждый гарнитур в большом разрешение.

3.5 Создание электронного каталога

Электронный каталог разрабатывался в Adobe Flash CS5.

В Меню было создано 4 кнопки (Модерн, Прованс, Классика и Арт-Деко) чтобы перейти с этих кнопок в соответствующие разделы для каждой кнопки был написан программный код на языке программирования Action Script 3.0.

Изначально кнопке (например «Модерн») было создано “instance name” (KitchenModern), далее после точки для данной кнопки добавили обработчик событий(.addEventListener), в данном примере слушателем является мышка(MouseEvent),а событие нажатие мыши (MOUSE_DOWN), далее создали название данной функции ( выбирается по желанию автора). А затем добавили функцию, которая будет выполняться при событии (нажатие мыши),в данном скрипте функция (gotoAndStop)-что означает перейти и остановиться, и затем в скобках добавляется место, куда должны перейти при нажатии кнопки(frame, Scene) (номер кадра, сцена)

И такой код прописываем для каждой кнопки в отдельности, чтобы все они работали и переходили по заданным для них разделам.

Далее следуют страницы с представленными моделями кухонных гарнитуров разработанных в программе 3d studio max 2010.

Дизайн всех страниц разделов сделаны одинаково, отличаются они наполнением, то есть на каждой странице представлены модели разнообразных стилей. На всех страницах присутствуют кнопки для перехода на предыдущие страницы и на главное меню страницы. В любой раздел можно попасть при нажатии на соответствующую кнопку. Для этих кнопок тоже написаны специальные программные коды, созданные при помощи Action Script 3.0

Благодаря языку программирования Action Script 3.0 очень просто и удобно создавать различные переходы и анимацию.

3.6 Информационное наполнение каталога

Информационное наполнение презентации

Наполнение презентации информацией производилось в программе Adobe Flash CS4, используя команду Text Tool (T)

Рисунок 11 Пример текстового наполнения

После окончания разработки презентации, исходный файл (.fla) экспортируется в (.swf).После этого файл готов к внедрению и продвижению.

3.7 Создание анимации

Анимация это последовательный показ заранее подготовленных кадров, на которых видно, как изменяется положение и форма предмета в пространстве.

Кадры анимации снимаются на видео камеру, рисуются художником, ну а в случае с 3D анимацией создаются во время визуализации трехмерной сцены. В случае, если художник создает анимационный ролик, ему приходится рисовать вручную каждый кадр анимации, а это очень кропотливый и сложный процесс, так как для того, чтобы получить трех секундный видео ролик, нужно создать до 100 кадров анимации.

Анимация в 3DMax подчиняется всем описанным выше правилам, но вот создается иначе. Не нужно детально работать над каждым кадром анимации, достаточно лишь указать промежуток времени и действие, которое совершает объект за это время, и 3d studio max возьмет на себя большую часть работы над нашим анимированным объектом.

В указном отрезке времени 3d studio max создаст ряд промежуточных кадров автоматически, ускорив и облегчив тем самым процесс создания анимации.

Итак, любая анимация строится при помощи кадров, для работы с которыми в программе 3d studio max используется так называемая шкала анимации, расположенная в нижней части программы прямо под окнами проекции. По умолчанию длина шкалы анимации составляет 100 кадров, что дает нам возможность создать порядка трех - четырех секунд анимации, безусловно, можно изменить длину шкалы анимации, для этого нажимаем кнопку «Time Configuration» выбираем «Film» (24 кадра в секунду). В End Time прописываем, сколько кадров должно быть в анимации, например 144 кадра.

Далее выделяем анимированный объект, включаем кнопку «Auto Key» перетаскиваем бегунок на нужный кадр (предварительно переместив объект на нужное место) например на 48, это будет означать, что объект будет ровно 2 секунды двигаться в заданном направлении. Перемещая объект необходимо обратить внимание на временную шкалу, на ней должен появиться ключевой кадр. Если объект должен некоторое время, например 2 секунды стоять на месте, перетаскиваем бегунок еще на 48 кадров, итого должно получиться 96 кадров, далее по тому же принципу, выделяем объект, перетаскиваем бегунок еще на 48 кадров и передвигаем объект, туда где он должен оказаться в конце нашей анимации.

После того как все действия завершены следует отжать кнопку «Auto Key» и для просмотра нажать кнопку проигрывания.

Камера по траектории. Для того что бы задать камере определенную траекторию, необходимо в первую очередь установить саму камеру «Target». Далее рисуем сплайн которые больше всего будет подходить намеченному пути, это может быть простая линия, дуга или эллипс. После того как сплайн (путь) готов, нажимаем кнопку «Motion» и выбираем «Trajectories», «Start Time» ставим на значение «0», а «End Time» на «96», «Samples» примерно «10», далее нажимаем «Convert From» и щелкаем на сплайн (путь).

Для того чтобы сделать качественный рендер готовой анимации, необходимо в окошке «Render Setup» выбрать «Active Time Segment», в списке «View» выбираем «Camera», далее «Render Output» - «Files» указываем путь сохранения анимации, выбираем тип файла AVI и «Uncompressed», нажимаем «Render». Для более удачной и реалистичной визуализации необходимо настроить свет, то есть включить глобальное освещение, для этого в окошке «Render Setup» выбираем раздел «Indirect Illumination» и включаем галочку «On». Можно поиграть с настройками яркости, настройками Vray, а так же установить дополнительные источники света Vray Ligth и Vray Sun. Но для начального просмотра можно обойтись минимальными настройками глобального освещения.

В третьем разделе дипломной работы осуществлено проектирование информационной системы. Рассмотрены этапы создания каталога.

Разработаны и смоделированы предметы кухонной мебели четырех разных стилей с применением всех материалов. Для более реалистичного представления создана анимация одного из разработанных гарнитуров.

Окончательно доработан и утвержден дизайн.

Размещено на Allbest.ru