Чем пиксели отличаются от вокселей, и как в современных играх создают графику ретро-стиля

Художник Матеуш Retro Ян, рисующий в стиле пиксель-арт, написал для издания Retronator Magazine статью, в которой попытался ответить на вопрос, в чём разница между пикселями и вокселями, но при этом рассказал намного больше.

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

Номер 1

Ранее в этом году мне задали такой вопрос: в чём разница между пикселями и вокселями?

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

Вопрос вполне логичен. Общество вываливает на вас что-то вроде постера к фильму «Пиксели», и вы не понимаете, что происходит. Это вот пиксели? Или это воксели? Это птица? Самолёт? Никто вам ничего не объясняет.

Номер 2
Я до сих пор не могу решить, должен ли я из своей любви к старым играм посмотреть этот фильм, или наоборот НЕ смотреть его.

Но не бойтесь, пока я с вами, всё будет хорошо. К моменту, как вы прочитаете этот материал, вы будете знать всё про пиксели, воксели и всё, что находится между ними. Расслабьтесь, заварите чаю.

Начнём с основ, иначе вы не сможете понять общей картины. Есть два основных способа представления компьютерной графики: векторный и растровый.

Номер 3
Математическая точность векторной графики (слева) против дискретной природы растровой (справа).

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

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

Второе различие — способ представления компьютерной графики в двумерном и трёхмерном пространстве. Если разделить их, а заодно векторную и растровую графику, то мы получим такую таблицу:

Номер 4
Все любят таблицы

Векторная графика

В двумерной векторной графике каждая точка на линии или фигуре описывается вектором с двумя составляющими (x и y). В общем, именно поэтому двумерная графика так и называется.

Номер 5
Именно так двухмерная векторная графика строит изображение с помощью двухмерных векторов.

А вот пример низкополигонального двухмерного векторного изображения.

Номер 6
Uluru the Mighty Dreamer, Автор: Эн Тран

Оно построено исключительно из двумерных полигонов (в данном случае — треугольников). Изображение называется низкополигональным из-за сравнительно небольшого числа составных элементов. Именно поэтому треугольники легко заметны.

Добавим ещё одно измерение. В трёхмерной векторной графике всё работает так же, но добавляется ещё одна компонента — z. Три компоненты — три измерения.

Номер 7
Концепт игры Racetrack для iOS, Автор: Тимоти Рейнольдс

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

Номер 8

Чтобы отобразить трек на вашем экране (то есть на двумерной поверхности), мы выбрали несколько углов и отобразили трёхмерную геометрию на плоском изображении.

Номер 9
Преображение из 3D в 2D называется проекцией.

Так и получается двумерное изображение.

Но есть одна хитрость, позволяющая показать трёхмерную геометрию в 2D. Просто измените угол угол обзора или повращайте объект.

Номер 10

Машинка. Автор: Тимоти Рейнольдс

Да, действительно, перед нами трёхмерный объект. И даже очки не нужны!

Растровая графика

Так, немного разогрелись. Теперь разберёмся с тем, как растровая графика работает в 3D и 2D.

Растровое двумерное изображение представляется массивом с определённым количеством столбцов и строк.

Номер 11
Спрайт Turbo Esprit, Автор: Матеуш ‘Retro’ Ян

Каждая клетка в таком массиве называется пикселем (от слов picture element — pixel). Помимо его координат в массиве пиксель определяется цветом.

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

Номер 12
Пиксель-арт, Матеуш «Retro» Ян

На двумерной пиксельной сетке можно изобразить трёхмерные объекты вроде автомобиля Lotus Esprit или X-Wing из «Звездных войн», но для изображения они не трёхмерны. Их нельзя покрутить и рассмотреть с разных сторон, как гоночный трек или машинку. Точно так же мы не можем вертеть рисунок Улуру — изображение состоит из полигонов, но они располагаются не в трёхмерном пространстве, а в двумерном.

Итак, мы поговорили о двумерной и трехмерной векторной графике и 2D-растровой графике. Не хватает только 3D-растровой графики.

Номер 13
Вот сейчас будет круто!

В трёхмерной растровой графике всё пространство разделено на колонки и строчки по всем трём направлениям (высота, ширина и глубина). В результате трёхмерное пространство становится набором разноцветных кубов-вокселей (volume element — voxel, элемент объёма). Каждый воксель определяется цветом и расположением.

Мы уже знаем, как выглядит пиксель-арт. Воксель-арт выглядит похожим образом.

Номер 14
Звёздные войны, Sir Carma

Похоже на LEGO, не правда ли?

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

Номер 15
Звёздные воины, Sir Carma

Можно даже делать анимации. Вот это, например, анимированный воксельный персонаж от Sir Carma:

Номер 16
Бегущий рыцарь, Автор: Sir Carma

Сравните его с двумерным пиксельным персонажем:

Номер 17
Спрайт из Final Element, Glauber Kotaki

То есть в воксельном изображении анимация изменяет цвет (или расположение) определённых маленьких кубов, а в пиксельном — меняется цвет квадратов-пикселей.

Теперь вам известна разница между пикселями и вокселями (и много чего ещё… прошу прощения).

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

Номер 18

Для нас это интересно потому, что люди, увлекающиеся пиксель-артом, создают его с помощью всех возможных видов графики.

«Я что, могу превращать воксели и трёхмерные модели в пиксель-арт?» — спросите вы. Именно так. С помощью особых техник рендеринга и шейдинга можно создавать совершенно уникальный пиксель-арт.

Векторные дисплеи и проекция

Схема наверху отображает не совсем полную картину. Двумерное векторное изображение можно отображать и сразу, без преобразований. Но всё не так просто.

Номер 19

Двумерное векторное изображение может отображаться напрямую только на векторном мониторе. Они, например, использовались на некоторых аркадных автоматах Atari.

Номер 20

Вот как оно бы выглядело на осциллографе.

Номер 21
Игра Space Rocks

Похожим образом иногда отображается трёхмерное векторное изображение.

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

Номер 22
VEC9

Настоятельно рекомендую глянуть трейлер аркадной игры VEC9:

Скачать

Растрирование

В наши дни вы вряд ли найдёте векторный монитор где-нибудь за пределами музея. Люди используют мониторы, на которых отрисовываются… пиксели!

Номер 23
RGB матрица

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

Номер 24
Фосфорные точки на ЭЛТ дисплее

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

Номер 25

Растрирование с помощью технологии сэмплинга

Трёхмерная графика прорисовывается на плоском мониторе так: сначала трёхмерные треугольники отображаются на плоскость и становятся двумерными полигонами, а затем полигоны растрируются и становятся набором пикселей.

Номер 26
Star Fox, Nintendo

Триангуляция

Но что насчёт вокселей? Сегодня они чаще всего представляются как трёхмерные векторные кубы. Мы создаём трёхмерную модель с треугольниками по каждой стороне воксельного куба.

Номер 27
Лучшая 3D модель в мире, Матеуш ‘Retro’ Ян

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

Крутящийся куб

Сегодня практически весь воксельный арт создаётся таким образом, чаще всего с помощью бесплатной программы MagicaVoxel.

Номер 29Номер 30Номер 31Номер 32Номер 33Номер 34Номер 35Номер 36Номер 37

Ray casting

Есть ещё один подход. Каждый воксель можно представить как точку в трёхмерном пространстве, то есть как кусочек объёма. Можно отрисовать воксель на плоском пространстве, если расположить пиксель в том же месте. Или наоборот: взять пиксель с экрана и отыскать в пространстве воксель, находящийся на том же месте.

Обратный подход называется ray casting («бросание лучей»). Луч направляется прямо в трёхмерное пространство, и летит, пока не наткнётся на воксель. На практике в пространство «бросается» столько лучей, сколько надо, чтобы покрыть все необходимые точки.

Номер 38
Простой вариант рейкастинга с коррекцией

Впервые эта техника была использована в игре Wolfenstein 3D. В ней комнаты целиком состояли из вокселей. Рендеринг работал довольно быстро, потому что один луч отображал целую колонку пикселей на экране. Результат, по сути, получался двумерным, поэтому такую 3D-графику иногда называют 2.5D (потому что третье измерение вроде как не настоящее).

Номер 1
Wolfenstein 3D, id Software

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

Номер 2
Comanche: Maximum Overkill, NovaLogic

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

Номер 3
Карта высот (слева) показывает насколько высоко поднимаются колонки вокселей (чёрный – низкие колонки, белый — высокие).

Так как вся информация о вокселях могла содержаться только в картах высот, то игры не могли создавать нависающие над игроком скалы. Но, господи, насколько же детализированными получались локации!

Номер 4Номер 5

Конец вокселей

Ray casting был не единственной технологией воксельного рендеринга в девяностых. Существовали и другие. Каждая с собственными сильными сторонами: разрушаемое окружение, поддержка обработки моделей машин и персонажей и так далее. Это было что-то невероятное! Но, что иронично, именно такое разнообразие в итоге и привело к закату технологии.

Номер 6
Vangers, K-D Lab

В 2000 году началась эпоха графических карт или графических процессоров. Специальные встроенные в компьютер устройства, которые сейчас называются GPU, отлично справлялись с обработкой 3D-полигонов. Они делали это очень быстро, но больше ничего не умели. К несчастью, различные алгоритмы рендеринга вокселей (включая ray casting) остались за бортом.

Номер 7Номер 8

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

С тех пор прошло 10 лет, и вдруг воксели вернулись. Помощь пришла с неожиданной стороны. Появилась игра, которая нашла к вокселям совершенно новый подход. Воксель – это куб, верно? И теперь эти кубы уже могли спокойно обрабатываться видеокартой. А дальше вы и сами всё знаете.

Номер 9
Minecraft пришёл и всех победил

Определение

Давайте вспомним всё, о чём я рассказал, и попытаемся ответить на вопрос, с которого всё началось. Что же такое пиксели и что такое воксели?

Пиксель — мельчайший элемент двумерного пространства, разделённого дискретно на множество равных частей.

Каждый пиксель определяется вектором с двумя целыми числами X и Y. Именно поэтому пиксельное пространство дискретно, в то время как в векторной графике координаты определяются вещественными числами.

Соответственно, воксель — мельчайший элемент трёхмерного дискретного пространства, где все элементы имеют одинаковый размер.

Вот так вот.

Ну что, на этом всё? А вот и нет!

Как видите, определение довольно общее, а потому пиксели и воксели могут быть очень разными. Давайте попробуем соединить все четыре элемента таблицы вместе: растровое/векторное, а также 2D/3D.

Чистая 2D-графика

Номер 10

В прежние времена для отображения 2D-спрайта на экране приходилось напрямую копировать биты из памяти, в которой хранились цвета спрайта, в память, хранящую данные об отображенных на экране цветах. Эта технология называется bit blit или bit BLT — bit block transfer (перенос блоков битов). Сейчас почти никто не рендерит двухмерную графику именно так.

Виртуальная консоль PICO-8 — один из немногих современных движков, работающих на блиттинге, но в прошлом двумерная графика не могла отображаться иначе.


Номер 11
PICO-8, Lexallofle Games (а также авторы показанных игр)

Текстуры в 3D-графике

Номер 12

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

Текстуры — двумерные растровые изображения, размещённые на трёхмерном полигоне.

Номер 13

Если не вдаваться в подробности, то именно так и работает трёхмерная графика.

Вот, например, как выглядит высокополигональная 3D-модель без текстуры и с текстурой высокого разрешения:

Номер 14Номер 15

Благодаря шейдингу и картам текстур нам даже не нужно слишком много полигонов, чтобы получить приятно выглядящего персонажа.

Вот низкополигональная трёхмерная модель с качественной текстурой:

Номер 16
Низкополигональная модель, Mark Henriksen

А если взять текстуру с низким разрешением, то получится приятная на вид низкополигональная модель с текстурами в стиле пиксель-арт:

Номер 17
Drift Stage

Снова можно вспомнить Minecraft. Её блоки — воксели по определению (мельчайшие дискретные элементы игры), и по сторонам они покрыты пиксельными текстурами. Однако, обратите внимание, что не все блоки в игре — простые кубы.

Номер 18
Minecraft, Mojang

Итак, мы разобрали все примеры для трёхмерных моделей (как мне кажется, высокополигональные модели с текстурами низкого разрешения не особо кому-то нужны, но можете меня поправить, если я вдруг ошибаюсь).

Номер 19
Mirror’s Edge (слева-сверху), Max Payne (слева-снизу) и Minecraft (справа-снизу)

Текстуры в 2D-графике

Номер 20

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

Номер 21
Элементы персонажа

С изображениями высокого разрешения всё понятно.

Скачать

Номер 22Номер 23

Но вот с текстурами в стиле пиксель-арта всё становится немного сложнее. Всё зависит от разрешения экрана, на котором отображаются спрайты.

Номер 24
Braid (слева-сверху), Path to the Sky (справа-сверху), Kingdom (снизу-справа)

Мы уже знаем, что пиксельные текстуры без проблем наносятся на трёхмерные низкополигональные модели даже на экранах с большим разрешением. Снова подумайте о Minecraft. Ведь низкополигональные кубы всё равно рендерятся на дисплеях с разрешением 1920×1080.

Номер 25
Minecraft, Mojang

То же самое можно сделать и с полигонами на плоскости. Возможно взять пиксель-арт, нацепить его на 2D-квад и отреднерить результат на мониторе с высоким разрешением. Тогда каждый пиксель на исходном изображении окрасит несколько пикселей на дисплее в определённый цвет.

Номер 26
Hotline Miami, Dennaton Games

Это называется пиксель-артом с большими пикселями. Каждый пиксель на спрайте увеличивается в размерах и становится большим квадратом на изображении.

Номер 27
Каждый пиксель на спрайте занимает квадрат в 3 на 3 пикселя на экране.

Если спрайт вдруг наклоняется или поворачивается, то сразу становится заметно, что квадраты на экране состоят из нескольких пикселей:

Номер 28
Path to the Sky, Johannes ‘Dek’ Märtterer

Посмотрите на листву на этом изображении и сравните с вращающимся спрайтом при низком разрешении:

Скачать

Обратите внимание, что пиксели на колесе остаются на одной линии и горизонтально, и вертикально, а на гифке из Path to the Sky большие пиксели на листве, птице и мосту заметно искажаются при движении.

Чтобы достичь этого, Kingdom полностью рендерится при низком разрешении и растягивает пиксели только на итоговом изображении. В то же время Path to the Sky, Hotline Miami и Moonman рендерят спрайты на монитор напрямую.

Номер 29

Снова к 3D

Kingdom — двумерная игра, но такой же подход можно применить и в трёх измерениях.

Номер 30

Если нацепить пиксель-арт текстуры на трёхмерные модели и отрендерить их при низком разрешении, получится что-то такое:

Номер 32
Техническое демо Pixel Art Academy, Matej ‘Retro’ Jan

С тенями всё нормально. Хотя на первый взгляд кажется, что перед вами пиксель-арт, на самом деле это полноценная 3D-сцена в низком разрешении с пиксельными текстурами.

Номер 33
Техническое демо Pixel Art Academy (под другим углом)

Анимации, основанные на векторах (со скелетным ригом), могут использовать пиксельный стиль себе на пользу:

Номер 34
Риг анимации

И если запустить рендер на низком разрешении, то анимация ещё сильнее начнёт напоминать пиксель-арт, почти как в случае с Kingdom.

Скачать

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

Номер 35
Prince of Persia

3D-эффекты

А теперь снова поговорим о высоком разрешении. Существует игра, которая по полной использует свою трёхмерную природу, сохраняя двухмерный стиль. Это The Last Night от студии Odd Tales.

Номер 37
The Last Night, Odd Tales

Их модели нарисованы в 2D, но наложены на трёхмерный мир со всеми современными графическими эффектами: динамическим освещением, bloom, depth of field, кинематографичными ракурсами камеры, отражениями и так далее.

Скачать

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

Номер 36
Создание 3D сцены в The Last Night

А вот ещё один пример качественного динамического 3D-освещения. Невероятно атмосферная игра с печальной судьбой — Confederate Express:

Номер 38
Номер 39

Все модели отрисованы в 2D, но каждый объект хранит данные по шейдингу для света, идущего с любого угла. Свет обрабатывается модулем Sprite Lamp, и благодаря ему кажется, что лучи попадают на трёхмерные объекты.

Пиксель-арт из вокселей

Проблема в том, что с таким подходом мы получаем только шейдинг для спрайтов, но тени всё равно не отобразятся корректно без трёхмерной геометрии объекта. А что может дать нам трёхмерную геометрию? Правильно. Воксели!

Номер 40

Отличным примером такого подхода является недавно анонсированная игра Pathway:

Номер 41
Pathway, Robotality

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

В подходе к отображению вокселей в стиле пиксель-арта нет ничего инновационного. Впервые такая технология была использована в игре FEZ. Авторы называли кубики, из которых состояла игра, трикселями (3D-пикселями). Триксель — это куб со сторонами в 16 вокселей.

Номер 42Номер 43

В каждый отдельный момент времени игрок видит FEZ только с одного угла, и поэтому ему кажется, что он видит мир в 2D. Именно поэтому FEZ выглядит как пиксель-арт, но мир всё равно может вращаться.

Номер 44

Скачать

Чистые воксели

Итак, мы прошли полный круг. Теперь давайте оставим мир пиксель-арта позади и вернёмся к вокселям в настоящем трёхмерном пространстве (с использованием кубов без текстур).

Номер 45

Voxatron от Lexallofle — виртуальная консоль, работающая на современном воксельном движке.

Номер 46

Виртуальные консоли от Lexallofle имеют собственный уникальный стиль. Pico-8 реализует чистую 2D-графику, а Voxatron — чистую воксельную графику. Они отлично смотрятся в паре.

Voxatron — один из немногих современных движков, разделяющих трёхмерное пространство на чёткие дискретные элементы. Но игры в стиле больших пикселей в 3D нашли своё место, например, на мобильных платформах.

Номер 47
Номер 48Номер 49Номер 50Номер 51

И снова мы возвращаемся к Sir Carma. Он стал одним из самых популярных воксельных художников, и теперь с помощью Unity и различных визуальных эффектов пытается выжать максимум из трёхмерного воксельного стиля.

Номер 52
The Way Back, Sir Carma
Номер 53
The Way Back, Sir Carma

А как насчёт воксельной Zelda или Atic Atac?

Номер 54
The Way Back, Sir Carma

Вот и всё. Мы, вроде как, разобрали все возможные комбинации 2D/3D, растровой/векторной графики в высоком и низком разрешениях. Мне кажется, что я что-то забыл, и я уверен, что в будущем люди придумают новые интересные подходы. Но пока что моя история закончена.

  • avatar
  • .
  • +77

Больше в разделе

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.