Проекции графики

2021-06-10T14:14:23Z

37.214.42.117: /* Параллельные проекции (2D) */

[[Файл:Типы проекций.png|thumb|right|250px]]
'''Проекция графики''' — способ отобразить трёхмерный игровой мир на плоском экране.

Проекции бывают:
* Параллельные — проецирующие прямые параллельны:
** Ортогональные — проецирующие прямые перпендикулярны экрану;
** Косые — соответственно, не перпендикулярны;
* Перспективные — проецирующие прямые сходятся в одной точке:
** Одноточечная — картинная плоскость параллельна одной из граней;
** Двухточечная — картинная плоскость всегда вертикальна;
** Трёхточечная — картинная плоскость произвольная;
* Ломаная перспектива — отсутствие единой проекции как художественный приём.

Необоснованный разнобой проекций — известная ошибка игровых художников. В одной из мобильных игр автор этих строк (работавший утилитчиком и консультантом по движку) насчитал четыре разных проекции: плоскую, «три четверти» снизу, «три четверти» сверху и диметрическую.

== Параллельные проекции (2D) ==

Параллельные проекции называются «2D» потому, что проекция предмета не зависит от его координат. Поэтому изображения можно подготовить заранее, в виде двухмерных спрайтов. Но в этом же и засада — нужны дополнительные визуальные подсказки, где по оси Z объект (это замечательно обыграно в ''[[Fez]]''). Из собственного опыта: в 2006-м разработали для мобильников (на Java ME) несложную 3D-головоломку — шарик прыгает по конструкции из кубиков, висящей в космосе. Но только для тех, которые поддерживают 3D (их немного, наобум некоторые Nokia и Sony Ericsson). Решили сделать такое же для 2D-мобильников — в аксонометрии. Написали прототип и бросили — неиграбельно, не поймёшь, как стоят эти кубики.
** Ну играли же люди как-то в Qbert-а...

=== Ортогональные ===

В ортогональных (или прямоугольных) проекциях направление проецирования перпендикулярно экрану.

==== Плоская ====

[[Файл:SuperMarioBros.png|frame|right|Большинство двухмерных игр используют именно плоскую проекцию. На скриншоте — [[Super Mario Bros.]]]]
Самая тупая из проекций — уровень выглядит как на [[Справочник Автора/Механика|чертеже]] в разрезе. Но заодно и самая «экономная» и потому применяется там, где надо блеснуть разнообразием ландшафтов или сложным геймплеем, а графические красоты приберечь.
 

==== «Три четверти» ====

[[Файл:Три четверти кубик.png|thumb|right|400px|Проекция «три четверти». Слева — косой вариант, справа — прямой. Различия, как видно, невелики. Для тех, кто в танке: косоту смотрят не по кубику, а по линиям, проецирующим его на экран.]]
Другими словами — «в фас и немного сверху».

Трудно сказать, чем считать проекцию «три четверти» — косой или ортогональной. Ортогональная проекция отличается от косой сжатым масштабом по оси Y. Но всё-таки разница между тем и другим невелика<ref>Если быть точным, cos α, который даже для 30° будет 0,86. Малая грань уже 0,5 — а большая всё ещё 0,86!</ref> — так что пускай будет «условно прямая».

Проекцией «три четверти» известен, например, ''[[WarCraft/Warcraft II|WarCraft II]]''. Была очень популярна в ранних jRPG эпохи NES и SNES, например, ''[[Final Fantasy]]'' c I по VI; сейчас её использует инструментарий для создания jRPG серии [[RPG Maker]], продолжающий те традиции.
 

==== Изометрическая ====

[[Файл:Изометрия кубик.png|thumb|left|120px|Изометрическая проекция]]
[[Файл:UFO изометрия.png|frame|right|''[[X-COM: UFO Defense]]''; изометрическая проекция с ромбическими плитками. В оригинале использовался режим 320×200 с неквадратным пикселем, и картинка не была так безжалостно сплющена по вертикали.]]
'''Аксонометрической''' называется параллельная проекция, у которой все три оси переходят в разные прямые. '''Изометрическая''' проекция — аксонометрическая с одинаковым масштабом по всем осям. Из всех аксонометрических проекций особенно важна — и в черчении, и в играх — '''прямоугольная изометрическая''' (зачастую просто «изометрическая»): проектирующие прямые параллельны вектору (1, 1, 1).

Ось Z в изометрии смотрит на 12 часов (вертикально вверх), остальные две — на 4 и 8 часов (на 30° от горизонтали). Впрочем, часто используют «почти изометрию» со ступенчатыми линиями 2:1 — это даёт угол arctg 0,5 ≈ 26,57°.

'''Интересно''': в режимах 320×200 пиксель вытянут по вертикали. Это идеальное соотношение для изометрии: и числа круглые, и соотношение 2:1 даёт угол 30,96°<ref>= arctg[ 0,5·320·3 / (200·4) ]. Коэффициенты 3 и 4 — из соотношения сторон экрана 4:3.</ref>. Скорее всего, так вышло ненамеренно, в попытках сесть на два стула — и пристойный текст, и выход на NTSC (да, CGA имел выход на NTSC).

Изометрические игры, в свою очередь, делятся на игры с ромбическими [[тайлсет|плитками]] (''[[X-COM: UFO Defense]]'') и на игры с квадратными плитками (''[[StarCraft]]''). В целом считается, что ромбические плитки хороши для автоматической генерации уровня (''[[X-COM: UFO Defense]]'', ''[[Diablo]]'') и для явно изометрической механики (''[[X-COM: UFO Defense]]'', ''[[Knight Lore]]'', ''[[Spindizzy]]''), квадратные — для реалистичного вида при редактировании вручную. Плюс расходуют меньше памяти.
 

==== Прочие аксонометрические ====

[[Файл:Nether Earth.gif|frame|right|[[Nether Earth]]. Если быть буквоедом, это косая проекция, но «косота» мало заметна.]]
Прочие ортогональные аксонометрические проекции встречаются крайне редко — обычно в головоломках и стратегиях.
 

=== Косые ===

В косых проекциях направление проецирования — под углом к экрану.

==== Диметрическая ====

[[Файл:Prince of Persia.gif|frame|right|[[Prince of Persia]] — игра в диметрической проекции. Снова-таки, не обращайте внимание на сжатую картинку: использовался всё тот же режим 320×200 с неквадратным пикселем. И обратите внимание на Принца в плоской проекции.]]
Если '''изо'''метрическая подразумевает одинаковые масштабы по всем осям, в '''ди'''метрической два масштаба — один по двум осям, и другой по третьей. Диметрическая проекция бывает фронтальной и ортогональной. Если ортогональная используется крайне редко, то '''фронтальная диметрическая''' (более простая, но косая<ref>Кто чертил: ось X, которая во фронтальной проекции горизонтальная, в ортогональной наклонена на 7°.</ref>) широко применяется в двухмерных играх, как в горизонтальном разрезе, так и в вертикальном, давая суррогат трёхмерности. Масштаб по третьей оси — 50 %.

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

==== Планиметрическая ====

[[Файл:Планиметрия кубик.png|thumb|120px|Планиметрическая проекция]]
Та же диметрическая, но повёрнутая на 135°. Ею пользуются очень немногие игры, в основном jRPG и стратегии. На приставках с «лежачим» пикселем проекция становится ближе к ортогональной, на компьютерах со «стоячим»<ref>Конечно, имеются в виду приставки и компьютеры тех времён (начало 90-х). 640×480 VGA, 800×600 SVGA и всё, что появилось позднее — это белые и пушистые квадратные пиксели.</ref> — наоборот, портится. В связи с особенностями нашего зрения масштаб по оси Z может быть как классические 50 %, так и поменьше.
 

== Перспективные ==

В перспективных проекциях, как уже говорилось, проецирующие прямые пересекаются в «объективе» виртуальной камеры.

Поскольку экран ограничен, у перспективной проекции есть два важных параметра — фокусное расстояние (в «условных миллиметрах») и угол зрения (от 0 до 180°). Они взаимосвязаны: между углом зрения φ и фокусным расстоянием ''d'' соотношение

: ''d'' = ½ ''w'' ctg (φ/2),

где ''w'' — ширина стандартного фотоматериала (36 мм). На старых трубчатых мониторах угол зрения ставят 90° или чуть меньше, современные (2014) 16:10 могут отобразить без дискомфорта до 120°.
* Большой угол зрения (= малое фокусное расстояние): вид с малого расстояния, преувеличенная перспектива, сильные искажения по краям, мелкий масштаб
* Малый угол зрения (= большое фокусное расстояние): вид издали с большим увеличением, сжатая перспектива, незаметные искажения картинки, крупный масштаб

И к программированию видео на движке применяются те же правила, что и к обычной фото- и видеосъёмке: так, [[говорящая голова|говорящую голову]] «снимают» фокусным расстоянием от 70 до 140 мм.

=== Трёхточечная (3D) ===
[[Файл:Трёхточечная проекция.png|thumb|left|240px|Почему трёхточечная]]
[[Файл:Дюрер лютня.jpg|thumb|right|240px|Альбрехт Дюрер. «Построение перспективы лютни». Самое настоящее low-tech 3D.]]
Собственно, настоящая «трёхмерная» проекция называется '''трёхточечной''', с лёгкой руки художников, которые где-то за рамкой картины выбирают три точки схода и делают, чтобы продолжения линий пересекались в этих трёх точках. Разумеется, компьютер никаких точек схода не расставляет — они получаются автоматически, если честно прокрутить 3D-расчёты.

3D использовалось в серии Final Fantasy эпохи PSX (VII—IX) для трехмерных моделей героев, монстров и NPC, а также фонов в боевых сценах; для всего остального использовались нарисованные в той же проекции статичные 2D-задники. Начиная с десятки, серия стала полностью трёхмерной и лишилась прибитой гвоздями камеры.

Сейчас, с засильем 3D, часто делают игры в перспективных проекциях, похожих на традиционные плоскую или изометрическую: [[WarCraft/WarCraft III|WarCraft III]], [[StarCraft/StarCraft II|StarCraft II]]… Хотя часто это приводит к противной дилемме: либо нужно показывать левую и правую [[невидимая стена|границу поля]], либо смириться, что доступ к объектам у этой границы будет затруднён (''[[StarCraft|StarCraft II: Wings of Liberty]]'', миссия «В кромешной тьме»).
[[Файл:BioShock-FontaineBoss.png|thumb|right|240px|«Первая попавшаяся» трёхмерная игра ([[BioShock]])]]
 

=== Двухточечная (2,5D) ===
[[Файл:Двухточечная проекция.png|240px|thumb|Двухточечная перспектива]]
Если картинная плоскость вертикальна, любая вертикальная прямая останется вертикальной (остаются только две точки схода). Опыт художников показывает, что наш мозг успешно корректирует вертикальную перспективу, и здания и интерьеры, показанные в статике в трёхточечной проекции, смотрятся плохо. Поэтому на картинах делают только две точки схода, а вертикальные линии оставляют вертикальными. Фотографы, снимающие здания, корректируют перспективу фотошопом или шифт-объективом.

А чем она интересна для нас, геймеров? А тем, что в годы с 1992 по 1996 она процветала в 3D-играх. [[Wolfenstein 3D]], [[Doom]], [[Duke Nukem 3D]] и многие другие трёхмерные игры того времени использовали двухточечную проекцию и рисовали стены по столбцам, а полы — по строкам.
{{main|Псевдотрёхмерность}}
 

=== Одноточечная ===

[[Файл:AticAtac.png|frame|''[[Atic Atac]]'' — здание в одноточечной проекции (для экономии памяти изрядно «поломанной»), а персонажи внезапно с видом сбоку.]]
Последняя разновидность перспективной проекции — когда картинной плоскости параллельны аж два ребра (то есть, одна грань). Раз две точки схода удалены в бесконечность, остаётся только одна — в направлении взгляда (обычно, но не обязательно, в центре картины).

В 2D-играх одноточечной перспективой делают только внутренности зданий. Персонажей и объекты обычно рисуют в проекции «три четверти» или боковой — даже если взгляд сверху вниз. Естественно, перспектива пригодна в основном для поэкранного фона; чтобы на прокручивающемся фоне артефакты не были заметны, художнику нужно хорошее чувство перспективы.

Современные [[ремейк]]и классических игр (''[[Prince of Persia]] Classic'', ''[[Duck Tales]] Remastered'') переводят в 3D с одноточечной проекцией.

Ещё примеры.
* ''[[Prince of Persia]] 2: The Shadow and the Flame'' выполнена в традиционной диметрии с плоскими спрайтами, но одна из [[Видеовставка|сцен на движке]] — {{spoiler|«Avenge us! Avenge us!»}} — в одноточечной перспективе.
* ''[[Another World]]'' в отдельных экранах использует одноточечную перспективу.
* Существуют и псевдотрёхмерные игры с одноточечной проекцией, наиболее известные из них ''[[Grand Theft Auto]]'' 1 и 2.

Ещё раз.
{| class="wikitable"
|-
! Проекция !! Для художника !! Для компьютера !! Жанры
|-
| Трёхточечная || Три точки схода || Настоящее 3D || Все
|-
| Двухточечная || Две точки схода || Картинная плоскость параллельна одной из осей || 3D-шутеры 90-х
|-
| Одноточечная || Одна точка схода || Картинная плоскость параллельна двум осям || Поэкранные аркады 80-х Современные платформеры
|}
 

== Ломаная перспектива ==
[[Файл:SuperContraЛоманая.jpg|thumb|right|240px|Ломаная проекция в ''[[Contra|Super Contra]]''. Стены — попытались сделать какую-то перспективу, края платформ — «три четверти», узор на платформе — диметрия.]]
В ломаной проекции вообще нет проецирующих прямых: одни объекты проецируются так, другие этак. Это неплохо разнообразит 2D-игру, однако требует от художника опыта: нужно чувствовать перспективу и понимать габариты экрана, знать, что игрок увидит часто, что — редко, а что — вообще не увидит.

Причин «поломать» проекцию много.
* Художественные причины:
** Чтобы сгладить искажения проекции. Шар в любой косой проекции будет эллипсом — так, понятное дело, нельзя, мячик должен быть круглым. ''Atic Atac'' (см. выше) явно «снят широкоугольным объективом», и по краям «кадра» искажения будут слишком велики. Потому картины переданы в другой проекции.
** Чтобы передать смену проекции при прокрутке уровня.
** Для небольших предметов, которые невозможно нарисовать в такой проекции. Правда, если у машины широкая палитра, можно попробовать передать проекцию удачным тонированием.
** И просто «желание левой задней пятки художника» aka «художественная выразительность».
* Технические причины:
** Экономия памяти или работы художника (например, в плоской или 3/4 правый поворот — [[двурукий спрайт|зеркальное отражение]] левого, а в диметрии — нет).
** Совместимость с различными компьютерными технологиями: [[тайлсет|плиточный фон]], [[картонная анимация|«картонная» анимация]]<ref>Анимация, когда персонаж состоит из плоских сочленённых деталей, как картонная кукла. Детали могут быть нежёсткими и деформироваться (как в портретах [[Dust: An Elysian Tail]]).</ref>…

[[w:Перспектива#Обратная линейная перспектива|Обратная перспектива]], распространённая в средневековой иллюстрации и иконописи, тоже ломаная. Изредка её используют и в играх — для построек намного больших, чем экран. В жизни подобие обратной перспективы встречается, если какой-нибудь объект находится в сантиметрах от носа — между глаз.
 

== Параллаксная (многослойная) прокрутка ==
{{youtube|uWhJOIFKtm8|Кто не играл в «[[Aladdin|Аладдин]]а» на «сеге»? Обратите внимание на барханы и облака на заднем плане — это один слой, но с фирменной «полосатой» прокруткой}}
[[w:Параллакс|Параллакс]] — это видимое смещение объектов друг относительно друга, когда смещается зритель. Самый впечатляющий параллакс будет, если посмотреть из окна автобуса или поезда. Следующий наш метод моделирует это явление.

Устроена параллаксная прокрутка несложно, этот метод освоили ещё мультипликаторы. Берём несколько слоёв (все, кроме нижнего — с прозрачными «дырками») и перемещаем их с разной скоростью, получается неплохая иллюзия перспективы. Сами же слои редко делают перспективными — обычно в какой-нибудь из параллельных проекций.

Super Nintendo (он же SNES) позволял до четырёх слоёв, Sega Megadrive (она же Sega Genesis) — всего два, но могла независимо прокручивать полосы фона<ref>По поводу того, чем приставки отличаются от ПК: [http://prog21.dadgum.com/181.html статья], [http://mercury13-kiev.livejournal.com/40783.html перевод]</ref>. На ПК многослойная прокрутка возможна, начиная с 386-х машин<ref>Скроллинг был и на «двойках» (''[[Golden Axe]]''), но делался он хитрым перепрограммированием VGA по рецептам небезызвестного [[w:Абраш, Майкл|Майкла Абраша]] и не позволял «дыр». Другими словами, однослойный. А на полную перерисовку экрана 286-м не хватало пропускной способности шины.</ref>. Из JavaME-телефонов (во времена их максимального распространения, середина 2000-х) многослойную прокрутку поддерживали только самые шустрые<ref>То же самое: [[w:Кольцевой буфер|особым образом забуферизировав фон]], можно наладить очень быструю прокрутку, даже на Samsung C100 дававшую ≈8 fps — но без дыр.</ref>.

В [[квест (жанр)|квестах]] фирмы Daedalic Entertainment (''[[The Whispered World]]'', ''[[Deponia]]'') таких слоёв может быть более десятка. Правда, это уже 2000-е годы…

В 3D параллакс получается автоматически. Однако, чтобы не рисовать много далёких объектов, используют так называемый [[w:скайбокс|скайбокс]] — большой задник, малоподвижный по сравнению со всеми остальными игровыми объектами. Старые FPS наподобие ''[[Doom]]'' заливали экран особой текстурой, когда движок попадал на «небесные» стены. В современных играх скайбокс — очень отдалённый, но существующий в геометрии уровней задник.
 

== Нелинейные искажения ==

Двухмерные игры искажают крайне редко, в основном как спецэффект. В трёхмерных же…
* Искажения под простенькую оптику шлемов виртуальной реальности (Oculus Rift и подобные).
* Искажения под искривлённые мониторы.
* Имитация плохой оптики (множество оптических приборов ''[[Myst]]'', шлем Большого Папочки в ''[[BioShock]]'').

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

== Трактат о неквадратном пикселе ==

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

Давайте посмотрим несколько распространённых на то время машин (пропорция =1 — квадратный пиксель, >1 — стоячий пиксель, <1 — лежачий).<ref>Методика подсчёта: 0,75·ширина/высота. Для всех японских NTSC-приставок берётся высота 240 (приставкам нужно изображение без рамки, а полный NTSC-растр составляет 483 строки). Об Apple см. в тексте.</ref>

{| class="wikitable"
|-
! Машина/видеорежим !! Назначение !! Вывод на ТВ !! Разрешение !! Пропорция
|-
| ZX Spectrum || Бытовой компьютер || PAL || 256×192 || 1
|-
| BBC Micro режим 1 || rowspan=2 | Бытовой/учебный комп. || PAL || 320×256 || 0,94
|-
| BBC Micro режим 0 || PAL || 640×256 || 1,88
|-
| IBM CGA/VGA || rowspan=5 | Деловой компьютер || NTSC (CGA) || 320×200 || 1,2
|-
| IBM EGA || Нет || 640×350 || 1,37
|-
| IBM VGA (16 цветов) || Нет || 640×480 || 1
|-
| IBM CGA (текстовый) || NTSC || 640×200 || 2,4
|-
| IBM VGA (текстовый) || Нет || 720×400 || 1,35
|-
| Apple Macintosh || Издательский компьютер || Нет || 512×342 || 1
|-
| Amiga (LowRes) || rowspan=2 | Бытовой компьютер || PAL<ref name="amiga">В NTSC-версиях «Амиги» разрешение ниже.</ref> || 320×256 || 0,94
|-
| Amiga (HiRes) || PAL<ref name="amiga" /> || 640×256 || 1,88
|-
| Nintendo NES/Dendy || Игровая приставка || NTSC<ref name="console">Впоследствии появились и PAL-версии с меньшими вылетами изображения (телевизионный термин, часть телесигнала, скрытая за пределами экрана).</ref> || 256×240 || 0,8
|-
| Sega Genesis/Megadrive || Игровая приставка || NTSC<ref name="console" /> || 320×224 || 1
|-
| Nintendo SNES || Игровая приставка || NTSC<ref name="console" /> || 256×224 || 0,8
|}

В PAL- и SÉCAM-машинах около 256 строк, в NTSC- — начиная с 200: одна строка пикселей — это две строки телевизионной развёртки. Горизонтальное же разрешение — столько, сколько вытягивает техника, обычно поменьше, потому и лежачий пиксель. Sega с квадратным пикселем выглядит «монстром» на фоне других машин. К тому же у телевизора развёртка чересстрочная и пиксельное тонирование будет адски полыхать — поэтому в полное телевизионное разрешение вышли уже тогда, когда truecolor-режимы сделали эти «изыски» ненужными (PlayStation, 1995).

Компьютерам приходится работать с текстом, поэтому горизонтальное разрешение важнее вертикального — а значит, стоячий пиксель. Правда, мониторы могут свободно перестраивать развёртку и потому не привязаны к 200 (или 256) строкам. В крупных шрифтах (например, в шрифтах для текстовых режимов в 8px шириной) вертикальные штрихи делали двухпиксельными.

А что же Macintosh, явно выбивающийся из нашей таблицы? Кинескоп у него обычный, 4:3. Но он намеренно не использовал полную площадь трубки, чтобы пиксель был в точности квадратный, а плотность была 72 пикселя на дюйм — для удобства настольного издательства. Впоследствии привязка к 72 ppi<ref>''Pixels per inch'', пикселей на дюйм.</ref> сильно ударила по Apple (в Windows, например, принято 96 ppi, но не столь жёстко<ref>Хотя программирование под большие PPI — такой ещё ад, не зря в Windows 7 придумали виртуализацию PPI (программа должна сказать: «Я поддерживаю высокую плотность пикселей», иначе Windows её отрендерит на стандартной и растянет). Но хотя бы разработчики крупного ПО этот ад знают и проходят.</ref>) — но это уже середина 1990-х.<ref>[http://www.artlebedev.ru/kovodstvo/sections/70/ Ководство, § 70. Разрешение экранов. И немного о происхождении 72 точек на дюйм.]</ref>.

''Техническое отступление.'' Развёртка — это процесс управления электронным лучом приёмной телевизионной трубки ([[w:Кинескоп|кинескопа]]). Луч строка за строкой проходит по всему экрану, строя изображение. Развёртка бывает построчной, или прогрессивной (каждый кадр развёртываются все строки одна за другой), и [[w:Чересстрочная развёртка|чересстрочной]] (первый полукадр развёртываются строки 1, 3, 5, 7 и т. д., второй полукадр — 2, 4, 6, 8…).

== Примечания ==
<references />

{{Nav/Games}}

Posmotrelisu - Вклад [ru]

Проекции графики