Gamedev Андрей Чернышов
4 675

Псевдо-отражённые вывернутые нормали, или как я сделал сцену для Sketchfab

В закладки

Предисловие

Перед вами перевод моей статьи для Sketchfab. Статья посвящена созданию 3D-сценки, в которой я постарался собрать все возможные приёмы использования «вывернутых нормалей». Из русской версии текста убрано всё не относящееся напрямую к модели. Оригинал статьи, кому интересно, тут

Вдохновение

Приветствую! Меня зовут Андрей, уже три года я от имени Anji Games создаю и выпускаю игры, и иногда в качестве хобби делаю модельки. На Sketchfab можно найти множество очаровательных работ, которые выглядят, как рисунок. Вот одна из моих любимых.

Покрутить можно тут

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

Процесс

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

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

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

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

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

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

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

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

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

Sketchfab предоставляет множество возможностей для детальной настройки рендера, материалов и пост-обработки. Работая в геймдеве, я привык экономить ресурсы устройства тем или иным образом, и эта модель не исключение. На ней всего одна текстура с цветовой палитрой и нет освещения. С одной стороны, это ограничение, но с другой — возможность создать все те визуальные эффекты, которыми напичкана сцена.

К сожалению на DTF пока нет возможности интегрировать фрейм скетчфаба, так что саму сценку можно посмотреть по этой ссылке

Больше материалов о том, как я разрабатываю игры вы можете найти тут: VK, Telegram, Instagram, Twitter

#опыт #арт

Материал дополнен редакцией

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Андрей Чернышов", "author_type": "self", "tags": ["\u043e\u043f\u044b\u0442","\u0430\u0440\u0442"], "comments": 40, "likes": 160, "favorites": 93, "is_advertisement": false, "subsite_label": "gamedev", "id": 25498, "is_wide": false, "is_ugc": true, "date": "Thu, 23 Aug 2018 14:38:13 +0300" }
{ "id": 25498, "author_id": 44894, "diff_limit": 1000, "urls": {"diff":"\/comments\/25498\/get","add":"\/comments\/25498\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/25498"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954 }

40 комментариев 40 комм.

Популярные

По порядку

Написать комментарий...
19

это невероятно круто

Ответить
8

Познавательно, сам далёк от геймдева, но интересно почитать и посмотреть с примерами

Ответить
5

Офигеть, вообще шикарно.

Ответить
5

Делал на тему обводок урок, когда это еще не было мейнстримом :)
https://www.youtube.com/watch?v=6HTFA4fX5Fs&t=1s

Ответить
3

У меня почему-то багует сценка.

Ответить
1

В Chrome все ок.

Ответить
1

Причём, даже в мобильном.

Ответить
1

Не хочу пугать, но у меня такое было, когда карточка накрывалась.
От перегрева.
Если дело в этом, может еще можно спасти, проверив кулер или оттащив мастеру. А может нет.
Если в 3д играх через некоторое время такое проявляется - я могу быть прав.

Ответить
0

Хм странно, а другие модели на скетчфабе нормально отображаются? Возможно дело в браузере или в железе

Ответить
0

Да, друге тоже с артефактами открываются. Значит косяк браузера.

Ответить
0

Видюха случаем не радеон?

Ответить
0

Нет. Nvidia

Ответить
17

RTX on.

Ответить
0

У тебя карточка все, того вот-вот.

Ответить
0

Хммм. Т.е. при использовании дублированной геометрии с вывернутыми нормалями для придания эффекта обводки и других обманок можно получить менее ресурсозатратный результат чем при использовании честного cell-shading рендеринга? Я хоть и не сильно разбираюсь в этом, но для меня это звучит странно, ведь для каждой модели теперь будет использоваться гораздо большее количество полигонов.

Ответить
10

Я не призываю забить на cell-shading, эта сценка - просто эксперимент, чего можно добиться вообще без каких-либо шейдеров и эффектов. Про обводку в играх - шейдер делает то же самое, дублирует геометрию и оффсетит, только не один раз, а каждый кадр 60 раз в секунду. Так что заранее сделанная обводка может быть в некоторых ситуациях экономичней.

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
1

А вы игру то рисовали в 2D? Я правильно понимаю, что создание таких моделек, которые с каждого угла выглядят как нарисованные в 2D, это просто такое занимательное упражнение?

Ответить
2

Игра 2D, всё верно.

Ответить
1

Погуглите что такое cel-shading

Ответить
1

Поздравляю с тем, что они оценили эту модель!
Было очень круто следить за её созданием в твоём канале, отличный скилл.

Ответить
0

Справа от бочки странный изогнутый блик в луже. Будто лента. Косяк? :)

Ответить
1

скорее издержки такого подхода создания эффектов) Это же не настоящий блик, а просто полигоны, направленные немного вниз

Ответить
0

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

Ответить
0

Очень круто! Посмотрел и другие твои работы хе-хе)

Ответить
0

Просто нечто.

Ответить
0

Круть! О божешки, они в VR открываются!

Ответить
0

MGS2? Кодзима - гений!

Ответить
0

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

Ответить
0

Toon Shader на коленке. Респектательный олдкул. :)

Да, спасибо за саму игрульку, залип в неё, пока не прошёл :)

Ответить
0

Выглядит очень круто, да и приятно просто почитать про такие интересные уловки. Прочитал - узнал что-то новое. Спасибо.

Ответить
0

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

Ответить
0

лол, промахнулся по статье 🤦

Ответить
0

Прекрасная статья, мы хотеть больше.

Ответить
0

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

Ответить
0

Думаю что нет, там с нормалями ничего особого не делают, упор именно на живописные текстуры

Ответить
0

Очень круто, правда, отражение для батарейки забыли :)

Ответить
0

Вот что значит - Любить свое дело.

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Новая игра Ubisoft на релизе выглядит
точно так же, как и на E3
Подписаться на push-уведомления