Когда третье измерение вводится в развлекательную среду, оно навсегда изменяет способ представления и восприятия. Фотореализм CGI (интерфейс компьютерной графики) динозавров в Парке юрского периода открыл двери для фильмов, основанных на использовании компьютерных эффектов для создания подходящих визуальных сред. Без использования компьютерной графики такого результата попросту не смогли бы достигнуть. VeggieTales дали начало новым типам мультфильмов, основанных на использовании 3-D объектов вместо традиционных графических элементов. Подобный принцип создания мультфильмов лёг в основу популярных блокбастеров от Pixar и Dreamworks.

Компьютерные программы сильно зависели от этой новой тенденции построения визуальных моделей. Компьютерные игры на основе 3-D эффектов, такие как Wolfenstein 3D, Quake и Doom позволили по-новому взглянуть на компьютерные игры и классические франшизы, которые вдохновляли целые поколения. Самые популярные двумерные игры, такие как Super Mario Bros и Zelda были обновлены до 3-D версии с соответствующей пометкой в последующих названиях.

До появления официальной спецификации WebGL в 2011 году, тенденция внедрения трехмерных моделей не оказывала особого влияния на сферу интернета и браузеров. Но в последние несколько лет, мы увидели огромные достижения в области использования 3-D моделей и анимации в интернете. Похожие тенденции прослеживаются на телевидении, в кино и программном обеспечении.

WebGL демонстрирует, как совместные усилия Epic и Mozilla помогли создать чисто браузерную версию Epic Citadel, указывающую на огромный потенциал этой новой технологии. Вспоминая все проблемы, возникающие при работе Unreal Tournament на моем старом компьютере 90-х годов, меня просто поразил этот новый тип представления, который теперь может быть использован и для наших веб-браузеров.

Epic Citadel от Mozilla и Epic (Увеличенная версия).

Важным катализатором интереса к 3-D среди веб-разработчиков стало создание Рикардо Кабельо (или Mr.doob) Three.js JavaScript библиотеки. Цель этого проекта заключается в предоставлении разработчикам с небольшим 3-D и WebGL опытом возможности создания невероятно сложных сцен с использованием общих методов JavaScript. Для того чтобы приступить к работе вполне достаточно поверхностной осведомленности в особенностях JavaScript и основах моделирования.

Установка программной среды.

Прежде чем приступать к работе непосредственно с Three.js необходимо разобраться с 3-D программным обеспечением. Чтобы в полной мере использовать все возможности API (программный интерфейс приложения), вы должны понять основы моделирования и анимации. Мы рассмотрим каждую из частей, которые составляют программную среду и как они взаимодействуют друг с другом. Как только мы поймем эти основы и рассмотрим их применение к нашей демо-версии Three.js во всём появится гораздо больше смысла.

Сетка.

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

(Два других типа сетки используются для моделирования 3-D объектов. Моделирование кривой предполагает ориентирование на точки, которые соединены между собой и которые формируют модель. Цифровое создание модели-скульптуры связано с использованием программного обеспечения, которое фактически имитирует использование вещества. Например, при работе с формами и полигонами вы должны представлять, что лепите скульптуры из глины).

Сетки, которые создают полигональную модель, состоят из трех частей: граней, ребер и вершин. Лицевые стороны – это отдельные полигоны, которые вы видите при просмотре сетки, и которые придают объекту свою форму и структуру. Края проходят по внешней стороне лицевой стороны и лежат между вершинами. Вершиной считается точка, в которой пересекается любое количество этих краёв. Если сетка запланирована и построена правильно, то каждая вершина будет лежать на пересечении ребер и в углах соседних лицевых сторон.

Это позволяет перемещать грани и ребра вместе с вершинами, и это объясняет, почему внедрение вершин в полную модель является наиболее распространенным и эффективным способом построения скульптуры. Каждая из этих частей является отдельным объектом для выбора с различным поведением.

Лицевые стороны, вершины и ребра на многоугольном кубе (Увеличенная версия).

По сравнению с другими видами, полигональное моделирование более актуально для использования в браузере, не только потому, что оно намного популярнее, но и потому что это занимает минимум времени для компьютерной визуализации. Основным недостатком скоростного построения является то, что полигоны создаются плоскими и не могут быть изогнуты. Вот почему 3-D модель выглядит такой «сырой».

Для борьбы с этой проблемой были разработаны специализированные программы, такие как Blender, Maya и 3ds Max. Эти программы содержат сглаживание утилиты, которые можно использовать перед экспортом и которые добавляют множество крошечных полигонов в модель. Добавление полигонов вдоль кривой создает множество малых углов. Углы, которые до этого были острыми, теперь будут состоять из двух больших полигонов, создавая, таким образом, иллюзию гладкости.

Полигональные формы рядом со сглаженным аналогом. (Изображение: Blender |Увеличенная версия).

При использовании сетки, можно работать с различными материалами, которые позволят получить модели с различным поведением и взаимодействиями. Основная сетка и материал будут визуализированы как плоские полигоны, показывая модель в одинаковом цвете. Использование ламберт (внесистемная единица яркости поверхности) материалов позволит удерживать свет, отраженный от поверхности и, как правило, такие материалы считаются не блестящими. Многие прототипы создаются из ламберт материалов для того, чтобы сосредоточиться на структуре, а не на эстетике. Фонг (по базису из вершинных нормалей аппроксимирующих поверхность многоугольников) материалы представляют собой противоположность и способствуют созданию блестящих поверхностей. Вы можете получить некоторые действительно фантастические эффекты в случае правильного использования света.

В дополнение к этим сетки могут быть применены материалы для спрайтов, частицы и программы построения теней (шейдеры).

(Полигональные модели называют “гранеными”, поскольку они состоят из многоугольных граней, которые определяют форму структуры).

Точки наблюдения.

Для того чтобы визуализировать сетки необходимо правильно подобрать точки наблюдения, которые будут определять особенности визуализации. Three.js содержит два типа точек наблюдения, ортогональные и аксонометрические. Ортогональные проекции исключают аксонометрию, отображающую все объекты в одинаковом масштабе независимо от того, как далеко эти объекты находятся от точек наблюдения. Это очень полезно при проектировании, поскольку различные размеры в различных точках наблюдения могут затруднить определение размеров объекта. Вы можете узнать аксонометрические проекции в любых направлениях по сборке мебели или автомобилей. Перспективная проекция определяет свойства расположения объекта по отношению к сцене и, как следует из названия, может визуализировать размер модели, основываясь на расстоянии от точки просмотра.

Точки наблюдения управляют «пирамидой просмотра» или представлением видимой области сцены. Пирамиду просмотра можно изобразить в виде коробки, определяемой ближними и дальними свойствами (плоскость, где область начинается и останавливается), наряду с «соотношением сторон», которое определяет размеры ящика. Любой объект, который существует вне видимого пространства, не отображается в сцене — но все еще остается визуализированным.

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

Освещение.

Теперь, когда определён способ визуализации объекта, источники света должны быть размещены таким образом, чтобы можно было увидеть объект и оценить его ожидаемое поведение. Свет используется 3-D художниками самыми различными образами, но ради эффективности, мы сосредоточимся на способах доступных в Three.js. К счастью для нас, эта библиотека имеет множество вариантов использования источников света:

• Точка. Точечный источник света, наиболее часто используемый вид освещения. Он работает таким же образом, как лампочка и влияет на все объекты соответствующим образом, пока они находятся в пределах предопределенного диапазона. Этот источник света может имитировать освещение, аналогичное отбрасываемому лампочкой на потолке.
• Пятно. Световое пятно похоже на точечный источник света, но ориентировано на освещение только тех объектов, которые находятся в пределах его светового диапазона. Поскольку освещение распределяется не равномерно, как это было в случае точечного освещения, объекты будут отбрасывать тень, и будут присутствовать “темные” стороны.
• Внешнее освещение. Этот инструмент добавляет источник света, который влияет на все объекты в сцене в равной степени. Внешний свет, также как и солнечный свет используется в качестве общего источника света. Это позволяет рассмотреть объекты, находящиеся в тени, ведь в противном случае скрытые от прямых лучей они были бы совсем незаметны. Из-за общего характера внешнего освещения, положение источника не будет влиять на распределение света в сцене.
• Полушарие. Этот источник света работает так же, как и освещение над бильярдным столом благодаря тому, что он расположен непосредственно над сценой, и свет расходится только с одной точки.
• Направленный. Направленный источник света очень похож на точку и пятно, тем, что он влияет только на те объекты, которые находятся в пределах пирамиды. Основное его отличие от других видов освещения заключается в том, что направленный свет не имеет диапазона. Он может быть расположен далеко от объектов, но при этом расстояние не будет влиять на интенсивность освещения.
• Пространственное. Излучаясь непосредственно из объекта в сцене с определенными свойствами, пространственное освещение является чрезвычайно полезным для имитации светильников наподобие нависающих флуоресцентных ламп и диодной подсветки. При формировании пространственного освещения, необходимо объявить его форму (как правило, прямоугольная или круглая) и выполнить измерения, по результатам которых будут определяться области, которые будет покрывать свет.

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

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

Например, при визуализации пяти объектов и пяти источников света в сцене с обычной визуализацией отобразится первый объект, а затем будет рассчитано освещение и затенение. Затем будет визуализирован второй объект и пересчитаны параметры освещения и затенения для раз …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров