Что такое полигон в графике
Что такое полигональная графика?
Хотите больше узнать о полигональной графике? Для чего она используется? Как сделать что-то в этой технике? Да? Тогда вы настоящий дизайнер, готовый развиваться, и расти как профессионал!
Конечно, полигональную графику вряд ли можно назвать чем-то новым, и уж тем более революционным. Тем не менее, она поможет разнообразить ваш дизайн и сделает его индивидуальным и узнаваемым. Да и очередной всплеск моды на полигоны, который бодро шагает по просторам Интернета, трудно игнорировать.
В этом посте вы узнаете о полигонах и полигональной графике и увидите потрясающие примеры ее использования. Также мы собрали для вас несколько уроков, которые помогут вам освоить эту технику. И, кто знает, может быть, вы будете рисовать полигонами даже круче, чем авторы собранных здесь работ!
Что такое полигональная графика?
Полигон (от греч. polýgonos – многоугольный), полигональная линия (математическая), ломаная линия, составленная из конечного числа прямолинейных отрезков (звеньев). Под полигоном также понимают замкнутую ломаную линию, т. е. многоугольник.
Где используются полигоны?
Ответ очевиден – в цифровой графике, конечно же! Это своего рода разновидность цифрового искусства. Изначально полигональная графика появилась в 3D моделировании для создания видеоигр. Благодаря низкому разрешению у таких объектов была высокая скорость рендеринга. Также отображение в виде каркаса позволяет экономить ресурсы компьютера и облегчает работу с моделью. Затем уже она стала популярна и в так называемой 2D графике.
В какой программе можно создавать полигональные изображения?
Если вы работаете в 3D, то для вас будет вполне естественно делать это в 3D max, Maya, или Cinema 4D. Последнее ПО настолько дружелюбно, что в нем может рисовать даже ребенок. В целом, полигональная графика достаточно проста в создании, особенно если сравнивать с архитектурной визуализацией или фотореалистичным рендерингом. Она напоминает ранние дни компьютерного моделирования и анимации с налетом современных техник. А так как ретро стиль всегда в моде, практически все дизайнеры создают ее с помощью старых приемов.
Как вы уже знаете, 3D модели создают с помощью полигонов. Чем больше полигонов, тем более детализованной будет модель. Во время финальной обработки (рендеринга) объекта он приобретает «гладкий» вид. Чем меньше полигонов вы используете на стадии моделирования, тем более абстрактным будет результат. Для выраженного эффекта можно отключить функцию сглаживания в настройках рендеринга, и тогда вы получите четкие грани. Здесь все зависит от эффекта, которого вы хотите достичь. Использование низкополигональной техники совсем не означает, что сцена будет простой. Вы можете использовать сложные текстуры, реалистичные настройки отражений и преломлений в окружающей среде и т. д. Полигональные фигуры очень напоминают оригами и сейчас находятся на пике популярности в графическом дизайне.
Также можно создавать полигональные шедевры в таких программах как Adobe Illustrator, CorelDraw и даже Adobe Photoshop. Эти программы, в отличие от специфичных 3D пакетов, хорошо знакомы большинству дизайнеров.
Историческая справка
А знаете ли вы, что полигональному дизайну предшествовало целое направление в искусстве? В начале XX века зародилось и стало невероятно популярным экспрессионистское течение. Появление фотографии только подстегивало художников, ведь теперь можно было запечатлеть образ детально, таким, какой он есть на самом деле. Экспрессионисты же напротив, стремились передать суть, настроение и характер объекта. Они намеренно уходили от деталей. В наши дни экспрессионизм не менее популярен как в живописи, так и в среде цифрового искусства.
Выдающиеся примеры
Вот несколько примеров современного цифрового искусства. Быть может, они впечатлят вас на создание новых шедевров:
Уроки
В этом уроке вы создадите мозаику в Adobe Illustrator, состоящую из полигонов. В этом несложном деле поможет бесплатный плагин – Scriptographer и ваше воображение.
Здесь вы научитесь создавать векторную полигональную мозаику из растрового изображения при помощи бесплатного веб инструмента Triangulator и Adobe Illustrator.
В этом уроке вы узнаете, как делать портреты с помощью полигонов. Автор показывает, как работать с фото используя и Photoshop и Illustrator, чтобы сделать красивый портрет в модном стиле полигональной графики.
Этот урок так же подходит вам, если вы работаете в более ранних версиях Photoshop.
Подробный видео урок, который научит вас создавать трехмерные персонажи.
Заключение
Полигональная графика – это смесь ретро и футуризма. Стиль не подвластный времени, который можно видоизменять, индивидуализировать, и экспериментировать с ним до бесконечности. Это всегда смотрится стильно, модно и самобытно. Попробуйте поработать с полигонами, и вы поймете, что уже больше не можете без них. Будем рады, если вы поделитесь своими идеями на этот счет в комментариях!
3D в играх: Полигоны
3D в играх. Часть 2
Как мы выяснили в прошлой части, современные трехмерные компьютерные игры строятся на основе полигонов. Но, что же это за зверь такой?
Полигон (Polygon) – это плоскость в евклидовом пространстве. Пространство имеет размерность три, соответственно, имеются три координаты: X, Y, Z. Условно их можно обозвать как длина, высота и глубина. В программном обеспечении для 3D нет единого стандарта относительно, так сказать, ориентации данных координат, хотя, как правило, координата X параллельна условном горизонту, т.е. это длина, а вот условной высотой может быть как Y так и Z. Соответственно, условной глубиной может быть как Z, так и Y. Но нам это не столь суть важно, примем для последующего материала представление, показанное ниже.
У полигона есть вершины, минимум три, максимум, теоретически, бесконечность. Практически максимум – много. Но в играх используются треугольные полигоны, т.е. полигон имеет три вершины. Почему именно три? Через три точки в пространстве можно провести только одну плоскость, что упрощает расчеты и позволяет избежать искажений (артефактов) на итоговой картинке связанных с тем, что вершины полигона могут лежать не в одной плоскости.
Однако в программах трехмерного моделирования принято пользоваться 4-х угольными полигонами, а вот 5-ти и больше, как правило, под запретом. Поэтому при моделировании приходится следить за тем, чтобы все 4 вершины полигона были в одной или почти одной плоскости. А как же игры? спросите вы. Полигон с 4-мя вершинами математически очень просто превратить в два треугольных с двумя общими вершинами, что и делается автоматически при экспорте в игровой движок.
На рисунке ниже показаны треугольный полигон и четырехугольный, условно разделенный на два треугольных. На изображении это прямоугольный треугольник и прямоугольный параллелограмм, но по факту полигон может иметь различные длины сторон, соответственно, и различные углы между ними. Хотя стараются, по возможности, все стороны делать приблизительно одинаковыми, это называется равномерная полигональная сетка. 
Почему сетка? Из полигонов создаются трехмерные объекты для игр (и не только), и если рассматривать все эти полигоны издалека включив отображение сторон полигона, они же ребра, то все это похоже на сетку.
Вообще, полигон – это то, чего на самом деле не существует, это всего лишь математика. У него нулевая толщина. Это координаты трех (для игр, далее будем говорить только о треугольных полигонах, если не будет указано иное) точек в трехмерном пространстве. И то, как отображать эти несуществующие полигоны, — зависит исключительно от той или иной компьютерной программы. Как правило, существуют три основных вида отображения: каркасная сетка, полигональная сетка, «чисто» полигональное представление. На рисунке ниже даны все три вида.
При моделировании, тестировании и т.п. для закрашивания плоскости между вершинами полигона используется произвольный цвет, но зачастую это так называемый сермат, RGB 128,128,128. На нем удобно тестировать, в частности, освещение. Да и однородная заливка, в отличии от полновесных текстур, использует не так много ресурсов компьютера.
Приведенный выше рисунок показывает как, на самом деле, с помощью плоских поверхностей создаются объекты практически любой формы. Правило тут простое: чем меньше каждый полигон, тем более точно можно передать форму исходного объекта. Это как с мозаикой, про которую разговор был в первой части. Но и увеличивать до бесконечности количество полигонов тоже нельзя, так как это сказывается на производительности, ведь компьютеру желательно не менее 30 раз в секунду пересчитать положение каждой, по крайней мере видимой зрителю, вершины полигона. Но и эти расчеты лишь малая часть того, что видеокарта в сотрудничестве с ЦП делают для расчета финальной картинки. Но об этом мы поговорим в следующих частях.
Кроме координат вершин есть у полигона такое свойство как нормаль. Это вектор, перпендикулярный одной из сторон плоскости полигона. Так как это вектор, то у него есть направление. Это направление указывает лицевую сторону полигона, вернее его начало находится у лицевой стороны полигона. Нужна нормаль для наложения текстур и расчета освещенности. Так же хочу заметить, что математически полигон не имеет никакого отношения к тому, как он выглядит, т.е. к текстурам. Полигон отдельно, текстуры – отдельно.
Так вот, та сторона, из которой «выходит» вектор нормали — и определяет лицевую сторону полигона, поэтому с противоположной стороны полигон прозрачен при визуализации, вернее обратной стороны просто не существует. Именно поэтому когда игровой персонаж из-за некорректных коллизий проваливается сквозь текстуры, то почти все сверху кажется полупрозрачным – текстур, вернее обратной стороны у полигона не существует.
Ниже скриншот из игры Batman Arkham Knight.
То же можно наблюдать, если попасть туда, куда игровой персонаж попадать не должен по задумке разработчиков: за уступы скал, в закрытые помещения и т.п. И это не баг игрового движка, это его особенность, ну, и недосмотр при тестировании (или разработчики не отреагировали должным образом на отчет тестировщиков). Необходима такая особенность для оптимизации расчетов итоговой картинки, или, по-другому, рендеринга. Ведь совсем незачем тратить вычислительные ресурсы на то, что никто никогда увидеть не должен.
Внимательный читатель может спросить: а как же быть в том случае, если игровой персонаж должен зайти в помещение? Тогда необходимо, как и в реальном здании, придавать стенам (потолку, крыше, дверям и т.д.) толщину с помощью двух полигонов у которых нормали смотрят в противоположные стороны.
Ниже показан фрагмент модели здания со стеной, имеющей реальную толщину. Синим показано направление нормали у полигонов.
Для совсем тонких предметов, таких как лист бумаги, применяется другой подход и зависит он от конкретного игрового движка. Например, может применяться специальный двухсторонний материал или отключаться параметр Backface culling, и в этом случае объект будет выглядеть одинаково с обеих сторон. (Подробнее про Backface culling можно почитать тут: Полигоны, свободная камера и MGS 5)
Теперь поговорим о том, какие бывают трехмерные полигональные модели.
3D модели принято делить на низкополигональные (low poly) и высокополигональные (high poly). Как несложно догадаться – разница в количестве полигонов, причем разница не абсолютная, а, как и все в нашем мире, относительная.
Высокополигональной можно назвать модель с самодостаточной геометрией, т.е. когда даже мелкие детали (в разумных, конечно, пределах) смоделированы с помощью полигонов и при этом модель выглядит достаточно правдоподобно даже без текстур. Непосредственно в играх high poly модели, как правило, не применяются, однако они необходимы в процессе разработки 3D игры, о чем будет рассказано ниже.
Высокополигональные модели применяются для статического рендеринга, например интерьерной визуализации или предметной, когда необходимо фотореалистичное качество и большие разрешения итоговой картинки. Для получения такого изображения используются специальные программы рендеринга и просчет одного кадра может занимать несколько десятков часов, поэтому в играх это неприменимо.
Низкополигональные модели применяются в основном в играх или для анимации, когда визуальный реализм не имеет первостепенного значения. Есть два основных способа получения низкополигональной модели: непосредственное моделирование с прицелом на малое количество полигонов или упрощение высокополигональной модели. То же справедливо и для high poly моделей (если не брать в расчет 3D сканирование): их получают путем усложнения и добавления полигонов низкополигональной модели, либо моделируют сразу из расчета максимально необходимого количества полигонов. Какой подход применятся в том или ином случае зависит от многих факторов, как то: геометрии самой модели, применяемого программного обеспечения, наличия похожих моделей, принятого в студии-разработчике порядка разработки, предпочтений 3D-художника и т.п.
Хочу особо обратить внимание на то, что разделение на high poly и low poly очень и очень относительно. Зависит от многих факторов, и одна и та же модель может быть как низкополигональной, так и высокополигональной. Например, для игры для ПК была разработана высокополигональная модель персонажа, затем из нее получили низкополигональную, условно, уменьшив количество полигонов в два раза. А позже решили портировать игру на мобильные устройства. И количество полигонов, опять же, условно, для этого сократили в четыре раза по сравнению с изначальной моделью, или в два раза по сравнению с моделью для ПК-версии игры. Ведь мобильные устройства мало того, что не такие мощные, как ПК, так еще и размер экрана не позволяет различить мелкие детали, поэтому такая высокая детализация, как для полноразмерного монитора, там попросту не нужна.
Ниже показаны сферы одинакового диаметра с различным количеством полигонов.
Да и с каждым новым процессором, каждой новой видеокарточкой мощность компьютерного железа растет, соответственно, и в играх получается отображать в кадре все больше и больше полигонов без ущерба производительности.
Ниже представлена эволюция полигональной Лары Крофт.
Как же получают 3D модели? Традиционно для этого используется полигональное моделирование в специальных программных пакетах, как то: 3ds Max, Maya, Cinema 4D и т.п. В последнее время к разработке также подключают программы для так называемой трехмерной лепки, к примеру ZBrush и 3D-Coat. Ну, и с развитием технологии 3D сканирования, модели получают путем этого самого сканирования с последующей оптимизацией полигональной сетки.
Если используется традиционное полигональное моделирование, то 3D художнику необходимо от чего-то отталкиваться. Для этого используются так называемые референсы, или, по-другому, изображения того, что необходимо смоделировать. Это могут быть фотографии (для реальных предметов или персонажей), концепт-арты (для вымышленных), или даже существующие объекты. К примеру, необходимо смоделировать существующие кубики Lego. Самая в данном случае хорошая идея – иметь их под рукой и моделировать, непосредственно вертя в руках эти самые кубики.
Ниже изображение референса и 3D модели (без текстур). 
Теперь вернемся к вопросу: а зачем при разработке 3D игры иметь в наличии сразу две модели одного и того же объекта — high poly и low poly? Высокополигональная модель непосредственно в игре использоваться не будет, но она необходима для такого важного процесса, как запекание текстур. Так называют подготовку целого ряда текстур или, как их еще называют, карт. Это обычные файлы изображений (с необычными, на первый взгляд, рисунками в них) цель которых как можно реалистичнее представить модель в игре и взять на себя, так сказать, часть геометрии. По сути – это создание 3D иллюзии там, где добиться этого полигонами сложно, неподъемно по производительности или просто нецелесообразно.
Возьмем, к примеру, старую доску. В ней может быть множество трещин и мелких сколов. В реальности это перепад высот (или глубин) материала самой доски. И, по-хорошему, полигоны также должны повторять эти перепады. Но тогда модель может оказаться настолько высокополигональной, что никакое железо не потянет это количество полигонов. Поэтому для начала моделируют как можно более подробную высокополигональную модель этой самой доски, а затем с помощью специальных программ генерируют (запекают) карты высот, затенения и т.п. для имитации этих самых трещин и сколов на низкополигональной модели.
Ниже упрощенно схематически показано как смешивание запеченных с high poly модели карт, в сочетании с текстурой дерева, в результате дает реалистичное изображение.
Ведь как мы различаем эти самые трещинки и сколы? По изменению яркости и цвета текстуры дерева благодаря тому, что свет по-разному отражается от неровностей поверхности, а кое-где и отбрасывает тень. К тому уже, в трещинах, как правило, накапливается грязь и т.п. Все это и позволяет нам отличить старую древесину от новой. Вот эти эффекты и запекаются в файлы изображений. Такой прием позволяет создавать довольно реалистичные объекты с использованием значительно меньшего количества полигонов. При отображении объекта в игре эти карты накладываются друг на друга по определенным алгоритмам, что и создает иллюзию наличия геометрии, которой на самом деле то и нет.
Правда, тут есть один недостаток: эффект лучше всего действует когда наблюдатель расположен под углом 90° относительно полигонов с такой вот имитацией дополнительной геометрии. С уменьшением или увеличением угла обзора «обман» становится виден все отчетливее и отчетливее. Но это неизбежная плата за возможность приблизить картинку к реализму, не превратив игру в неиграбельную.
Это мы забежали немного вперед, затронув тему текстур, но без этого трубно было бы объяснить необходимость на один игровой объект делать как минимум две модели.
Если уж мы говорим про 3D в играх, то следует обязательно упомянуть такую технологию, как LOD, сокращенно от Level of Detail, она же уровень детализации. Суть ее сводится к тому, что в зависимости от того, насколько тот или иной объект близко располагается от игрового персонажа, или какой процент высоты экрана занимает, то используются модели с различного рода детализацией. Опять же, все ради оптимизации. Чем ближе к виртуальной камере тот или иной объект, тем более детализированная модель подставляется. На практике часто количество таких моделей ограничивается тремя: для переднего, среднего и заднего планов. И обозначаются, как правило: LOD_0, LOD_1, LOD_2. Это все варианты низкополигональной игровой модели.
Различные варианты полигональной детализации могут создаваться как в сторонних программах, так и автоматическими игровыми движками (очевидно, не всеми). Причем автоматически в сторону упрощения геометрии, т.е. загруженный в игровой движок вариант по умолчанию воспринимается как LOD_0. Иногда в играх, особенно с большими открытыми мирами, можно заметить как изначально угловатый и неказистый объект вдруг скачкообразно «похорошел» — это произошла замена на более высокополигональный LOD.
Вот, наверно, вкратце и все про полигоны. Если остались необозначенные или нераскрытые моменты – пишите про это в комментариях.
По идее, далее необходимо продемонстрировать этот самый процесс полигонального моделирования, дабы наглядно показать, как это делается. И пример должен быть не очень простой, ради показа хотя бы нескольких приемов моделирования, но и не очень сложный, чтобы не нагонять сон на зрителя. Я думал-думал над предметом моделирования и пришел к выводу, что модель керосиновой лампы неплохо впишется в данную концепцию. Но, дабы не утомлять читателя, решил собственно процесс моделирования вынести в третью, или, если хотите, в 2,5 часть повествования, которую надеюсь опубликовать в ближайшем будущем.
— Полигональный арт в Веб дизайне
Polygonal Арт, наряду с стилем Metro начал будоражить умы дизайнеров в прошлом году. В то время как стиль Windows 8 сразу же оказался в веб-дизайне, Poly тщательно поселился в полиграфической отрасли, представляющих как различные иллюстрации, которые были использованы для плакатов, обои, дизайн для футболок, так и скины для мобильных телефонов и т.д. И только через некоторое время дизайнеры стали использовать его в дизайне сайтов.
Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций, которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает себя во всей красе. Он превращает привычную картину, в нечто экстраординарное, с кучей острых углов и плоских фигур, которые образуют выпуклые области. Последний получается путем четкого контраста между соседними областями, которые обычно отличаются друг от друга только в оттенках одного цвета. Техника создания такого эффекта предполагается последовательно заполняя все пространство гладкими фигурами, треугольниками и прямоугольниками, шаг за шагом создавая области разной высоты, так как некоторые элементы должны быть вогнутыми, плоскими а другие выпуклыми.
Разумно будет предположить, что «полигональный» стиль, пришел к нам из кубизма
Что касается дизайна сайтов, Poly прекрасно работает на основе различных текстур, особенно те, которые включают бумагу, картон и зашумленный фон. В этих случаях он обычно дополняет дизайн, добавляя в результате небольшое чувство размерности.
В коллекции ниже вы найдете более 20 потрясающих примеров использования Polygonal Арта в дизайне сайтов.
Примеры Полигонного Арта :
Dare with us 2013 ─ большая работа по реконструкции карты мира, за счет использования кучи остроугольных геометрических форм и различных оттенков из 3 основных цветов: синим для океана, зеленым и коричневым для земли.
Sanissimo ─ встречает своих пользователей удивительно реалистичной 3-ёх мерной иллюстрацией, полной бумажных элементов и полигонального арта.
Made by Vadim ─ был одним из первых веб-сайтов, в котором было реализована эта техника. Если вы внимательно посмотрите, вы заметите, что не только изображение художника, созданные при помощи светлых и темных плавных формы, но и фон, сделан так же в этом стиле.
Mokhtar SAGHAFI ─ нарушает формы традиционного фона, создавая резкие выпуклые иллюстрации, которые занимают весь левый угол
Send me to SouthPole ─ Передаёт ощущения Южного полюса через объемную иллюстрацию с резкими и грубыми элементами, которые сделаны в холодных тонах.
Android Analyze ─ завораживает своим исключительным слайд фоном, который включает в себя оригинальный зеленый градиент, который передаёт последовательный переход цвета, с помощью плавных форм.
Skyboat ─ замечательное портфолио с акцентом на атмосферу. «Pixel-like» фон в сочетании с небольшой анимацией цвета, переход выглядит довольно красиво и сложно.
Pinpoint Design ─ имеет едва заметный полигональный фон, который вызывает общий эффект тиснения.
Equilibrium ─ основан на темных иллюстрациях, которые наполнены полигонами, а так же гранж стиль, который прекрасно дополняет позолоченное название сайта.
Landing Page Design. С белым в качестве основного цвета, дизайн получает ощущение чистоты и прозрачности портфолио, используя только однин полигональный образ айсберга.
HushFlow ─ еще один пример веб-дизайна на космическую тему, который воссоздаёт атмосферу путем сочетания квадратов и треугольников.
Aires and Cintra Arquitetura ─ олицетворяет полигональный арт, который находит свое отражение, как в хэдере, так и в графическом представлении пунктов меню
Дизайн Healthshare состоит из множества плоских треугольников. Наиболее очевидный и яркий пример реализации полигональные арта можно заметить в логотипе, фоне и футере.
MostWanted Wild Digital Agency инкрустирует свою главную страницу мелким темным полигональным орнаментом, который содержит слайдер. Кроме прочего, логотип выполнен в этом же стиле.
GoodTwin имеет слайдер из 3 удивительных слайдов, каждый из которых изображает сцены из различных измерений. Которые состоят из полигональной графики.
Vagrant очаровывает пользователей кучей квадратов, которые гармонично формируют логотип, и беспорядочным разбросанным декоративным мусором на фоновом изображении.
Agencja Reklamowa привлекает пользователей своим ярким фоном, слайдером с глубокими переходами между различными градиентами, которые сформировали геометрические фигуры.
Carbon имеет логотип и плавающую боковую панель с левой стороны, сделанную в полигональном стиле. Блок из треугольников служит в качестве индикатора, изменяя своей цвет в зависимости от текущего раздела.
Vaux Collective имеет потрясающий сферический логотип, объем которого достигается с помощью градиента, который идет от светлого к темному, и который конечно же с острыми выпуклыми областями.
Заключение
Без сомнения Polygonal Арт является одним из самых интересных, современных и амбициозных направлений. Несмотря на то, что может быть действительно трудоемким, в конце концов он способен приносить замечательные результаты. Главное преимущество использования несомненно ─ возможность добавления на сайт глубину и принося динамику в дизайн, с помощью статических изображений.