Маски и текстуры

Продолжаем серию уроков о том, как стать художником по поверхностям.

Часть 1. Пиксель здесь.
Часть 2. Маски и текстуры — вы ее читаете.
Часть 3. PBR и материалы здесь.
Часть 4. Модели, нормали и развертка здесь.
Часть 5. Система материалов здесь.

Маски

В прошлой части мы рассмотрели принципы работы каналов и нашу первую маску, которую я создал — маску прозрачности.

Маска прозрачности в примере с котиком была создана с помощью отдельного канала под названием Альфа-канал. Этот канал так же имел размерность 8 бит на пиксель.

Каждый пиксель маски может иметь значение от 0 до 255 (или до 1), где 0 — это полностью прозрачный пиксель, а 255 (или 1) — полностью НЕ прозрачный пиксель.

Теперь, если посмотреть на Альфа-канал, как на обычный канал, то станет понятно, что он ничем не отличается от любого другого канала RGB. По факту — это все те же пиксели, у которых есть такая же интенсивность от 0 до 255 (до 1). Это все тот же градиент серого. И если бы мы взяли любой другой канал, скопировали бы его и вставили в Альфа-канал, то получили бы интересный эффект:

О чем эта серия уроков?

В данной серии статей я постараюсь максимально раскрыть теорию создания текстур для игровой индустрии, начиная от самого понятия «пиксель» и заканчивая построением сложных материалов (шейдеров) в игровом движке на примере Unreal Engine 4.

Часть 1. Пиксель — вы ее читаете.
Часть 2. Маски и текстуры здесь.
Часть 3. PBR и материалы здесь.
Часть 4. Модели, нормали и развертка здесь.
Часть 5. Система материалов здесь.

Я попытаюсь охватить такие программы, как Windows Paint, Photoshop, Substance Painter, Substance Designer и, возможно, Quixel (Не особо вижу смысла в этой программе, так как после прочтения всех статей у читающих должно сформироваться полностью понимание того, как работать с текстурами, и Quixel станет интуитивно понятен).

Я постараюсь разобрать максимально подробно такие понятия, как PBR, маски и различные виды текстур.

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

Возможное фото 10 нм IceLake. Источник

Странные вещи творятся на процессорном рынке. Мировой лидер в лице фирмы Intel пятый год бьется в попытках перейти на 10 нм техпроцесс. Изначально заявляли о переходе на 10 нм в 2015-м году, потом в 2016-м, 2017-м… На дворе 2019-й, а 10-нм от Intel в серии так и нет. Ну как нет, есть отдельные опытные/инженерные образцы, но высокий выход годных — проблема. Реальный переход ожидается не раньше 2022 года уже.

Собственно, это и стало причиной дефицита процессоров Intel на рынке. Для его преодоления компания расширяет производство модифицированных 14 нм процессоров (те же Lake только в профиль) и даже возвращается к 22 нм. Казалось бы, регресс налицо. А в это время корейский Samsung, тайваньский TSMC и примкнувший к ним AMD с платформой ZEN 2 рапортуют о вводе в серию аж 7 нм и вот-вот перейдут на 5 нм. Достали из пыльного шкафа «закон Мура» и объявили его живее всех живых. Скоро будет и 3 нм, и 2 нм, и даже 1 нм (sic!) — pourquoi pas?!

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

Disclaimer: Данную статью я нашёл совершенно случайно и был крайне поражён, насколько грамотно и подробно в ней раскрываются проблемы современной микроэлектроники, в частности, смерть закона Мура и маркетинг. Когда-то давно и сам баловался написанием статей про изготовление чипов, а в серии статей «Взгляд Изнутри» даже заглядывал внутрь оных, т.е. тема мне крайне интересна. Естественно, я бы хотел, чтобы сам автор оригинальной статьи опубликовал её на Хабре, но в связи с занятостью он разрешил мне перенести её сюда. К сожалению, правила Хабра не разрешают прямую копи-пасту, поэтому я добавил ссылки на источники, картинки и немножко отсебятины и постарался чуть-чуть выправить текст. Да, и статьи (1 и 2) по данной теме от amartology знаю и уважаю.

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

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

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

Привет, Хабр! Несколько месяцев назад у меня остро встал вопрос смены профиля деятельности и я обнаружил, что для претендента на вакансию web-разработчика сейчас недостаточно навыков десятилетней давности (какая неожиданность!). Пришлось срочно актуализировать свои знания. Заодно я решил составить шпаргалку с описанием большинства современных технологий, чтобы в случае чего кидать жаждущим новых знаний линк на эту статью, да и самому не забывать.

Потрясающий 3D-художник Луана Буэно (Luana Bueno) подробно рассказала о создании своей низкополигональной фан-версии Элой из Horizon Zero Dawn.

Введение

Меня зовут Луана, я художник 3D-персонажей из Сан-Паулу. Я переехала сюда шесть лет назад, потому что выиграла обучение геймдизайну в колледже Anhembi Morumbi.

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

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

Долгое время я работала в рекламе, а по вечерам изучала 3D. После этого я работала какое-то время моделлером для VR-игры RoVr.

Сейчас я занимаюсь фрилансом и работаю над своим портфолио.

Могу с уверенностью сказать, что изучать 3D приятнее, когда у тебя есть компания друзей, которая может помочь и сделать путешествие интереснее. Они как зелья маны, восстанавливающие мою энергию, когда я преодолеваю каждое препятствие.

Продакшен

Я начала проект со сбора множества референсов: самой Элой, актрис или моделей, которые, как я считала, помогут мне набросать отдельные части лица Элой или создать текстуру. Об этом важно было сказать, потому что я вижу, что многие люди начинают проект, не пользуясь референсами. Могу с уверенностью сказать, что если собрать хорошие референсы, то вероятность успеха проекта становится на 50% выше.

Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.

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

«Галоп пикселя», часть I — базовые понятия, этапы взросления, прикладные упражнения (линк)
«Галоп пикселя», часть II — перспектива, цвет, анатомия и прикладные упражнения (линк)
«Галоп пикселя», часть III — Анимация (линк)
«Галоп пикселя», часть IV — Анимация света и тени (линк)
«Галоп пикселя», часть V — Анимация персонажей. Ходьба (линк)
«Галоп пикселя», часть VI — Анимация персонажей. Бег (линк)

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

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

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

От переводчика

Рад приветствовать тебя, %юзернейм%!

Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

С понятием pixel perfect я вообще на тот момент не был знаком, только слышал где-то пару раз, и так как этот пункт стоял в конце списка требований «аккуратности», я понял, что это что-то вроде апогея, вершины айсберга в организации работы над макетами.

Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

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

Краткое содержание

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

Настройки Abobe Illustrator

1. Edit > Preferences > Units > General → Pixels
   Edit > Preferences > Units > Stroke → Pixels
2. Edit > Preferences > Guides & Grid > Gridline every → 1px
   Edit > Preferences > Guides & Grid > Subdivisions → 1px
3. Edit > Preferences > General > Keyboard Increment → 1px
4. View > Snap to Grid
   View > Snap to Point
5. View > Pixel Preview

Не благодарите.
Всех заинтересовавшихся прошу пройти под кат.

Как создавать pixel perfect изображения в Adobe Illustrator

От переводчика

Привет, %юзернейм%!

Этот перевод как бы дополняет мою предыдущую публикацию про Pixel Perfect, без которого она была бы неполной, тем более что оригинальная статья про Pixel Perfect ссылается на оригинальную статью этого перевода.

Материал расчитан на новичков, и немного рассказывает о двух вещах:

1. Как избежать той проблемы, из-за которой у вас в макетах расстояние между элементами или гайдами начинает включать в себя дробные части пикселей;
2. Как использовать сетки для прототипирования в Adobe Photoshop и Adobe Illustrator.

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

Как и в прошлый раз, одна из целей, почему я пишу эту статью на Хабр (а не ограничиваюсь, к примеру, переводом на Tuts+) — это составление после перевода полезных ссылок по теме. Призываю хабражителей так же делиться своими соображениями и инструментами, которыми вы пользуетесь при создании сеток, может быть какими-то другими редакторами. Один мой знакомый товарищ прокомментировал предыдущую статью таким образом, что, конечно, материал прикольный, но сам он пользуется Sketch'ем, а там это всё из коробки. Расскажите, чем пользуетесь вы?

Кстати, хотя в статье речь идёт об Adobe Illustrator, в Adobe Photoshop можно так же использовать и пиксельную сетку, и привязку к пикселям, и свою собственную настраиваемую сетку.

Краткое содержание

• Чтобы включить/выключить сетку в Adobe Illustrator/Photoshop, нажмите Ctrl + '
• Чтобы включить/выключить гайды в Adobe Illustrator/Photoshop, нажмите Ctrl + ;

Ну, поехали.

Разбираемся с сеткой в Adobe Illustrator

Привет, Мегамозг!

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

Кто-то скажет, что их история банальна. Собрались студенты, несколько лет делали сайты, со временем приобрели известность. Но ведь какую известность! Их работы в дизайнерских подборках по всему миру, а на полках в офисе стоят награды знаменитых рекламных фестивалей и конкурсов сайтов. Кроме того, они несколько лет входили в жюри международного конкурса Awwwards, а сейчас судят сайты на Рейтинге Рунета.

В общем, ребятам есть чем похвастаться, но сегодня они не будут этого делать. Александр Ковальский, генеральный и творческий директор CreativePeople, честно рассказывает, как они из фриланс-артели стали креативным агентством. А еще попутно о своем подходе к бизнесу и дизайну, о партнерах, с которыми не стоит работать, о недостойном пиаре и отношениях с «Фотошопом», до сих пор остающимся рабочим инструментом генерального директора.



Хотите получить лавину вдохновения? Тогда читайте.

P.S. А знаете ли вы, как CreativePeople захватили Крым? Прошло чуть больше года и Сергей Прокофьев, коммерческий директор, рассказал мне эту историю. Буквально через несколько дней она появится на Мегамозге. Подписывайтесь на наш блог, если не хотите пропустить.

---

Official translation (with a bit of polishing) is available here.

---

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

Модель освещения Фонга — классический пример локального выбора:



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

Традиционно к новогодним праздникам Plarium выпускает масштабные обновления своих проектов. В этом году для стратегии «Войны престолов» мы создавали нового юнита – Ледяного Стража.

Запасайтесь горячим чаем – под катом история о том, как был сотворен самый хладнокровный воин за всю историю Даркшайна (и много скриншотов рабочего процесса).

Ад визуализации 1.1:

• Книга 1: Обзор
• Книга 2: Проблемы
• Книга 3: Решения
• Книга 4: Заключение

Недостаток знаний иногда может оказаться достоинством, потому что вы наивно говорите себе: «Пфф… разве это сложно?» и просто погружаетесь в проблему с головой. Я начал эту статью с размышления: «Хм… Что же такое Draw Call?». За время «5-ти минутного» исследования я так и не нашел удовлетворяющего меня объяснения. Я проверил часы и, так как до сна оставалось еще 30 минут, сказал…

Пфф… Разве это сложно написать самостоятельно?

… и просто начал. Это было два месяца назад и с тех пор я непрерывно читал, писал и задавал много вопросов.

Это было самое сложное и низкоуровневое исследование, которое я когда-либо делал, и для меня непрограммиста это был кошмар состоящий из «да, но в этом особом случае...» и «зависит от реализации API...». Это был мой личный ад визуализации, но я прошел через него и принес нечто с собой: Четыре книги, каждая из которых представляет собой попытку объяснить одну из частей визуализации с точки зрения художника. Я надеюсь, что вам понравится.

Во многих типах игр, не только стратегических, у вас есть участок земли, и на нём нужно что-то строить. Знакомая схема, не правда ли?



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

Но что, если вы хотите более тонкие анимации, чтобы было видно, как здание постепенно растёт к небу?

Давид Ревуа — прекрасный художник, работающий со свободным программным обеспечением, постоянный член сообществ Krita Foundation и Blender Institute, концепт-художник анимационных проектов Gooseberry Open Movie Project, Mango Open Movie Project (Tears of Steel) и Durian Open Movie Project (Sintel). В этой статье он делится с начинающими художниками списком знаний, которые необходимо приобрести, чтобы работы получались реалистичными. Он обращает внимание, что для рисования «в цифре» следует обзавестись теми же навыками, что и в традиционной технике. Итак, приобщимся к его опыту.

Эта статья — перевод статьи Simon Schreibt «Diablo 3 – Resource Bubbles».



В мире есть три вещи, на которые я могу смотреть вечно: Огонь, как другие работают и сферы ресурсов в Diablo3. Я уже полюбил стиль Blizzard, как вы могли, возможно, заметить по моей статье о их 2.5D деревьях. Сегодня речь о другом. Сегодня мы всмотримся глубокооо в кристальные сферы Diablo в поисках истины.
(внутри много картинок)

Всем привет! Меня зовут Сергей Макеев, и я технический директор в проекте Skyforge в команде Allods Team, игровой студии Mail.Ru Group. Мне хотелось бы рассказать про технологии рендеринга, которые мы используем для создания графики в Skyforge. Расскажу немного о задачах, которые стояли перед нами при разработке Skyforge с точки зрения программиста. У нас свой собственный движок. Разрабатывать свою технологию дорого и сложно, но дело в том, что на момент запуска игры (три года назад) не было технологии, которая могла бы удовлетворить всем нашим запросам. И нам пришлось самим создать движок с нуля.