Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
НЕФТЕКАМСКИЙ ФИЛИАЛ
ФЕДЕРАЛЬНОГО ГОСУДАРСТВЕННОГО БЮДЖЕТНОГО ОБРАЗОВАТЕЛЬНОГО УЧРЕЖДЕНИЯ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
«БАШКИРСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»
|
Экономико-математический факультет Кафедра математического моделирования и информационной безопасности |
ПРЕДДИПЛОМНАЯ КУРСОВАЯ работа
по дисциплине «Системный анализ и программирование»
на тему
«Создание 3D-планировщика дизайна интерьера в Web с помощью технологии WebGL»
|
Выполнил: студент 5 курса очной формы обучения группы М-51 Баймуратов А.В. Научный руководитель: к.ф.-м.н., доц. Вильданов А.Н. |
Нефтекамск 2014
СОДЕРЖАНИЕ
|
[1] [1.0.1] И так, за что же хвалят сей труд? [1.0.2] Под более пристальным взглядом... [2] Общие принципы создания 3D объектов [2.0.0.1] Сетка. [2.0.0.2] Точки наблюдения. [2.0.0.3] Освещение. [2.1] 2.3 Что такое Three.js? [2.2] 2.4 Основные элементы Three.js [3] ЗАКЛЮЧЕНИЕ |
В настоящее время возможности web-браузеров позволяют отображать интерактивную трехмерную графику без подключения плагинов и сторонних приложений (например, технология AdobeFlash). Технология WebGL сделала возможным создание web-приложений работающих с интерактивной трехмерной графикой, применяя язык программирования JavaScript. WebGL представляет собой библиотеку для языка программирования JavaScript.
WebGL представляет собой технологию, базирующуюся на OpenGL ES 2.0 и предназначенную для рисования и отображения интерактивной 2D- и 3D-графики в веб-браузерах. При этом для работы с данной технологией не требуются сторонние плагины или библиотеки. Вся работа веб-приложений с использованием WebGL основана на коде JavaScript, а некоторые элементы кода – шейдеры могут выполняться непосредственно на графических процессорах, на видеокартах, благодаря чему разработчики могут получить доступ к дополнительным ресурсам компьютера, увеличить быстродействие. Таким образом, для создания приложений разработчики могут использовать стандартные для веб-среды технологии HTML/CSS/JavaScript и при этом также применять аппаратное ускорение графики.
Если создание настольных приложений работающих с 2D- и 3D-графикой нередко ограничивается целевой платформой, то здесь главным ограничением является только поддержка браузером технологии WebGL. Веб-приложения, построенные с использованием данной платформы, будут доступны в любой точке земного шара при наличии сети интернет вне зависимости от используемой платформы: то ли это десктопы с ОС Windows, Linux, Mac, то ли это смартфоны и планшеты, то ли это игровые консоли.
WebGL возник из экспериментов над Canvas 3D американского разработчика сербского происхождения Владимира Вукичевича из компании Mozilla в 2006 году. В конце 2007 года и Mozilla, и Opera создали свои собственные отдельные реализации. Впоследствии была организована рабочая группа с участием крупнейших разработчиков браузеров Apple, Google, Mozilla, Opera для работы над спецификацией технологии. Спецификация WebGL 1.0 была представлена 3 марта 2011 года.
Актуальность выбранной темы, как и актуальность разработки веб-приложений вообще, можно объяснить нижеследующими факторами:
– кроссбраузерность и отсутствие привязки к определенной платформе. Windows, MacOS, Linux - все это не важно, главное, чтобы ваш браузер поддерживал WebGL;
– использование языка JavaScript, который достаточно распространен;
– автоматическое управление памятью. В отличие от OpenGL в WebGL не надо выполнять специальные действия для выделения и очистки памяти;
– поскольку WebGL для рендеринга графики использует графический процессор на видеокарте (GPU), то для этой технологии характерна высокая производительность, которая сравнима с производительностью нативных приложений.
Целью курсовой работы является разработка Web-приложения, на языке программирования JavaScript, функциональным назначением которого является выбор дизайна интерьера жилого помещения.
Поставленная цель определила постановку следующих задач:
– формирование пользовательского интерфейса;
– изучение технологии WebGL;
– изучение и совершенствование знаний HTML5, JavaScript;
– разработка алгоритма игры «Судоку»;
– выполнение проверки правильности игрового результата.
В первой главе раскрываются основные понятия, свойства и возможности языка программирования JavaScript. Во второй главе речь идет о технологии WebGL. Третья глава – разработка приложения «3D-планировщика дизайна интерьера».
В результате исследования разработана web-приложение 3D планировщик дизайна интерьера с использованием технологии WebGL. Программа способна выбирать один из трех уровней сложности. Уровень сложности определяется количеством пустых клеток в судоку. Проверку можно произвести, нажав на кнопку «галочка» (рисунок 1).
Используется, как правило, для отрисовки графиков для статей и игрового поля в некоторых браузерных играх. Но также может использоваться для встраивания видео в страницу и создания полноценного плеера. Используется в WebGL для аппаратного ускорения 3D графики
Интернет всегда являлся наглядной, но в то же время ограниченной информационной средой. До недавнего времени разработчики HTML были ограничены такими средствами, как CSS и JavaScript; им оставалось лишь создавать анимацию или визуальные эффекты для веб-сайтов либо полагаться на подключаемые модули, например Flash.
1 HTML5 и JavaScript
Спецификация HTML5
HTML5 - это новая версия HTML. Предыдущая версия HTML была выпущена в 1999 году, за это время всемирная паутина сильно изменилась и поэтому изменения требовались к HTML.
В HTML5 было добавлено много нового, поэтому некоторые возможности, которые были доступны в HTML4 только с использованием внешних плагинов (таких как Adobe Flash) или клиентских скриптов теперь доступны с помощью обычных разметочных тэгов.
HTML5 все еще в разработке, но его частичную поддержку имеют все современные браузеры, поэтому использовать новые возможности Вы можете уже сейчас.
Наиболее интересные нововведения HTML5:
JavaScript
JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам — функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания – что придаёт языку дополнительную гибкость.
Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:
В языке отсутствуют такие полезные вещи, как:
Структурно JavaScript можно представить в виде объединения трёх чётко различимых друг от друга частей:
Если рассматривать JavaScript в отличных от браузера окружениях, то объектная модель браузера и объектная модель документа могут не поддерживаться.
Объектную модель документа иногда рассматривают как отдельную от JavaScript сущность, что согласуется с определением DOM как независимого от языка интерфейса документа. В противоположность этому ряд авторов находят BOM и DOM тесно взаимосвязанными.
WebGL
При помощи API WebGL можно создавать высокопроизводительную двух- и трехмерную графику, непосредственно программируя графический процессор (GPU) компьютера и управляя им. WebGL выполняет отрисовку, используя элемент Canvas в качестве контекста ресурса, во многом аналогично двухмерному контексту, но предоставляет доступ к GPU на очень низком уровне.
Использование WebGL немного отличается от традиционного веб-программирования, поскольку для создания каждого приложения используются два языка. При использовании WebGL часть кода пишется на JavaScript, а другая – на GLSL (OpenGL Shading Language), языке низкого уровня, похожем на C. Часть, написанная на JavaScript, загружает изображения, задает цвета и описывает объекты. Код GLSL преобразует изображения, цвета и векторы с целью их обработки в GPU программами шейдера. Комбинация этих двух компонентов в WebGL обеспечивает невероятно быструю обработку графики.
http://msdn.microsoft.com/ru-ru/library/ie/dn385807(v=vs.85).aspx
WebGL (Web-based Graphics Library) - программная библиотека для языка программирования JavaScript, позволяющая создавать на JavaScript интерактивную 3D-графику, функционирующую в широком спектре совместимых с ней веб-браузеров. За счёт использования низкоуровневых средств поддержки OpenGL, часть кода на WebGL может выполняться непосредственно на видеокартах. WebGL - это контекст элемента canvas HTML, который обеспечивает API 3D графику без использования плагинов. Спецификация версии 1.0 была выпущена 3 марта 2011 года. Проект по созданию библиотеки управляется некоммерческой организацией Khronos Group.
WebGL представляет собой технологию, базирующуюся на OpenGL ES 2.0 и предназначенную для рисования и отображения интерактивной 2D- и 3D-графики в веб-браузерах. При этом для работы с данной технологией не требуются сторонние плагины или библиотеки. Вся работа веб-приложений с использованием WebGL основана на коде JavaScript, а некоторые элементы кода - шейдеры могут выполняться непосредственно на графических процессорах на видеокартах, благодаря чему разработчики могут получить доступ к дополнительным ресурсам компьютера, увеличить быстродействие. Таким образом, для создания приложений разработчики могу использовать стандартные для веб-среды технологии HTML/CSS/JavaScript и при этом также применять аппаратное ускорение графики.
Если создание настольных приложений работающих с 2D и 3D-графикой нередко ограничивается целевой платформой, то здесь главным ограничением является только поддержка браузером технологии WebGL. А сами веб-приложения, построенные с использованием данной платформы, будут доступны в любой точке земного шара при наличии сети интернет вне зависимости от используемой платформы: то ли это десктопы с ОС Windows, Linux, Mac, то ли это смартфоны и планшеты, то ли это игровые консоли.
WebGL возник из экспериментов над Canvas 3D американского разработчика сербского происхождения Владимира Вукичевича из компании Mozilla в 2006 году. Впоследствии разработчики браузеров Opera и Mozilla стали создавать свои реализации WebGL. А впоследствии была организована рабочая группа с участием крупнейших разработчиков браузеров Apple, Google, Mozilla, Opera для работы над спецификацией технологии. И 3 марта 2011 года была представлена спецификация WebGL 1.0.
В настоящий момент WebGL поддерживается следующими браузерами:
Десктопные браузеры
Мобильные браузеры и платформы
Преимущества использования WebGL
Введение в WebGL
Технология WebGL позволяет создавать 3D-графику на Web-странице, опираясь на HTML5 и используя JavaScript.
WebGL-спецификация основывается на спецификации OpenGL ES 2.0 — усеченной версии спецификации OpenGL 2.0, предназначенной для реализации во встроенных и мобильных устройствах.
Модель программирования чистого WebGL
Для создания WebGL-приложения на базе WebGL API необходимо:
Создать HTML5 элемент canvas.
Получить контекст элемента canvas.
Инициализировать рабочую область отображения графики.
Создать буфер данных вершин модели.
Создать матрицу преобразования вершин модели на экран.
Создать шейдер, определяющий алгоритм рисования графики.
Инициализировать шейдер с параметрами.
Нарисовать графику.
Важным катализатором интереса к 3D среди веб-разработчиков стало создание Рикардо Кабельо (или Mr.doob) Three.js - JavaScript библиотеки. Цель этого проекта заключается в предоставлении разработчикам с небольшим 3D и WebGL опытом возможности создания невероятно сложных сцен с использованием общих методов JavaScript. Для того чтобы приступить к работе вполне достаточно поверхностной осведомленности в особенностях JavaScript и основах моделирования.
В основе WebGL лежит API OpenGL, и с некоторой долей условности можно сказать, что WebGL – это биндинг OpenGL для JavaScript. WebGL ориентируется на набор возможностей предоставляемых OpenGL ES 2.0, что позволяет использовать его на широком спектре оборудования: как на десктопах, так на мобильных платформах. Разумеется, возможности настольных компьютеров в большинстве случаев существенно превышают то, что может дать WebGL. Но такое решение позволило создать некоторое единообразие с мобильными платформами, где ускорители трехмерной графики обосновались относительно недавно и на данный момент по уровню функционала и производительности примерно соответствуют графическим ускорителям среднего класса для десктопных компьютеров 5-7 ми летней давности.
Новый html тег canvas позволяет так же применять игровой контент. Сейчас он-лайн игры не замедляют рост своей популярности, размещение на сайте таких игр, бесспорно, приведет к увеличению трафика и среднего времени пребывания пользователя на сайте. Статистика говорит о том, что масса пользователей поспешают тот или иной портал, исключительно ради развлечений, даже если тематика сайта их вовсе не интересует.
Изначально не все браузеры поддерживали данный язык, но со временем, когда HTML5 доказал свою состоятельность на практике, большинство разработчиков приложений для браузеров начали его активное использование. Сейчас даже такой консерватор как IE может похвастаться поддержкой данной новинки. Google не побоялся применить нововведение одним из первых. Уже давно можно заметить динамическую графику на его стартовой странице.
Библиотека THREE.JS
Three.js – это библиотека JavaScript, содержащая набор готовых классов для создания и отображения интерактивной компьютерной 3D графики в WebGL.
Бибилиотека Three.js облегчает работу с WebGL. При использовании Three.js отпадает необходимость в написании шейдерных процедур (но эта возможность остается), и появляется возможность оперировать с более привычными и удобными понятиями сцены, света и камеры, объектами и их материалами.
Библиотека Three.js также поддерживает отображение готовых трехмерных моделей формата Collada (который обеспечивает совместимость моделей таких программ, как Maya, 3ds Max, Blender, Unreal engine, и т. д.).
Над библиотекой работает большое количество разработчиков. Главным идеологом и разработчиком является программист из Барселоны Рикардо Кабельо (Ricardo Cabello), творческий псевдоним Mr. Doob.
Для использования библиотеки нужно скачать с сайта threejs.org файл three.min.js (библиотека содержит минимальный набор функций для работы с WebGL), и подключить к вашему проекту.
Во-первых, three.js кроссбраузерна, что является на мой взгляд самым важным достижением, и вам не придется заморачиваться с тонкостями браузерных наворотов.
Во-вторых, в библиотеке реализовано множество математических функций, с эффективными алгоритмами решения, чтобы ваше веб-приложения работало с минимальными затратами ресурсов.
В третьих, описано множество часто используемых функций и методов, для построения трехмерной графики. Все эти функции, в дальнейшем, мы рассмотрим подробнейшим способом, и Вы узнаете, что, в принципе, можно обойтись и без знаний WebGL, для создания невероятных по красоте приложений.
Функционал библиотеки можно разделить на следующие категории:
По своей форме все объекты делятся на сложные и простые. Примером простого объекта может являться, например, лампочка. Сложным объектом можно считать, например, дерево. Как известно, существует два подхода к созданию объектов - первый: создание объектов из примитивов - наиболее простой и понятный метод, не требующий особых навыков, второй - рисование объектов, не прибегая к примитивам, а выполняя моделлинг при помощи лофтинга и других приемов. Давайте разберемся, когда же нужно использовать первый подход, а когда второй.
Рисование объектов при помощи примитивов.
Данный метод применяется, когда вы можете мысленно разбить объект на несколько примитивов, которые могут накладываться друг на друга, пересекаться и тому подобное. Для того чтобы проделывать подобные операции над объектом необходимо иметь хорошее пространственное мышление, постоянно представлять себе объект во всех его основных деталях. Зато процесс моделирования значительно упрощается. На основе примитивов можно изобразить практически любой объект, единственное ограничение в том, что после определенного предела изображение примитивами теряет смысл. При желании можно изобразить при помощи примитивов и такой объект (например, при помощи маленьких кубов или сфер, которые, по сути, будут являть собой что-то подобное точкам).
Сам процесс создания объектов на основе примитивов можно разбить на следующие этапы:
Таким образом, мы выяснили, что примитивами лучше всего пользоваться при изображении относительно простых, регулярных объектов. Применение их для отображения сложных нерегулярных объектов нежелательно.
Создание сложных объектов нерегулярной формы
Основная проблема при создании подобных объектов - постоянное "видение" объекта. Можно использовать некие начальные наброски объекта, еще лучше иметь перед глазами его модель.
После выбора предмета моделирования и детального изучения его формы можно приступать к моделированию. Писать исходный текст для подобных объектов вручную крайне не рекомендую, так как ничего хорошего из этого не выйдет. Для создания данных объектов лучше воспользоваться средствами визуального проектирования: системами моделирования: 3D Studio MAX, Maya, LightWave, RayDream Studio и им подобными. При создании нужно уделять большое внимание равновесию между детализацией объекта и количеством вершин и граней (вышеперечисленные системы моделирования позволяют проверять количество использованных вершин). В идеале количество вершин и граней должно быть минимально, тогда размер выходного файла будет меньше, и скорость скачивания и отображения возрастет. Кроме того, по мере возможности старайтесь использовать и примитивы.
Еще одной сложной проблемой является расположение, и связь частей сложного объекта, по этому есть несколько систем, которые упрощают создание подобных объектов. Примерами могут служить системы автоматической генерации внешнего вида таких объектов как: человеческое тело, дерево, различные ландшафты. При генерации чаще всего требуется ввести несколько характерных параметров (например, рост, вес, пол). Чаще всего в данных программах используются различные алгоритмы, позволяющие создавать относительно различные объекты. Так при создании ландшафтов и деревьев используются фракталы, с их помощью наиболее просто и быстро достигается нужный результат. Недостатком подобных систем является усредненность получаемых результатов. Но зато огромен выигрыш в скорости моделирования.
Итак, для создания объектов сложной формы необходимо иметь развитое трехмерное воображение или модель объекта, который мы собираемся моделировать. Кроме того, желательно иметь систему визуального моделирования, которая обладает возможностями по созданию подобных объектов.
Сетка.
Скелет, который образует форму 3D объектов, с которыми мы будет работать, обычно упоминается как сетка, хотя его еще называют каркасом или моделью. Обычно используется сетчатый тип, который мы также будем использовать для создания полигональной модели.
(Два других типа сетки используются для моделирования 3D объектов. Моделирование кривой предполагает ориентирование на точки, которые соединены между собой и которые формируют модель. Цифровое создание модели-скульптуры связано с использованием программного обеспечения, которое фактически имитирует использование вещества. Например, при работе с формами и полигонами вы должны представлять, что лепите скульптуры из глины).
Сетки, которые создают полигональную модель, состоят из трех частей: граней, ребер и вершин. Лицевые стороны – это отдельные полигоны, которые вы видите при просмотре сетки, и которые придают объекту свою форму и структуру. Края проходят по внешней стороне лицевой стороны и лежат между вершинами. Вершиной считается точка, в которой пересекается любое количество этих краёв. Если сетка запланирована и построена правильно, то каждая вершина будет лежать на пересечении ребер и в углах соседних лицевых сторон.
Это позволяет перемещать грани и ребра вместе с вершинами, и это объясняет, почему внедрение вершин в полную модель является наиболее распространенным и эффективным способом построения скульптуры. Каждая из этих частей является отдельным объектом для выбора с различным поведением.
По сравнению с другими видами, полигональное моделирование более актуально для использования в браузере, не только потому, что оно намного популярнее, но и потому что это занимает минимум времени для компьютерной визуализации. Основным недостатком скоростного построения является то, что полигоны создаются плоскими и не могут быть изогнуты. Вот почему 3D модель выглядит такой «сырой».
Для борьбы с этой проблемой были разработаны специализированные программы, такие как Blender, Maya и 3ds Max. Эти программы содержат сглаживание утилиты, которые можно использовать перед экспортом и которые добавляют множество крошечных полигонов в модель. Добавление полигонов вдоль кривой создает множество малых углов. Углы, которые до этого были острыми, теперь будут состоять из двух больших полигонов, создавая, таким образом, иллюзию гладкости.
При использовании сетки, можно работать с различными материалами, которые позволят получить модели с различным поведением и взаимодействиями. Основная сетка и материал будут визуализированы как плоские полигоны, показывая модель в одинаковом цвете. Использование ламберт (внесистемная единица яркости поверхности) материалов позволит удерживать свет, отраженный от поверхности и, как правило, такие материалы считаются не блестящими. Многие прототипы создаются из ламберт материалов для того, чтобы сосредоточиться на структуре, а не на эстетике. Фонг (по базису из вершинных нормалей аппроксимирующих поверхность многоугольников) материалы представляют собой противоположность и способствуют созданию блестящих поверхностей. Вы можете получить некоторые действительно фантастические эффекты в случае правильного использования света.
В дополнение к этим сетки могут быть применены материалы для спрайтов, частицы и программы построения теней (шейдеры).
(Полигональные модели называют “гранеными”, поскольку они состоят из многоугольных граней, которые определяют форму структуры).
Точки наблюдения.
Для того чтобы визуализировать сетки необходимо правильно подобрать точки наблюдения, которые будут определять особенности визуализации. Three.js содержит два типа точек наблюдения, ортогональные и аксонометрические. Ортогональные проекции исключают аксонометрию, отображающую все объекты в одинаковом масштабе независимо от того, как далеко эти объекты находятся от точек наблюдения. Это очень полезно при проектировании, поскольку различные размеры в различных точках наблюдения могут затруднить определение размеров объекта. Вы можете узнать аксонометрические проекции в любых направлениях по сборке мебели или автомобилей. Перспективная проекция определяет свойства расположения объекта по отношению к сцене и, как следует из названия, может визуализировать размер модели, основываясь на расстоянии от точки просмотра.
Точки наблюдения управляют «пирамидой просмотра» или представлением видимой области сцены. Пирамиду просмотра можно изобразить в виде коробки, определяемой ближними и дальними свойствами (плоскость, где область начинается и останавливается), наряду с «соотношением сторон», которое определяет размеры ящика. Любой объект, который существует вне видимого пространства, не отображается в сцене — но все еще остается визуализированным.
Как и следовало ожидать, такие объекты могут не использоваться, но при этом будут занимать ресурсы и должны быть отсортированы. Сортировка связана с использованием алгоритма, который позволяет найти объекты, которые находятся за пределами проекции, составляющей часть пирамиды просмотра и удалить их со сцены. В сортировке также задействованы специальные структуры данных, такие как, например, октодерево (которое делит пространство на более мелкие части), позволяющие увеличить производительность.
Освещение.
Теперь, когда определён способ визуализации объекта, источники света должны быть размещены таким образом, чтобы можно было увидеть объект и оценить его ожидаемое поведение. Свет используется 3-D художниками самыми различными образами, но ради эффективности, мы сосредоточимся на способах доступных в Three.js. К счастью для нас, эта библиотека имеет множество вариантов использования источников света:
Для того чтобы воспользоваться пространственным освещением в Three.js, вы должны использовать визуализацию с задержкой. Подобный тип визуализации позволяет сцене отображаться с использованием затенения с задержкой, техники, которая представляет сцену двумя частями вместо одной. В первом проходе визуализируются сами объекты, в том числе их местоположение, сетка и материалы. Второй проход вычисляет освещение и затенение всех объектов и добавляет эти свойства в сцену.
Поскольку во время этого вычисления все объекты в сцене уже будут полностью сформированы, во внимание может приниматься совокупность смежных объектов и источников света. Это означает, что все вычисления необходимо сделать только один раз, когда визуализируется сцена, а не каждый раз при визуализации объекта.
Например, при визуализации пяти объектов и пяти источников света в сцене с обычной визуализацией отобразится первый объект, а затем будет рассчитано освещение и затенение. Затем будет визуализирован второй объект и пересчитаны параметры освещения и затенения для раз …
Отрисовка в WebGL осуществляется с помощью так называемых вершинных и пиксельных шейдеров.
Шейдеры – это функции, написанные на специальном языке программирования GLSL, которые выполняются графической картой и обрабатывают данные вершин и пикселей, определяя окончательные параметры изображения объекта. Они могут включать в себя описание поглощения и рассеяния света, наложение текстуры, отражение и преломление, затенение, и т.д.
Работа с шейдерами – это достаточно трудоемкий процесс. Ко всему прочему, вы должны еще описать каждую вершину, каждое ребро, каждую грань, нормали к поверхности, их цвет, положение, и пр. Для повышения скорости разработки можно использовать один из нескольких фреймворков WebGL – Sylvester, glUtils.js, webgl-utils.js,Three.js, и др. В данном пособии выбор пал на активно развивающуюся библиотеку с открытым исходным кодомThree.js.
Three.js – это библиотека JavaScript, содержащая набор готовых классов для создания и отображения анимированной компьютерной 3D графики в WebGL.
Библиотека Three.js облегчает работу с WebGL. При использовании Three.js отпадает необходимость в написании шейдерных процедур (но эта возможность остается), и появляется возможность оперировать с более привычными и удобными понятиями сцены, света и камеры, объектами и их материалами.
Библиотека Three.js также поддерживает отображение готовых трёхмерных моделей формата Collada (который обеспечивает совместимость моделей таких программ, как Maya, 3ds Max, Blender, Unreal engine, и т.д.)
Над библиотекой работает большое количество разработчиков. Главным идеологом и разработчиком является программист из Барселоны Рикардо Кабельо (Ricardo Cabello), творческий псевдоним Mr. Doob.
Для использования библиотеки нужно скачать с сайта threejs.org файл three.min.js[1] (собственно, сама библиотека, содержащая минимальный набор функций для работы с WebGL), и подключить к вашему проекту.
Также на странице сайта threejs.org доступно для скачивания все содержимое сайта с примерами, исходниками и документацией.
Не забывайте отлавливать ошибки в приложении. Если вы видите пустой экран, то стопроцентно возникла ошибка, и ее нужно найти. Например, в браузере Google Chrome для этого следует зайти в Меню – Инструменты – Консоль Javascript и выбрать вкладку Console (обычно по умолчанию).
Основные элементы, которые будут принимать участие в нашей постановке:
1) Камера (THREE.Camera). Это наши «глаза» на импровизированной сцене событий. Первый параметр показывает удаленность от объекта, второй – отношение сторон ( как правило, используется именно частное от ширины и высоты окна), третий и четвертый, – near/far, параметры, относящиеся к плоскости и используемые при рендеринге.
camera = newTHREE.Camera(30,
window.innerWidth/window.innerHeight,1, 3000);
Следует также заметить, что используется Декартова система координат, т.е. ось x направлена от верхнего левого угла экрана в нижний правый, ось z от верхнего правого в нижний левый и ось y от нижней части экрана к верхней соответственно.
2) Сцена (THREE.Scene). Основной элемент. Именно на сцену будем добавлять все созданные объекты и плоскости (с помощью .addObject или addChild). Инициализация сцены выглядит следующим образом:
scene = newTHREE.Scene();
3) Мэш (THREE.Mesh). Именно с помощью мэша составляются почти все объекты в three.js. Для работы с ним нужно определить геометрию и материал мэша.
Геометрия, – это объекты, из которых составляется сцена (кубы, сферы, цилиндры, плоскости и прочее). Материал, не менее объемный вопрос, поэтому для начала можно лишь уточнить два момента, — для применения материала, указанного в геометрии следует использовать MeshFaceMaterial, для применения в большинстве других случаев вполне может хватить MeshBasicMaterial.
mesh = newTHREE.Mesh( geometry, material );
После чего мы можем со спокойной душой добавлять мэш в сцену
scene.addObject( mesh );//или .addChild
Удаляется объект также несложно, с помощью removeObject
scene.removeObject(mesh);
4) Рендерер (THREE.WebGLRenderer / CanvasRenderer). Нам доступно два вида рендереров, – WebGLRenderer и CanvasRenderer. Уже по названиям можно понять, что к чему. Следует также заметить, что, как и ожидалось, WebGLRenderer заметно сильнее роняет fps на слабеньких машинах. Использовать рендереры также предельно просто:
renderer = newTHREE.WebGLRenderer( );
или
renderer = newTHREE.CanvasRenderer();
Одним из требуемых действий после инициализации рендерера является установка его размера, — здесь можно выбирать какой угодно размер, исходя из наших нужд.
renderer.setSize(window.innerWidth, window.innerHeight );
И, наконец, нам нужно добавить элемент рендерера на страницу. Делается это следующим образом и одинаково для всех типов рендереров:
container.appendChild(renderer.domElement );
или же для jQuery
container.append(renderer.domElement);
5) Свет. К сцене можно (а иногда и нужно) применять свет, например, для получения теней от объектов (их можно, конечно, сделать и с помощью параллельно движущихся плоскостей, но это скорее в виде исключения). Существует три вида освещения:
– THREE.AmbientLight – это освещение, которое затрагивает всю сцену. Оно не имеет направления и затрагивает каждый объект сцены в равной степени, независимо от расположения объекта. Соответственно, у этого света нет позиции на оси координат;
– THREE.PointLight – освещение, исходящее из одной точки во всех направлениях. Думаю, сравнение с обыкновенной лампочкой будет достаточно уместно;
–THREE.DirectionalLight – свет, движущийся в определенном направлении (от заданной точки и к началу координат). Солнечный свет, например, можно отнести именно к этому типу освещения.
Будем использовать только DirectionalLight для получения тени от размещенного над плоскостью объекта.
WebGL – стандарт, спецификация которого разрабатывается в настоящее время, предназначенный для отображения 3D графики в браузерах.
Задействует средства аппаратного ускорения 3D-графики в браузерах с поддержкой HTML 5 без использования подключаемых модулей.
Технически представляет собой привязку JavaScript к функциям, определенным в библиотеках OpenGL ES 2.0, реализованную на уровне браузера.
В качестве рабочего фреймворка выбрана библиотека THREE.js.
Основным результатом работы является браузерная 3D игра «Судоку» с использованием технологии WebGL. В ходе выполнения курсовой работы были полностью реализованы поставленные цели и задачи, а именно: формирование пользовательского интерфейса, разработка алгоритма игры, реализация, выполнение проверки правильности игрового результата.
Возможная доработка программы в будущем:
– создание таблицы рекордов;
– добавление выбора уровня сложности;
– ограничение времени игры;
– разработка дизайна программы;
– сохранение игры.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ И ЛИТЕРАТУРЫ
1] URL: http://threejs.org/build/three.min.js