Rivalry2

Normal Map. Практическое руководство

2026-03-07 12:29 Diff

https://www.school-xyz.com/blog/normal-map-prakticheskoe-rukovodstvo

Перевод Леонида Садекова для школы XYZ, книги Practical Guide on Normal Mapping for games by Alexey Oshchepkov (Superfranky)

Введение
Данное руководство создано для тех, кто стремится понять тему Normal Mapping. Оно написано как для новых людей в индустрии, так и для более опытных, которые хотят освежить знания по теме. Здесь я постараюсь рассмотреть каждую возможную проблему и предоставить простой и доступный ответ. Надеюсь, что это руководство даст вам все необходимое о Normal Mapping и о том, как его применять. Проблемы с Normal Mapping не должны стоять на пути вашего творчества!
Отдельное спасибо EarthQuake с Polycount за вдохновение на создание этого гайда.

Условия использования
Пожалуйста, уважайте работу автора и не копируйте текст руководства никуда, кроме Polycount, без моего разрешения (Superfranky). Если вы увидели ошибку или хотите что-то добавить, то, пожалуйста, напишите мне на Polycount или отправьте письмо на networkcat2@hotmail.com.

Примечание
Перевод подготовлен специально для школы компьютерной графики XYZ. Некоторые главы, после согласования с автором, были расширены или обновлены для большей актуальности. Следовательно, некоторые части текста могут отсутствовать в оригинальном руководстве. По вопросам перевода пишите на nocstrig@yandex.ru. (Леонид Садеков)

Источники
Помимо оригинального руководства были использованы дополнительные источники информации:

A Practical Guide on Normal Mapping For Games:
http://polycount.com/discussion/146667/a-practical-guide-on-normal-mapping-for-games

You're making me hard. Making sense of hard edges, uvs, normal maps and vertex counts:
http://polycount.com/discussion/107196/youre-making-me-hard-making-sense-of-hard-edges-uvs-normal-maps-and-vertex-counts

The Toolbag Baking Tutorial:
https://www.marmoset.co/posts/toolbag-baking-tutorial/

Understanding averaged normals and ray projection:
http://polycount.com/discussion/81154/understanding-averaged-normals-and-ray-projection-who-put-waviness-in-my-normal-map

Техническая информация

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

Normal Mapping – это технология, используемая для имитации неровностей поверхности на объекте. Она применяется, чтобы сделать вашу финальную модель более похожей на ее HP (High Poly) версию. С ее помощью можно добить различные детали, которые нельзя передать через геометрию из-за ограничений полигонажа на вашем проекте, и заставить вашу модель выглядеть более скругленной для лучшей передачи освещенности и большей реалистичности.

Карты нормалей – это RGB изображения, где каждый из каналов (красный, зелёный, синий) интерпретируется в X, Y и Z координаты нормалей поверхности соответственно. Красный канал пространства касательных карты нормалей отвечает за ось X (нормали направленны влево или вправо), зелёный канал за ось Y (нормали направлены вверх или вниз) и синий канал за ось Z (нормали направлены прямо от поверхности).

Пространство касательных (Tangent Space)

Прежде чем мы перейдем к моделированию и запеканию, я должен рассказать вам о том, что такое пространство касательных (Tangent Space). Самый распространенный тип карты нормалей, залитый синим цветом и встречающиеся повсюду в интернете, называется картой нормалей пространства касательных (Tangent Space Normal Map).

В мире 3D существует множество координатных систем: мировое пространство, локальное пространство, пространство камеры и т.д. Пространство касательных – очередная координатная система со своим назначением. Она используется ради обозначения текстурных координат для поверхности полигона. Вы уже, вероятно, знакомы с UV координатами. Тогда представьте, что ось X сонаправлена с V, а ось Y с U. Теперь у нас есть координаты модели, представленные в 2D пространстве. Но координатной системе необходима третья ось для существования в 3D пространстве и для этого нам необходима нормаль поверхности (N). В координатах пространства касательных нормаль поверхности отвечает за ось Z в мировых координатах.

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

Это изображение позволяет представить координаты на самой распространенной форме – на кубе

Оси U, V и N обозначают направления, в которых их значения изменяются вдоль поверхности, так же как X, Y, Z представляют направления, в которых изменяются их значения в мировых координатах.

Это означает, что мы можем передавать координаты пространства касательных через RGB каналы карты нормалей. Красный канал ответственен за ось U, синий за N, а зелёный за V.

Говоря простым языком, красный канал обозначает лево и право; зеленый - верх и низ; синий – вертикаль от поверхности.

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

Дело в том, что разные приложения могут также по-разному работать с зеленным каналом и порой, когда возникают проблемы с отображением в определенном приложении, то стоит попробовать инвертировать зелёный канал или, говоря по-другому, сменить DirectX на OpenGL или наоборот. (OpenGL – Y+; DirectX – Y-)

Таблица с ориентацией каналов для разных приложений:

Пространство объекта (Object Space)

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

Достоинства:
•Легче генерировать карту кривизны
•Слегка улучшенная производительность

Недостатки:
•Нельзя повторно использовать. Разные формы требует разных карт.
•Тайлить или отзеркалить можно только с поддержкой шейдера.
•Трудно добавлять отдельно запеченные детали из-за сильной вариативности цвета.
•Плохо сжимается.

-Чувак, это сложно. Какое мне дело?

Карты нормалей пространства касательных используют особый вид вершинных данных, называемых базисом касательных (tangent basis). Если световые лучи существуют в мировом пространстве, то нормали, хранящиеся в карте нормалей, в пространстве касательных. Когда движок обрабатывает модель с примененной картой нормалей, световые лучи преобразуются из мирового пространства в пространство касательных, используя для этого базис касательных. К этому моменту падающие световые лучи сверяются с направлением нормалей с карты нормалей, что определяет освещенность каждого пикселя объекта. Однако вместо преобразования световых лучей, некоторые шейдеры преобразуют нормали из пространства касательных в мировое. Затем преобразованные нормали сверяются со световыми лучами для создания необходимой освещенности. Конечный способ определяется создателем шейдера, но результат в обоих случаях один и тот же.

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

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

-Я хочу, чтобы мои нормали выглядели отлично без тонны лишней работы!

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

Xnormal запекает карты нормалей, используя пространство касательных - Mikk-Tspace. Приложения поддерживающие Mikk-Tspace:

• Unreal Engine 4
• Substance Painter
• Marmoset Toolbag
• Unity

Для ситуаций, когда необходимо конвертировать имеющуюся карту нормалей в карту, использующую другое пространство касательных, существует программа Handplane. Это полностью бесплатное приложение. Сначала необходимо запечь карту нормалей, используя пространство объекта (Object Space), которую затем конвертируют в карту нормалей с необходимым пространством касательных.

Запекая в Marmoset и используя выпадающее меню Tangent Space в свойствах объекта, вы можете установить нужное пространство касательных. Дополнительно (через Edit -> Preferences -> Content -> Default Tangent Space) можно установить какое пространство касательных будет использоваться для новых объектов в сцене по умолчанию.

Если вы запекаете, используя Maya, то помните, что она имеет общий алгоритм расчета пространства касательных с Marmoset Toolbag.

Создаем карту нормалей

Процесс создания карт нормалей (и не только их) обычно называют "запеканием". Выглядит это следующим образом:

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

Создание HP модели

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

Толщина фасок

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

Детали со скосом

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

Пересечение геометрии

Стоит всегда думать о том, как будет выглядеть финальная модель при работе над HP. Иногда наилучший вариант - это создавать непрерывную LP, если объединяемые объекты не будут анимироваться или использоваться раздельно, как, например, ремень на штанах. Для данного примера наилучшим решением было бы держать штаны и ремень максимально близко друг к другу на этапе HP, чтобы позже, при создании LP, сделать их цельным объектом. Если HP и LP плохо согласуются друг с другом, то это вызовет ошибки на карте нормалей в местах наличия пустых пространств.

Необходимо помнить об этом при объединении двух объектов на LP. Но, порой, лучше использовать пересекающуюся геометрию. На этом примере у меня маленький LP куб пересекается с большим. Два этих объекта необходимо запечь раздельно.

Разнесённая геометрия и бейк-группы

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

Чтобы избежать этого существует два способа:

Разнесенная геометрия (Exploded mesh)

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

Бейк-группы (Bake groups)

Помимо того, чтобы разносить объекты вручную, мы можем разнести объекты по логическим группам, чтобы они запекались отдельно. Дабы обозначить это, объектам необходимо назначить уникальные имена и добавить суффиксы - _low для LP и _high для HP.

Marmoset Toolbag.

Для загрузки с учетом бейк-групп, нажмите на значок загрузки моделей в панели Quick Loader. Выбрав свои LP и HP модели Marmoset автоматически создаст бейк-группы для запекания.

Если все было сделано правильно, то у вас не возникнет проблем из-за пересечения геометрии!

Substance Painter

Процесс подготовки объектов ничем не отличается от вышеописанного. Чтобы SP учитывал созданные бейк-группы при запекании, необходимо для поля Match выбрать By Mesh name.

Сокращение полигонажа (Decimating)

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

Если говорить прикладным языком, то вам необходимо воспользоваться инструментом Decimating Master в Zbrush. Для этого перейдите во вкладку Zplugin -> Decimation Master и в соответствующем поле установите процент "сокращения", затем нажмите Preprocess All, чтобы Zbrush просчитал всю сцену, и после этого нажмите Decimate All. Тогда Zbrush начнет оптимизировать полигонаж модели, и если вы решите, что этого недостаточно, то повторите вышеуказанные шаги еще раз.

Все вышеописанное делается для того, чтобы не перегружать рендер лишним количеством полигонов. Ведь если объект выглядит одинаково при 4млн. и 2млн. полигонах, то зачем нагружать приложение? Главное, следите за объектом в процессе, поскольку вам также не нужны артефакты на карте нормалей и пропавшие детали.

Плавающая геометрия (Floaters)

Плавающей геометрией (флоатерами) называются HP объекты, которые существуют отдельно от основной модели и нужны для быстрого добавления деталей под запекание карты нормалей. Это хороший способ сымитировать геометрию, без необходимости тратить лишнее время на вшивание деталей в оригинальную HP. Недостаток скрывается в том, что необходимо подстраивать LP к плавающей геометрии, и это довольно сложно, если вы хотите расположить ее у круглых или сложных поверхностей, поэтому чаще всего ее используют у плоских поверхностей. Если вы расположите камеру прямо напротив плавающей геометрии и не увидите видимых переходов, то и на запеченной геометрии их видно не будет.

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

Когда стоит моделировать, а когда рисовать.

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

Это лишь один из подходов. Использование формата .PNG позволяет сохранить карту с прозрачностью.

Затем перенесите полученный результат в Photoshop и скомбинируете его с оригинальной картой нормалей. Для комбинирования карт нормалей существует несколько методов:

Методы комбинирования карт нормалей

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

Плагин для Phostoshop – RNM Normal Map Combiner (https://farfarer.com/resources.htm), позволит автоматически смешать карты нормалей без потери векторной информации.

Для того чтобы сделать тоже самое вручную, нужно перейти в режим редактирования уровней (Level Adjustments) на синем канале и уменьшить количество белого с 255 до 128, после чего установить режим смешивания Hard Light для накладываемой карты нормалей.

Для пользователей Substance Designer существует готовое решение в виде ноды Normal Combine, которой лишь необходимо - в качестве входных значений - передать две карты нормалей.

Приложение Crazybump также позволяет совместить карты нормалей.

Внутри Substance Painter существуют специальные режимы смешивания карт нормалей, способные также решить проблему:

Normal Map Detail (по умолчанию) – считает текущий слой добавленным.
Normal Map Inverse Detail – считает нижележащий слой добавленным.
Normal Map Combine – объединяет верхний и нижний слой с одинаковой интенсивностью.

Создание LP модели
Градиенты

Прежде чем переходить к запеканию, вам необходимо понять, что означают градиенты на картах нормалей. Области карты нормалей залитые синим цветом (R/G/B: 128/128/255) означают, что нормали в ней сонаправлены с интерполированными нормалями вершин объекта для этого пикселя. Когда карте нормалей необходимо компенсировать экстремальные углы на геометрии, тогда начинают возникать градиенты. Чем меньше карте нормалей приходится компенсировать нормали объекта, тем лучше. Однако это не означает, что градиенты - это зло.

Давайте проведем тест с запеканием простого куба. Каждая поверхность куба разделена на UV развертке и имеет уникальную группу сглаживания:

Выглядит хорошо, да? Без градиентов, все запеклось идеально. Но что это значит и как этого достичь? Или более интересный вопрос: мне стоит беспокоиться?

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

Но теперь давайте взглянем на сильные градиенты. Я сшил все UV острова вместе и применил одну группу сглаживания на весь объект.

Это тот же куб, но посмотрите, что выглядит теперь он совершенно иначе, и даже устрашающе. Я расскажу вам, что здесь происходит немного позже. Обратите внимание на разницу между двумя запечками, очевидно, что карте нормалей на объекте с одной группой сглаживания, приходится тяжело из-за необходимости компенсировать угол в 90 градусов у куба.Но это не означает, что вы должны избегать градиентов любой ценой. Это просто не слишком хорошая идея. Самые сильные градиенты могут стать проблемой, но чаще всего, вам не стоит бояться их, особенно если ваш инструмент для запекания карт нормалей синхронизирован с игровым движком. Всегда стоит делать тестовые запечки, чтобы проверить результат в движке, где вы будете использовать свой ассет.На конечный вид модели повлиял еще тот факт, что при запекании использовался алгоритм расчета пространства касательных отличный от используемого в движке для рендера. Выше уже упоминалось об этом, но давайте рассмотрим это чуть подробнее. Когда модель запекается с сильными градиентами, то для получения корректного результата необходимо, чтобы приложение для запекания карт нормалей и итоговый движок использовали единый алгоритм расчета пространства касательных, то есть, были синхронизированы между собой.В примере выше карта нормалей запекалась с учетом пространства касательных, используемым в 3DsMax, а движком для рендера был Marmoset Toolbag. Поскольку они не синхронизированы, результат вышел некорректным. Если запечь карту нормалей, используя пространство касательных Marmoset, или любое другое синхронизированное с ним пространства касательных, то результат будет выглядеть корректно, но только лишь внутри Marmoset Toolbag, а при использовании любого другого рендера - необходимо знать, какое пространство касательных он использует.

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

Существует несколько преимуществ от использования чистой запечки:

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

Это лучшее сжатие текстур. При запекании с градиентами, на mip-картах могут возникать артефакты, поскольку карты с низким разрешением не смогут корректно передать нужный цветовой диапазон градиента.

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

Жесткие грани и UV

Итак, скажем, вы не хотите видеть градиенты, а хотите ровную и красивую запечку карты нормалей. Значит, вам необходимо узнать, что такое жесткие грани/группы сглаживания на LP объекте. Каждый раз, когда вы используете жесткую грань на LP, это ослабляет градиент на выбранной грани.

Правило большого пальца - это расставление жестких граней/групп сглаживания на местах, где угол между двумя поверхностями составляет 70 градусов и более. Если взглянуть на поверхности с большим углом и одной группой сглаживания, то можно увидеть черные градиенты, которые карта нормалей попытается компенсировать, но , не сможет этого сделать, и на модели появятся ошибки затенения (шейдинга). Назначая жесткую грань/группу сглаживания на поверхности, вы выравниваете затенение, делая его более схожим с HP моделью, и освобождаете карту нормалей от сильной компенсации отличий затенения между LP и HP.

Как расставлять жесткие грани:

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

Если вы пользуетесь Maya, то в режиме выделения граней выберите нужные и во вкладке "Mesh Display" нажмите "Harden Edge" – для указания жесткой грани, и "Soften Edge" – для мягкой.

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

На скриншоте с картой нормалей видно, что одна поверхность выглядит отличной от остальных. Помните, что я ничего не делал с UV, а лишь применил другую группу сглаживания к поверхности. Сейчас она выглядит чистой и ровной, но вот в движке это смотрится не очень.

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

Но пока забудьте пока о ней. Посмотрев на остальную часть объекта вы увидите, что градиенты ослабли не только на непосредственно отделенной поверхности на карте нормалей, но и на поверхностях, которые делят с ней ту же грань . Посмотрите, как градиенты на поверхностях слева (на карте) изменились. Чем ближе они к синему цвету, тем лучше это будет выглядеть в движке. Так что по поводу этой странно выглядящей…грани? Это ошибка возникающая, когда вы разделяете поверхности по группам сглаживания/жестким граням, но не на UV развертке. Из-за этого нормали двух разных частей развертки смешивается из-за чего возникается видимый шов.

В местах расположения жестких граней необходимо делать разрез на UV развертке!

Я разделил поверхность с жесткой гранью на UV. Перезапек карту и вот результат:

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

Если я применю уникальную группу сглаживания для каждой поверхности и разнесу их на UV развертке, то получу идеальную карту нормалей. Но что если у меня не 6 поверхностей, а намного больше? Есть простой ответ на этот вопрос.

Для того чтобы быстро расставить группы сглаживания, скачайте плагин TexTools. (http://renderhjs.net/textools/3dsMax.html). После этого откройте его в 3DsMax и на основной панели, открыв вкладку Tools, выберете опцию "Smoothing groups from UV shells", предварительно выделив нужный объект.

Основной процесс выглядит следующим образом:

Разделить UV там, где вы предполагаете жесткую грань на LP модели.
Применить "Smoothing groups from UV shells" для назначения отдельной группы сглаживания каждому UV острову.

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

Отражение UV

Если вам необходимо отразить половину LP объекта, то вот хороший способ сделать это:

Удалить симметричную половину.
Сделать развертку.
Применить симметрию обратно.
Сдвинуть отраженные поверхности на UV на один тайл в сторону.
Запечь карту нормалей.

Сдвигать поверхности на UV нужно всегда, когда два или более UV острова наложены друг на друга - иначе возникнут ошибки при запекании.

Округлость и волнистость на карте нормалей

С круглыми объектами возникает постоянная проблема - волнистость на карте нормалей.

После запекания, на карте нормалей вы можете заметить "волны" вдоль граней UV островов. Они возникают из-за несовпадения LP модели с HP.

Как вам избавиться от этой проблемы? Исправить это возможно добавлением дополнительных сегментов к LP цилиндру. После запекания цилиндра с большим количеством сегментов, вы можете удалить добавленные сегменты и получить более подходящий результат. Такой подход не рекомендуется, но теоретически возможен.Но этот вариант не является распространенным решением. К нему стоит прибегать с осторожностью. Если назначить карту нормалей на объект с отличными вершинными нормалями, то модель может выглядеть некорректно. Из-за того, что после запекания карта нормалей для обоих цилиндров будет выглядеть практически идентично, подобный подход может сработать, хотя все еще возможно смещение UV координат.Чаще всего проблемы "волнистости" на картах нормалей решаются с помощью Photoshop. Через инструмент "Smudge Tool" , ведя кисточку точно вдоль грани, можно аккуратно выровнять ее Поскольку карта нормалей хранит векторную информацию, то стоит с большой осторожностью подходить к редактированию карты нормалей в графическом редакторе.

Сопоставление геометрии во время ретопологии

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

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

3DsMax

Используйте модификатор Turn to poly, в настройках которого поставьте галочку на "Limit polygon size" и установите значение в поле равное 3. После этого ваша модель триангулируется, и вы сможете отправить ее на запекание!

Для просмотра триангуляции и внесения возможных изменений используйте панель Tris.

Maya

Выделите поверхности объекта и в настройках объекта выберите параметр Triangulate.

Наилучшие подходы в создании UV под запекание и текстурирование

Работая над разверткой, всегда важно думать о текстурировании. Если, например, вам нужно добавить одинаковые прямые детали к ремню, то важно расположить его UV остров ровным.

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

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

💥 Курс «Draft Punk» для тебя, если хочешь делать такие же 3D-модели

Узнаешь, как устроен пайплайн разработки 3D-моделей в больших игровых студиях. Научишься создавать выразительные драфты, разберёшься с топологией, high poly, low poly, развёрткой и запечкой. А в конце создашь полноценную 3D-модель по всем правилам пайплайна. Курс можно взять в рассрочку.

Искаженные детали на запечках

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

Averaged Normals:

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

Explicit Normals непосредственно использует нормали LP объекта для построения кейджа. Следовательно, если на LP объекте расставлены жесткие грани/группы сглаживания, то на финальной модели появятся швы на местах фасок. Но, в отличие от первого способа, все детали запекутся без искажений.

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

Рассмотрим на примере, как бороться с искаженными деталями на запечке.

Можно сделать LP модель такой, добавив ей поддерживающие грани:

Это быстро дает хороший результат, но с расходованием дополнительных полигонов на LP объекте.

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

Модель без поддерживающих граней:

Модель с поддерживающими гранями:

Видите, насколько велика разница в полигонаже между двумя объектами после добавления дополнительной геометрии? Поэтому используйте этот подход только на свое усмотрение.

-Что если я не хочу тратить лишние полигоны на LP, но и не хочу получить искаженных деталей?

Это очень интересный вопрос, и вот ответ на него!

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

Они практически идентичны. И почему так? Разве я не добавил дополнительной геометрии? Суть в том, что дополнительные грани помогают ослабить градиенты, но в данном случае я уже разделил UV острова на местах с жесткими гранями/группами сглаживания, поэтому дополнительной геометрии не пришлось ничего изменять.

Так почему это важно? Если я удалю добавленные грани и применю карту нормалей внутри движка, то вот что мы получим – идеальный результат. Нет никаких различий в положении нормалей у двух объектов, хотя один из них имеет меньшее количество полигонов. Круто.

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

Выглядит не очень, правда? Давайте посмотрим на второй вариант, где я добавил поддерживающих граней к объекту. Очевидно, что он выглядит намного лучше - это то, что нам нужно. Но после применения нижней карты к обоим объектам - вот что выходит:

Ух ты, кажется, мы что-то сломали.

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

Так что же делать, если у меня есть градиенты, но я не хочу назначать жесткие грани, разделять UV и прочее? Вот несколько способов:

Способ 1 (SkewMesh)

Один из простейших способов избавиться от искаженных деталей на объектах, где другие методы могут быть трудноисполнимыми, называется Skewmesh, который работает следующим образом:

То что мы и ожидали увидеть. Теперь исправим это.

Триангулируйте ваш LP объект.
Затем примените модификатор Tesselate.

Убедитесь, что значение в поле Tension – 0, и количество итераций установлено на значении 3 или 4.

Создайте кейдж.
Экспортируйте тесселированную LP и ее кейдж отдельно от финального объекта и импортируете их в Xnormal.
Внутри Xnormal запеките Object Space Normal Map.
После конвертируйте эту карту в карту пространства касательных (tangent space), используя вашу карту Object Space и финальную модель как входные данные для конвертера.

Marmoset Toolbag

Импортируете тесселированную модель в Marmoset Toolbag, отрегулируете кейдж и запеките карту Normals Object. Затем также конвертируете карту Object Space в Tangent Space, используя Xnormal.

Способ 2

1 — Подготовьте два объекта: один без поддерживающих граней (ваша финальная модель) и другой - для запекания - с поддерживающими гранями.

2 — Вам необходимо запечь карту Object Space взамен привычной Tangent Space.

Xnormal

3 — Для запекания карты Object Space необходимо снять галку с Tangent Space в настройках.

4 — Выберите вашу модель (с поддерживающими гранями) и запеките ее.

Так выглядит карта Object Space, странного желтого цвета. Но это не важно. Что важно, так это то, что сейчас мы будем конвертировать ее в карту Tangent Space.

5 — Выберите Object/Tangent конвертер.

Загрузите вашу финальную модель в слот с LP. Карту Object Space добавьте в поле "Input normal map" и выберете формат, в котором вы хотите сохранить карту нормалей.

Вот наш результат при наличии всех градиентов. Так где разница, спросите вы?

Заметьте, что нет никакой разницы в нормалях между двумя объектами. Вот, что случилось:

Конвертер взял карту Object Space, которую мы запекли с модели с поддерживающими гранями, и сгенерировал карту Tangent Space с учетом затенения финальной модели. Теперь вы можете запекать карты нормалей с поддерживающими гранями, не волнуясь о вреде градиентов и искажений.

Способ 3 (Explicit Normals)

Xnormal

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

Задайте жесткие грани для LP объекта и разнесите UV острова, чтобы ослабить градиенты.

Запеките карту нормалей без кейджа, используя параметр Ray Distance.

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

Marmoset

Для того чтобы запечь детали без искажений в Marmoset Toolbag, необходимо в настройках Baker снять галочку с Smooth Normals.

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

Способ 4

Внутри Marmoset Toolbag мы можем воспользоваться инструментом Paint Skew, чтобы избавиться от искажений на карте нормалей. Нажмите кнопку "Paint Skew", чтобы перейти в режим редактирования, и начните кисточкой указывать области, которые хотите исправить. Эта функция работает путем попиксельного смешивания нормалей поверхности объекта и нормалей кейджа. На 2D карте черный цвет будет означать полностью исправленные искажения, а белый – оригинальные нормали.

Перекрывание несимметричных UV островов

Иногда (или довольно часто) делая UV развертку, вы можете увидеть множество одинаковых или очень схожих UV островов и подумать: "Ух ты, какая трата ценного UV пространства"

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

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

Если вы разделите каждую поверхность на UV согласно расставленным жестким граням, то получите 6 UV островов. Вот, что вы увидите после запечки:

Обратите внимание, насколько схожи эти UV острова. Один из кусков выглядит так же, как остальные три, и оставшиеся два побольше тоже выглядят почти идентично.

-Мне правда нужны все эти острова? Давайте сложим их друг на друга!

Мы так и сделаем, но сначала вы должны подумать о том, как собираетесь текстурировать эту модель. Нужны ли вам уникальные детали на каждой поверхности? Важно ли держать их отдельно для уникальных рельефных деталей или царапин? Сильно ли будет заметно то, что они отзеркалены?

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

Помните об ориентации поверхностей, которые вы накладываете друг на друга. Особенно о простых квадратных поверхностях, которые ненамеренно можно перевернуть, а, значит, что ваши текстуры также будут инвертированы в ненужных местах.
Наложить UV острова друг на друга несложно. Внутри 3DsMax убедитесь в том, что инструмент Snap () активирован. Создать карусель Добавьте описание
Сместите перекрывающиеся UV на один тайл в сторону.
Запекайте.

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

-Но что если мои UV острова различаются, а я все равно хочу их наложить друг на друга?

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

Подогнать один остров под размер другого.

Это может сработать с простыми квадратными UV островами, но, скорее всего, станет проблемой при работе с чем-то более сложным, и тогда себя сильно проявят потяги на развертке. Попробуйте и посмотрите сами. Вам также стоит остерегаться того, что, изменяя масштаб и размер островов, вы назначаете им непропорциональное количество текстурного пространства и соответственно получаете следующее:

Левый – подогнанная UV; средняя – оригинал; правая – меньший UV остров лежит внутри большего.

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

И последнее - меньший UV остров лежит внутри большего.

Вот, что из этого выйдет:

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

Запекание
Сбросить трансформацию

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

3DsMax

Во вкладке инструментов найдите Reset Xform. Примените его, желательно предварительно сбросив стек. После чего экспортируйте модель.

Maya

В закладке Modify вам необходимо воспользоваться инструментом Freeze Transformation, предварительно удалив историю для модели.

Отступ граней

Если карта нормалей не имеет достаточный отступ, то это создаст швы на границах UV островов.

Направление нормалей

Перед запеканием убедитесь, что ваша HP и LP модель имеет корректное направление нормалей, то есть, нет инвертированных нормалей. Внутри 3DsMax вы можете проверить это, выбрав Face Direction на выделенном объекте. После этого инвертированные поверхности подсветятся зеленым. Если инвертированные поверхности останутся незамеченными, то это выльется в ошибки проецирования, поэтому будьте внимательны.

Описание всего процесса

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

3DsMax

Примените модификатор Projection к LP модели.

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

В поле Push настройте уровень отступа кейджа от объекта. Amount = расстояние. Вы можете также манипулировать кейджем вручную через вершины. В 3DsMax манипулирование кейджем может повлиять на расстояние проецирования и направление лучей проекции, поэтому двигая вершины вручную, необходимо быть крайне осторожным.

Maya

В настройках Transfer Map регулируете размер кейджа через слайдер "Search Envelope". Поскольку, в отличие от 3DsMax кейдж в Maya можно регулировать лишь по величине отступа, то можно меньше волноваться о возможных ошибках проецирования.

Xnormal

Вы можете создать кейдж для своего объекта прямо внутри Xnormal. Для этого необходимо перейти в 3D Viewer.

Отметьте поле Edit Mesh и начните редактировать кейдж. Сохраните результат по окончанию.

Но из-за необходимости переключаться между приложениями и не слишком удобного управления в 3D Viewer - это не лучший подход в создании кейджа.

Вместо этого вы можете импортировать кейдж прямо из 3DsMax.

Внутри модификатора Projection, после создания кейджа, нажмите кнопку Export, что создаст отдельный объект для экспорта. Эскпортируйте его в формате .obj и откройте в Xnormal.

Нажмите ПКМ на строке с LP объектом в XNormal и выберете "Browse external cage file", после чего добавьте экспортированный из 3DsMax кейдж.

Marmoset Toolbag

В Marmoset регулировать кейдж можно только по величине отступа от LP. Для этого воспользуйтесь параметром Min offset/Max offset. Используя Paint Offset можно точнее контролировать отступ кейджа. Он позволяет указывать отдельные области, где необходимо изменить отступ кейджа от LP. Если же вы не хотите производить ручных настроек, то нажмите кнопку Estimate Offset, функция которой попытается рассчитать наилучшую форму кейджа для LP модели.

Устранение ошибок

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

Будьте подготовлены

Если вы столкнетесь с проблемой, решение которой вам неизвестно - не пугайтесь. Обратите внимание на эти простые шаги, чтобы убедиться, что вы полностью подготовили ваш объект для запекания. Я продемонстрирую их, используя 3DsMax, но эти принципы можно применить и для всех остальных приложений.

Убедитесь, что нормали на ваших моделях указывают в одном направлении и не инвертированы. Существует много способов сделать это.
Убедитесь, что LP модель имеет подходящую топологию. Проверьте модель на предмет наличия любых возможных ошибок: несшитые вершины, наложенные друг на друга поверхности, инвертированные поверхности, изолированные поверхности, многоугольники и т.д. В 3DsMax вы можете использовать модификатор "STL Check" или Xview для обнаружения большей части из указанных проблем.
Сколапсите стек вашего объекта. (Удалите историю в Maya)
Убедитесь, что все перекрывающиеся UV острова сдвинуты на 1 тайл в сторону.
Примените Reset Transform. (Freeze Transform для Maya)
Проверьте группы сглаживания. (Жесткие грани для Maya)
Траингулируйте модель.
Создайте кейдж (если только не планируете запекать в Marmoset Toolbag)
Экспортируете LP модель как .obj или .fbx с группами сглаживания, нормалями, тангентами (для .fbx) и текстурными координатами.

Чаще всего, это все что нужно, чтобы быть уверенным, что модель полностью готова к запеканию.

Давайте взглянем на специфические проблемы.

-Я все сделал правильно, но до сих пор вижу швы на карте нормалей!

Это идеально запеченная карта нормалей, за исключением одной детали. Когда вы видите подобные странные швы, при этом выполнив все необходимые шаги, то, вероятно, вы упустили одну важную деталь - отступ. Это простой куб, запеченный при разрешении 1024х1024, но UV острова имеют лишь один пиксель отступа между собой. Попробуйте повысить его до 8-16 пикселей, в зависимости от желаемого разрешения текстуры и величины анизотропной фильтрации в вашем движке.

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

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

3DsMax добавляет шум на текстуру, чем удаляет видимые артефакты, но сам шум становиться заметен.
В Maya и Xnormal шум отсутствует, но возникает некий ступенчатый артефакт.

Подобные артефакты становятся заметнее на отражающих поверхностях. Как уже было сказано, это происходит из-за недостатка глубины битов на канал (глубины цвета). Это означает, что на текстуре недостаточно цветовых оттенков для передачи более точных цветовых переходов, что приводит к появлению ступенчатых артефактов. Вы можете запечь карту с большей глубиной цвета, то есть 16 бит на канал, но так как некоторые рендеры могут работать только с 8-битной картой нормалей, то позже вам может понадобиться конвертировать ее. Поэтому предпочтительным вариантом рендеринга для минимизации проблем с отражающими поверхностями является сглаживание карты нормалей за счет добавления шума. Marmoset Toolbag использует данный метод по умолчанию.

сечений зависит от размера цилиндра.

Если вы используете другой рендер, то сделаете тестовые запечки в .tga и, чтобы исправить видимые артефакты, сделайте следующее:

Запеките карту нормалей при 16/32 глубине битов на канал (в формате .tiff, например). Затем экспорируйте в Photoshop и пересохраните с глубиной цвета 8 бит. Это поможет избавиться от артефактов за счет алгоритма сжатия.

-Мои запечки желтого цвета, а должны быть синего. Что я должен делать?

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

Рисование вручную

Стоит ли исправлять карту нормалей руками? Порой, сталкиваясь с волнистостью на карте нормалей, ошибками проекции или градиентами, если вы не хотите исправлять LP или создавать подходящий кейдж, то существуют способы исправления ошибок в Photoshop с помощью смазывания или чистики карты нормалей. Но это довольно деструктивный подход. Что если кто-то попросит вас внести изменения в модель, и вам придется все перезапекать ? Вы будете делать все исправления заново? Если вы с самого начала с умом подошли к созданию HP и LP, то вам и не придется делать много лишней работы в будущем.

Как добавить детали на карту нормалей. Хорошо, я запек объект, но мне еще не хватает деталей. Как добавить, например, рельеф ткани или другие детали?

Существует множество способов создания дополнительных деталей для карты нормалей. Простой способ – это конвертировать карту высоты в карту нормалей через плагины в Photoshop, Xnormal, Quixel или Substance.

Карта высоты – это карта в градациях серого цвета.

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

Серый – средний слой.

Используя эту технику, вы можете конвертировать карту в серых тонах в карту нормалей.

Приложения для рисования на карте нормалей

С помощью Quixel и Substance Painter добавление деталей на карту нормалей стало достаточно простым процессом. Если вы работаете в SP, то можете с легкостью добавлять рельефные детали через канал Height, который, в свою очередь, автоматически перенесет полученную информацию на канал Normal, из которого вы можете выгрузить карту нормалей с учетом новых деталей.

https://www.allegorithmic.com/products/substance-painter

Также вы можете использовать Quixel Suite 2. Это плагин для Photoshop, позволяющий рисовать прямо на карте нормалей и быстро генерировать детали через внутренние инструменты Photoshop.

http://quixel.se

-----

Читать отзывы про нас: https://school-xyz.com/feedback

Draft Punk. 3D-моделирование объектов

Пройди курс по 3D-моделированию и научись создавать модели для игр. Уроки проходят в онлайн-формате — сможешь вернуться к лекциям в любой момент и освежить свои знания.

Хочешь получать лучшие статьи
от XyZ раз в неделю?

Подпишись на рассылку XyZ

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="google-site-verification" content="3W5japOowboLNjQ8sge1sGCJaL2OOmBZVhLGCNoRjlw" /> <meta name="yandex-verification" content="007f18c3f91cd6ed" /> <!--metatextblock--> <title>Normal Map. Практическое руководство</title> <meta name="description" content="Данное руководство создано для тех, кто стремится понять тему Normal Mapping. Оно написано как для новых людей в индустрии, так и для более опытных, которые хотят освежить знания по теме." /> <meta property="og:url" content="https://www.school-xyz.com/blog/normal-map-prakticheskoe-rukovodstvo" /> <meta property="og:title" content="Normal Map. Практическое руководство" /> <meta property="og:description" content="В этой статье будет много матчасти. Сетка — это технический этап, и он требует понимания технологий. Статья вышла не простой, и мы приложили все усилия, чтобы сделать ее максимально доступной для всех. Прежде чем говорить о работе с lowpoly и highpoly давай разберём из чего состоят все модели и какие особенности игровых движков нужно знать. " /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://static.tildacdn.com/tild3134-3839-4164-b364-373537643438/Normal_map.png" /> <link rel="canonical" href="https://www.school-xyz.com/blog/normal-map-prakticheskoe-rukovodstvo"> <!--/metatextblock--> <meta name="format-detection" content="telephone=no" /> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://ws.tildacdn.com"> <link rel="dns-prefetch" href="https://static.tildacdn.com"> <link rel="shortcut icon" href="https://static.tildacdn.com/tild6462-6438-4164-b332-316331666365/favicon.ico" type="image/x-icon" /> <!-- Assets --> <script src="https://neo.tildacdn.com/js/tilda-fallback-1.0.min.js" async charset="utf-8"></script> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';"/> <link rel="stylesheet" href="https://static.tildacdn.com/ws/project1006203/tilda-blocks-page7852654.min.css?t=1772097554" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-animation-2.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-cover-1.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-popup-1.1.min.css" type="text/css" media="print" onload="this.media='all';" onerror="this.loaderr='y';" /> <noscript><link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-popup-1.1.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-forms-1.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" type="text/css" href="https://ws.tildacdn.com/project1006203/custom.css?t=1772097554"> <script nomodule src="https://static.tildacdn.com/js/tilda-polyfill-1.0.min.js" charset="utf-8"></script> <script type="text/javascript">function t_onReady(func) {if(document.readyState!='loading') {func();} else {document.addEventListener('DOMContentLoaded',func);}}
function t_onFuncLoad(funcName,okFunc,time) {if(typeof window[funcName]==='function') {okFunc();} else {setTimeout(function() {t_onFuncLoad(funcName,okFunc,time);},(time||100));}}function t396_initialScale(t){var e=document.getElementById("rec"+t);if(e){var i=e.querySelector(".t396__artboard");if(i){window.tn_scale_initial_window_width||(window.tn_scale_initial_window_width=document.documentElement.clientWidth);var a=window.tn_scale_initial_window_width,r=[],n,l=i.getAttribute("data-artboard-screens");if(l){l=l.split(",");for(var o=0;o<l.length;o++)r[o]=parseInt(l[o],10)}else r=[320,480,640,960,1200];for(var o=0;o<r.length;o++){var d=r[o];a>=d&&(n=d)}var _="edit"===window.allrecords.getAttribute("data-tilda-mode"),c="center"===t396_getFieldValue(i,"valign",n,r),s="grid"===t396_getFieldValue(i,"upscale",n,r),w=t396_getFieldValue(i,"height_vh",n,r),g=t396_getFieldValue(i,"height",n,r),u=!!window.opr&&!!window.opr.addons||!!window.opera||-1!==navigator.userAgent.indexOf(" OPR/");if(!_&&c&&!s&&!w&&g&&!u){var h=parseFloat((a/n).toFixed(3)),f=[i,i.querySelector(".t396__carrier"),i.querySelector(".t396__filter")],v=Math.floor(parseInt(g,10)*h)+"px",p;i.style.setProperty("--initial-scale-height",v);for(var o=0;o<f.length;o++)f[o].style.setProperty("height","var(--initial-scale-height)");t396_scaleInitial__getElementsToScale(i).forEach((function(t){t.style.zoom=h}))}}}}function t396_scaleInitial__getElementsToScale(t){return t?Array.prototype.slice.call(t.children).filter((function(t){return t&&(t.classList.contains("t396__elem")||t.classList.contains("t396__group"))})):[]}function t396_getFieldValue(t,e,i,a){var r,n=a[a.length-1];if(!(r=i===n?t.getAttribute("data-artboard-"+e):t.getAttribute("data-artboard-"+e+"-res-"+i)))for(var l=0;l<a.length;l++){var o=a[l];if(!(o<=i)&&(r=o===n?t.getAttribute("data-artboard-"+e):t.getAttribute("data-artboard-"+e+"-res-"+o)))break}return r}window.TN_SCALE_INITIAL_VER="1.0",window.tn_scale_initial_window_width=null;</script> <script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-scripts-3.0.min.js" charset="utf-8" defer onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/ws/project1006203/tilda-blocks-page7852654.min.js?t=1772097554" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-lazyload-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-animation-2.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-cover-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/hammer.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-1.1.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-vote-1.1.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-popup-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-forms-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-forms-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-scale-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-events-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <!-- nominify begin --><script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "Курс геймдев",
        "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": 5.0,
        "ratingCount": 3719,
        "reviewCount": 3828
      }
    }
</script> <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "XYZ",
            "item": "https://www.school-xyz.com/"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Курсы",
            "item": "https://www.school-xyz.com/courses"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "💥Скидки до 50%",
            "item": "https://www.school-xyz.com/courses#all"
        }
    ]
}
</script> <script>
// скрипт для стилизации попапов с работами студентов при переходе по прямой ссылке на этот попап
if (window.location.pathname.includes('/tpost')) {
    $('head').append('<link rel="stylesheet" href="https://landing-cdn.school-xyz.com/tpostTildaStyle.css?v=1" type="text/css">');
}
</script> <script>
document.addEventListener('DOMContentLoaded', function() {
    var allRec = document.getElementById('allrecords');
    if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
});
</script> <script type="text/javascript" id="advcakeAsync">
(function (a) {
    var b = a.createElement("script");
    b.async = 1;
    b.src = "//0gs25f.ru/";
    a=a.getElementsByTagName("script")[0]; a.parentNode.insertBefore(b,a)
})(document);
</script> <!-- <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/promosTildaScript.js?v=4"></script> --> <!-- отвечает за работу промобара --> <!-- <link rel="stylesheet" href="https://learn.school-xyz.com/tilda-static/public/promosTildaStyle.css?v=7"> --> <!-- стили для промобара --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/saveUrlGetParamsTildaScript.js"></script> <!-- <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/formsSubmittionTildaScript.js"></script> --> <!-- что-то про регистрацию на интро курсы --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/platformDataAutoFillTildaScript.js?v=8"></script> <!-- автоматизация цен, рассрочка, даты, скидка... --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/preValidatePhoneTildaScript.js"></script> <!-- валидация телефонного номера для любых форм на страницах --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/formsAutoFillTildaScript.js"></script> <!-- автозаполнение форм, только имя и почта --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/formValidateYmClientTildaScript.js"></script> <!-- модуль CPA-интеграций https://t.me/dmitmix --> <script>
const script = document.createElement('script');
script.src = `https://landing-cdn.school-xyz.com/js/xyzCpa.js?v=${Date.now()}`;
document.head.appendChild(script);
</script> <!-- Solo Start --> <script src="https://sologpt.ru/xyz_integration/sologpt.iife.js" defer></script> <!-- Solo End --> <!-- Carrot quest BEGIN --> <script type="text/javascript">
!function(){function t(t,e){return function(){window.carrotquestasync.push(t,arguments)}}if("undefined"==typeof carrotquest){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.carrotquest.app/api.min.js",document.getElementsByTagName("head")[0].appendChild(e),window.carrotquest={},window.carrotquestasync=[],carrotquest.settings={};for(var n=["connect","track","identify","auth","onReady","addCallback","removeCallback","trackMessageInteraction"],a=0;a<n.length;a++)carrotquest[n[a]]=t(n[a])}}(),carrotquest.connect("68058-4eec889da0f5c5a357581273a3");
</script> <!-- Carrot quest END --> <!-- UE admin BEGIN --> <link rel="stylesheet" href="https://tilda.ultimate.education/styles.css"> <script type="text/javascript" src="https://tilda.ultimate.education/index.js" apiUrl="https://product.it.ultimate.education" id="replacer" school="XYZ" currency="RUB" apiVersion="v3"></script> <!-- UE admin END --> <script>
/* привязка виджета чата к скролу, чтобы не было наложения с промобаром */
function findChatWidget() {
    let chatWidget = $('#carrotquest-messenger-collapsed-container');
    let promoBar = document.querySelector('.uc-promobar');
    
    if (chatWidget.length == 1 && promoBar !== null) {
        console.log('виджет чата и промобар найдены!');
        
        if (promoBar.clientHeight != 0) {
            let promobarHeight = promoBar.clientHeight + 8;
            console.log('Высота промобара: ' + promobarHeight);
            
            document.querySelector('.t-body').style.setProperty('--dynamic-bottom', ' ' + promobarHeight + 'px');
            
            $('.promobar__hide-btn').on('click', function() {
                $('.t-body').addClass('hide-promobar');
            });
            
            let scrolledAmo = $(document).scrollTop();
            let bodyHeightAmo = $(document).height() - ($(window).height() + 250);
            if ( scrolledAmo > 250 && scrolledAmo < bodyHeightAmo ) { 
            	$('.t-body').addClass('show-promobar');
            } else {
            	$('.t-body').removeClass('show-promobar');
            }
            
            $(document).scroll(function() {
            	let scrolledAmo = $(document).scrollTop();
            	let bodyHeightAmo = $(document).height() - ($(window).height() + 250);
            	if ( scrolledAmo > 250 && scrolledAmo < bodyHeightAmo ) { 
            		$('.t-body').addClass('show-promobar');
            	} else {
            		$('.t-body').removeClass('show-promobar');
            	}
            });
        }
    } else {
        setTimeout(function() {
            console.log('виджет чата и/или промобар не найдены');
            findChatWidget();
        }, 1000);
    }
}

findChatWidget();
/* end привязка виджета чата к скролу, чтобы не было наложения с промобаром */
</script> <!-- Pixel victorycorp --> <script type="text/javascript">
(function (d, w) {
    var n = d.getElementsByTagName("script")[0],
        s = d.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://victorycorp.ru/index.php?ref="+d.referrer+"&page=" + encodeURIComponent(w.location.href);
        n.parentNode.insertBefore(s, n);
})(document, window);
</script> <!-- /Pixel victorycorp --><!-- nominify end --><script type="text/javascript">window.dataLayer=window.dataLayer||[];</script> <!-- Google Tag Manager --> <script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-KTCCH4H');</script> <!-- End Google Tag Manager --> <script type="text/javascript">(function() {if((/bot|google|yandex|baidu|bing|msn|duckduckbot|teoma|slurp|crawler|spider|robot|crawling|facebook/i.test(navigator.userAgent))===false&&typeof(sessionStorage)!='undefined'&&sessionStorage.getItem('visited')!=='y'&&document.visibilityState){var style=document.createElement('style');style.type='text/css';style.innerHTML='@media screen and (min-width: 980px) {.t-records {opacity: 0;}.t-records_animated {-webkit-transition: opacity ease-in-out .2s;-moz-transition: opacity ease-in-out .2s;-o-transition: opacity ease-in-out .2s;transition: opacity ease-in-out .2s;}.t-records.t-records_visible {opacity: 1;}}';document.getElementsByTagName('head')[0].appendChild(style);function t_setvisRecs(){var alr=document.querySelectorAll('.t-records');Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_animated");});setTimeout(function() {Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_visible");});sessionStorage.setItem("visited","y");},400);}
document.addEventListener('DOMContentLoaded',t_setvisRecs);}})();</script></head> <body class="t-body" style="margin:0;"> <!--allrecords--> <div id="allrecords" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="1006203" data-tilda-page-id="7852654" data-tilda-page-alias="blog/normal-map-prakticheskoe-rukovodstvo" data-tilda-formskey="89ebde3c6fe46b219c249763fe551eda" data-tilda-stat-scroll="yes" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes" data-tilda-ts="y" data-tilda-project-country="RU"> <!--header--> <header id="t-header" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="1006203" data-tilda-page-id="20568317" data-tilda-formskey="89ebde3c6fe46b219c249763fe551eda" data-tilda-stat-scroll="yes" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes" data-tilda-ts="y" data-tilda-project-country="RU"> <div id="rec1229679181" class="r t-rec" style=" " data-animationappear="off" data-record-type="121" data-alias-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- НОВЫЙ ХЕДЕР от 15.08.25 --> <!-- 17.09.25 замена всех иконок и картинки в блоке с тестом. Удаление пункта меню Вебинары --> <!-- 19.12.25 заменил пункт меню Бесплатные курсы на Вводный урок с консультантом --> <div class="header__overlay" style="display: none"></div> <header class="header__container"> <div class="header__wrapper"> <a href="/" class="header__logo"> <img class="header__logo_dark" src="https://static.tildacdn.com/tild3538-3936-4030-a562-643962313938/Logo-dark.svg" alt="XYZ School logo"> </a> <nav class="header__items-container"> <ul class="header__items-wrapper"> <li class="header__item header__item-all-courses"> <div class="header__item-link">Все курсы</div> </li> <li class="header__item"> <a href="https://www.school-xyz.com/trial-lesson" class="header__item-link">Вводный урок с консультантом</a> </li> </ul> <a href="https://learn.school-xyz.com/" target="_blank" class="header__members-btn">Личный кабинет</a> </nav> <div class="menu burger-btn"> <div class="icon-left"></div> <div class="icon-right"></div> </div> </div> <div class="menu__wrapper"> <div class="menu-left"> <nav class="menu-left__course-direction"> <ul class="menu-left__course-direction-list"> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/courses" class="menu-left__course-direction-link" data-direction-name="all-courses"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3434-6264-4637-a535-373532313833/Frame_2087329259_1.jpg" alt="Иконка направления Все курсы"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Все курсы</div> <div class="menu-left__course-direction-quontity-courses">37 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/3d-modelirovanie" class="menu-left__course-direction-link" data-direction-name="3d"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild6632-3831-4331-a264-636330373331/3D-_1.jpg" alt="Иконка направления 3D-моделирование"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">3D-моделирование</div> <div class="menu-left__course-direction-quontity-courses">15 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/2d-illyustraciya" class="menu-left__course-direction-link" data-direction-name="2d"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3830-3537-4234-b833-633466333735/2D-_1.jpg" alt="Иконка направления 2D-иллюстрация"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">2D-иллюстрация</div> <div class="menu-left__course-direction-quontity-courses">8 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/geymdizayn" class="menu-left__course-direction-link" data-direction-name="gamedesign"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3461-3239-4635-a138-383032306664/gamedesign_1.jpg" alt="Иконка направления Геймдизайн"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Геймдизайн</div> <div class="menu-left__course-direction-quontity-courses">4 курса</div> </div> </a> </li> </ul> <ul class="menu-left__course-direction-list"> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/programmirovanie" class="menu-left__course-direction-link" data-direction-name="gamecode"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild6533-3234-4231-a361-356136613038/_1.jpg" alt="Иконка направления Программирование"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Программирование</div> <div class="menu-left__course-direction-quontity-courses">8 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/video-i-speceffekty" class="menu-left__course-direction-link" data-direction-name="vfx"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild6562-3931-4937-b035-363239373230/___1.jpg" alt="Иконка направления Видео и спецэффекты"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Видео и спецэффекты</div> <div class="menu-left__course-direction-quontity-courses">3 курса</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/menedzhement" class="menu-left__course-direction-link" data-direction-name="business"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3165-6365-4236-b463-643730363733/management_1.jpg" alt="Иконка направления Менеджмент"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Менеджмент</div> <div class="menu-left__course-direction-quontity-courses">1 курс</div> </div> </a> </li> </ul> </nav> </div> <div class="menu-right"> <div class="menu-right__test-tags-wrap"> <div class="menu-right__test-tag">Тест</div> <div class="menu-right__test-tag">5 минут</div> </div> <h3 class="menu-right__test-heading">Какая профессия тебе подходит?</h3> <a href="https://www.school-xyz.com/proforientaciya" class="menu-right__test-button">Пройти тест</a> </div> <div class="menu-left__bottom-info"> <ul class="menu-left__bottom-info-list"> <li class="menu-left__bottom-info-link"> <a href="https://www.school-xyz.com/trial-lesson" target="_blank">Вводный урок с консультантом</a> </li> </ul> <a href="https://learn.school-xyz.com/" target="_blank" class="header__members-btn">Личный кабинет</a> </div> </div> </header> <style>
:root header {
    font-family: 'BebasRoboto';
    --color-bg: #17171b;
    --color-bg-menu-open: #23232A;
    --color-text: #fff;
    --color-bg-lk-btn: #2b2b34;
    --color-text-opacity: rgb(206 206 222 / 50%);
    --color-accent: #8e8eff;
    --color-black: #17171b;
    --color-border: #373742;
    --color-burger-line: #fff;
    --color-burger-bg: #22222e;
    --color-button: #6060ff;
}

#allrecords header ul {
    padding-left: 0;
    margin-bottom: 0;
}

#allrecords header a {
    color: inherit;
}

.header__overlay {
    position: fixed;
    inset: 0;
    cursor: pointer;
    z-index: 998;
    background: rgb(0 0 0 / 50%);
    -webkit-tap-highlight-color: transparent;
}

/* Бургер меню */
.burger-btn {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
    transition-duration: 0.5s;
    border-radius: 22px;
    cursor: pointer;
    transform: scale(0.8);
    visibility: visible;
    opacity: 1;
}

.burger-btn.open {
    background: var(--color-burger-bg);
    visibility: visible;
    opacity: 1;
}

.burger-btn .icon-left {
    transition-duration: 0.5s;
    position: absolute;
    width: 12px;
    height: 2px;
    top: 19px;
    background-color: var(--color-burger-line);
    left: 9px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.burger-btn.open .icon-left {
    transition-duration: 0.3s;
    background: transparent;
}

.burger-btn .icon-left:before {
    transition-duration: 0.3s;
    position: absolute;
    width: 12px;
    height: 2px;
    background-color: var(--color-burger-line);
    content: "";
    top: -8px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.burger-btn.open .icon-left:before {
    transform: rotateZ(45deg) scaleX(1.1) translate(2.5px, 2px);
}

.burger-btn .icon-left:after {
    transition-duration: 0.3s;
    position: absolute;
    width: 12px;
    height: 2px;
    background-color: var(--color-burger-line);
    content: "";
    top: 8px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.burger-btn.open .icon-left:after {
    transform: rotateZ(-45deg) scaleX(1.1) translate(2.5px, -2px);
}

.burger-btn .icon-right {
    transition-duration: 0.3s;
    position: absolute;
    width: 12px;
    height: 2px;
    top: 19px;
    background-color: var(--color-burger-line);
    left: 21px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.burger-btn.open .icon-right {
    transition-duration: 0.3s;
    background: transparent;
}

.burger-btn .icon-right:before {
    transition-duration: 0.3s;
    position: absolute;
    width: 12px;
    height: 2px;
    background-color: var(--color-burger-line);
    content: "";
    top: -8px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.burger-btn.open .icon-right:before {
    transform: rotateZ(-45deg) scaleX(1.1) translate(-3.5px, 1px);
}

.burger-btn .icon-right:after {
    transition-duration: 0.3s;
    position: absolute;
    width: 12px;
    height: 2px;
    background-color: var(--color-burger-line);
    content: "";
    top: 8px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.burger-btn.open .icon-right:after {
    transform: rotateZ(45deg) scaleX(1.1) translate(-3.5px, -1px);
}
/* Конец бургер меню */

header.header__container {
    position: fixed;
    background: transparent;
    width: 100%;
    z-index: 999;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: border-radius 0.3s ease, background 0.3s ease 0.3s, transform 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
}

header.header__container.open {
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    background: var(--color-bg-menu-open);
    transition: border-radius 0.3s ease, background 0.3s ease 0s, transform 0.3s ease;
}

header.header__container.main-header--bg_scroll {
    background: var(--color-bg);
    transition: border-radius 0.3s ease, background 0.3s ease 0s, transform 0.3s ease;
}

header.header__container.main-header--bg_scroll.open {
    background: var(--color-bg-menu-open);
}

header.header__container.out {
    transform: translateY(-100%);
}

header.header__container.open.out {
    transform: none;
}

header a {
    color: inherit;
    text-decoration: none;
}

header ul {
    list-style: none;
}

.header__wrapper {
    position: relative;
    display: flex;
    max-width: 1160px;
    margin: 0 auto;
    padding: 20px 0;
}

.header__wrapper:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--color-border);
    opacity: 0;
}

.header__container.open .header__wrapper:after {
    opacity: 1;
    transition: .3s ease;
}

a.header__logo {
    display: flex;
    margin-right: 48px;
}

.header__items-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-right: 10px;
}

ul.header__items-wrapper {
    display: flex;
    align-items: center;
    column-gap: 40px;
}

li.header__item {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--color-text);
    transition: .3s ease;
}

li.header__item.header__item-all-courses_open {
    color: var(--color-accent);
}

a.header__item-link, .header__item-link {
    display: block;
}

ul.header__items-wrapper li.header__item-all-courses {
    cursor: pointer;
}

ul.header__items-wrapper li.header__item-all-courses .header__item-link::after {
    content: '';
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    margin-left: 10px;
    transition: .3s ease;
    border-width: 0 0 1.5px 1.5px;
    border-color: var(--color-text);
    border-style: solid;
    transform: rotateZ(315deg) translate(1px, -2px);
}

ul.header__items-wrapper li.header__item-all-courses_open .header__item-link::after {
    transform: rotateZ(135deg) translate(1px, -1px);
    border-color: var(--color-accent);
}

#allrecords a.header__members-btn {
    display: flex;
    align-items: center;
    width: fit-content;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    background: var(--color-bg-lk-btn);
    border: 0;
    border-radius: 30px;
    padding: 8px 24px;
    color: var(--color-text);
    text-decoration: none;
    transition: .2s ease;
}

#allrecords .header__container.open .header__members-btn {
    background: var(--color-bg-lk-btn);
}

#allrecords a.header__members-btn:hover {
    background: var(--color-button);
    color: #fff;
}

#allrecords .header__container.open .header__members-btn:hover {
    background: var(--color-button);
}

.menu__wrapper {
    display: flex;
    column-gap: 16px;
    max-width: 1160px;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding: 0;
    transition: .3s ease;
    overflow: hidden;
    box-sizing: border-box;
}

.menu__wrapper.menu__wrapper_active {
    opacity: 1;
    visibility: visible;
    max-height: 100vh;
    padding: 32px 0;
}

.menu-left {
    width: 100%;
    max-width: 572px;
}

nav.menu-left__course-direction {
    display: flex;
    column-gap: 16px;
}

ul.menu-left__course-direction-list {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    width: 100%;
}

li.menu-left__course-direction-item {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}

a.menu-left__course-direction-link {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    height: 64px;
    padding: 8px;
    border-radius: 16px;
    transition: .2s ease;
    box-sizing: border-box;
}

@media (hover: hover) {
    #allrecords a.menu-left__course-direction-link:hover {
        background-color: #2b2b35;
    }
}

.menu-left__course-direction-icon {
    height: 100%;
    border-radius: 8px;
}

.menu-left__course-direction-quontity-courses {
    font-size: 14px;
    color: var(--color-text-opacity);
}

.menu-left__bottom-info {
    width: 100%;
}

ul.menu-left__bottom-info-list {
    display: flex;
    flex-direction: row;
    column-gap: 30px;
}

#allrecords ul.menu-left__bottom-info-list {
    margin-bottom: 0;
}

li.menu-left__bottom-info-link {
    font-size: 14px;
    line-height: 30px;
    color: var(--color-text);
}

li.menu-left__bottom-info-link a {
    transition: .2s ease;
}

#allrecords li.menu-left__bottom-info-link a:hover {
    color: var(--color-accent);
}

#allrecords .menu-left__bottom-info a.header__members-btn {
    display: none;
}

.menu-right {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    width: 100%;
    max-width: 572px;
    background-color: #2b2b35;
    background-image: url(https://static.tildacdn.com/tild3264-3531-4533-b066-653232386336/Desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding: 24px;
    border-radius: 16px;
    color: var(--color-text);
    box-sizing: border-box;
}

.menu-right__test-tags-wrap {
    display: flex;
    column-gap: 8px;
}

.menu-right__test-tag {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    padding: 4px 12px;
    background: #3b3b47;
    border-radius: 30px;
    color: var(--color-text);
}

.menu-right__test-heading {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    width: 184px;
}

.menu-right__test-button {
    width: fit-content;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    background: var(--color-button);
    padding: 10px 24px;
    margin-top: auto;
    border-radius: 50px;
    transition: .2s ease;
}

#allrecords .menu-right__test-button:hover {
    background: var(--color-text);
    color: var(--color-black);
}

@media screen and (min-width: 1200px) {
    .header__items-container {
        margin-right: 0;
    }
    .burger-btn {
        display: none;
    }
    li.header__item:hover {
        color: var(--color-accent);
    }
    ul.header__items-wrapper li.header__item-all-courses:hover .header__item-link::after {
        border-color: var(--color-accent);
    }
}

@media screen and (min-width: 960px) {
    .menu-left__bottom-info {
        display: none;
    }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .menu-right {
        background-image: url(https://static.tildacdn.com/tild6438-6533-4036-a435-623266623239/Tablet_Horizontal.jpg);
    }
}

@media screen and (max-width: 1199px) {
    .t-body.open-menu {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }
    header.header__container.open {
        border-bottom-left-radius: 32px;
        border-bottom-right-radius: 32px;
    }
    .header__wrapper {
        max-width: 940px;
        padding: 12px 0;
    }
    .header__wrapper:after {
        width: 100%;
    }
    .menu__wrapper {
        max-width: 940px;
        padding: 0;
    }
    .menu-left {
        max-width: 544px;
    }
    
    .menu-left__course-direction-link {
        display: block;
        width: fit-content;
    }
    
    .menu-right {
        max-width: 380px;
    }
}

@media screen and (max-width: 959px) {
    header.header__container {
        position: fixed;
        overflow: auto;
    }
    header.header__container.open {
        height: fit-content;
        max-height: 100%;
        /*background: var(--color-bg);*/
        transition: border-radius 0.3s ease, background 0s ease 0s, transform 0.3s ease;
    }
    .header__wrapper {
        position: sticky;
        top: 0;
        justify-content: space-between;
        max-width: 620px;
        padding: 12px 0;
        /*background: var(--color-bg);*/
        transition: .3s ease;
        z-index: 99;
        box-sizing: border-box;
    }
    .header__wrapper:after {
        width: 100%;
    }
    header.header__container.open .header__wrapper {
        background: var(--color-bg-menu-open);
        /*transition: none;*/
    }
    nav.header__items-container {
        justify-content: end;
    }
    .header__items-container .header__items-wrapper {
        display: none;
    }
    .menu__wrapper {
        flex-wrap: wrap;
        max-width: 620px;
        padding: 0;
    }
    .menu__wrapper.menu__wrapper_active {
        max-height: fit-content;
        padding: 20px 0 32px;
        row-gap: 24px;
    }
    .menu-left {
        max-width: 100%;
        height: max-content;
    }
    
    ul.menu-left__course-direction-list {
        width: 50%;
    }
    
    .menu-left__course-direction-link {
        width: 100%;
    }
    
    .menu-left__bottom-info {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        row-gap: 32px;
    }
    ul.menu-left__bottom-info-list {
        row-gap: 8px;
    }
    #allrecords ul.menu-left__bottom-info-list {
        align-items: start;
        flex-direction: column;
    }
    
    .menu-right {
        max-width: 100%;
        height: 292px;
        margin-bottom: 8px;
        /*background-position-y: -134px;*/
    }
}

@media screen and (max-width: 639px) {
    header.header__container {
        height: 58px;
    }
    header.header__container.open {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        height: 100%;
    }
    .header__wrapper {
        padding: 9px 10px;
    }
    .header__logo img {
        width: 28px;
    }
    .header__wrapper:after {
        width: calc(100% - 20px);
    }
    .header__items-container {
        display: none;
    }
    .menu__wrapper {
        align-content: flex-start;
        padding: 0 10px;
    }
    .menu__wrapper.menu__wrapper_active {
        padding: 16px 10px 48px;
    }
    
    nav.menu-left__course-direction {
        flex-direction: column;
        row-gap: 8px;
    }
    
    ul.menu-left__course-direction-list {
        width: 100%;
        row-gap: 8px;
    }
    
    li.menu-left__course-direction-item {
        font-size: 14px;
    }
    .menu-left__bottom-info {
        row-gap: 16px;
    }
    #allrecords .menu-left__bottom-info a.header__members-btn {
        display: block;
    }
    
    .menu-right {
        height: 232px;
        padding: 16px;
        margin-bottom: 0;
        row-gap: 12px;
        /*background-position: -106px center;*/
        /*background-size: 138%;*/
        background-image: url(https://static.tildacdn.com/tild3930-6233-4836-b332-636433393662/Mobile.jpg);
    }
    
    .menu-right__test-tags-wrap {
        column-gap: 4px;
    }
    
    .menu-right__test-tag {
        font-size: 10px;
        line-height: 1.6;
    }
    
    .menu-right__test-heading {
        font-size: 14px;
        width: 134px;
    }
    
    .menu-right__test-button {
        font-size: 14px;
        line-height: 1.2;
    }
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
    // добавляем фон хедеру, если страница прокручена больше чем на 50 пикселей
    setTimeout(function() {
        if (document.documentElement.scrollTop > 50) {
            $('.header__container').addClass('main-header--bg_scroll');
        }
    }, 2000);
    
    $(window).scroll(function() {
        let offsetTopByHeader = 50;
        let classBgHeader = 'main-header--bg_scroll';

        let header = $('.header__container');

        if ($(this).scrollTop() >= offsetTopByHeader) {
            header.addClass(classBgHeader);
        } else {
            header.removeClass(classBgHeader);
        }
    });
    
    // скрываем/показываем хедер по скролу
    const header = $('.header__container');
    let scrollPrev = 0;
    
    $(window).scroll(function() {
    	const scrolled = $(window).scrollTop();
    	if (scrolled > 550 && scrolled > scrollPrev) {
    		header.addClass('out');
    	} else {
    		header.removeClass('out');
    	}
    	scrollPrev = scrolled;
    });
    
    $('.menu-left__bottom-info-link a').click(function() {
        $('.menu').trigger('click');
    });
    
    if (document.documentElement.clientWidth >= 1200) {
        $('.header__item-all-courses').mouseenter(function() {
            $('.header__item-all-courses').addClass('header__item-all-courses_open');
            $('.menu__wrapper').addClass('menu__wrapper_active');
            $('.header__overlay').fadeIn('linear');
            $('.menu').addClass('open');
            $('.header__container').addClass('open');
            $('.t-body').addClass('open-menu');
        });
        
        $('.header__container').mouseleave(function() {
            $('.header__item-all-courses').removeClass('header__item-all-courses_open');
            $('.menu__wrapper').removeClass('menu__wrapper_active');
            $('.header__overlay').fadeOut('linear');
            $('.menu').removeClass('open');
            $('.header__container').removeClass('open');
            $('.t-body').removeClass('open-menu');
        });
    }
    
    if (document.documentElement.clientWidth < 1200) {
        $('.header__item-all-courses, .header__overlay, .menu').click(function() {
            $('.header__item-all-courses').toggleClass('header__item-all-courses_open');
            $('.menu__wrapper').toggleClass('menu__wrapper_active');
            $('.header__overlay').fadeToggle('linear');
            $('.menu').toggleClass('open');
            $('.header__container').toggleClass('open');
            $('.t-body').toggleClass('open-menu');
        });
    }
});
</script> <!-- nominify end --> </div> </div> </div> </div> </header> <!--/header--> <div id="rec136990685" class="r t-rec" style=" " data-animationappear="off" data-record-type="18"> <!-- cover --> <div class="t-cover" id="recorddiv136990685"bgimgfield="img"style="height:100vh;background-image:url('https://thb.tildacdn.com/tild6135-6433-4661-a466-313334663534/-/resize/20x/Normal_map.png');"> <div class="t-cover__carrier" id="coverCarry136990685"data-content-cover-id="136990685"data-content-cover-bg="https://static.tildacdn.com/tild6135-6433-4661-a466-313334663534/Normal_map.png"data-display-changed="true"data-content-cover-height="100vh"data-content-cover-parallax="fixed"data-content-use-image-for-mobile-cover=""style="height:100vh; "itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="image" content="https://static.tildacdn.com/tild6135-6433-4661-a466-313334663534/Normal_map.png"></div> <div class="t-cover__filter" style="height:100vh;background-image: linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0.60));"></div> <div class="t-container"> <div class="t-col t-col_12 "> <div class="t-cover__wrapper t-valign_middle" style="height:100vh;"> <div class="t001 t-align_center"> <div class="t001__wrapper" data-hook-content="covercontent"> <div class="t001__uptitle t-uptitle t-uptitle_sm" field="subtitle">Блог xyz school</div> <h1 class="t001__title t-title t-title_xl" field="title">Normal Map. Практическое руководство<br /></h1> <span class="space"></span> </div> </div> </div> </div> </div> <!-- arrow --> <div class="t-cover__arrow"><div class="t-cover__arrow-wrapper t-cover__arrow-wrapper_animated"><div class="t-cover__arrow_mobile"><svg role="presentation" class="t-cover__arrow-svg" style="fill:#ffffff;" x="0px" y="0px" width="38.417px" height="18.592px" viewBox="0 0 38.417 18.592" style="enable-background:new 0 0 38.417 18.592;"><g><path d="M19.208,18.592c-0.241,0-0.483-0.087-0.673-0.261L0.327,1.74c-0.408-0.372-0.438-1.004-0.066-1.413c0.372-0.409,1.004-0.439,1.413-0.066L19.208,16.24L36.743,0.261c0.411-0.372,1.042-0.342,1.413,0.066c0.372,0.408,0.343,1.041-0.065,1.413L19.881,18.332C19.691,18.505,19.449,18.592,19.208,18.592z"/></g></svg></div></div></div> <!-- arrow --> </div> <style> #rec136990685 .t001__uptitle{text-transform:uppercase;}</style> </div> <div id="rec136990687" class="r t-rec t-rec_pt_60 t-rec_pb_15" style="padding-top:60px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Перевод <a href="http://t.me/nocstrig">Леонида Садекова</a> для <a href="https://vk.com/xyz_gamedev">школы XYZ</a>, книги <strong></strong> <a href="https://polycount.com/discussion/146667/a-practical-guide-on-normal-mapping-for-games">Practical Guide on Normal Mapping for games by Alexey Oshchepkov (Superfranky)</a> <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 32px;"><span data-redactor-style="color: rgb(255, 255, 255);" style="color: rgb(255, 255, 255);">Введение</span></span></strong><br /> Данное руководство создано для тех, кто стремится понять тему Normal Mapping. Оно написано как для новых людей в индустрии, так и для более опытных, которые хотят освежить знания по теме. Здесь я постараюсь рассмотреть каждую возможную проблему и предоставить простой и доступный ответ. Надеюсь, что это руководство даст вам все необходимое о Normal Mapping и о том, как его применять. Проблемы с Normal Mapping не должны стоять на пути вашего творчества!<br /><em>Отдельное спасибо EarthQuake с Polycount за вдохновение на создание этого гайда.</em> <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 26px;">Условия использования</span><br /></strong>Пожалуйста, уважайте работу автора и не копируйте текст руководства никуда, кроме Polycount, без моего разрешения (Superfranky). Если вы увидели ошибку или хотите что-то добавить, то, пожалуйста, напишите мне на Polycount или отправьте письмо на networkcat2@hotmail.com. <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 26px;">Примечание</span><br /></strong>Перевод подготовлен специально для школы компьютерной графики XYZ. Некоторые главы, после согласования с автором, были расширены или обновлены для большей актуальности. Следовательно, некоторые части текста могут отсутствовать в оригинальном руководстве. По вопросам перевода пишите на nocstrig@yandex.ru. (Леонид Садеков) <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 32px;"><span data-redactor-style="color: rgb(153, 153, 153);" style="color: rgb(153, 153, 153);"><span data-redactor-tag="span" style="font-size: 26px;">Источники</span></span></span><br /></strong>Помимо оригинального руководства были использованы дополнительные источники информации: <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 32px;"><span data-redactor-style="color: rgb(255, 255, 255);"><em data-redactor-tag="em"><span style="color: rgb(153, 153, 153);"><span data-redactor-style="font-size: 26px;" style="font-size: 26px;">A Practical Guide on Normal Mapping For Games:</span></span></em></span></span><br /></strong><a href="http://polycount.com/discussion/146667/a-practical-guide-on-normal-mapping-for-games">http://polycount.com/discussion/146667/a-practical-guide-on-normal-mapping-for-games</a> <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 32px;"><span data-redactor-style="color: rgb(255, 255, 255);"><em data-redactor-tag="em"><span style="color: rgb(153, 153, 153);"><span data-redactor-style="font-size: 26px;" style="font-size: 26px;">You're making me hard. Making sense of hard edges, uvs, normal maps and vertex counts:</span></span></em></span></span><br /></strong><a href="http://polycount.com/discussion/107196/youre-making-me-hard-making-sense-of-hard-edges-uvs-normal-maps-and-vertex-counts">http://polycount.com/discussion/107196/youre-making-me-hard-making-sense-of-hard-edges-uvs-normal-maps-and-vertex-counts</a> <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 32px;"><span data-redactor-style="color: rgb(255, 255, 255);"><em data-redactor-tag="em"><span style="color: rgb(153, 153, 153);"><span data-redactor-style="font-size: 26px;" style="font-size: 26px;">The Toolbag Baking Tutorial:</span></span></em></span></span><br /></strong><a href="https://www.marmoset.co/posts/toolbag-baking-tutorial/">https://www.marmoset.co/posts/toolbag-baking-tutorial/</a> <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 32px;"><span data-redactor-style="color: rgb(255, 255, 255);"><em data-redactor-tag="em"><span style="color: rgb(153, 153, 153);"><span data-redactor-style="font-size: 26px;" style="font-size: 26px;">Understanding averaged normals and ray projection:</span></span></em></span></span><br /></strong><a href="http://polycount.com/discussion/81154/understanding-averaged-normals-and-ray-projection-who-put-waviness-in-my-normal-map">http://polycount.com/discussion/81154/understanding-averaged-normals-and-ray-projection-who-put-waviness-in-my-normal-map</a> <br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);">Техническая информация</span><br /></span></strong><br /> В данной главе я постараюсь предоставить всю техническую информацию связанную c Normal Mapping , наиболее простым языком, без отвлечения на сторонние темы, которые напрямую не относятся к созданию игровых моделей. <br /><br /> Normal Mapping – это технология, используемая для имитации неровностей поверхности на объекте. Она применяется, чтобы сделать вашу финальную модель более похожей на ее HP (High Poly) версию. С ее помощью можно добить различные детали, которые нельзя передать через геометрию из-за ограничений полигонажа на вашем проекте, и заставить вашу модель выглядеть более скругленной для лучшей передачи освещенности и большей реалистичности. <br /><br /> Карты нормалей – это RGB изображения, где каждый из каналов (красный, зелёный, синий) интерпретируется в X, Y и Z координаты нормалей поверхности соответственно. Красный канал пространства касательных карты нормалей отвечает за ось X (нормали направленны влево или вправо), зелёный канал за ось Y (нормали направлены вверх или вниз) и синий канал за ось Z (нормали направлены прямо от поверхности).<br /></div></div> </div> </div> </div> <style> #rec136990687 .t-text{color:#ffffff;}</style> </div> <div id="rec137063378" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3266-3731-4632-b332-633339356165/b2YxkvLJX2A.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3266-3731-4632-b332-633339356165/-/empty/b2YxkvLJX2A.jpg" data-original="https://static.tildacdn.com/tild3266-3731-4632-b332-633339356165/b2YxkvLJX2A.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990689" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><span style="font-size: 32px;"><span style="color: rgb(255, 255, 255);"><strong>Пространство касательных (Tangent Space)</strong> </span></span><br /><br /> Прежде чем мы перейдем к моделированию и запеканию, я должен рассказать вам о том, что такое пространство касательных (Tangent Space). Самый распространенный тип карты нормалей, залитый синим цветом и встречающиеся повсюду в интернете, называется картой нормалей пространства касательных (Tangent Space Normal Map). <br /><br /> В мире 3D существует множество координатных систем: мировое пространство, локальное пространство, пространство камеры и т.д. Пространство касательных – очередная координатная система со своим назначением. Она используется ради обозначения текстурных координат для поверхности полигона. Вы уже, вероятно, знакомы с UV координатами. Тогда представьте, что ось X сонаправлена с V, а ось Y с U. Теперь у нас есть координаты модели, представленные в 2D пространстве. Но координатной системе необходима третья ось для существования в 3D пространстве и для этого нам необходима нормаль поверхности (N). В координатах пространства касательных нормаль поверхности отвечает за ось Z в мировых координатах. <br /><br /></div></div> </div> </div> </div> <style> #rec136990689 .t-text{color:#ffffff;}</style> </div> <div id="rec137017477" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3862-6361-4466-a233-623537666635/QP0xgWRdL4I.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3862-6361-4466-a233-623537666635/-/empty/QP0xgWRdL4I.jpg" data-original="https://static.tildacdn.com/tild3862-6361-4466-a233-623537666635/QP0xgWRdL4I.jpg"
imgfield="img"
alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">На этом изображении представлены мировые координаты внизу слева и координаты пространства касательных, привязанные к полигону, состоящему из двух треугольников</div></div> </div> </div> </div> </div> <div id="rec137018215" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3436-3166-4366-a265-636330633764/T_Eo6io2EY0.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3436-3166-4366-a265-636330633764/-/empty/T_Eo6io2EY0.jpg" data-original="https://static.tildacdn.com/tild3436-3166-4366-a265-636330633764/T_Eo6io2EY0.jpg"
imgfield="img"
alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">Это изображение позволяет представить координаты на самой распространенной форме – на кубе</div></div> </div> </div> </div> </div> <div id="rec136990691" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Оси U, V и N обозначают направления, в которых их значения изменяются вдоль поверхности, так же как X, Y, Z представляют направления, в которых изменяются их значения в мировых координатах. <br /><br /> Это означает, что мы можем передавать координаты пространства касательных через RGB каналы карты нормалей. Красный канал ответственен за ось U, синий за N, а зелёный за V. <br /><br /> Говоря простым языком, красный канал обозначает лево и право; зеленый - верх и низ; синий – вертикаль от поверхности. <br /><br /> Если вы увидите, что модель с применённой картой нормалей освещается не правильно, притом что используется карта нормалей пространства касательных, то, возможно, шейдеру необходимо передать красный или зелёный канал (или оба) инвертированными. Для этого измените настройки шейдера или вручную инвертируйте соответствующий канал в Photoshop, чтобы темные пиксели стали светлыми или наоборот. <br /><br /> Дело в том, что разные приложения могут также по-разному работать с зеленным каналом и порой, когда возникают проблемы с отображением в определенном приложении, то стоит попробовать инвертировать зелёный канал или, говоря по-другому, сменить DirectX на OpenGL или наоборот. (OpenGL – Y+; DirectX – Y-) <br /><br /></div></div> </div> </div> </div> <style> #rec136990691 .t-text{color:#ffffff;}</style> </div> <div id="rec137018419" class="r t-rec t-rec_pt_75 t-rec_pb_75" style="padding-top:75px;padding-bottom:75px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6562-6236-4063-b066-366463653135/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6562-6236-4063-b066-366463653135/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild6562-6236-4063-b066-366463653135/1.jpg"
imgfield="img"
alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes">Таблица с ориентацией каналов для разных приложений:</div></div> </div> </div> </div> </div> <div id="rec136990693" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="text-align:left;color:#999999;" data-customstyle="yes"><strong><span style="font-size: 32px;" data-redactor-tag="span"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);">Пространство объекта (Object Space) </span></span></strong><br /><br /> Карта пространства объекта используется гораздо реже в игровой индустрии, но, порой, ее использование позволяет решить некоторые проблемы. Дело в том, что она использует ориентацию объекта в мировом пространстве, а это значит, что после запекания карты, модель нельзя деформировать. <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 24px;">Достоинства:</span><br /></strong>•Легче генерировать карту кривизны<br />•Слегка улучшенная производительность <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 24px;">Недостатки:</span><br /></strong>•Нельзя повторно использовать. Разные формы требует разных карт.<br />•Тайлить или отзеркалить можно только с&nbsp;поддержкой шейдера.<br />•Трудно добавлять отдельно запеченные детали из-за сильной вариативности цвета.<br />•Плохо сжимается. <br /><br /><em></em><em><span data-redactor-tag="span" style="font-size: 20px;">-</span><span style="font-size: 20px;">Чувак, это сложно. Какое мне дело?</span></em><br /><br /> Карты нормалей пространства касательных используют особый вид вершинных данных, называемых базисом касательных (tangent basis). Если световые лучи существуют в мировом пространстве, то нормали, хранящиеся в карте нормалей, в пространстве касательных. Когда движок обрабатывает модель с примененной картой нормалей, световые лучи преобразуются из мирового пространства в пространство касательных, используя для этого базис касательных. К этому моменту падающие световые лучи сверяются с направлением нормалей с карты нормалей, что определяет освещенность каждого пикселя объекта. Однако вместо преобразования световых лучей, некоторые шейдеры преобразуют нормали из пространства касательных в мировое. Затем преобразованные нормали сверяются со световыми лучами для создания необходимой освещенности. Конечный способ определяется создателем шейдера, но результат в обоих случаях один и тот же. <br /><br /> Трудности могут возникнуть из-за существования множества разных способов расчета базиса касательных. <strong>Это значит, что карта нормалей, запеченная в одном приложении, может отображаться совершенно иначе в другом.</strong> Когда рендер (например, игровой движок) обрабатывает вашу модель, шейдер должен использовать тоже пространство касательных, что и приложение для запекания, иначе модель получит некорректное освещение, особенно вдоль UV швов. <br /><br /></div></div> </div> </div> </div> <style> #rec136990693 .t-text{color:#ffffff;}</style> </div> <div id="rec137016938" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6163-6330-4439-a338-303031343534/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6163-6330-4439-a338-303031343534/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild6163-6330-4439-a338-303031343534/2.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137019725" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Если вы не уверены в том, какое пространство касательных используется в конечном движке, то необходимо добавлять жесткие грани/группы сглаживания или использовать поддерживающую геометрию, чтобы минимизировать шансы появления нежелательных эффектов</div></div> </div> </div> </div> <style> #rec137019725 .t-text{color:#ffffff;}</style> </div> <div id="rec137016791" class="r t-rec t-rec_pt_15 t-rec_pb_45" style="padding-top:15px;padding-bottom:45px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3465-3363-4864-b035-613135356231/3.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3465-3363-4864-b035-613135356231/-/empty/3.jpg" data-original="https://static.tildacdn.com/tild3465-3363-4864-b035-613135356231/3.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137019722" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><em><span data-redactor-tag="span" style="font-size: 22px;">-Я хочу, чтобы мои нормали выглядели отлично без тонны лишней работы!</span></em><br /><br /><em> Существует множество способов убедиться в том, что запеченные карты нормалей будут выглядеть корректно в любом из игровых движков. Давайте посмотрим на примеры: </em><br /><br /> <strong><a href="https://xnormal.net/" style=""><span style="color: rgb(153, 153, 153);"><u>Xnormal</u></span></a></strong><em> запекает карты нормалей, используя пространство касательных - Mikk-Tspace. Приложения поддерживающие Mikk-Tspace: </em><br /><br /><em> • Unreal Engine 4</em><br /><em>• Substance Painter</em><br /><em>• Marmoset Toolbag</em><br /><em>• Unity </em><br /><br /><em> Для ситуаций, когда необходимо конвертировать имеющуюся карту нормалей в карту, использующую другое пространство касательных, существует программа Handplane. Это полностью бесплатное приложение. Сначала необходимо запечь карту нормалей, используя пространство объекта (Object Space), которую затем конвертируют в карту нормалей с необходимым пространством касательных. </em><br /><br /><em> Запекая в </em><strong>Marmoset</strong><em> и используя выпадающее меню Tangent Space в свойствах объекта, вы можете установить нужное пространство касательных. Дополнительно (через Edit -&gt; Preferences -&gt; Content -&gt; Default Tangent Space) можно установить какое пространство касательных будет использоваться для новых объектов в сцене по умолчанию. </em><br /><br /><em> Если вы запекаете, используя Maya, то помните, что она имеет общий алгоритм расчета пространства касательных с Marmoset Toolbag. </em><br /><br /><span style="color: rgb(255, 255, 255);"><strong style=""><span style="font-size: 32px;" data-redactor-tag="span">Создаем карту нормалей</span> </strong></span><br /><br /><em> Процесс создания карт нормалей (и не только их) обычно называют "запеканием". Выглядит это следующим образом: </em><br /></div></div> </div> </div> </div> <style> #rec137019722 .t-text{color:#ffffff;}</style> </div> <div id="rec137020635" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6437-6265-4462-a332-326638336239/CzchQN2_a8s.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6437-6265-4462-a332-326638336239/-/empty/CzchQN2_a8s.jpg" data-original="https://static.tildacdn.com/tild6437-6265-4462-a332-326638336239/CzchQN2_a8s.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990697" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Как вы видите, карта нормалей способна лишь имитировать вид HP модели, не изменяя сам силуэт.<br /><br /><span style="font-size: 32px;"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);"><strong data-redactor-tag="strong">Создание HP модели</strong></span> </span><br /><br /> Чтобы запечь идеальную карту нормалей - необходимо знать, как правильно создавать HP модель, с учетом всех нюансов запекания карт нормалей. <br /><br /><strong><span style="font-size: 32px;" data-redactor-tag="span"><span data-redactor-style="color: rgb(153, 153, 153);" style="color: rgb(153, 153, 153);"><span data-redactor-tag="span" style="font-size: 26px;">Толщина фасок</span></span></span></strong> <br /><br /> Если вы хотите перенести фаски с HP модели на карту нормалей, то необходимо их делать мягче. Если фаски будут слишком острые, то они станут трудноразличимы на модели с примененной картой нормалей, а, значит, станут хуже читаться на расстоянии. <br /><br /></div></div> </div> </div> </div> <style> #rec136990697 .t-text{color:#ffffff;}</style> </div> <div id="rec137021399" class="r t-rec t-rec_pt_30 t-rec_pb_60" style="padding-top:30px;padding-bottom:60px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6433-3763-4239-a166-393561306333/Normal_edge_thicknes.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6433-3763-4239-a166-393561306333/-/empty/Normal_edge_thicknes.jpg" data-original="https://static.tildacdn.com/tild6433-3763-4239-a166-393561306333/Normal_edge_thicknes.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990699" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);">Детали со скосом</span></span></strong> <br /><br /> Из-за принципа работы проекции HP геометрии на LP запечка не может захватить слабозаметные детали. Поэтому, если вы хотите передать вдавливания или выступы через карту нормалей, то им необходимо добавить дополнительные фаски/скосы, чтобы стать заметными на плоской поверхности при виде спереди. <br /><br /></div></div> </div> </div> </div> <style> #rec136990699 .t-text{color:#ffffff;}</style> </div> <div id="rec137021877" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6537-3033-4332-b365-373061636263/kzh9KWBOjao.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6537-3033-4332-b365-373061636263/-/empty/kzh9KWBOjao.jpg" data-original="https://static.tildacdn.com/tild6537-3033-4332-b365-373061636263/kzh9KWBOjao.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990701" class="r t-rec t-rec_pt_45 t-rec_pb_15" style="padding-top:45px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);">Пересечение геометрии</span></span></strong> <br /><br /> Стоит всегда думать о том, как будет выглядеть финальная модель при работе над HP. Иногда наилучший вариант - это создавать непрерывную LP, если объединяемые объекты не будут анимироваться или использоваться раздельно, как, например, ремень на штанах. Для данного примера наилучшим решением было бы держать штаны и ремень максимально близко друг к другу на этапе HP, чтобы позже, при создании LP, сделать их цельным объектом. Если HP и LP плохо согласуются друг с другом, то это вызовет ошибки на карте нормалей в местах наличия пустых пространств. <br /><br /></div></div> </div> </div> </div> <style> #rec136990701 .t-text{color:#ffffff;}</style> </div> <div id="rec137022098" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3964-3231-4233-a135-386265383562/SRsYBKvQtfs.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3964-3231-4233-a135-386265383562/-/empty/SRsYBKvQtfs.jpg" data-original="https://static.tildacdn.com/tild3964-3231-4233-a135-386265383562/SRsYBKvQtfs.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990703" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Необходимо помнить об этом при объединении двух объектов на LP. Но, порой, лучше использовать пересекающуюся геометрию. На этом примере у меня маленький LP куб пересекается с большим. Два этих объекта необходимо запечь раздельно. <br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;">Разнесённая геометрия и бейк-группы</span> </strong><br /><br /> В случае, где необходимо запекать пересекающеюся геометрию стоит обращать внимание на взаимное расположение таких объектов. Если они расположены слишком близко друг к другу, то их проецирующие кейджи начнут пересекаться, что выльется в ошибки на карте нормалей. <br /><br /> Чтобы избежать этого существует два способа: <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 28px;">Разнесенная геометрия (Exploded mesh)</span> </strong><br /><br /> Логично, что если расположить геометрию друг от друга на достаточное расстояние, то и их кейджи никогда не пересекутся, а, значит, и не возникнет ошибок на нормале. Чтобы после запекания не тратить лишнего времени на объединение модели вручную элементов модели, можно, используя 3D пакет, поставить ключ анимации на моменте, когда вся модель собрана, и еще один на моменте, когда каждый пересекающийся объект разнесен на нужное расстояние. Тогда после запекания у вас не будет проблем с тем, чтобы собрать модель обратно воедино. <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 28px;">Бейк-группы (Bake groups) </span></strong><br /><br /> Помимо того, чтобы разносить объекты вручную, мы можем разнести объекты по логическим группам, чтобы они запекались отдельно. Дабы обозначить это, объектам необходимо назначить уникальные имена и добавить суффиксы - _low для LP и _high для HP. <br /><br /></div></div> </div> </div> </div> <style> #rec136990703 .t-text{color:#ffffff;}</style> </div> <div id="rec137022761" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3561-3933-4830-a136-616266616561/gnG6yS6Xm9k.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3561-3933-4830-a136-616266616561/-/empty/gnG6yS6Xm9k.jpg" data-original="https://static.tildacdn.com/tild3561-3933-4830-a136-616266616561/gnG6yS6Xm9k.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990705" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> <strong style=""><a href="https://marmoset.co/toolbag/" style=""><span style="color: rgb(153, 153, 153);"><u>Marmoset Toolbag</u>.</span></a></strong> <br /><br /> Для загрузки с учетом бейк-групп, нажмите на значок загрузки моделей в панели Quick Loader. Выбрав свои LP и HP модели Marmoset автоматически создаст бейк-группы для запекания. <br /><br /></div></div> </div> </div> </div> <style> #rec136990705 .t-text{color:#ffffff;}</style> </div> <div id="rec137022974" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3964-6138-4564-a336-386461316462/BY40UoJfDHc.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3964-6138-4564-a336-386461316462/-/empty/BY40UoJfDHc.jpg" data-original="https://static.tildacdn.com/tild3964-6138-4564-a336-386461316462/BY40UoJfDHc.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990707" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Если все было сделано правильно, то у вас не возникнет проблем из-за пересечения геометрии! <br /><br /> <strong style=""><a href="https://www.substance3d.com/products/substance-painter" style=""><span style="color: rgb(153, 153, 153);"><u>Substance Painter</u></span></a></strong><br /><br /> Процесс подготовки объектов ничем не отличается от вышеописанного. Чтобы SP учитывал созданные бейк-группы при запекании, необходимо для поля Match выбрать By Mesh name. <br /></div></div> </div> </div> </div> <style> #rec136990707 .t-text{color:#ffffff;}</style> </div> <div id="rec137023205" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3862-3134-4465-a339-393630363136/OhY65xGSNLQ.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3862-3134-4465-a339-393630363136/-/empty/OhY65xGSNLQ.jpg" data-original="https://static.tildacdn.com/tild3862-3134-4465-a339-393630363136/OhY65xGSNLQ.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990709" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><strong><span data-redactor-tag="span" style="font-size: 32px;"><span data-redactor-style="color: rgb(255, 255, 255);" style="color: rgb(255, 255, 255);">Сокращение полигонажа (Decimating)</span></span> </strong><br /><br /> Если вы импортируете свою HP из Zbrush в другие приложения, то хорошей практикой будет предварительно сократить ее количество полигонов. Не существует четкого правила, определяющего, как сильно стоит урезать полигонаж, прежде чем HP начнет выглядеть некорректно, поэтому рекомендуется делать тестовые запечки, перед тем как идти дальше. В большинстве случаев достаточно сокращения в 20% от оригинала. Если модель выглядит хорошо после этого, то можно переходить к запеканию. <br /><br /> Если говорить прикладным языком, то вам необходимо воспользоваться инструментом Decimating Master в Zbrush. Для этого перейдите во вкладку Zplugin -&gt; Decimation Master и в соответствующем поле установите процент "сокращения", затем нажмите Preprocess All, чтобы Zbrush просчитал всю сцену, и после этого нажмите Decimate All. Тогда Zbrush начнет оптимизировать полигонаж модели, и если вы решите, что этого недостаточно, то повторите вышеуказанные шаги еще раз. <br /><br /> Все вышеописанное делается для того, чтобы не перегружать рендер лишним количеством полигонов. Ведь если объект выглядит одинаково при 4млн. и 2млн. полигонах, то зачем нагружать приложение? Главное, следите за объектом в процессе, поскольку вам также не нужны артефакты на карте нормалей и пропавшие детали. <br /><br /><br /> <span style="color: rgb(255, 255, 255);"><span style="font-size: 32px;" data-redactor-style="font-size: 32px;"><strong data-redactor-tag="strong">Плавающая геометрия (Floaters)</strong></span></span> <br /><br /> Плавающей геометрией (флоатерами) называются HP объекты, которые существуют отдельно от основной модели и нужны для быстрого добавления деталей под запекание карты нормалей. Это хороший способ сымитировать геометрию, без необходимости тратить лишнее время на вшивание деталей в оригинальную HP. Недостаток скрывается в том, что необходимо подстраивать LP к плавающей геометрии, и это довольно сложно, если вы хотите расположить ее у круглых или сложных поверхностей, поэтому чаще всего ее используют у плоских поверхностей. Если вы расположите камеру прямо напротив плавающей геометрии и не увидите видимых переходов, то и на запеченной геометрии их видно не будет. <br /><br /></div></div> </div> </div> </div> <style> #rec136990709 .t-text{color:#ffffff;}</style> </div> <div id="rec137023954" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6666-3531-4538-b836-623363653864/XqEbbd3lW0Q.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6666-3531-4538-b836-623363653864/-/empty/XqEbbd3lW0Q.jpg" data-original="https://static.tildacdn.com/tild6666-3531-4538-b836-623363653864/XqEbbd3lW0Q.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990711" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Важно, чтобы плавающая геометрия имела плоские грани и располагалась, как можно ближе к основному объекту. <br /><br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);">Когда стоит моделировать, а когда рисовать.</span></span> </strong><br /><br /> Иногда моделирование и добавление HP геометрии - независимо от того, плавающая геометрия это или нет - может быть лишней тратой времени. К примеру, небольшие детали можно запечь вовсе на отдельную плоскость и совместить с оригинальной картой нормалей через Photoshop. Данный подход позволяет легче дублировать объекты и помогает избежать проблем, когда мелким деталям не хватает разрешения, чтобы достаточно хорошо передастся через запекание. <br /><br /> Это лишь один из подходов. Использование формата .PNG позволяет сохранить карту с прозрачностью. <br /><br /></div></div> </div> </div> </div> <style> #rec136990711 .t-text{color:#ffffff;}</style> </div> <div id="rec137024280" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6163-6331-4437-b138-333930653731/pXnFlOa2t7Q.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6163-6331-4437-b138-333930653731/-/empty/pXnFlOa2t7Q.jpg" data-original="https://static.tildacdn.com/tild6163-6331-4437-b138-333930653731/pXnFlOa2t7Q.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990713" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Затем перенесите полученный результат в Photoshop и скомбинируете его с оригинальной картой нормалей. Для комбинирования карт нормалей существует несколько методов: <br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;">Методы комбинирования карт нормалей</span> </strong><br /><br /> Комбинируя карты нормалей нужно помнить о том, что вы смешиваете не просто две картинки в одну, а смешиваете векторную информацию двух разных объектов. Если наложить две карты через обычное смешивание, то на конечном результате мы лишимся синего канала, что может стать проблемой в некоторых движках. <br /><br /> Плагин для Phostoshop – RNM Normal Map Combiner (<a href="https://farfarer.com/resources.htm"><span style="color: rgb(153, 153, 153);">https://farfarer.com/resources.htm</span></a>), позволит автоматически смешать карты нормалей без потери векторной информации. <br /><br /> Для того чтобы сделать тоже самое вручную, нужно перейти в режим редактирования уровней (Level Adjustments) на синем канале и уменьшить количество белого с 255 до 128, после чего установить режим смешивания Hard Light для накладываемой карты нормалей. <br /><br /> Для пользователей Substance Designer существует готовое решение в виде ноды Normal Combine, которой лишь необходимо - в качестве входных значений - передать две карты нормалей. <br /><br /> Приложение Crazybump также позволяет совместить карты нормалей. <br /><br /> Внутри Substance Painter существуют специальные режимы смешивания карт нормалей, способные также решить проблему: <br /><br /> <ul> <li> Normal Map Detail (по умолчанию) – считает текущий слой добавленным. </li> <li> Normal Map Inverse Detail – считает нижележащий слой добавленным. </li> <li> Normal Map Combine – объединяет верхний и нижний слой с одинаковой интенсивностью. </li> </ul><br /><br /><span style="font-size: 32px;"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);"><strong data-redactor-tag="strong">Создание LP модели</strong></span></span><br /><span style="font-size: 28px;"><strong>Градиенты</strong></span> <br /><br /> Прежде чем переходить к запеканию, вам необходимо понять, что означают градиенты на картах нормалей. Области карты нормалей залитые синим цветом (R/G/B: 128/128/255) означают, что нормали в ней сонаправлены с интерполированными нормалями вершин объекта для этого пикселя. Когда карте нормалей необходимо компенсировать экстремальные углы на геометрии, тогда начинают возникать градиенты. Чем меньше карте нормалей приходится компенсировать нормали объекта, тем лучше. Однако это не означает, что градиенты - это зло. <br /><br /> Давайте проведем тест с запеканием простого куба. Каждая поверхность куба разделена на UV развертке и имеет уникальную группу сглаживания: <br /><br /></div></div> </div> </div> </div> <style> #rec136990713 .t-text{color:#ffffff;}</style> </div> <div id="rec137024998" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3664-6666-4666-b039-313037346439/rJgUIfNhuu0.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3664-6666-4666-b039-313037346439/-/empty/rJgUIfNhuu0.jpg" data-original="https://static.tildacdn.com/tild3664-6666-4666-b039-313037346439/rJgUIfNhuu0.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990715" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Выглядит хорошо, да? Без градиентов, все запеклось идеально. Но что это значит и как этого достичь? Или более интересный вопрос: мне стоит беспокоиться? <br /><br /> Это означает, что ваши нормали LP модели сонаправлены с нормалями HP, и карте не нужно делать лишней работы для компенсации сильных углов градиентами на вашей LP модели. На практике, наилучшим вариантом является запекать карту нормалей лишенную градиентов, насколько это возможно. <br /><br /> Но теперь давайте взглянем на сильные градиенты. Я сшил все UV острова вместе и применил одну группу сглаживания на весь объект. <br /><br /></div></div> </div> </div> </div> <style> #rec136990715 .t-text{color:#ffffff;}</style> </div> <div id="rec137025100" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3738-6663-4032-b462-373662313665/8AYgPg7QHe4.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3738-6663-4032-b462-373662313665/-/empty/8AYgPg7QHe4.jpg" data-original="https://static.tildacdn.com/tild3738-6663-4032-b462-373662313665/8AYgPg7QHe4.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990717" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Это тот же куб, но посмотрите, что выглядит теперь он совершенно иначе, и даже устрашающе. Я расскажу вам, что здесь происходит немного позже. Обратите внимание на разницу между двумя запечками, очевидно, что карте нормалей на объекте с одной группой сглаживания, приходится тяжело из-за необходимости компенсировать угол в 90 градусов у куба.Но это не означает, что вы должны избегать градиентов любой ценой. Это просто не слишком хорошая идея. Самые сильные градиенты могут стать проблемой, но чаще всего, вам не стоит бояться их, особенно если ваш инструмент для запекания карт нормалей синхронизирован с игровым движком. Всегда стоит делать тестовые запечки, чтобы проверить результат в движке, где вы будете использовать свой ассет.На конечный вид модели повлиял еще тот факт, что при запекании использовался алгоритм расчета пространства касательных отличный от используемого в движке для рендера. Выше уже упоминалось об этом, но давайте рассмотрим это чуть подробнее. Когда модель запекается с сильными градиентами, то для получения корректного результата необходимо, чтобы приложение для запекания карт нормалей и итоговый движок использовали единый алгоритм расчета пространства касательных, то есть, были синхронизированы между собой.В примере выше карта нормалей запекалась с учетом пространства касательных, используемым в 3DsMax, а движком для рендера был Marmoset Toolbag. Поскольку они не синхронизированы, результат вышел некорректным. Если запечь карту нормалей, используя пространство касательных Marmoset, или любое другое синхронизированное с ним пространства касательных, то результат будет выглядеть корректно, <strong>но только лишь внутри Marmoset Toolbag, а при использовании любого другого рендера - необходимо знать, какое пространство касательных он использует.</strong></div></div> </div> </div> </div> <style> #rec136990717 .t-text{color:#ffffff;}</style> </div> <div id="rec137025746" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6661-6232-4532-a131-663030373138/aWZx5Ln6S-w.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6661-6232-4532-a131-663030373138/-/empty/aWZx5Ln6S-w.jpg" data-original="https://static.tildacdn.com/tild6661-6232-4532-a131-663030373138/aWZx5Ln6S-w.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990719" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Обратите внимание, как изменились градиенты из-за использования другого алгоритма расчёта пространства касательных. <br /><br /> Существует несколько преимуществ от использования чистой запечки: <br /><br /> <ul> <li> Это лучший результат при работе с LOD объектами, которые имеют ту же текстуру, что и оригинальный объект: поскольку карте нормалей не придется сильно зависеть от нормалей объекта. Хотя иногда вам может понадобиться создать отдельную карту нормалей для LOD объектов, что будет расходовать больше VRAM. </li> </ul> <ul> <li> Это лучшее сжатие текстур. При запекании с градиентами, на mip-картах могут возникать артефакты, поскольку карты с низким разрешением не смогут корректно передать нужный цветовой диапазон градиента. </li> </ul></div></div> </div> </div> </div> <style> #rec136990719 .t-text{color:#ffffff;}</style> </div> <div id="rec137025873" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6366-6364-4138-b332-313239303763/5H9Z-WvTE3Y.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6366-6364-4138-b332-313239303763/-/empty/5H9Z-WvTE3Y.jpg" data-original="https://static.tildacdn.com/tild6366-6364-4138-b332-313239303763/5H9Z-WvTE3Y.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990721" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><ul><li>Меньшее количество ошибок сглаживания из-за малого разрешения текстур. Такое случается, когда объект имеет мелкие треугольники, но отсутствует достаточное разрешение текстур для полной передачи их освещенности. Внутри движка это обычно выглядит, как маленькие светлые треугольники.</li></ul><br /><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);">Жесткие грани и UV</span></span></strong> <br /><br /> Итак, скажем, вы не хотите видеть градиенты, а хотите ровную и красивую запечку карты нормалей. Значит, вам необходимо узнать, что такое жесткие грани/группы сглаживания на LP объекте. Каждый раз, когда вы используете жесткую грань на LP, это ослабляет градиент на выбранной грани. <br /><br /> Правило большого пальца - это расставление жестких граней/групп сглаживания на местах, где угол между двумя поверхностями составляет 70 градусов и более. Если взглянуть на поверхности с большим углом и одной группой сглаживания, то можно увидеть черные градиенты, которые карта нормалей попытается компенсировать, но , не сможет этого сделать, и на модели появятся ошибки затенения (шейдинга). Назначая жесткую грань/группу сглаживания на поверхности, вы выравниваете затенение, делая его более схожим с HP моделью, и освобождаете карту нормалей от сильной компенсации отличий затенения между LP и HP. <br /><br /> Как расставлять жесткие грани: <br /><br /> В 3DsMax для обозначения "жестких" поверхностей, необходимо использовать группы сглаживания. В режиме выделения полигонов выделите нужные полигоны и примените группу сглаживания из панели по правой стороне. <br /><br /></div></div> </div> </div> </div> <style> #rec136990721 .t-text{color:#ffffff;}</style> </div> <div id="rec137026218" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3634-3737-4335-b466-363736626666/V4xbGHvKuP0.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3634-3737-4335-b466-363736626666/-/empty/V4xbGHvKuP0.jpg" data-original="https://static.tildacdn.com/tild3634-3737-4335-b466-363736626666/V4xbGHvKuP0.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990723" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Если вы пользуетесь Maya, то в режиме выделения граней выберите нужные и во вкладке "Mesh Display" нажмите "Harden Edge" – для указания жесткой грани, и "Soften Edge" – для мягкой. <br /><br /> Рассмотрим это на примере простого куба. Сейчас объект имеет две группы сглаживания: одну для одной поверхности и другую для всех остальных. Вы можете увидеть, что поверхности с общей группой сглаживания имеют искажённое затенение. Если вы столкнулись с подобным, то это значит, что и на карте нормалей будут присутствовать подобные градиенты после запекания. Посмотрим, как это работает. <br /><br /></div></div> </div> </div> </div> <style> #rec136990723 .t-text{color:#ffffff;}</style> </div> <div id="rec137026327" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6238-3763-4638-b564-333633313833/XB56SQ9Hlas.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6238-3763-4638-b564-333633313833/-/empty/XB56SQ9Hlas.jpg" data-original="https://static.tildacdn.com/tild6238-3763-4638-b564-333633313833/XB56SQ9Hlas.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990725" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> На скриншоте с картой нормалей видно, что одна поверхность выглядит отличной от остальных. Помните, что я ничего не делал с UV, а лишь применил другую группу сглаживания к поверхности. Сейчас она выглядит чистой и ровной, но вот в движке это смотрится не очень. <br /><br /> Давайте поближе взглянем на грани поверхности с отдельной группой сглаживания. Выглядит не очень, да? <br /><br /> Но пока забудьте пока о ней. Посмотрев на остальную часть объекта вы увидите, что градиенты ослабли не только на непосредственно отделенной поверхности на карте нормалей, но и на поверхностях, которые делят с ней ту же грань . Посмотрите, как градиенты на поверхностях слева (на карте) изменились. Чем ближе они к синему цвету, тем лучше это будет выглядеть в движке. Так что по поводу этой странно выглядящей…грани? Это ошибка возникающая, когда вы разделяете поверхности по группам сглаживания/жестким граням, но не на UV развертке. Из-за этого нормали двух разных частей развертки смешивается из-за чего возникается видимый шов. <br /><br /> <strong>В местах расположения жестких граней необходимо делать разрез на UV развертке!</strong> <br /><br /> Я разделил поверхность с жесткой гранью на UV. Перезапек карту и вот результат: <br /><br /> Теперь видно, как жесткая поверхность стала отдельной частью на развертке и отчего она отлично смотрится в движке. <br /><br /> Если я применю уникальную группу сглаживания для каждой поверхности и разнесу их на UV развертке, то получу идеальную карту нормалей. Но что если у меня не 6 поверхностей, а намного больше? Есть простой ответ на этот вопрос. <br /><br /> Для того чтобы быстро расставить группы сглаживания, скачайте плагин TexTools. (<a href="http://renderhjs.net/textools/3dsMax.html">http://renderhjs.net/textools/3dsMax.html</a>). После этого откройте его в 3DsMax и на основной панели, открыв вкладку Tools, выберете опцию "Smoothing groups from UV shells", предварительно выделив нужный объект. <br /><br /> Основной процесс выглядит следующим образом: <br /><br /> <ol> <li> Разделить UV там, где вы предполагаете жесткую грань на LP модели. </li> <li> Применить "Smoothing groups from UV shells" для назначения отдельной группы сглаживания каждому UV острову. </li> </ol> Однако очень просто стать жертвой такого простого подхода. Порой, вам нет необходимости разделять группы сглаживания на UV. К примеру, если вы отзеркалили UV остров, или круглый объект развернут в несколько UV кусков - нет нужды оставлять отдельные группы сглаживания. <br /><br /><br /><strong><span data-redactor-tag="span" style="color: rgb(255, 255, 255);"><span style="font-size: 32px;" data-redactor-style="font-size: 32px;">Отражение UV</span></span></strong> <br /><br /> Если вам необходимо отразить половину LP объекта, то вот хороший способ сделать это: <br /><br /> <ol> <li> Удалить симметричную половину. </li> <li> Сделать развертку. </li> <li> Применить симметрию обратно. </li> <li> Сдвинуть отраженные поверхности на UV на один тайл в сторону. </li> <li> Запечь карту нормалей. </li> </ol></div></div> </div> </div> </div> <style> #rec136990725 .t-text{color:#ffffff;}</style> </div> <div id="rec137026892" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6533-6534-4539-b435-633331336436/BBlTEfsSjyE.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6533-6534-4539-b435-633331336436/-/empty/BBlTEfsSjyE.jpg" data-original="https://static.tildacdn.com/tild6533-6534-4539-b435-633331336436/BBlTEfsSjyE.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990727" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Сдвигать поверхности на UV нужно всегда, когда два или более UV острова наложены друг на друга - иначе возникнут ошибки при запекании. <br /><br /> <strong><span data-redactor-tag="span" style="color: rgb(255, 255, 255);"><span style="font-size: 32px;">Округлость и волнистость на карте нормалей</span></span></strong> <br /><br /> С круглыми объектами возникает постоянная проблема - волнистость на карте нормалей. <br /><br /> После запекания, на карте нормалей вы можете заметить "волны" вдоль граней UV островов. Они возникают из-за несовпадения LP модели с HP. <br /><br /></div></div> </div> </div> </div> <style> #rec136990727 .t-text{color:#ffffff;}</style> </div> <div id="rec137027186" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3930-3263-4933-a432-303737333662/EQFTIb337dc.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3930-3263-4933-a432-303737333662/-/empty/EQFTIb337dc.jpg" data-original="https://static.tildacdn.com/tild3930-3263-4933-a432-303737333662/EQFTIb337dc.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990729" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Как вам избавиться от этой проблемы? Исправить это возможно добавлением дополнительных сегментов к LP цилиндру. После запекания цилиндра с большим количеством сегментов, вы можете удалить добавленные сегменты и получить более подходящий результат. Такой подход не рекомендуется, но теоретически возможен.Но этот вариант не является распространенным решением. К нему стоит прибегать с осторожностью. Если назначить карту нормалей на объект с отличными вершинными нормалями, то модель может выглядеть некорректно. Из-за того, что после запекания карта нормалей для обоих цилиндров будет выглядеть практически идентично, подобный подход может сработать, хотя все еще возможно смещение UV координат.Чаще всего проблемы "волнистости" на картах нормалей решаются с помощью Photoshop. Через инструмент "Smudge Tool" , ведя кисточку точно вдоль грани, можно аккуратно выровнять ее Поскольку карта нормалей хранит векторную информацию, то стоит с большой осторожностью подходить к редактированию карты нормалей в графическом редакторе. <br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);">Сопоставление геометрии во время ретопологии</span></span></strong> <br /><br /> При работе над ретопологией (LP моделью) очень важно максимально близко подводить геометрию к HP модели, иначе вы получите ошибки проецирования при запекании, и карта нормалей будет отображаться некорректно. Из-за этого также сложнее будет контролировать кейдж. <br /><br /></div></div> </div> </div> </div> <style> #rec136990729 .t-text{color:#ffffff;}</style> </div> <div id="rec137027419" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3661-3633-4232-a336-333830316665/h1ygluXCo4A.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3661-3633-4232-a336-333830316665/-/empty/h1ygluXCo4A.jpg" data-original="https://static.tildacdn.com/tild3661-3633-4232-a336-333830316665/h1ygluXCo4A.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990731" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);">Триангуляция</span></span> </strong><br /> Поскольку разные приложения для запекания и игровые движки триангулируют модель при импорте по-своему, то чрезвычайно важно триангулировать модель перед запеканием самостоятельно, чтобы избежать различий в затенении между приложениями. <br /><br /></div></div> </div> </div> </div> <style> #rec136990731 .t-text{color:#ffffff;}</style> </div> <div id="rec137028302" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3837-3861-4162-b439-316639633433/rn1xO3usrxQ.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3837-3861-4162-b439-316639633433/-/empty/rn1xO3usrxQ.jpg" data-original="https://static.tildacdn.com/tild3837-3861-4162-b439-316639633433/rn1xO3usrxQ.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990733" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> <strong><span data-redactor-tag="span" style="font-size: 24px;">3DsMax</span></strong> <br /><br /> Используйте модификатор Turn to poly, в настройках которого поставьте галочку на "Limit polygon size" и установите значение в поле равное 3. После этого ваша модель триангулируется, и вы сможете отправить ее на запекание! <br /><br /> Для просмотра триангуляции и внесения возможных изменений используйте панель Tris. <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 24px;">Maya</span></strong> <br /><br /> Выделите поверхности объекта и в настройках объекта выберите параметр Triangulate. <br /><br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);">Наилучшие подходы в создании UV под запекание и текстурирование</span></span></strong> <br /><br /> Работая над разверткой, всегда важно думать о текстурировании. Если, например, вам нужно добавить одинаковые прямые детали к ремню, то важно расположить его UV остров ровным. <br /><br /> Сшивая UV острова, вы должны также думать о том, видна ли будет эта часть объекта или нет, можете ли вы позволить себе наличие градиентов в этой части. <br /><br /> При создании UV развертки важно располагать UV острова под прямым углом, где это только возможно. Поскольку иначе при запекании на грани появится эффект альязинга, который на текстуре будет выглядеть как лесенка из пикселей. Особенно этот эффект будет заметен, если UV остров имеет небольшой тексель или сама текстура маленького разрешения. <br /><br /></div></div> </div> </div> </div> <style> #rec136990733 .t-text{color:#ffffff;}</style> </div> <div id="rec137029122" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3164-3061-4334-a234-343333623861/YeFnzHkttlY.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3164-3061-4334-a234-343333623861/-/empty/YeFnzHkttlY.jpg" data-original="https://static.tildacdn.com/tild3164-3061-4334-a234-343333623861/YeFnzHkttlY.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec783121956" class="r t-rec" style=" " data-animationappear="off" data-record-type="396"> <!-- T396 --> <style>#rec783121956 .t396__artboard {height:576px;background-color:#0d0d0d;}#rec783121956 .t396__filter {height:576px;}#rec783121956 .t396__carrier{height:576px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec783121956 .t396__artboard,#rec783121956 .t396__filter,#rec783121956 .t396__carrier {height:544px;}#rec783121956 .t396__filter {}#rec783121956 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec783121956 .t396__artboard,#rec783121956 .t396__filter,#rec783121956 .t396__carrier {height:528px;}#rec783121956 .t396__filter {}#rec783121956 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec783121956 .t396__artboard,#rec783121956 .t396__filter,#rec783121956 .t396__carrier {height:459px;}#rec783121956 .t396__filter {}#rec783121956 .t396__carrier {background-attachment:scroll;}}#rec783121956 .tn-elem[data-elem-id="1722957462807"]{z-index:2;top:132px;;left:calc(50% - 600px + 220px);;width:760px;height:312px;}#rec783121956 .tn-elem[data-elem-id="1722957462807"] .tn-atom{border-radius:24px;background-color:#23232a;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec783121956 .tn-elem[data-elem-id="1722957462807"]{top:108px;;left:calc(50% - 480px + 170px);;width:620px;height:328px;}}@media screen and (max-width:959px){#rec783121956 .tn-elem[data-elem-id="1722957462807"]{top:100px;;left:calc(50% - 320px + 10px);;}}@media screen and (max-width:639px){#rec783121956 .tn-elem[data-elem-id="1722957462807"]{top:64px;;width:300px;height:331px;border-radius:16px;}#rec783121956 .tn-elem[data-elem-id="1722957462807"] .tn-atom{background-size:cover;border-radius:16px;}}#rec783121956 .tn-elem[data-elem-id="1722957592507"]{color:#ffffff;z-index:3;top:164px;;left:calc(50% - 600px + 252px);;width:600px;height:auto;}#rec783121956 .tn-elem[data-elem-id="1722957592507"] .tn-atom{color:#ffffff;font-size:24px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:600;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec783121956 .tn-elem[data-elem-id="1722957592507"]{top:140px;;left:calc(50% - 480px + 202px);;width:500px;height:auto;}#rec783121956 .tn-elem[data-elem-id="1722957592507"] .tn-atom{font-size:20px;background-size:cover;}}@media screen and (max-width:959px){#rec783121956 .tn-elem[data-elem-id="1722957592507"]{top:132px;;left:calc(50% - 320px + 42px);;height:auto;}}@media screen and (max-width:639px){#rec783121956 .tn-elem[data-elem-id="1722957592507"]{top:88px;;left:calc(50% - 160px + 26px);;width:268px;height:auto;}#rec783121956 .tn-elem[data-elem-id="1722957592507"] .tn-atom{font-size:16px;background-size:cover;}}#rec783121956 .tn-elem[data-elem-id="1722957649470"]{color:#ffffff;z-index:4;top:242px;;left:calc(50% - 600px + 252px);;width:674px;height:auto;}#rec783121956 .tn-elem[data-elem-id="1722957649470"] .tn-atom{color:#ffffff;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.6;font-weight:400;opacity:0.6;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec783121956 .tn-elem[data-elem-id="1722957649470"]{top:208px;;left:calc(50% - 480px + 202px);;width:548px;height:auto;}}@media screen and (max-width:959px){#rec783121956 .tn-elem[data-elem-id="1722957649470"]{top:200px;;left:calc(50% - 320px + 42px);;height:auto;}}@media screen and (max-width:639px){#rec783121956 .tn-elem[data-elem-id="1722957649470"]{top:159px;;left:calc(50% - 160px + 26px);;width:268px;height:auto;}#rec783121956 .tn-elem[data-elem-id="1722957649470"] .tn-atom{font-size:12px;background-size:cover;}}#rec783121956 .tn-elem[data-elem-id="1722957742812"]{color:#ffffff;text-align:center;z-index:5;top:370px;;left:calc(50% - 600px + 252px);;width:172px;height:42px;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom{color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.6;font-weight:400;border-radius:30px;background-position:center center;--t396-speedhover:0.2s;transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;--t396-bgcolor-color:#8080ff;--t396-bgcolor-image:none;--t396-bgcolor-hover-color:#6060ff;--t396-bgcolor-hover-image:none;background-color:var(--t396-bgcolor-color,transparent);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom::after{display:none;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-text{transition:color var(--t396-speedhover,0s) ease-in-out;color:#ffffff;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover::after{opacity:0;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover{animation-name:none;background-color:var(--t396-bgcolor-hover-color,var(--t396-bgcolor-color,transparent));}}@media screen and (max-width:1199px){#rec783121956 .tn-elem[data-elem-id="1722957742812"]{top:362px;;left:calc(50% - 480px + 202px);;width:px;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom{white-space:normal;background-size:cover;background-color:var(--t396-bgcolor-color,transparent);}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom::after{display:none;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-text{overflow:visible;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover::after{opacity:0;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover{animation-name:none;background-color:var(--t396-bgcolor-hover-color,var(--t396-bgcolor-color,transparent));}}}@media screen and (max-width:959px){#rec783121956 .tn-elem[data-elem-id="1722957742812"]{top:354px;;left:calc(50% - 320px + 42px);;width:px;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom{white-space:normal;background-size:cover;background-color:var(--t396-bgcolor-color,transparent);}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom::after{display:none;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-text{overflow:visible;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover::after{opacity:0;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover{animation-name:none;background-color:var(--t396-bgcolor-hover-color,var(--t396-bgcolor-color,transparent));}}}@media screen and (max-width:639px){#rec783121956 .tn-elem[data-elem-id="1722957742812"]{top:335px;;left:calc(50% - 160px + 26px);;width:142px;height:36px;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom{white-space:normal;font-size:12px;background-size:cover;background-color:var(--t396-bgcolor-color,transparent);}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom::after{display:none;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-text{overflow:visible;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover::after{opacity:0;}#rec783121956 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover{animation-name:none;background-color:var(--t396-bgcolor-hover-color,var(--t396-bgcolor-color,transparent));}}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="783121956" data-artboard-screens="320,640,960,1200" data-artboard-height="576" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-height-res-320="459" data-artboard-height-res-640="528" data-artboard-height-res-960="544"> <div class="t396__carrier" data-artboard-recid="783121956"></div> <div class="t396__filter" data-artboard-recid="783121956"></div> <div class='t396__elem tn-elem tn-elem__7831219561722957462807' data-elem-id='1722957462807' data-elem-type='shape' data-field-top-value="132" data-field-left-value="220" data-field-height-value="312" data-field-width-value="760" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="64" data-field-height-res-320-value="331" data-field-width-res-320-value="300" data-field-top-res-640-value="100" data-field-left-res-640-value="10" data-field-top-res-960-value="108" data-field-left-res-960-value="170" data-field-height-res-960-value="328" data-field-width-res-960-value="620"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__7831219561722957592507' data-elem-id='1722957592507' data-elem-type='text' data-field-top-value="164" data-field-left-value="252" data-field-width-value="600" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-fontsize-value="24" data-field-top-res-320-value="88" data-field-left-res-320-value="26" data-field-width-res-320-value="268" data-field-fontsize-res-320-value="16" data-field-top-res-640-value="132" data-field-left-res-640-value="42" data-field-top-res-960-value="140" data-field-left-res-960-value="202" data-field-width-res-960-value="500" data-field-fontsize-res-960-value="20"> <div class='tn-atom'field='tn_text_1722957592507'>💥 Курс «Draft Punk» для тебя, если хочешь делать такие же 3D-модели</div> </div> <div class='t396__elem tn-elem tn-elem__7831219561722957649470' data-elem-id='1722957649470' data-elem-type='text' data-field-top-value="242" data-field-left-value="252" data-field-width-value="674" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-fontsize-value="16" data-field-top-res-320-value="159" data-field-left-res-320-value="26" data-field-width-res-320-value="268" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="200" data-field-left-res-640-value="42" data-field-top-res-960-value="208" data-field-left-res-960-value="202" data-field-width-res-960-value="548"> <div class='tn-atom'field='tn_text_1722957649470'>Узнаешь, как устроен пайплайн разработки 3D-моделей в&nbsp;больших игровых студиях. Научишься создавать выразительные драфты, разберёшься с&nbsp;топологией, high poly, low poly, развёрткой и&nbsp;запечкой. А&nbsp;в&nbsp;конце создашь полноценную 3D-модель по&nbsp;всем правилам пайплайна. Курс можно взять в&nbsp;рассрочку.</div> </div> <div class='t396__elem tn-elem tn-elem__7831219561722957742812' data-elem-id='1722957742812' data-elem-type='button' data-field-top-value="370" data-field-left-value="252" data-field-height-value="42" data-field-width-value="172" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-fontsize-value="14" data-field-top-res-320-value="335" data-field-left-res-320-value="26" data-field-height-res-320-value="36" data-field-width-res-320-value="142" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="354" data-field-left-res-640-value="42" data-field-top-res-960-value="362" data-field-left-res-960-value="202"> <a class='tn-atom js-click-zero-stat' href="https://www.school-xyz.com/draftpunk?utm_source=blog&amp;utm_medium=banner&amp;utm_campaign=draftpunk" data-tilda-event-name="/tilda/click/rec783121956/button1722957742812"> <div class='tn-atom__button-content'> <span class="tn-atom__button-text">Узнать больше</span> </div> <span class="tn-atom__button-border"></span> </a> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('783121956');});});</script> <!-- /T396 --> </div> <div id="rec136990735" class="r t-rec t-rec_pb_15" style="padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);">Искаженные детали на запечках</span></span></strong> <br /><br /> Прежде чем переходить к практическим примерам, обсудим немного теорию. Почему некоторые детали после запекания выглядят искаженными на карте нормалей, и как это исправить? Это происходит из-за особенностей проецирования. Для запекания нормалей используется проецирующий кейдж, который оборачивает собой HP объект и испускает проецирующие лучи для переноса информации об освещенности HP объекта на карту нормалей. Существует два типа кейджей, используемых для запекания: <br /><br /> Averaged Normals: <br /><br /> Кейдж с усреднёнными нормалями игнорирует нормали LP объекта при определении направления проекции, усредняя все вершинные нормали. Основное достоинство состоит в том, что даже с использованием жёстких граней/групп сглаживания на местах фасок не появятся швы. Негативный эффект выражается в появлении искаженных деталей на карте нормалей. <br /><br /></div></div> </div> </div> </div> <style> #rec136990735 .t-text{color:#ffffff;}</style> </div> <div id="rec137029715" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6261-3463-4637-a566-313234383764/Wsoi2pQMX0Y.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6261-3463-4637-a566-313234383764/-/empty/Wsoi2pQMX0Y.jpg" data-original="https://static.tildacdn.com/tild6261-3463-4637-a566-313234383764/Wsoi2pQMX0Y.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990737" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Explicit Normals непосредственно использует нормали LP объекта для построения кейджа. Следовательно, если на LP объекте расставлены жесткие грани/группы сглаживания, то на финальной модели появятся швы на местах фасок. Но, в отличие от первого способа, все детали запекутся без искажений.</div></div> </div> </div> </div> <style> #rec136990737 .t-text{color:#ffffff;}</style> </div> <div id="rec137029871" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3433-3532-4362-b238-326535613964/bIIAl1MinmY.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3433-3532-4362-b238-326535613964/-/empty/bIIAl1MinmY.jpg" data-original="https://static.tildacdn.com/tild3433-3532-4362-b238-326535613964/bIIAl1MinmY.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990739" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Несмотря на то, что чаще всего предпочтительным вариантом является метод Averaged Normals - из-за возможности передать фаски с применением жестких граней - не стоит игнорировать метод Explicit Normals. Всегда необходимо, в первую очередь, исходить из своей задачи и, поняв, как именно работают вышеописанные методы, самостоятельно выбирать, какой алгоритм работы является для вас наиболее предпочтительным. Несмотря на описанные достоинства и недостатки, не существует однозначно правильного и не правильного подхода. <br /><br /> Рассмотрим на примере, как бороться с искаженными деталями на запечке. <br /><br /></div></div> </div> </div> </div> <style> #rec136990739 .t-text{color:#ffffff;}</style> </div> <div id="rec137030082" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6136-6235-4235-a434-633830373361/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6136-6235-4235-a434-633830373361/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild6136-6235-4235-a434-633830373361/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990741" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Можно сделать LP модель такой, добавив ей поддерживающие грани:</div></div> </div> </div> </div> <style> #rec136990741 .t-text{color:#ffffff;}</style> </div> <div id="rec137030147" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6638-3065-4137-b134-666265623966/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6638-3065-4137-b134-666265623966/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild6638-3065-4137-b134-666265623966/2.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990743" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Это быстро дает хороший результат, но с расходованием дополнительных полигонов на LP объекте. <br /><br /> Поскольку на добавленных поддерживающих гранях вершинные нормали направлены строго перпендикулярно поверхности, то и результат, взятый от их среднего значения, не изменится по отношению к направлению нормалей вершин. <br /><br /> Модель без поддерживающих граней: <br /></div></div> </div> </div> </div> <style> #rec136990743 .t-text{color:#ffffff;}</style> </div> <div id="rec137030240" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3737-3333-4534-b239-623830326135/3.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3737-3333-4534-b239-623830326135/-/empty/3.jpg" data-original="https://static.tildacdn.com/tild3737-3333-4534-b239-623830326135/3.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990745" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Модель с поддерживающими гранями:</div></div> </div> </div> </div> <style> #rec136990745 .t-text{color:#ffffff;}</style> </div> <div id="rec137030522" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3534-6463-4633-b261-383435636265/4.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3534-6463-4633-b261-383435636265/-/empty/4.jpg" data-original="https://static.tildacdn.com/tild3534-6463-4633-b261-383435636265/4.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990747" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Видите, насколько велика разница в полигонаже между двумя объектами после добавления дополнительной геометрии? Поэтому используйте этот подход только на свое усмотрение. <br /><br /> <em style=""><strong data-redactor-tag="strong"><span style="font-size: 24px;">-</span></strong><span style="font-size: 24px;">Что если я не хочу тратить лишние полигоны на LP, но и не хочу получить искаженных деталей?</span></em> <br /><br />Это очень интересный вопрос, и вот ответ на него! <br /><br /> Фактически, вы добавляете дополнительные грани для поддержки при запекании, после которой их можно удалить. Но, к сожалению, это будет работать не всегда. Сначала необходимо решить, как будут выглядеть градиенты на карте нормалей. Сделайте две запечки: одну без дополнительных граней и другую с ними, а затем взгляните на различия в градиентах между двумя картами нормалей. <br /><br /></div></div> </div> </div> </div> <style> #rec136990747 .t-text{color:#ffffff;}</style> </div> <div id="rec137030787" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6234-6436-4436-a332-636332633630/GSh0r13uBF8.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6234-6436-4436-a332-636332633630/-/empty/GSh0r13uBF8.jpg" data-original="https://static.tildacdn.com/tild6234-6436-4436-a332-636332633630/GSh0r13uBF8.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990749" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Они практически идентичны. И почему так? Разве я не добавил дополнительной геометрии? Суть в том, что дополнительные грани помогают ослабить градиенты, но в данном случае я уже разделил UV острова на местах с жесткими гранями/группами сглаживания, поэтому дополнительной геометрии не пришлось ничего изменять. <br /><br /> Так почему это важно? Если я удалю добавленные грани и применю карту нормалей внутри движка, то вот что мы получим – идеальный результат. Нет никаких различий в положении нормалей у двух объектов, хотя один из них имеет меньшее количество полигонов. Круто. <br /><br /></div></div> </div> </div> </div> <style> #rec136990749 .t-text{color:#ffffff;}</style> </div> <div id="rec137030859" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6434-3937-4130-a164-326537373832/DfSD66UbnuI.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6434-3937-4130-a164-326537373832/-/empty/DfSD66UbnuI.jpg" data-original="https://static.tildacdn.com/tild6434-3937-4130-a164-326537373832/DfSD66UbnuI.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990751" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Но теперь проведем другой тест. В этот раз я сошью UV острова и назначу одну группу сглаживания ко всему объекту только для того, чтобы показать сильные градиенты на карте нормалей.</div></div> </div> </div> </div> <style> #rec136990751 .t-text{color:#ffffff;}</style> </div> <div id="rec137031008" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3664-6331-4263-a531-316364666336/b1IbEIOkRWw.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3664-6331-4263-a531-316364666336/-/empty/b1IbEIOkRWw.jpg" data-original="https://static.tildacdn.com/tild3664-6331-4263-a531-316364666336/b1IbEIOkRWw.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990753" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Выглядит не очень, правда? Давайте посмотрим на второй вариант, где я добавил поддерживающих граней к объекту. Очевидно, что он выглядит намного лучше - это то, что нам нужно. Но после применения нижней карты к обоим объектам - вот что выходит:</div></div> </div> </div> </div> <style> #rec136990753 .t-text{color:#ffffff;}</style> </div> <div id="rec137031200" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3266-6562-4566-b630-343930333766/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3266-6562-4566-b630-343930333766/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild3266-6562-4566-b630-343930333766/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990755" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Ух ты, кажется, мы что-то сломали. <br /><br /> Дело в том, что градиенты двух моделей стали слишком разными, и для модели без поддерживающих граней карта нормалей не может их правильно компенсировать. <br /><br /> Так что же делать, если у меня есть градиенты, но я не хочу назначать жесткие грани, разделять UV и прочее? Вот несколько способов: <br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);">Способ 1 (SkewMesh) </span></span></strong><br /><br /> Один из простейших способов избавиться от искаженных деталей на объектах, где другие методы могут быть трудноисполнимыми, называется Skewmesh, который работает следующим образом: <br /><br /></div></div> </div> </div> </div> <style> #rec136990755 .t-text{color:#ffffff;}</style> </div> <div id="rec137031390" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6433-6165-4131-a264-316331303762/kEfYSH1cesI.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6433-6165-4131-a264-316331303762/-/empty/kEfYSH1cesI.jpg" data-original="https://static.tildacdn.com/tild6433-6165-4131-a264-316331303762/kEfYSH1cesI.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990757" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> То что мы и ожидали увидеть. Теперь исправим это. <br /><br /> <ol> <li> Триангулируйте ваш LP объект. </li> <li> Затем примените модификатор Tesselate. </li> </ol> Убедитесь, что значение в поле Tension – 0, и количество итераций установлено на значении 3 или 4. <br /><br /> <ol> <li> Создайте кейдж. </li> <li> Экспортируйте тесселированную LP и ее кейдж отдельно от финального объекта и импортируете их в Xnormal. </li> <li> Внутри Xnormal запеките Object Space Normal Map. </li> <li> После конвертируйте эту карту в карту пространства касательных (tangent space), используя вашу карту Object Space и финальную модель как входные данные для конвертера. </li> </ol></div></div> </div> </div> </div> <style> #rec136990757 .t-text{color:#ffffff;}</style> </div> <div id="rec137031485" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6564-3438-4432-b035-376266633861/AI04t2mc9eQ.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6564-3438-4432-b035-376266633861/-/empty/AI04t2mc9eQ.jpg" data-original="https://static.tildacdn.com/tild6564-3438-4432-b035-376266633861/AI04t2mc9eQ.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990759" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> <strong>Marmoset Toolbag</strong> <br /><br /> <em>Импортируете тесселированную модель в Marmoset Toolbag, отрегулируете кейдж и запеките карту Normals Object. Затем также конвертируете карту Object Space в Tangent Space, используя Xnormal.</em> <br /><br /></div></div> </div> </div> </div> <style> #rec136990759 .t-text{color:#ffffff;}</style> </div> <div id="rec137031663" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3037-6230-4531-b966-366631636438/P2oEi_BXqUQ.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3037-6230-4531-b966-366631636438/-/empty/P2oEi_BXqUQ.jpg" data-original="https://static.tildacdn.com/tild3037-6230-4531-b966-366631636438/P2oEi_BXqUQ.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990761" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Готово!</div></div> </div> </div> </div> <style> #rec136990761 .t-text{color:#ffffff;}</style> </div> <div id="rec137031874" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3062-6132-4234-b261-313539653536/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3062-6132-4234-b261-313539653536/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild3062-6132-4234-b261-313539653536/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990763" class="r t-rec t-rec_pt_45 t-rec_pb_15" style="padding-top:45px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);">Способ 2</span></span></strong> <br /><br /> 1 — Подготовьте два объекта: один без поддерживающих граней (ваша финальная модель) и другой - для запекания - с поддерживающими гранями. <br /><br /> 2 — Вам необходимо запечь карту Object Space взамен привычной Tangent Space.<strong></strong> <br /><br /> <strong>Xnormal</strong> <br /><br /> 3 <strong>—</strong> Для запекания карты Object Space необходимо снять галку с Tangent Space в настройках. <br /><br /></div></div> </div> </div> </div> <style> #rec136990763 .t-text{color:#ffffff;}</style> </div> <div id="rec137032082" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6564-3036-4034-b736-366639666562/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6564-3036-4034-b736-366639666562/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild6564-3036-4034-b736-366639666562/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990765" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">4 — Выберите вашу модель (с поддерживающими гранями) и запеките ее.</div></div> </div> </div> </div> <style> #rec136990765 .t-text{color:#ffffff;}</style> </div> <div id="rec137032432" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6236-3836-4535-b762-663433613235/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6236-3836-4535-b762-663433613235/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild6236-3836-4535-b762-663433613235/2.jpg"
imgfield="img"
alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="color:#999999;" data-customstyle="yes"><em>Так выглядит карта Object Space, странного желтого цвета. Но это не важно. Что важно, так это то, что сейчас мы будем конвертировать ее в карту Tangent Space.</em></div></div> </div> </div> </div> </div> <div id="rec136990767" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">5 — Выберите Object/Tangent конвертер.</div></div> </div> </div> </div> <style> #rec136990767 .t-text{color:#ffffff;}</style> </div> <div id="rec137032902" class="r t-rec t-rec_pt_60 t-rec_pb_15" style="padding-top:60px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3034-3661-4032-b165-623830623236/3.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3034-3661-4032-b165-623830623236/-/empty/3.jpg" data-original="https://static.tildacdn.com/tild3034-3661-4032-b165-623830623236/3.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990769" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Загрузите вашу финальную модель в слот с LP. Карту Object Space добавьте в поле "Input normal map" и выберете формат, в котором вы хотите сохранить карту нормалей.</div></div> </div> </div> </div> <style> #rec136990769 .t-text{color:#ffffff;}</style> </div> <div id="rec137033030" class="r t-rec t-rec_pt_30 t-rec_pb_45" style="padding-top:30px;padding-bottom:45px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3830-3966-4339-b466-396637333038/4.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3830-3966-4339-b466-396637333038/-/empty/4.jpg" data-original="https://static.tildacdn.com/tild3830-3966-4339-b466-396637333038/4.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec136990771" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Вот наш результат при наличии всех градиентов. Так где разница, спросите вы? <br /><br /> Заметьте, что нет никакой разницы в нормалях между двумя объектами. Вот, что случилось: <br /><br /> Конвертер взял карту Object Space, которую мы запекли с модели с поддерживающими гранями, и сгенерировал карту Tangent Space с учетом затенения финальной модели. Теперь вы можете запекать карты нормалей с поддерживающими гранями, не волнуясь о вреде градиентов и искажений. <br /><br /></div></div> </div> </div> </div> <style> #rec136990771 .t-text{color:#ffffff;}</style> </div> <div id="rec137033570" class="r t-rec t-rec_pt_30 t-rec_pb_75" style="padding-top:30px;padding-bottom:75px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3662-3563-4439-a461-373162383032/VlJxY9iU31M.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3662-3563-4439-a461-373162383032/-/empty/VlJxY9iU31M.jpg" data-original="https://static.tildacdn.com/tild3662-3563-4439-a461-373162383032/VlJxY9iU31M.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137033425" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><span style="font-size: 32px;"><strong><span data-redactor-tag="span" style="color: rgb(255, 255, 255);">Способ 3 (Explicit Normals)</span></strong> </span><br /><br /> <strong>Xnormal</strong> <br /><br /> Вы можете избежать этих трудоемких способов, действуя следующим образом: <br /><br /> <ul> <li> Задайте жесткие грани для LP объекта и разнесите UV острова, чтобы ослабить градиенты. </li> </ul> <ul> <li> Запеките карту нормалей без кейджа, используя параметр Ray Distance. </li> </ul> Теперь вы получили чистый результат без искаженных деталей. После совместите необходимую часть с оригинальной картой нормалей в Photoshop или воспользуетесь описанным выше методом с картой Object Space, если необходимо назначить запеченную карту на LP модель с отличным сглаживанием. <br /><br /> <strong><em data-redactor-tag="em">Marmoset</em></strong> <br /><br /> Для того чтобы запечь детали без искажений в Marmoset Toolbag, необходимо в настройках Baker снять галочку с Smooth Normals. <br /><br /></div></div> </div> </div> </div> <style> #rec137033425 .t-text{color:#ffffff;}</style> </div> <div id="rec137034936" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6537-3764-4737-b436-306661313432/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6537-3764-4737-b436-306661313432/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild6537-3764-4737-b436-306661313432/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137033417" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Отрегулировав кейдж нужным образом, вы получите карту нормалей без искаженных деталей, после чего сможете совместить результат с оригинальной картой в Photoshop. <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);">Способ 4</span></span></strong> <br /><br /> Внутри Marmoset Toolbag мы можем воспользоваться инструментом Paint Skew, чтобы избавиться от искажений на карте нормалей. Нажмите кнопку "Paint Skew", чтобы перейти в режим редактирования, и начните кисточкой указывать области, которые хотите исправить. Эта функция работает путем попиксельного смешивания нормалей поверхности объекта и нормалей кейджа. На 2D карте черный цвет будет означать полностью исправленные искажения, а белый – оригинальные нормали. <br /><br /></div></div> </div> </div> </div> <style> #rec137033417 .t-text{color:#ffffff;}</style> </div> <div id="rec137035212" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3365-3837-4539-b462-643435653231/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3365-3837-4539-b462-643435653231/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild3365-3837-4539-b462-643435653231/2.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137033280" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Перекрывание несимметричных UV островов <br /><br /> Иногда (или довольно часто) делая UV развертку, вы можете увидеть множество одинаковых или очень схожих UV островов и подумать: "Ух ты, какая трата ценного UV пространства" <br /><br /> К счастью, существует простой метод наложить друг на друга UV острова, принадлежащие одинаковым объектам, и получить хороший результат. <br /><br /> Предположим, у вас есть вытянутый куб. <br /><br /></div></div> </div> </div> </div> <style> #rec137033280 .t-text{color:#ffffff;}</style> </div> <div id="rec137035420" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3863-3461-4138-b662-343233396466/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3863-3461-4138-b662-343233396466/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild3863-3461-4138-b662-343233396466/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137035286" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Если вы разделите каждую поверхность на UV согласно расставленным жестким граням, то получите 6 UV островов. Вот, что вы увидите после запечки:</div></div> </div> </div> </div> <style> #rec137035286 .t-text{color:#ffffff;}</style> </div> <div id="rec137035427" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3130-3834-4261-b039-636235613530/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3130-3834-4261-b039-636235613530/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild3130-3834-4261-b039-636235613530/2.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137035304" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Обратите внимание, насколько схожи эти UV острова. Один из кусков выглядит так же, как остальные три, и оставшиеся два побольше тоже выглядят почти идентично. <br /><br /> <em><span data-redactor-tag="span" style="font-size: 24px;">-Мне правда нужны все эти острова? Давайте сложим их друг на друга!</span> </em><br /><br /> Мы так и сделаем, но сначала вы должны подумать о том, как собираетесь текстурировать эту модель. Нужны ли вам уникальные детали на каждой поверхности? Важно ли держать их отдельно для уникальных рельефных деталей или царапин? Сильно ли будет заметно то, что они отзеркалены? <br /><br /> Если вы решите накладывать острова друг на друга, то дальнейший процесс достаточно прост, хотя есть некоторые вещи, о которых необходимо помнить: <br /><br /> <ol> <li> Помните об ориентации поверхностей, которые вы накладываете друг на друга. Особенно о простых квадратных поверхностях, которые ненамеренно можно перевернуть, а, значит, что ваши текстуры также будут инвертированы в ненужных местах. </li> <li> Наложить UV острова друг на друга несложно. Внутри 3DsMax убедитесь в том, что инструмент Snap () активирован. Создать карусель Добавьте описание </li> <li> Сместите перекрывающиеся UV на один тайл в сторону. </li> <li> Запекайте. </li> </ol></div></div> </div> </div> </div> <style> #rec137035304 .t-text{color:#ffffff;}</style> </div> <div id="rec137035571" class="r t-rec t-rec_pt_15 t-rec_pb_30" style="padding-top:15px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6463-6562-4266-a337-383534376233/I0Cw6A_VNYo.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6463-6562-4266-a337-383534376233/-/empty/I0Cw6A_VNYo.jpg" data-original="https://static.tildacdn.com/tild6463-6562-4266-a337-383534376233/I0Cw6A_VNYo.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137036026" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6433-6139-4830-b438-653935616361/BxuwgU3uww8.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6433-6139-4830-b438-653935616361/-/empty/BxuwgU3uww8.jpg" data-original="https://static.tildacdn.com/tild6433-6139-4830-b438-653935616361/BxuwgU3uww8.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137035323" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Чистый и хорошо выглядящий результат. Я применил быстро сделанную карту нормалей на втором скриншоте, чтобы вы могли посмотреть, как это выглядит.</div></div> </div> </div> </div> <style> #rec137035323 .t-text{color:#ffffff;}</style> </div> <div id="rec137035459" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3336-6333-4366-b764-326430353732/SuiQvEeEWts.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3336-6333-4366-b764-326430353732/-/empty/SuiQvEeEWts.jpg" data-original="https://static.tildacdn.com/tild3336-6333-4366-b764-326430353732/SuiQvEeEWts.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137035329" class="r t-rec t-rec_pt_60 t-rec_pb_15" style="padding-top:60px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> <em><span data-redactor-tag="span" style="font-size: 20px;">-Но что если мои UV острова различаются, а я все равно хочу их наложить друг на друга?</span></em> <br /><br /> Вы можете попробовать это сделать, но стоит быть крайне осторожным. У вас есть два выбора, когда предстоит накладывать друг на друга UV в подобных случаях. <br /><br /> <ol> <li> Подогнать один остров под размер другого. </li> </ol> Это может сработать с простыми квадратными UV островами, но, скорее всего, станет проблемой при работе с чем-то более сложным, и тогда себя сильно проявят потяги на развертке. Попробуйте и посмотрите сами. Вам также стоит остерегаться того, что, изменяя масштаб и размер островов, вы назначаете им непропорциональное количество текстурного пространства и соответственно получаете следующее: <br /><br /> Левый – подогнанная UV; средняя – оригинал; правая – меньший UV остров лежит внутри большего. <br /><br /></div></div> </div> </div> </div> <style> #rec137035329 .t-text{color:#ffffff;}</style> </div> <div id="rec137036277" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3563-3136-4662-a465-396566373038/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3563-3136-4662-a465-396566373038/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild3563-3136-4662-a465-396566373038/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137036282" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Можно заметить, что размер рельефных деталей слева отличается от оригинальной развертки. При правильном подходе это может стать преимуществом. Будьте внимательны, когда станете накладывать UV острова друг на друга. <br /><br /> И последнее - меньший UV остров лежит внутри большего. <br /><br /> Вот, что из этого выйдет: <br /><br /></div></div> </div> </div> </div> <style> #rec137036282 .t-text{color:#ffffff;}</style> </div> <div id="rec137036320" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6532-3439-4036-b035-303062323163/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6532-3439-4036-b035-303062323163/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild6532-3439-4036-b035-303062323163/2.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137036348" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Поскольку меньший остров не разделяет те же фаски на карте нормалей, то, соответственно, их не видно на модели внутри движка, из-за чего вы получаете выделяющиеся жесткие грани. <br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);">Запекание</span></span></strong> <br /><span style="font-size: 28px;"><strong>Сбросить трансформацию</strong> </span><br /><br /> Прежде чем запекать карты, убедитесь, что трансформация вашей LP модели сброшена. Это чрезвычайно важно! Часто в процессе моделирования модель вращается и масштабируется, и эти манипуляции могут создать путанные локальные координаты для модели, что часто оборачивается ошибками при запекание карт нормалей. <br /><br /> <span style="font-size: 24px;"><strong><span data-redactor-tag="span" style="font-size: 28px;">3DsMax</span></strong> </span><br /><br /> Во вкладке инструментов найдите Reset Xform. Примените его, желательно предварительно сбросив стек. После чего экспортируйте модель. <br /><br /> <span style="font-size: 30px;"><strong><span data-redactor-tag="span" style="font-size: 24px;">Maya</span></strong> </span><br /><br /> В закладке Modify вам необходимо воспользоваться инструментом Freeze Transformation, предварительно удалив историю для модели. <br /><br /><span style="font-size: 28px;"><strong>Отступ граней</strong></span> <br /><br /> Если карта нормалей не имеет достаточный отступ, то это создаст швы на границах UV островов. <br /><br /><span style="font-size: 28px;"><strong>Направление нормалей</strong></span> <br /><br /> Перед запеканием убедитесь, что ваша HP и LP модель имеет корректное направление нормалей, то есть, нет инвертированных нормалей. Внутри 3DsMax вы можете проверить это, выбрав Face Direction на выделенном объекте. После этого инвертированные поверхности подсветятся зеленым. Если инвертированные поверхности останутся незамеченными, то это выльется в ошибки проецирования, поэтому будьте внимательны. <br /><br /><strong><span data-redactor-tag="span" style="font-size: 28px;">Описание всего процесса </span></strong><br /><br /> При запекании карты нормалей необходимо создать проецирующий кейдж, чтобы получить хороший результат с учетом жестких граней. Существует несколько способов сделать это: <br /><br /> <span style="font-size: 24px;"><strong>3DsMax</strong> </span><br /><br /> Примените модификатор Projection к LP модели. <br /><br /> На картинке видно, как кейдж полностью покрывает HP модель с плавающей геометрией. Очень важно, чтобы он закрывал собой все, иначе возникнут ошибки проецирования. <br /><br /> В поле Push настройте уровень отступа кейджа от объекта. Amount = расстояние. Вы можете также манипулировать кейджем вручную через вершины. В 3DsMax манипулирование кейджем может повлиять на расстояние проецирования и направление лучей проекции, поэтому двигая вершины вручную, необходимо быть крайне осторожным. <br /><br /></div></div> </div> </div> </div> <style> #rec137036348 .t-text{color:#ffffff;}</style> </div> <div id="rec137037514" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3837-6630-4563-b164-303035346430/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3837-6630-4563-b164-303035346430/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild3837-6630-4563-b164-303035346430/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137037246" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> <strong><span data-redactor-tag="span" style="font-size: 24px;">Maya</span></strong> <br /><br /> В настройках Transfer Map регулируете размер кейджа через слайдер "Search Envelope". Поскольку, в отличие от 3DsMax кейдж в Maya можно регулировать лишь по величине отступа, то можно меньше волноваться о возможных ошибках проецирования. <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 24px;">Xnormal</span></strong> <br /><br /> Вы можете создать кейдж для своего объекта прямо внутри Xnormal. Для этого необходимо перейти в 3D Viewer. <br /><br /></div></div> </div> </div> </div> <style> #rec137037246 .t-text{color:#ffffff;}</style> </div> <div id="rec137036389" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6535-6435-4938-b132-383233313763/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6535-6435-4938-b132-383233313763/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild6535-6435-4938-b132-383233313763/2.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137037314" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Отметьте поле Edit Mesh и начните редактировать кейдж. Сохраните результат по окончанию.</div></div> </div> </div> </div> <style> #rec137037314 .t-text{color:#ffffff;}</style> </div> <div id="rec137037230" class="r t-rec t-rec_pt_75 t-rec_pb_75" style="padding-top:75px;padding-bottom:75px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3263-6239-4664-a332-663465326266/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3263-6239-4664-a332-663465326266/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild3263-6239-4664-a332-663465326266/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137037330" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Но из-за необходимости переключаться между приложениями и не слишком удобного управления в 3D Viewer - это не лучший подход в создании кейджа. <br /><br /> Вместо этого вы можете импортировать кейдж прямо из 3DsMax. <br /><br /> Внутри модификатора Projection, после создания кейджа, нажмите кнопку Export, что создаст отдельный объект для экспорта. Эскпортируйте его в формате .obj и откройте в Xnormal. <br /><br /> Нажмите ПКМ на строке с LP объектом в XNormal и выберете "Browse external cage file", после чего добавьте экспортированный из 3DsMax кейдж. <br /><br /></div></div> </div> </div> </div> <style> #rec137037330 .t-text{color:#ffffff;}</style> </div> <div id="rec137037235" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3262-6161-4161-a463-643965353130/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3262-6161-4161-a463-643965353130/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild3262-6161-4161-a463-643965353130/2.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137037336" class="r t-rec t-rec_pt_60 t-rec_pb_15" style="padding-top:60px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> <strong>Marmoset Toolbag</strong> <br /><br /> В Marmoset регулировать кейдж можно только по величине отступа от LP. Для этого воспользуйтесь параметром Min offset/Max offset. Используя Paint Offset можно точнее контролировать отступ кейджа. Он позволяет указывать отдельные области, где необходимо изменить отступ кейджа от LP. Если же вы не хотите производить ручных настроек, то нажмите кнопку Estimate Offset, функция которой попытается рассчитать наилучшую форму кейджа для LP модели. <br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);" data-redactor-style="color: rgb(255, 255, 255);">Устранение ошибок </span></span></strong><br /><br /> Даже с таким подробным руководством у вас на руках можно столкнуться с множеством разных проблем, когда речь заходит о запекании карт нормалей. Дальше я покажу вам, как предотвращать и решать большую часть из них. <br /><br /> <span style="font-size: 28px;"><strong>Будьте подготовлены</strong></span> <br /><br /> Если вы столкнетесь с проблемой, решение которой вам неизвестно - не пугайтесь. Обратите внимание на эти простые шаги, чтобы убедиться, что вы полностью подготовили ваш объект для запекания. Я продемонстрирую их, используя 3DsMax, но эти принципы можно применить и для всех остальных приложений. <br /><br /> <ol> <li> Убедитесь, что нормали на ваших моделях указывают в одном направлении и не инвертированы. Существует много способов сделать это. </li> <li> Убедитесь, что LP модель имеет подходящую топологию. Проверьте модель на предмет наличия любых возможных ошибок: несшитые вершины, наложенные друг на друга поверхности, инвертированные поверхности, изолированные поверхности, многоугольники и т.д. В 3DsMax вы можете использовать модификатор "STL Check" или Xview для обнаружения большей части из указанных проблем. </li> <li> Сколапсите стек вашего объекта. (Удалите историю в Maya) </li> <li> Убедитесь, что все перекрывающиеся UV острова сдвинуты на 1 тайл в сторону. </li> <li> Примените Reset Transform. (Freeze Transform для Maya) </li> <li> Проверьте группы сглаживания. (Жесткие грани для Maya) </li> <li> Траингулируйте модель. </li> <li> Создайте кейдж (если только не планируете запекать в Marmoset Toolbag) </li> <li> Экспортируете LP модель как .obj или .fbx с группами сглаживания, нормалями, тангентами (для .fbx) и текстурными координатами. </li> </ol> Чаще всего, это все что нужно, чтобы быть уверенным, что модель полностью готова к запеканию. <br /><br /> <strong>Давайте взглянем на специфические проблемы.</strong> <br /><br /> <em><span data-redactor-tag="span" style="font-size: 20px;">-</span><span style="font-size: 20px;">Я все сделал правильно, но до сих пор вижу швы на карте нормалей!</span></em></div></div> </div> </div> </div> <style> #rec137037336 .t-text{color:#ffffff;}</style> </div> <div id="rec137037239" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3938-3635-4533-b134-663932653638/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3938-3635-4533-b134-663932653638/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild3938-3635-4533-b134-663932653638/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137037346" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Это идеально запеченная карта нормалей, за исключением одной детали. Когда вы видите подобные странные швы, при этом выполнив все необходимые шаги, то, вероятно, вы упустили одну важную деталь - отступ. Это простой куб, запеченный при разрешении 1024х1024, но UV острова имеют лишь один пиксель отступа между собой. Попробуйте повысить его до 8-16 пикселей, в зависимости от желаемого разрешения текстуры и величины анизотропной фильтрации в вашем движке.</div></div> </div> </div> </div> <style> #rec137037346 .t-text{color:#ffffff;}</style> </div> <div id="rec137038713" class="r t-rec t-rec_pt_45 t-rec_pb_75" style="padding-top:45px;padding-bottom:75px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3466-3434-4237-b434-613233306262/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3466-3434-4237-b434-613233306262/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild3466-3434-4237-b434-613233306262/2.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137038692" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="font-size:20px;color:#999999;" data-customstyle="yes"><em>-Я вижу странный шум на поверхности объектов после применения карты нормалей.</em></div></div> </div> </div> </div> <style> #rec137038692 .t-text{color:#ffffff;}</style> </div> <div id="rec137038737" class="r t-rec t-rec_pt_75 t-rec_pb_0" style="padding-top:75px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6237-6332-4863-b161-383962663839/3.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6237-6332-4863-b161-383962663839/-/empty/3.jpg" data-original="https://static.tildacdn.com/tild6237-6332-4863-b161-383962663839/3.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137038686" class="r t-rec t-rec_pt_45 t-rec_pb_15" style="padding-top:45px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Когда цилиндры кратны 4, а Причина, по которой вы видите это – малая глубина битов. Это не то, о чем вам предстоит волноваться большую часть времени, поскольку этого легко избежать. Есть два распространенных способа, которые используют рендеры для компенсации проблемы: <br /><br /> <ol> <li> 3DsMax добавляет шум на текстуру, чем удаляет видимые артефакты, но сам шум становиться заметен. </li> <li> В Maya и Xnormal шум отсутствует, но возникает некий ступенчатый артефакт. </li> </ol> Подобные артефакты становятся заметнее на отражающих поверхностях. Как уже было сказано, это происходит из-за недостатка глубины битов на канал (глубины цвета). Это означает, что на текстуре недостаточно цветовых оттенков для передачи более точных цветовых переходов, что приводит к появлению ступенчатых артефактов. Вы можете запечь карту с большей глубиной цвета, то есть 16 бит на канал, но так как некоторые рендеры могут работать только с 8-битной картой нормалей, то позже вам может понадобиться конвертировать ее. Поэтому предпочтительным вариантом рендеринга для минимизации проблем с отражающими поверхностями является сглаживание карты нормалей за счет добавления шума. Marmoset Toolbag использует данный метод по умолчанию. <br /><br />сечений зависит от размера цилиндра.<br /></div></div> </div> </div> </div> <style> #rec137038686 .t-text{color:#ffffff;}</style> </div> <div id="rec137038743" class="r t-rec t-rec_pt_30 t-rec_pb_30" style="padding-top:30px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3436-3462-4463-a533-343961373530/1.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3436-3462-4463-a533-343961373530/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild3436-3462-4463-a533-343961373530/1.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137038898" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Если вы используете другой рендер, то сделаете тестовые запечки в .tga и, чтобы исправить видимые артефакты, сделайте следующее: <br /><br /> Запеките карту нормалей при 16/32 глубине битов на канал (в формате .tiff, например). Затем экспорируйте в Photoshop и пересохраните с глубиной цвета 8 бит. Это поможет избавиться от артефактов за счет алгоритма сжатия. <br /><br /> <em><span data-redactor-tag="span" style="font-size: 20px;">-Мои запечки желтого цвета, а должны быть синего. Что я должен делать?</span></em></div></div> </div> </div> </div> <style> #rec137038898 .t-text{color:#ffffff;}</style> </div> <div id="rec137038914" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6237-6662-4131-b134-363533656166/2.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild6237-6662-4131-b134-363533656166/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild6237-6662-4131-b134-363533656166/2.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137038927" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Если вы выполнили все вышеописанные шаги по подготовке к запеканию, то никогда не должны были с этим столкнуться. Но на случай, если что-то ускользнуло от вас, напомню, что данная проблема встречается при наличии инвертированных поверхностей на HP. Исправьте и запеките повторно. <br /><br /><strong><span data-redactor-tag="span" style="font-size: 32px;"><span style="color: rgb(255, 255, 255);">Рисование вручную</span></span></strong> <br /><br /> <em>Стоит ли исправлять карту нормалей руками?</em> Порой, сталкиваясь с волнистостью на карте нормалей, ошибками проекции или градиентами, если вы не хотите исправлять LP или создавать подходящий кейдж, то существуют способы исправления ошибок в Photoshop с помощью смазывания или чистики карты нормалей. Но это довольно деструктивный подход. Что если кто-то попросит вас внести изменения в модель, и вам придется все перезапекать ? Вы будете делать все исправления заново? Если вы с самого начала с умом подошли к созданию HP и LP, то вам и не придется делать много лишней работы в будущем. <br /><br /> <em>Как добавить детали на карту нормалей.</em> Хорошо, я запек объект, но мне еще не хватает деталей. Как добавить, например, рельеф ткани или другие детали? <br /><br /> Существует множество способов создания дополнительных деталей для карты нормалей. Простой способ – это конвертировать карту высоты в карту нормалей через плагины в Photoshop, Xnormal, Quixel или Substance. <br /><br /> Карта высоты – это карта в градациях серого цвета. <br /><br /></div></div> </div> </div> </div> <style> #rec137038927 .t-text{color:#ffffff;}</style> </div> <div id="rec137038938" class="r t-rec t-rec_pt_15 t-rec_pb_30" style="padding-top:15px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3266-3230-4139-b866-306162346538/3.jpg"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3266-3230-4139-b866-306162346538/-/empty/3.jpg" data-original="https://static.tildacdn.com/tild3266-3230-4139-b866-306162346538/3.jpg"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137038959" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color: rgb(153, 153, 153);" data-customstyle="yes">Конвертируя карту высоты в карту нормалей важно понимать, что значат эти цвета на карте. Все, что темнее серого - переносится как вдавливания, а светлее – как выступы. Не стоит использовать средние тона серого, иначе нельзя будет толком отличить углубления от выступов.<br /><br />Серый – средний слой.<br /><br />Используя эту технику, вы можете конвертировать карту в серых тонах в карту нормалей.<br /><br /><strong style="font-size: 28px;">Приложения для рисования на карте нормалей</strong><span style="font-size: 28px;"> </span><br /><br />С помощью Quixel и Substance Painter добавление деталей на карту нормалей стало достаточно простым процессом. Если вы работаете в SP, то можете с легкостью добавлять рельефные детали через канал Height, который, в свою очередь, автоматически перенесет полученную информацию на канал Normal, из которого вы можете выгрузить карту нормалей с учетом новых деталей.<br /><br /><a href="https://www.substance3d.com/products/substance-painter">https://www.allegorithmic.com/products/substance-painter</a><br /><br />Также вы можете использовать Quixel Suite 2. Это плагин для Photoshop, позволяющий рисовать прямо на карте нормалей и быстро генерировать детали через внутренние инструменты Photoshop.<br /><br /><a href="https://quixel.com">http://quixel.se</a><br /><br />-----<br /><br />Читать отзывы про нас: <a href="https://school-xyz.com/feedback">https://school-xyz.com/feedback</a></div></div> </div> </div> </div> <style> #rec137038959 .t-text{color:#ffffff;}</style> </div> <div id="rec783118043" class="r t-rec" style=" " data-animationappear="off" data-record-type="396"> <!-- T396 --> <style>#rec783118043 .t396__artboard {height:660px;background-color:#0d0d0d;}#rec783118043 .t396__filter {height:660px;}#rec783118043 .t396__carrier{height:660px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec783118043 .t396__artboard,#rec783118043 .t396__filter,#rec783118043 .t396__carrier {height:620px;}#rec783118043 .t396__filter {}#rec783118043 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec783118043 .t396__artboard,#rec783118043 .t396__filter,#rec783118043 .t396__carrier {height:528px;}#rec783118043 .t396__filter {}#rec783118043 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec783118043 .t396__artboard,#rec783118043 .t396__filter,#rec783118043 .t396__carrier {height:725px;}#rec783118043 .t396__filter {}#rec783118043 .t396__carrier {background-attachment:scroll;}}#rec783118043 .tn-elem[data-elem-id="1722957462807"]{z-index:2;top:132px;;left:calc(50% - 600px + 220px);;width:760px;height:396px;}#rec783118043 .tn-elem[data-elem-id="1722957462807"] .tn-atom{border-radius:24px;background-color:#31313a;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec783118043 .tn-elem[data-elem-id="1722957462807"]{top:108px;;left:calc(50% - 480px + 114px);;width:732px;height:404px;}}@media screen and (max-width:959px){#rec783118043 .tn-elem[data-elem-id="1722957462807"]{top:100px;;left:calc(50% - 320px + 10px);;width:620px;height:328px;}}@media screen and (max-width:639px){#rec783118043 .tn-elem[data-elem-id="1722957462807"]{top:64px;;width:300px;height:597px;border-radius:16px;}#rec783118043 .tn-elem[data-elem-id="1722957462807"] .tn-atom{background-size:cover;border-radius:16px;}}#rec783118043 .tn-elem[data-elem-id="1722958532176"]{z-index:3;top:140px;;left:calc(50% - 600px + 228px);;width:444px;height:380px;}#rec783118043 .tn-elem[data-elem-id="1722958532176"] .tn-atom{border-radius:16px;background-color:#23232a;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec783118043 .tn-elem[data-elem-id="1722958532176"]{top:116px;;left:calc(50% - 480px + 122px);;width:416px;height:388px;}}@media screen and (max-width:959px){#rec783118043 .tn-elem[data-elem-id="1722958532176"]{top:108px;;left:calc(50% - 320px + 18px);;width:604px;height:312px;}}@media screen and (max-width:639px){#rec783118043 .tn-elem[data-elem-id="1722958532176"]{top:364px;;width:284px;height:289px;}}#rec783118043 .tn-elem[data-elem-id="1722957592507"]{color:#ffffff;z-index:4;top:218px;;left:calc(50% - 600px + 252px);;width:380px;height:auto;}#rec783118043 .tn-elem[data-elem-id="1722957592507"] .tn-atom{color:#ffffff;font-size:24px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1;font-weight:600;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec783118043 .tn-elem[data-elem-id="1722957592507"]{top:194px;;left:calc(50% - 480px + 146px);;width:324px;height:auto;}#rec783118043 .tn-elem[data-elem-id="1722957592507"] .tn-atom{font-size:20px;background-size:cover;}}@media screen and (max-width:959px){#rec783118043 .tn-elem[data-elem-id="1722957592507"]{top:178px;;left:calc(50% - 320px + 34px);;width:322px;height:auto;}}@media screen and (max-width:639px){#rec783118043 .tn-elem[data-elem-id="1722957592507"]{top:434px;;left:calc(50% - 160px + 34px);;width:252px;height:auto;}#rec783118043 .tn-elem[data-elem-id="1722957592507"] .tn-atom{font-size:16px;background-size:cover;}}#rec783118043 .tn-elem[data-elem-id="1722957649470"]{color:#ffffff;z-index:5;top:282px;;left:calc(50% - 600px + 252px);;width:396px;height:auto;}#rec783118043 .tn-elem[data-elem-id="1722957649470"] .tn-atom{color:#ffffff;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.6;font-weight:400;opacity:0.6;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec783118043 .tn-elem[data-elem-id="1722957649470"]{top:250px;;left:calc(50% - 480px + 146px);;width:368px;height:auto;}}@media screen and (max-width:959px){#rec783118043 .tn-elem[data-elem-id="1722957649470"]{top:234px;;left:calc(50% - 320px + 34px);;width:418px;height:auto;}}@media screen and (max-width:639px){#rec783118043 .tn-elem[data-elem-id="1722957649470"]{top:482px;;left:calc(50% - 160px + 34px);;width:252px;height:auto;}#rec783118043 .tn-elem[data-elem-id="1722957649470"] .tn-atom{font-size:12px;background-size:cover;}}#rec783118043 .tn-elem[data-elem-id="1722957742812"]{color:#ffffff;text-align:center;z-index:6;top:454px;;left:calc(50% - 600px + 252px);;width:172px;height:42px;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom{color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.6;font-weight:400;border-radius:30px;background-position:center center;--t396-speedhover:0.2s;transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;--t396-bgcolor-color:#8080ff;--t396-bgcolor-image:none;--t396-bgcolor-hover-color:#6060ff;--t396-bgcolor-hover-image:none;background-color:var(--t396-bgcolor-color,transparent);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom::after{display:none;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-text{transition:color var(--t396-speedhover,0s) ease-in-out;color:#ffffff;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover::after{opacity:0;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover{animation-name:none;background-color:var(--t396-bgcolor-hover-color,var(--t396-bgcolor-color,transparent));}}@media screen and (max-width:1199px){#rec783118043 .tn-elem[data-elem-id="1722957742812"]{top:438px;;left:calc(50% - 480px + 146px);;width:px;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom{white-space:normal;background-size:cover;background-color:var(--t396-bgcolor-color,transparent);}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom::after{display:none;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-text{overflow:visible;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover::after{opacity:0;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover{animation-name:none;background-color:var(--t396-bgcolor-hover-color,var(--t396-bgcolor-color,transparent));}}}@media screen and (max-width:959px){#rec783118043 .tn-elem[data-elem-id="1722957742812"]{top:362px;;left:calc(50% - 320px + 34px);;width:px;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom{white-space:normal;background-size:cover;background-color:var(--t396-bgcolor-color,transparent);}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom::after{display:none;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-text{overflow:visible;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover::after{opacity:0;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover{animation-name:none;background-color:var(--t396-bgcolor-hover-color,var(--t396-bgcolor-color,transparent));}}}@media screen and (max-width:639px){#rec783118043 .tn-elem[data-elem-id="1722957742812"]{top:601px;;left:calc(50% - 160px + 34px);;width:142px;height:36px;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom{white-space:normal;font-size:12px;background-size:cover;background-color:var(--t396-bgcolor-color,transparent);}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom::after{display:none;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-text{overflow:visible;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover::after{opacity:0;}#rec783118043 .tn-elem[data-elem-id="1722957742812"] .tn-atom:hover{animation-name:none;background-color:var(--t396-bgcolor-hover-color,var(--t396-bgcolor-color,transparent));}}}#rec783118043 .tn-elem[data-elem-id="1722958769545"]{z-index:7;top:140px;;left:calc(50% - 600px + 680px);;width:292px;height:380px;}#rec783118043 .tn-elem[data-elem-id="1722958769545"] .tn-atom{border-radius:16px;background-position:center center;background-size:cover;background-repeat:no-repeat;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec783118043 .tn-elem[data-elem-id="1722958769545"]{top:116px;;left:calc(50% - 480px + 546px);;height:388px;}}@media screen and (max-width:959px){#rec783118043 .tn-elem[data-elem-id="1722958769545"]{top:116px;;left:calc(50% - 320px + 474px);;width:140px;height:178px;}#rec783118043 .tn-elem[data-elem-id="1722958769545"] .tn-atom{background-position:center center;background-size:cover;}}@media screen and (max-width:639px){#rec783118043 .tn-elem[data-elem-id="1722958769545"]{top:72px;;left:calc(50% - 160px + 18px);;width:284px;height:284px;border-radius:8px;}#rec783118043 .tn-elem[data-elem-id="1722958769545"] .tn-atom{background-position:0.000% 27.849%;background-size:100.000%;border-radius:8px;}}#rec783118043 .tn-elem[data-elem-id="1722958865476"]{color:#ffffff;z-index:8;top:468px;;left:calc(50% - 600px + 696px);;width:96px;height:auto;}#rec783118043 .tn-elem[data-elem-id="1722958865476"] .tn-atom{color:#ffffff;font-size:12px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.5;font-weight:400;opacity:0.5;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec783118043 .tn-elem[data-elem-id="1722958865476"]{top:452px;;left:calc(50% - 480px + 562px);;height:auto;}}@media screen and (max-width:959px){#rec783118043 .tn-elem[data-elem-id="1722958865476"]{top:302px;;left:calc(50% - 320px + 474px);;height:auto;}}@media screen and (max-width:639px){#rec783118043 .tn-elem[data-elem-id="1722958865476"]{top:322px;;left:calc(50% - 160px + 34px);;width:148px;height:auto;}}#rec783118043 .tn-elem[data-elem-id="1722958910512"]{color:#ffffff;text-align:center;z-index:9;top:164px;;left:calc(50% - 600px + 252px);;width:64px;height:38px;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom{color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.6;font-weight:400;border-radius:30px;background-position:center center;--t396-borderwidth:1px;--t396-bordercolor:#39393f;--t396-speedhover:0.2s;transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom::after{display:none;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-text{transition:color var(--t396-speedhover,0s) ease-in-out;color:#ffffff;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover::after{opacity:0;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover{animation-name:none;}}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover{border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor-hover,var(--t396-bordercolor,transparent));}}@media screen and (max-width:1199px){#rec783118043 .tn-elem[data-elem-id="1722958910512"]{top:140px;;left:calc(50% - 480px + 146px);;width:px;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom{white-space:normal;background-size:cover;padding:0;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom::after{display:none;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-text{overflow:visible;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover::after{opacity:0;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover{animation-name:none;}}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover{border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor-hover,var(--t396-bordercolor,transparent));}}}@media screen and (max-width:959px){#rec783118043 .tn-elem[data-elem-id="1722958910512"]{top:124px;;left:calc(50% - 320px + 34px);;width:px;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom{white-space:normal;background-size:cover;padding:0;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom::after{display:none;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-text{overflow:visible;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover::after{opacity:0;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover{animation-name:none;}}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover{border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor-hover,var(--t396-bordercolor,transparent));}}}@media screen and (max-width:639px){#rec783118043 .tn-elem[data-elem-id="1722958910512"]{top:380px;;width:px;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom{white-space:normal;background-size:cover;padding:0;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom::after{display:none;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-text{overflow:visible;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-border::before{display:none;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom .tn-atom__button-border::after{display:none;}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover::after{opacity:0;}#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover{animation-name:none;}}@media (hover),(min-width:0\0){#rec783118043 .tn-elem[data-elem-id="1722958910512"] .tn-atom:hover{border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor-hover,var(--t396-bordercolor,transparent));}}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="783118043" data-artboard-screens="320,640,960,1200" data-artboard-height="660" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-height-res-320="725" data-artboard-height-res-640="528" data-artboard-height-res-960="620"> <div class="t396__carrier" data-artboard-recid="783118043"></div> <div class="t396__filter" data-artboard-recid="783118043"></div> <div class='t396__elem tn-elem tn-elem__7831180431722957462807' data-elem-id='1722957462807' data-elem-type='shape' data-field-top-value="132" data-field-left-value="220" data-field-height-value="396" data-field-width-value="760" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="64" data-field-height-res-320-value="597" data-field-width-res-320-value="300" data-field-top-res-640-value="100" data-field-left-res-640-value="10" data-field-height-res-640-value="328" data-field-width-res-640-value="620" data-field-top-res-960-value="108" data-field-left-res-960-value="114" data-field-height-res-960-value="404" data-field-width-res-960-value="732"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__7831180431722958532176' data-elem-id='1722958532176' data-elem-type='shape' data-field-top-value="140" data-field-left-value="228" data-field-height-value="380" data-field-width-value="444" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="364" data-field-height-res-320-value="289" data-field-width-res-320-value="284" data-field-top-res-640-value="108" data-field-left-res-640-value="18" data-field-height-res-640-value="312" data-field-width-res-640-value="604" data-field-top-res-960-value="116" data-field-left-res-960-value="122" data-field-height-res-960-value="388" data-field-width-res-960-value="416"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__7831180431722957592507' data-elem-id='1722957592507' data-elem-type='text' data-field-top-value="218" data-field-left-value="252" data-field-width-value="380" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-fontsize-value="24" data-field-top-res-320-value="434" data-field-left-res-320-value="34" data-field-width-res-320-value="252" data-field-fontsize-res-320-value="16" data-field-top-res-640-value="178" data-field-left-res-640-value="34" data-field-width-res-640-value="322" data-field-top-res-960-value="194" data-field-left-res-960-value="146" data-field-width-res-960-value="324" data-field-fontsize-res-960-value="20"> <div class='tn-atom'field='tn_text_1722957592507'>Draft Punk. 3D-моделирование объектов</div> </div> <div class='t396__elem tn-elem tn-elem__7831180431722957649470' data-elem-id='1722957649470' data-elem-type='text' data-field-top-value="282" data-field-left-value="252" data-field-width-value="396" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-fontsize-value="16" data-field-top-res-320-value="482" data-field-left-res-320-value="34" data-field-width-res-320-value="252" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="234" data-field-left-res-640-value="34" data-field-width-res-640-value="418" data-field-top-res-960-value="250" data-field-left-res-960-value="146" data-field-width-res-960-value="368"> <div class='tn-atom'field='tn_text_1722957649470'>Пройди курс по&nbsp;3D-моделированию и&nbsp;научись создавать модели для игр. Уроки проходят в&nbsp;онлайн-формате&nbsp;— сможешь вернуться к&nbsp;лекциям в&nbsp;любой момент и&nbsp;освежить свои знания.</div> </div> <div class='t396__elem tn-elem tn-elem__7831180431722957742812' data-elem-id='1722957742812' data-elem-type='button' data-field-top-value="454" data-field-left-value="252" data-field-height-value="42" data-field-width-value="172" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-fontsize-value="14" data-field-top-res-320-value="601" data-field-left-res-320-value="34" data-field-height-res-320-value="36" data-field-width-res-320-value="142" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="362" data-field-left-res-640-value="34" data-field-top-res-960-value="438" data-field-left-res-960-value="146"> <a class='tn-atom js-click-zero-stat' href="https://www.school-xyz.com/draftpunk?utm_source=blog&amp;utm_medium=banner&amp;utm_campaign=draftpunk" data-tilda-event-name="/tilda/click/rec783118043/button1722957742812"> <div class='tn-atom__button-content'> <span class="tn-atom__button-text">Узнать больше</span> </div> <span class="tn-atom__button-border"></span> </a> </div> <div class='t396__elem tn-elem tn-elem__7831180431722958769545' data-elem-id='1722958769545' data-elem-type='shape' data-field-top-value="140" data-field-left-value="680" data-field-height-value="380" data-field-width-value="292" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="72" data-field-left-res-320-value="18" data-field-height-res-320-value="284" data-field-width-res-320-value="284" data-field-top-res-640-value="116" data-field-left-res-640-value="474" data-field-height-res-640-value="178" data-field-width-res-640-value="140" data-field-top-res-960-value="116" data-field-left-res-960-value="546" data-field-height-res-960-value="388"> <div class='tn-atom t-bgimg' style="background-image:url('https://static.tildacdn.com/tild3432-3463-4739-a433-376463333266/25_1.jpg');"
aria-label='' role="img"> </div> </div> <div class='t396__elem tn-elem tn-elem__7831180431722958865476' data-elem-id='1722958865476' data-elem-type='text' data-field-top-value="468" data-field-left-value="696" data-field-width-value="96" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-fontsize-value="12" data-field-top-res-320-value="322" data-field-left-res-320-value="34" data-field-width-res-320-value="148" data-field-top-res-640-value="302" data-field-left-res-640-value="474" data-field-top-res-960-value="452" data-field-left-res-960-value="562"> <div class='tn-atom'field='tn_text_1722958865476'>Работа Юрия Порубова</div> </div> <div class='t396__elem tn-elem tn-elem__7831180431722958910512' data-elem-id='1722958910512' data-elem-type='button' data-field-top-value="164" data-field-left-value="252" data-field-height-value="38" data-field-width-value="64" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-fontsize-value="14" data-field-top-res-320-value="380" data-field-top-res-640-value="124" data-field-left-res-640-value="34" data-field-top-res-960-value="140" data-field-left-res-960-value="146"> <div class='tn-atom'> <div class='tn-atom__button-content'> <span class="tn-atom__button-text">Курс</span> </div> <span class="tn-atom__button-border"></span> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('783118043');});});</script> <!-- /T396 --> </div> <div id="rec138187907" class="r t-rec t-rec_pt_15 t-rec_pb_30" style="padding-top:15px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3561-3363-4630-b231-373461643131/1.png"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3561-3363-4630-b231-373461643131/-/empty/1.png" data-original="https://static.tildacdn.com/tild3561-3363-4630-b231-373461643131/1.png"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec137040603" class="r t-rec" style=" " data-animationappear="off" data-record-type="449"> <!-- T381 --> <div id="nav137040603marker"></div> <div id="nav137040603" class="t449 t449__flipped " data-navmarker="nav137040603marker" data-appearoffset="" data-hideoffset=""> <div class="t449__wrapper t449__black-white"> <script type="text/javascript" src="https://static.tildacdn.com/js/ya-share.js" charset="utf-8"></script> <div class="t449__share_buttons ya-share2" data-access-token:facebook="" data-direction="vertical" data-yashareL10n="en" data-services="facebook,vkontakte,twitter"></div> </div> </div> </div> <div id="rec136990788" class="r t-rec t-rec_pt_15 t-rec_pb_90" style="padding-top:15px;padding-bottom:90px;background-color:#0d0d0d; " data-record-type="797" data-bg-color="#0d0d0d"> <!-- t797 --> <div class="t797"> <div class="t-container"> <div class="t-col t-col_6 t-prefix_3 t-align_center"> <div class="t797__wrapper t797__wrapper_padding" style="background-color:#efefef;"> <div class="t794__title t-descr t-descr_md t-animate" data-animate-style="fadein" data-animate-group="yes" data-animate-order="1" field="title">Понравилась статья?</div> <div class="t797__answers t-vote" style="margin-top:-20px" data-vote-type="single" data-vote-id="136990788" data-vote-visibility="onclick"> <button type="button" class="t-vote__btn-wrapper js-vote-item t-animate" style="margin:20px 10px 0px 10px;" data-answer-id="1512750238069" data-animate-style="zoomin" data-animate-chain="yes"> <div class="t-vote__btn-el js-vote-btn js-sendvote-btn"> <img
src="https://thb.tildacdn.com/tild3165-3530-4532-b731-646435653837/-/empty/Poop_Emoji_2.png" data-original="https://static.tildacdn.com/tild3165-3530-4532-b731-646435653837/Poop_Emoji_2.png"
class="t797__img t797__img_width t-img"
imgfield="li_img__1512750238069"
alt=""
/> </div> <div class="t-vote__btn-res t-descr t-descr_xxs t-align_center " style="display:none;"> <span class="t-vote__btn-res__num js-vote-count">0</span> </div> </button> <button type="button" class="t-vote__btn-wrapper js-vote-item t-animate" style="margin:20px 10px 0px 10px;" data-answer-id="1513680765900" data-animate-style="zoomin" data-animate-chain="yes"> <div class="t-vote__btn-el js-vote-btn js-sendvote-btn"> <img
src="https://thb.tildacdn.com/tild3564-3630-4239-a563-323339636564/-/empty/Slightly_Smiling_Emo.png" data-original="https://static.tildacdn.com/tild3564-3630-4239-a563-323339636564/Slightly_Smiling_Emo.png"
class="t797__img t797__img_width t-img"
imgfield="li_img__1513680765900"
alt=""
/> </div> <div class="t-vote__btn-res t-descr t-descr_xxs t-align_center " style="display:none;"> <span class="t-vote__btn-res__num js-vote-count">0</span> </div> </button> <button type="button" class="t-vote__btn-wrapper js-vote-item t-animate" style="margin:20px 10px 0px 10px;" data-answer-id="1513669611253" data-animate-style="zoomin" data-animate-chain="yes"> <div class="t-vote__btn-el js-vote-btn js-sendvote-btn"> <img
src="https://thb.tildacdn.com/tild6130-3965-4463-a332-343937336430/-/empty/Heart_Eyes_Emoji_2.png" data-original="https://static.tildacdn.com/tild6130-3965-4463-a332-343937336430/Heart_Eyes_Emoji_2.png"
class="t797__img t797__img_width t-img"
imgfield="li_img__1513669611253"
alt=""
/> </div> <div class="t-vote__btn-res t-descr t-descr_xxs t-align_center " style="display:none;"> <span class="t-vote__btn-res__num js-vote-count">0</span> </div> </button> </div> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t797_init',function() {t797_init(136990788);});});</script> <style> #rec136990788 .t797__wrapper{border-radius:10px;}</style> </div> <div id="rec136990789" class="r t-rec" style=" " data-animationappear="off" data-record-type="396"> <!-- T396 --> <style>#rec136990789 .t396__artboard {height:460px;background-color:#0D0D0D;}#rec136990789 .t396__filter {height:460px;}#rec136990789 .t396__carrier{height:460px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec136990789 .t396__artboard,#rec136990789 .t396__filter,#rec136990789 .t396__carrier {}#rec136990789 .t396__filter {}#rec136990789 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec136990789 .t396__artboard,#rec136990789 .t396__filter,#rec136990789 .t396__carrier {height:440px;}#rec136990789 .t396__filter {}#rec136990789 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec136990789 .t396__artboard,#rec136990789 .t396__filter,#rec136990789 .t396__carrier {}#rec136990789 .t396__filter {}#rec136990789 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec136990789 .t396__artboard,#rec136990789 .t396__filter,#rec136990789 .t396__carrier {height:480px;}#rec136990789 .t396__filter {}#rec136990789 .t396__carrier {background-attachment:scroll;}}#rec136990789 .tn-elem[data-elem-id="1564554044037"]{color:#ffffff;text-align:center;z-index:1;top:100px;;left:calc(50% - 600px + 320px);;width:560px;height:auto;}#rec136990789 .tn-elem[data-elem-id="1564554044037"] .tn-atom{color:#ffffff;font-size:32px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.2;font-weight:700;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec136990789 .tn-elem[data-elem-id="1564554044037"]{top:100px;;left:calc(50% - 480px + 200px);;height:auto;}}@media screen and (max-width:959px){#rec136990789 .tn-elem[data-elem-id="1564554044037"]{top:70px;;left:calc(50% - 320px + 40px);;height:auto;}}@media screen and (max-width:639px){#rec136990789 .tn-elem[data-elem-id="1564554044037"]{top:70px;;left:calc(50% - 240px + 40px);;width:400px;height:auto;}}@media screen and (max-width:479px){#rec136990789 .tn-elem[data-elem-id="1564554044037"]{top:70px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;}}#rec136990789 .tn-elem[data-elem-id="1564554130456"]{color:#999;text-align:center;z-index:2;top:185px;;left:calc(50% - 600px + 415px);;width:370px;height:auto;}#rec136990789 .tn-elem[data-elem-id="1564554130456"] .tn-atom{color:#999;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec136990789 .tn-elem[data-elem-id="1564554130456"]{top:185px;;left:calc(50% - 480px + 295px);;height:auto;}}@media screen and (max-width:959px){#rec136990789 .tn-elem[data-elem-id="1564554130456"]{top:155px;;left:calc(50% - 320px + 135px);;height:auto;}}@media screen and (max-width:639px){#rec136990789 .tn-elem[data-elem-id="1564554130456"]{top:155px;;left:calc(50% - 240px + 55px);;height:auto;}}@media screen and (max-width:479px){#rec136990789 .tn-elem[data-elem-id="1564554130456"]{top:195px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;color:#999999;}#rec136990789 .tn-elem[data-elem-id="1564554130456"] .tn-atom{color:#999999;background-size:cover;}}#rec136990789 .tn-elem[data-elem-id="1564554178466"]{z-index:3;top:258px;;left:calc(50% - 600px + 320px);;width:560px;height:auto;}#rec136990789 .tn-elem[data-elem-id="1564554178466"] .tn-atom{background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec136990789 .tn-elem[data-elem-id="1564554178466"]{top:248px;;left:calc(50% - 480px + 200px);;height:auto;}}@media screen and (max-width:959px){#rec136990789 .tn-elem[data-elem-id="1564554178466"]{top:228px;;left:calc(50% - 320px + 40px);;height:auto;}}@media screen and (max-width:639px){#rec136990789 .tn-elem[data-elem-id="1564554178466"]{top:228px;;left:calc(50% - 240px + 10px);;width:460px;height:auto;}}@media screen and (max-width:479px){#rec136990789 .tn-elem[data-elem-id="1564554178466"]{top:248px;;left:calc(50% - 160px + 30px);;width:200px;height:auto;}}#rec136990789 .tn-elem[data-elem-id="1564876573371"]{color:#666666;text-align:center;z-index:4;top:330px;;left:calc(50% - 600px + 445px);;width:310px;height:auto;}#rec136990789 .tn-elem[data-elem-id="1564876573371"] .tn-atom{color:#666666;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec136990789 .tn-elem[data-elem-id="1564876573371"]{top:335px;;left:calc(50% - 480px + 325px);;height:auto;}}@media screen and (max-width:959px){#rec136990789 .tn-elem[data-elem-id="1564876573371"]{top:315px;;left:calc(50% - 320px + 165px);;height:auto;}}@media screen and (max-width:639px){#rec136990789 .tn-elem[data-elem-id="1564876573371"]{top:310px;;left:calc(50% - 240px + 85px);;height:auto;}}@media screen and (max-width:479px){#rec136990789 .tn-elem[data-elem-id="1564876573371"]{top:375px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;}#rec136990789 .tn-elem[data-elem-id="1564876573371"] .tn-atom{font-size:14px;background-size:cover;}}#rec136990789 .tn-elem[data-elem-id="1565701393805"]{color:#666666;text-align:center;z-index:5;top:375px;;left:calc(50% - 600px + 445px);;width:310px;height:auto;}#rec136990789 .tn-elem[data-elem-id="1565701393805"] .tn-atom{color:#666666;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec136990789 .tn-elem[data-elem-id="1565701393805"]{top:380px;;left:calc(50% - 480px + 325px);;height:auto;}}@media screen and (max-width:959px){#rec136990789 .tn-elem[data-elem-id="1565701393805"]{top:360px;;left:calc(50% - 320px + 165px);;height:auto;}}@media screen and (max-width:639px){#rec136990789 .tn-elem[data-elem-id="1565701393805"]{top:360px;;left:calc(50% - 240px + 85px);;height:auto;}}@media screen and (max-width:479px){#rec136990789 .tn-elem[data-elem-id="1565701393805"]{top:420px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;}#rec136990789 .tn-elem[data-elem-id="1565701393805"] .tn-atom{font-size:14px;background-size:cover;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="136990789" data-artboard-screens="320,480,640,960,1200" data-artboard-height="460" data-artboard-valign="center" data-artboard-height-res-320="480" data-artboard-height-res-640="440"> <div class="t396__carrier" data-artboard-recid="136990789"></div> <div class="t396__filter" data-artboard-recid="136990789"></div> <div class='t396__elem tn-elem tn-elem__1369907891564554044037' data-elem-id='1564554044037' data-elem-type='text' data-field-top-value="100" data-field-left-value="320" data-field-width-value="560" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="32" data-field-top-res-320-value="70" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-top-res-480-value="70" data-field-left-res-480-value="40" data-field-width-res-480-value="400" data-field-top-res-640-value="70" data-field-left-res-640-value="40" data-field-top-res-960-value="100" data-field-left-res-960-value="200"> <div class='tn-atom'field='tn_text_1564554044037'>Хочешь получать лучшие статьи<br>от XyZ раз в неделю?</div> </div> <div class='t396__elem tn-elem tn-elem__1369907891564554130456' data-elem-id='1564554130456' data-elem-type='text' data-field-top-value="185" data-field-left-value="415" data-field-width-value="370" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="16" data-field-top-res-320-value="195" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-top-res-480-value="155" data-field-left-res-480-value="55" data-field-top-res-640-value="155" data-field-left-res-640-value="135" data-field-top-res-960-value="185" data-field-left-res-960-value="295"> <div class='tn-atom'field='tn_text_1564554130456'>Подпишись на рассылку XyZ</div> </div> <div class='t396__elem tn-elem tn-elem__1369907891564554178466' data-elem-id='1564554178466' data-elem-type='form' data-field-top-value="258" data-field-left-value="320" data-field-width-value="560" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-top-res-320-value="248" data-field-left-res-320-value="30" data-field-width-res-320-value="200" data-field-top-res-480-value="228" data-field-left-res-480-value="10" data-field-width-res-480-value="460" data-field-top-res-640-value="228" data-field-left-res-640-value="40" data-field-top-res-960-value="248" data-field-left-res-960-value="200" data-field-inputpos-value="h" data-field-inputfontfamily-value="Arial" data-field-inputfontsize-value="16" data-field-inputfontweight-value="400" data-field-inputcolor-value="#666" data-field-inputbordercolor-value="#666" data-field-inputbordersize-value="1" data-field-inputradius-value="7" data-field-inputheight-value="40" data-field-inputmargbottom-value="20" data-field-inputmargright-value="10" data-field-inputtitlefontsize-value="16" data-field-inputtitlefontweight-value="400" data-field-inputtitlecolor-value="#000" data-field-inputtitlemargbottom-value="5" data-field-inputelsfontweight-value="400" data-field-inputelsfontsize-value="14" data-field-buttontitle-value="Подписаться" data-field-buttoncolor-value="#fff" data-field-buttonbgcolor-value="#38b0cd" data-field-buttonbordercolor-value="#666" data-field-buttonradius-value="7" data-field-buttonwidth-value="200" data-field-buttonheight-value="40" data-field-buttonfontfamily-value="BebasRoboto" data-field-buttonfontsize-value="16" data-field-buttonfontweight-value="600" data-field-receivers-value="3a18b021f43e61a277b0babc9a16a84c,164a3b8e9611cc7ecc538151418a854a,d2ad269d53b8517d6f011d8452411a9b,24dadee303ff10af9effec771b8b4e6f,935c4708c0542e69b9c954810f75a47f,808290b07baffee2037d44c1adc9f960,7cb71ac814cf5f11b74e7aff35c39e83,9bd20a80f92aba4c9d1823f2d1339add,3106d7f849cc37cf58f92ca54a12b20d,473bfe0c466b0830324330245ec4f856,22b6124b7d1e8c12b1bfe44591394ad1,4e149223d2a1c89490c6886635e128b1,432ab6b299e9d3b4712f0d8b851a69ca,ede885f6bf92f8aa63caaa2019930c27,ddce5c970ee590f09521887d2c815328,e8e971129be626609ea9f5eacb531712,529d776f47525813dd4c7439d5e2957d,79efdc56002e2fb9160ff9fc91750f61,9349cade6ff136590942028e6ee8bdd0" data-field-inputpos-res-320-value="v" data-field-inputmargbottom-res-320-value="10" data-field-buttonwidth-res-320-value="260"> <div class='tn-atom tn-atom__form'></div> <!--googleoff: all--> <!--noindex--> <div data-nosnippet="true" class="tn-atom__inputs-wrapp" style="display:none;"> <textarea class="tn-atom__inputs-textarea">[{"lid":"1531306540094","ls":"10","loff":"","li_type":"em","li_ph":"Email","li_req":"y","li_nm":"Email"}]</textarea> </div> <!-- Form export deps: https://static.tildacdn.com/css/tilda-zero-form-errorbox.min.css https://static.tildacdn.com/css/tilda-zero-form-horizontal.min.css https://static.tildacdn.com/js/tilda-phone-mask-1.1.min.js https://static.tildacdn.com/css/tilda-date-picker-1.0.min.css https://static.tildacdn.com/js/tilda-date-picker-1.0.min.js https://static.tildacdn.com/js/tilda-calc-1.0.min.js https://static.tildacdn.com/js/tilda-upwidget-1.1.min.js https://static.tildacdn.com/js/uploadcare-3.x.full.min.js https://static.tildacdn.com/js/uploadcare-3.x.min.js https://static.tildacdn.com/js/tilda-range-1.0.min.js https://static.tildacdn.com/css/tilda-range-1.0.min.css https://static.tildacdn.com/js/tilda-img-select-1.0.min.js https://static.tildacdn.com/css/tilda-img-select-1.0.min.css --> <!--/noindex--> <!--googleon: all--> </div> <div class='t396__elem tn-elem tn-elem__1369907891564876573371' data-elem-id='1564876573371' data-elem-type='text' data-field-top-value="330" data-field-left-value="445" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="16" data-field-top-res-320-value="375" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-fontsize-res-320-value="14" data-field-top-res-480-value="310" data-field-left-res-480-value="85" data-field-top-res-640-value="315" data-field-left-res-640-value="165" data-field-top-res-960-value="335" data-field-left-res-960-value="325"> <div class='tn-atom'field='tn_text_1564876573371'>Нажимая на кнопку, вы соглашаетесь с условиями обработки данных<br></div> </div> <div class='t396__elem tn-elem tn-elem__1369907891565701393805' data-elem-id='1565701393805' data-elem-type='text' data-field-top-value="375" data-field-left-value="445" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="16" data-field-top-res-320-value="420" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-fontsize-res-320-value="14" data-field-top-res-480-value="360" data-field-left-res-480-value="85" data-field-top-res-640-value="360" data-field-left-res-640-value="165" data-field-top-res-960-value="380" data-field-left-res-960-value="325"> <div class='tn-atom'field='tn_text_1565701393805'><u><a href="https://school-xyz.com/privacy" style="color: rgb(102, 102, 102);" data-redactor-tag="a">Политика конфеденциальности</a></u><br></div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('136990789');});});</script> <!-- /T396 --> </div> <div id="rec136990790" class="r t-rec" style=" " data-animationappear="off" data-record-type="142"> <!-- T132 --> <div class="t132"> <div class="t-container_100"> <div class="t132__box t-bgimg" data-original="https://static.tildacdn.com/tild6364-3237-4164-a135-653838623966/lLJNSPN2IKM-2.jpg" data-lazy-rule="comm:resize,round:100"
style="background-image: url('https://thb.tildacdn.com/tild6364-3237-4164-a135-653838623966/-/resizeb/20x/lLJNSPN2IKM-2.jpg');"> <div class="t132__wrappper" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0.60));"> <a href="/blog/s_chego_nachinayutsya_ogromnye_modeli_dlya_topovyh_igr_i_kino"> <div class="t132__textwrapper "> <span> <div class="t132__title t-title t-title_xxs">С чего начинаются огромные модели для топовых игр и кино?</div> <div class="t132__descr t-descr t-descr_xs">Ключевая ошибка начинающих — они не делают качественных драфтов или делают их спустя рукава.</div> </span> </div> <img class="t132__wire " src="data:image/gif;base64,R0lGODlh6ANYAvcAAP///wAAAAICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///yH5BAEAAAAALAAAAADoA1gCAAj/AAEIHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmTKFOqXMmypcuXMGPKnEmzps2bOHPq3Mmzp8+fQIMKHUq0qNGjSJMqXcq0qdOnUKNKnUq1qtWrWLNq3cq1q9evYMOKHUu2rNmzaNOqXcu2rdu3cOPKnUu3rt27ePPq3cu3r9+/gAMLHky4sOHDiBMrXsy4sePHkCNLnky5suXLmDNr3sy5s+fPoEOLHk26tOnTqFOrXs26tevXsGPLnk27tu3buHPr3s27t+/fwIMLH068uPHjyJMrX868ufPn0KNLn069uvXr2LNr3869u/fv4MOL/x9Pvrz58+jTq1/Pvr379/Djy59Pv779+/jz69/Pv7///wAGKOCABBZo4IEIJqjgggw26OCDEEYo4YQUVmjhhRhmqOGGHHbo4YcghijiiCSWaOKJKKao4oostujiizDGKOOMNNZo44045qjjjjz26OOPQAYp5JBEFmnkkUgmqeSSTDbp5JNQRinllFRWaeWVWGap5ZZcdunll2CGKeaYZJZp5plopqnmmmy26eabcMYp55x01mnnnXjmqeeefPbp55+ABirooIQWauihiCaq6KKMNuroo5BGKumklFZq6aWYZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxv8q66y01mrrrbjmquuuvPbq66/ABivssMQWa+yxyCar7LLMNuvss9BGK+201FZr7bXYZqvtttx26+234IYr7rjklmvuueimq+667Lbr7rvwxivvvPTWa++9+Oar77789uvvvwAHLPDABBds8MEIJ6zwwgw37PDDEEcs8cQUV2zxxRhnrPHGHHfs8ccghyzyyCSXbPLJKKes8sost+zyyzDHLPPMNNds880456zzzjz37PPPQAct9NBEF2300UgnrfTSTDft9NNQRy311FRXbfXVWGet9dZcd+3112CHLfbYZJdt9tlop6322my37fbbcMct99x012333XjnrffefPf/7fffgAcu+OCEF2744YgnrvjijDfu+OOQRy755JRXbvnlmGeu+eacd+7556CHLvropJdu+umop6766qy37vrrsMcu++y012777bjnrvvuvPfu++/ABy/88MQXb/zxyCev/PLMN+/889BHL/301Fdv/fXYZ6/99tx37/334Icv/vjkl2/++einr/767Lfv/vvwxy///PTXb//9+Oev//789+///wAMoAAHSMACGvCACEygAhfIwAY68IEQjKAEJ0jBClrwghjMoAY3yMEOevCDIAyhCEdIwhKa8IQoTKEKV8jCFrrwhTCMoQxnSMMa2vCGOMyhDnfIwx768IdADKIQ/4dIxCIa8YhITKISl8jEJjrxiVCMohSnSMUqWvGKWMyiFrfIxS568YtgDKMYx0jGMprxjGhMoxrXyMY2uvGNcIyjHOdIxzra8Y54zKMe98jHPvrxj4AMpCAHSchCGvKQiEykIhfJyEY68pGQjKQkJ0nJSlrykpjMpCY3yclOevKToAylKEdJylKa8pSoTKUqV8nKVrrylbCMpSxnScta2vKWuMylLnfJy1768pfADKYwh0nMYhrzmMhMpjKXycxmOvOZ0IymNKdJzWpa85rYzKY2t8nNbnrzm+AMpzjHSc5ymvOc6EynOtfJzna6853wjKc850nPetrznvjMpz73yWrPfvrznwANqEAHStCCGvSgCE2oQhfK0IY69KEQjahEJ0rRilr0ohjNqEY3ytGOevSjIA2pSEdK0pKa9KQoTalKV8rSlrr0pTCNqUxnStOa2vSmOM2pTnfK05769KdADapQh0rUohp1oQEBADs="> </a> </div> </div> <div class="t132__box t-bgimg" data-original="https://static.tildacdn.com/tild3465-6537-4439-a564-613661643766/4.jpg" data-lazy-rule="comm:resize,round:100"
style="background-image: url('https://thb.tildacdn.com/tild3465-6537-4439-a564-613661643766/-/resizeb/20x/4.jpg');"> <div class="t132__wrappper" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0.60));"> <a href="/blog/dyrki"> <div class="t132__textwrapper "> <span> <div class="t132__title t-title t-title_xxs">Дырки</div> <div class="t132__descr t-descr t-descr_xs">Рано или поздно каждый начинающий 3D художник сталкивается с необходимостью замоделить отверстия в геометрии.</div> </span> </div> <img class="t132__wire " src="data:image/gif;base64,R0lGODlh6ANYAvcAAP///wAAAAICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///yH5BAEAAAAALAAAAADoA1gCAAj/AAEIHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmTKFOqXMmypcuXMGPKnEmzps2bOHPq3Mmzp8+fQIMKHUq0qNGjSJMqXcq0qdOnUKNKnUq1qtWrWLNq3cq1q9evYMOKHUu2rNmzaNOqXcu2rdu3cOPKnUu3rt27ePPq3cu3r9+/gAMLHky4sOHDiBMrXsy4sePHkCNLnky5suXLmDNr3sy5s+fPoEOLHk26tOnTqFOrXs26tevXsGPLnk27tu3buHPr3s27t+/fwIMLH068uPHjyJMrX868ufPn0KNLn069uvXr2LNr3869u/fv4MOL/x9Pvrz58+jTq1/Pvr379/Djy59Pv779+/jz69/Pv7///wAGKOCABBZo4IEIJqjgggw26OCDEEYo4YQUVmjhhRhmqOGGHHbo4YcghijiiCSWaOKJKKao4oostujiizDGKOOMNNZo44045qjjjjz26OOPQAYp5JBEFmnkkUgmqeSSTDbp5JNQRinllFRWaeWVWGap5ZZcdunll2CGKeaYZJZp5plopqnmmmy26eabcMYp55x01mnnnXjmqeeefPbp55+ABirooIQWauihiCaq6KKMNuroo5BGKumklFZq6aWYZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxv8q66y01mrrrbjmquuuvPbq66/ABivssMQWa+yxyCar7LLMNuvss9BGK+201FZr7bXYZqvtttx26+234IYr7rjklmvuueimq+667Lbr7rvwxivvvPTWa++9+Oar77789uvvvwAHLPDABBds8MEIJ6zwwgw37PDDEEcs8cQUV2zxxRhnrPHGHHfs8ccghyzyyCSXbPLJKKes8sost+zyyzDHLPPMNNds880456zzzjz37PPPQAct9NBEF2300UgnrfTSTDft9NNQRy311FRXbfXVWGet9dZcd+3112CHLfbYZJdt9tlop6322my37fbbcMct99x012333XjnrffefPf/7fffgAcu+OCEF2744YgnrvjijDfu+OOQRy755JRXbvnlmGeu+eacd+7556CHLvropJdu+umop6766qy37vrrsMcu++y012777bjnrvvuvPfu++/ABy/88MQXb/zxyCev/PLMN+/889BHL/301Fdv/fXYZ6/99tx37/334Icv/vjkl2/++einr/767Lfv/vvwxy///PTXb//9+Oev//789+///wAMoAAHSMACGvCACEygAhfIwAY68IEQjKAEJ0jBClrwghjMoAY3yMEOevCDIAyhCEdIwhKa8IQoTKEKV8jCFrrwhTCMoQxnSMMa2vCGOMyhDnfIwx768IdADKIQ/4dIxCIa8YhITKISl8jEJjrxiVCMohSnSMUqWvGKWMyiFrfIxS568YtgDKMYx0jGMprxjGhMoxrXyMY2uvGNcIyjHOdIxzra8Y54zKMe98jHPvrxj4AMpCAHSchCGvKQiEykIhfJyEY68pGQjKQkJ0nJSlrykpjMpCY3yclOevKToAylKEdJylKa8pSoTKUqV8nKVrrylbCMpSxnScta2vKWuMylLnfJy1768pfADKYwh0nMYhrzmMhMpjKXycxmOvOZ0IymNKdJzWpa85rYzKY2t8nNbnrzm+AMpzjHSc5ymvOc6EynOtfJzna6853wjKc850nPetrznvjMpz73yWrPfvrznwANqEAHStCCGvSgCE2oQhfK0IY69KEQjahEJ0rRilr0ohjNqEY3ytGOevSjIA2pSEdK0pKa9KQoTalKV8rSlrr0pTCNqUxnStOa2vSmOM2pTnfK05769KdADapQh0rUohp1oQEBADs="> </a> </div> </div> </div> </div> <script>var images=document.querySelectorAll('.t132 img.wire');Array.prototype.forEach.call(images,function(image) {image.addEventListener('load',function() {t132_unifyHeights();});});window.addEventListener('resize',function() {t_onFuncLoad('t132_unifyHeights',function() {t132_unifyHeights();});});t_onReady(function() {t_onFuncLoad('t132_unifyHeights',function() {t132_unifyHeights();});if(typeof jQuery!=='undefined') {$('.t132').bind('displayChanged',function() {t132_unifyHeights();});} else {var rec=document.getElementById('rec136990790');if(!rec) return;var wrapperBlock=rec.querySelector('.t132');if(wrapperBlock) {t_onFuncLoad('t132_unifyHeights',function() {t132_unifyHeights();});wrapperBlock.addEventListener("displayChanged",function() {t132_unifyHeights();});}}});</script> </div> <!--footer--> <footer id="t-footer" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="1006203" data-tilda-page-id="4312269" data-tilda-page-alias="footer" data-tilda-formskey="89ebde3c6fe46b219c249763fe551eda" data-tilda-stat-scroll="yes" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes" data-tilda-ts="y" data-tilda-project-country="RU"> <div id="rec517261770" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- автоматизация промобара для курсов и профессий --> <script>
$(function() {
    // текст для промобара
    $('.heading-1 .tn-atom').html('Учись играючи и&nbsp;со&nbsp;скидкой до&nbsp;55%'); // заголовок
    $('.descr-1 .tn-atom').html('При покупке этого курса ты получишь в&nbsp;подарок любую игру до&nbsp;2000&nbsp;₽ в&nbsp;Steam'); // описание
    // описание для сайта Pro
    $('.descr-pro .tn-atom').html('Дарим игры: любую до&nbsp;2000&nbsp;₽ в&nbsp;Steam&nbsp;— при покупке курса, Resident Evil Requiem&nbsp;— при покупке профессии');
    
    let currentDate = new Date();
    
    function daysInMonth (month, year) {
        return new Date(year, month + 1, 0).getDate();
    }
    
    let daysInMonthQuantity = daysInMonth(currentDate.getMonth(), currentDate.getYear());
    
    let numOfMonth = currentDate.getDate();
    let numOfMonthFormatted;
    
    let currentMonth = currentDate.getMonth() + 1;
    let currentMonthFormatted = currentMonth >= 10 ? currentMonth : '0' + currentMonth;
    
    function setDateEnd(additionalDays) {
        if (numOfMonth + additionalDays > daysInMonthQuantity) {
            numOfMonthFormatted = '0' + (numOfMonth + additionalDays - daysInMonthQuantity);
            currentMonthFormatted = currentMonth + 1 >= 10 ? currentMonth + 1 : '0' + (currentMonth + 1);
        } else {
            numOfMonthFormatted = numOfMonth + additionalDays >= 10 ? numOfMonth + additionalDays : '0' + (numOfMonth + additionalDays);
        }
    }
    
    /* указываем дату окончания акции в промобаре */
    if (currentDate.getDay() == 1) { // если сегодня понедельник
        setDateEnd(3);
    } else if (currentDate.getDay() == 2) { // если сегодня вторник
        setDateEnd(2);
    } else if (currentDate.getDay() == 3) { // если сегодня среда
        setDateEnd(1);
    } else if (currentDate.getDay() == 4) { // если сегодня четверг
        setDateEnd(0);
    } else if (currentDate.getDay() == 5) { // если сегодня пятница
        setDateEnd(2);
    } else if (currentDate.getDay() == 6) { // если сегодня суббота
        setDateEnd(1);
    } else if (currentDate.getDay() == 0) { // если сегодня воскресенье
        setDateEnd(0);
    }
    
    if (document.querySelector('.promobar__date-end .tn-atom')) {
        document.querySelector('.promobar__date-end .tn-atom').textContent = `до ${numOfMonthFormatted}.${currentMonthFormatted}`;
        // document.querySelector('.promobar__date-end .tn-atom').textContent = `до 25.02`;
    }
    /* end указываем дату окончания акции в промобаре на продуктовых страницах */
});
</script> <style>
.descr-1 .tn-atom {
    text-wrap-style: balance;
}
</style> <!-- nominify end --> </div> </div> </div> </div> <div id="rec521328895" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- скрыть/показать блок с акцией на курсах и профессиях --> <style>
/* блок с акцией */
#rec1123441821 {
    /*display: none;*/
}
</style> <!-- nominify end --> </div> </div> </div> </div> <div id="rec703641300" class="r t-rec uc-popup-grant" style=" " data-animationappear="off" data-record-type="702"> <!-- T702 --> <div class="t702"> <div
class="t-popup" data-tooltip-hook="#popup:get-consult" data-track-popup='/tilda/popup/rec703641300/opened' role="dialog"
aria-modal="true"
tabindex="-1"
aria-label="Запишись на демо-урок" style="background-color: rgba(0,0,0,0.80);"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#ffffff" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <style>@media screen and (max-width:560px){#rec703641300 .t-popup__close-icon g{fill:#ffffff !important;}}</style> <style> #rec703641300 .t-popup__container{border-radius:24px;overflow:hidden;}@media (max-width:480px){#rec703641300 .t-popup__container{border-radius:16px;overflow:hidden;}}</style> <div class="t-popup__container t-width t-width_6"
style="background-color:#23232a;" data-popup-type="702"> <img class="t702__img t-img"
src="https://thb.tildacdn.com/tild3831-3666-4563-b734-333035633330/-/empty/_1.jpg" data-original="https://static.tildacdn.com/tild3831-3666-4563-b734-333035633330/_1.jpg"
imgfield="img"
alt=""> <div class="t702__wrapper"> <div class="t702__text-wrapper t-align_left"> <div class="t702__title t-title t-title_xxs" id="popuptitle_703641300">Запишись на демо-урок</div> <div class="t702__descr t-descr t-descr_xs">Зачем записываться?<br /><ul><li data-list="bullet">Познакомим тебя с платформой и процессом обучения.</li><li data-list="bullet">Подарим 1 из 9 курсов на выбор.</li><li data-list="bullet">Получишь доступ к пробной части курса и полную программу.</li></ul></div> </div> <form
id="form703641300" name='form703641300' role="form" action='' method='POST' data-formactiontype="2" data-inputbox=".t-input-group" class="t-form js-form-proccess t-form_inputs-total_5 " data-success-callback="t702_onSuccess"> <input type="hidden" name="formservices[]" value="d19077112a38917a19ec3d0d3a0d2542" class="js-formaction-services"> <input type="hidden" name="formservices[]" value="79efdc56002e2fb9160ff9fc91750f61" class="js-formaction-services"> <input type="hidden" name="formservices[]" value="9349cade6ff136590942028e6ee8bdd0" class="js-formaction-services"> <input type="hidden" name="tildaspec-formname" tabindex="-1" value="Заявка на бесплатный демо-урок"> <!-- @classes t-title t-text t-btn --> <div class="js-successbox t-form__successbox t-text t-text_md"
aria-live="polite"
style="display:none;"></div> <div
class="t-form__inputsbox
t-form__inputsbox_vertical-form t-form__inputsbox_inrow "> <div
class="t-input-group t-input-group_nm " data-input-lid="3316997753180" data-field-type="nm" data-field-name="name"> <div class="t-input-block " style="border-radius:16px;"> <input
type="text"
autocomplete="name"
name="name"
id="input_3316997753180"
class="t-input js-tilda-rule"
value=""
placeholder="Как тебя зовут?" data-tilda-req="1" aria-required="true" data-tilda-rule="name"
aria-describedby="error_3316997753180"
style="color:#ffffff;border:1px solid #373742;border-radius:16px;"> </div> <div class="t-input-error" aria-live="polite" id="error_3316997753180"></div> </div> <div
class="t-input-group t-input-group_em " data-input-lid="1016997753181" data-field-type="em" data-field-name="email"> <div class="t-input-block " style="border-radius:16px;"> <input
type="email"
autocomplete="email"
name="email"
id="input_1016997753181"
class="t-input js-tilda-rule"
value=""
placeholder="Твоя почта" data-tilda-req="1" aria-required="true" data-tilda-rule="email"
aria-describedby="error_1016997753181"
style="color:#ffffff;border:1px solid #373742;border-radius:16px;"> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753181"></div> </div> <div
class="t-input-group t-input-group_ph " data-input-lid="1016997753182" data-field-async="true" data-field-type="ph" data-field-name="phone"> <div class="t-input-block " style="border-radius:16px;"> <input
type="tel"
autocomplete="tel"
name="phone"
id="input_1016997753182" data-phonemask-init="no" data-phonemask-id="703641300" data-phonemask-lid="1016997753182" data-phonemask-maskcountry="RU" class="t-input js-phonemask-input js-tilda-rule"
value=""
placeholder="+7(000)000-0000" data-tilda-req="1" aria-required="true" aria-describedby="error_1016997753182"
style="color:#ffffff;border:1px solid #373742;border-radius:16px;"> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t_loadJsFile',function() {t_loadJsFile('https://static.tildacdn.com/js/tilda-phone-mask-1.1.min.js',function() {t_onFuncLoad('t_form_phonemask_load',function() {var phoneMasks=document.querySelectorAll('#rec703641300 [data-phonemask-lid="1016997753182"]');t_form_phonemask_load(phoneMasks);});})})});</script> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753182"></div> </div> <input type="hidden" name="519683" tabindex="-1" value="true"> <input type="hidden" name="519697" tabindex="-1" value="Консультация"> <div
class="t-input-group t-input-group_cb " data-input-lid="1016997753185" data-field-type="cb" data-field-name="privacy" data-default-value=y
> <div class="t-input-block " style="border-radius:16px;"> <label
class="t-checkbox__control t-checkbox__control_flex t-text t-text_xs"
style="color:#ffffff"> <input
type="checkbox"
name="privacy"
value="yes"
class="t-checkbox js-tilda-rule"
checked
> <div
class="t-checkbox__indicator"
style="border-color:#ffffff"></div> <span><div style="font-size: 14px;" data-customstyle="yes">Я&nbsp;согласен с&nbsp;<a href="https://school-xyz.com/privacy-policy" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none; font-weight: 400;">Политикой обработки персональных данных, Согласием Пользователя сайта на&nbsp;обработку персональных данных</a> и&nbsp;<a href="https://school-xyz.com/agreement" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none; font-weight: 400;">договором публичной оферты</a></div></span></label> <style>#rec703641300 .t-checkbox__indicator:after{border-color:#ffffff;}</style> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753185"></div> </div> <div
class="t-input-group t-input-group_cb " data-input-lid="1016997753186" data-field-type="cb" data-field-name="check" data-default-value=y
> <div class="t-input-block " style="border-radius:16px;"> <label
class="t-checkbox__control t-checkbox__control_flex t-text t-text_xs"
style="color:#ffffff"> <input
type="checkbox"
name="check"
value="yes"
class="t-checkbox js-tilda-rule"
checked
> <div
class="t-checkbox__indicator"
style="border-color:#ffffff"></div> <span><div style="font-size: 14px;" data-customstyle="yes">Я&nbsp;согласен получать рекламную рассылку и&nbsp;ознакомился с&nbsp;<a href="https://school-xyz.com/privacy-policy" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none; font-weight: 400;">Согласием на&nbsp;получение рекламной рассылки</a></div></span></label> <style>#rec703641300 .t-checkbox__indicator:after{border-color:#ffffff;}</style> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753186"></div> </div> <input type="hidden" name="526133" tabindex="-1" value="Заявка на бесплатный демо-урок"> <div class="t-form__errorbox-middle"> <!--noindex--> <div
class="js-errorbox-all t-form__errorbox-wrapper"
style="display:none;" data-nosnippet
tabindex="-1"
aria-label="Ошибки при заполнении формы"> <ul
role="list"
class="t-form__errorbox-text t-text t-text_md"> <li class="t-form__errorbox-item js-rule-error js-rule-error-all"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-req"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-email"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-name"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-phone"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-string"></li> </ul> </div> <!--/noindex--> </div> <div class="t-form__submit"> <button
class="t-submit t-btnflex t-btnflex_type_submit t-btnflex_md"
type="submit"><span class="t-btnflex__text">Отправить</span> <style>#rec703641300 .t-btnflex.t-btnflex_type_submit {color:#ffffff;background-color:#6060ff;--border-width:0px;border-style:none !important;border-radius:50px;box-shadow:none !important;font-family:BebasRoboto;font-weight:400;transition-duration:0.2s;transition-property:background-color,color,border-color,box-shadow,opacity,transform,gap;transition-timing-function:ease-in-out;}@media (hover:hover) {#rec703641300 .t-btnflex.t-btnflex_type_submit:not(.t-animate_no-hover):hover {color:#17171b !important;background-color:#ffffff !important;}#rec703641300 .t-btnflex.t-btnflex_type_submit:not(.t-animate_no-hover):focus-visible {color:#17171b !important;background-color:#ffffff !important;}}</style></button> </div> </div> <div class="t-form__errorbox-bottom"> <!--noindex--> <div
class="js-errorbox-all t-form__errorbox-wrapper"
style="display:none;" data-nosnippet
tabindex="-1"
aria-label="Ошибки при заполнении формы"> <ul
role="list"
class="t-form__errorbox-text t-text t-text_md"> <li class="t-form__errorbox-item js-rule-error js-rule-error-all"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-req"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-email"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-name"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-phone"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-string"></li> </ul> </div> <!--/noindex--> </div> </form> <style>#rec703641300 input::-webkit-input-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 input::-moz-placeholder{color:#ffffff;opacity:0.5;}#rec703641300 input:-moz-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 input:-ms-input-placeholder{color:#ffffff;opacity:0.5;}#rec703641300 textarea::-webkit-input-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 textarea::-moz-placeholder{color:#ffffff;opacity:0.5;}#rec703641300 textarea:-moz-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 textarea:-ms-input-placeholder{color:#ffffff;opacity:0.5;}</style> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t702_initPopup',function() {t702_initPopup('703641300');});});</script> <style> #rec703641300 .t702__title{color:#ffffff;font-family:'BebasRoboto';font-weight:500;text-transform:uppercase;}@media screen and (min-width:900px){#rec703641300 .t702__title{font-size:40px;line-height:1;}}@media screen and (min-width:480px) and (max-width:900px){#rec703641300 .t702__title{font-size:32px;}}@media screen and (max-width:480px),(orientation:landscape) and (max-height:480px){#rec703641300 .t702__title{font-size:32px;line-height:1;}}#rec703641300 .t702__descr{font-size:16px;line-height:1.6;color:#ffffff;font-weight:400;}@media screen and (max-width:480px),(orientation:landscape) and (max-height:480px){#rec703641300 .t702__descr{font-size:14px;line-height:1.6;}}</style> </div> <div id="rec684407761" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стили для #popup:get-consult --> <style>
.uc-popup-grant .t-popup__close {
    top: 20px;
    right: 20px !important;
    width: 40px;
    height: 40px;
    /*background: rgb(255 255 255 / 20%);*/
    background: #23232a;
    border-radius: 50px;
}

.uc-popup-grant .t-popup__block-close-button {
    width: 16px;
    padding: 12px;
}

.uc-popup-grant .t-popup__close-icon {
    width: 16px;
    height: 16px;
}

.uc-popup-grant .t702 .t-popup__container {
    padding: 8px;
    box-sizing: border-box;
}

.uc-popup-grant .t702 .t702__img {
    border-radius: 16px;
}

.uc-popup-grant .t702 .t702__wrapper {
    padding: 24px;
}

/* градиент для заголовка */
.uc-popup-grant .t702__title {
    /*background: linear-gradient(#FFEBA9, #D9B339 100%);*/
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    display: inline-block;
}

.uc-popup-grant .t-descr {
    display: inline-block;
}

.uc-popup-grant .t-form__inputsbox {
    display: flex;
    flex-direction: column;
}

.uc-popup-grant .t702 .t-input-group {
    margin-bottom: 8px;
}

.uc-popup-grant .t702 .t-input {
    border-color: rgb(255 255 255 / 10%) !important;
}

/* стилизация чекбоксов в зеро формах */
.uc-popup-grant .t-checkbox__control {
    display: flex;
    column-gap: 8px;
}

.uc-popup-grant .t-checkbox__indicator {
    width: 24px;
    height: 24px;
    margin-right: 0;
    border: 2px solid rgb(255 255 255 / 50%) !important;
    border-radius: 4px;
}

.uc-popup-grant .t702 .t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator {
    border-color: rgb(255 255 255 / 50%) !important;
    background: transparent;
}

.uc-popup-grant .t-checkbox__indicator:after {
    width: 5px;
    height: 11px;
    left: 7px;
    top: 1px;
    border-width: 0 2px 2px 0;
    border-color: rgb(255 255 255 / 50%) !important;
}
/* конец стилизация чекбоксов в зеро формах */

.uc-popup-grant .t-input-group_cb {
    order: 5;
}

.uc-popup-grant .t-input-group_cb div[data-customstyle='yes'] {
    color: rgb(255 255 255 / 50%) !important;
    font-size: 12px !important;
    line-height: 1.2;
}

.uc-popup-grant .t-input-group_cb div[data-customstyle='yes'] :is(span, a) {
    color: rgb(255 255 255 / 50%) !important;
    border-color: rgb(255 255 255 / 50%) !important;
}

.uc-popup-grant .t702 .t-form__submit {
    margin-top: 8px;
    margin-bottom: 16px;
}

.uc-popup-grant .t702 .t702__form-bottom-text {
    margin-top: 24px;
}

/* стилизация кнопки Телеграм */
.uc-popup-grant .t702__form-bottom-text a {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    height: 54px;
    background: #fff;
    border-radius: 50px;
    color: #17171b !important;
    transition: .2s ease;
}

.uc-popup-grant .t702__form-bottom-text a:hover {
    background: #f5f5f5;
}

.uc-popup-grant .t702__form-bottom-text a:before {
    content: '';
    width: 1.5em;
    aspect-ratio: 1;
    background: url(https://static.tildacdn.com/tild3738-3936-4437-b162-383836343233/Artboard.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
/* end стилизация кнопки Телеграм */

@media (max-width: 639px) {
    .uc-popup-grant .t-popup {
        padding: 0 10px;
    }
    
    .uc-popup-grant .t-popup[style="display: block;"] {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
    }
    
    .uc-popup-grant .t-popup .t-popup__container {
        flex-wrap: wrap;
        min-height: fit-content;
        /*padding: 0;*/
        margin: 24px 0;
        overflow: hidden;
    }
    
    .uc-popup-grant .t702 .t702__img {
        border-radius: 10px;
    }
    
    .uc-popup-grant .t-popup .t-popup__container .t702__wrapper {
        background: inherit;
        -webkit-transform: none;
        -o-transform: none;
        transform: none;
        padding: 24px 8px 8px;
    }
    
    .uc-popup-grant .t-popup__close {
        /*top: 16px;*/
        /*right: 16px !important;*/
        left: auto;
        padding: 0;
        align-items: center;
        justify-content: center;
        zoom: 0.7;
    }
    
    .uc-popup-grant .t-popup__block-close-button {
        margin-right: 0;
    }
    
    .uc-popup-grant .t702 .t-input-group {
        margin-bottom: 8px;
    }
    
    .uc-popup-grant .t702 .t-input {
        border-radius: 8px !important;
        -moz-border-radius: 8px !important;
        -webkit-border-radius: 8px !important;
    }
    
    .uc-popup-grant .t-input-group_cb div[data-customstyle='yes'] {
        font-size: 12px !important;
    }
}
</style> <script>
// переносим крестик внутрь попапа
document.addEventListener('DOMContentLoaded', function() {
    $('.uc-popup-grant .t-popup').each(function() {
        $(this).find('.t-popup__container').prepend($(this).find('.t-popup__close'));
    });
});
</script> <!-- nominify end --> </div> </div> </div> </div> <!-- <strong>▼ Форма для новой версии футера ▼</strong> --> <div id="rec1221022041" class="r t-rec t-rec_pt_0" style="padding-top:0px; " data-animationappear="off" data-record-type="121" data-alias-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- новая версия футера от 12.08.25 --> <footer> <div class="footer__wrap"> <div class="footer__navigation"> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">О школе</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <li class="footer__list-link"><a href="https://www.school-xyz.com/license">Лицензия</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/feedback">Отзывы студентов</a></li> <!--<li class="footer__list-link"><a href="https://school-xyz.com/raboty-studentov">Работы студентов</a></li>--> <!--<li class="footer__list-link"><a href="https://school-xyz.com/rassrochka">Рассрочка</a></li>--> <li class="footer__list-link"><a href="#popup:rec">Реквизиты</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/certificate">Подарочный сертификат</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/adminform">Оставить отзыв руководству</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/info-about-it-activities">Об IT деятельности</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/lms">Об обучающей платформе</a></li> <!--<li class="footer__list-link"><a href="https://school-xyz.com/career-xyz">Вакансии</a></li>--> <li class="footer__list-link"><a href="https://career-center.ultimate-education.ru" target="_blank">Карьерный центр</a></li> </ul> </nav> </div> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">Направления</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <li class="footer__list-link"><a href="https://school-xyz.com/3d-modelirovanie">3D-моделирование</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/geymdizayn">Геймдизайн</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/2d-illyustraciya">2D-иллюстрация</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/programmirovanie">Программирование</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/menedzhement">Менеджмент</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/video-i-speceffekty">Видео и&nbsp;спецэффекты</a></li> <!--<li class="footer__list-link"><a href="https://www.school-xyz.com/courses/3ds-max">3ds Max: курсы и&nbsp;профессии</a></li>--> <li class="footer__list-link"><a href="https://school-xyz.com/courses">Все курсы</a></li> </ul> </nav> </div> <div class="footer__chapter-links-wrapper"> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">Сотрудничество</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <!--<li class="footer__list-link"><a href="https://school-xyz.com/b2b">Корпоративное обучение</a></li>--> <li class="footer__list-link"><a href="https://school-xyz.com/we-are-looking-for-new-teachers">Вакансии для экспертов</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/partners">Партнёрская программа</a></li> </ul> </nav> </div> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">Проекты</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <li class="footer__list-link"><a href="https://media-xyz.com/">XYZ Media</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/mentorstvo-s-gamedev-magistrami">Менторство в геймдеве</a></li> <li class="footer__list-link"><a href="https://thecreativity.ru/plus">Креативити</a></li> </ul> </nav> </div> </div> <div class="footer__contacts-container"> <div class="footer__contacts-wrap"> <a href="tel:+74996474926" class="">+7 (499) 647-49-26</a> <a href="tel:+74993030408" class="">+7 (499) 303-04-08</a> <a href="mailto:hello@school-xyz.com" class="footer__contacts-email">hello@school-xyz.com</a> </div> <div class="footer__social-links"> <a href="https://artstation.com/xyzschool" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild6138-6134-4835-a431-326434353061/artstation.svg" class="artstation" alt="Иконка Artstation"> </a> <a href="https://vk.com/xyz_gamedev" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild3933-6261-4533-b566-626135393434/vk.svg" class="vk" alt="Иконка VK"> </a> <a href="https://youtube.com/channel/UCtJsE0SDhyS4ib2evb5k3gg/videos" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild6539-3932-4764-b961-663633393636/youtube.svg" class="youtube" alt="Иконка Youtube"> </a> <a href="https://t.me/xyz_cg" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild3461-3738-4566-b931-323833326538/telegram.svg" class="telegram" alt="Иконка Telegram"> </a> </div> </div> </div> <div class="footer__other-info"> <div class="footer__other-info-left-side"> <p>©2026, XYZ</p> <div class="footer__awards"> <img src="" class="footer__runet-icon" alt="Иконка Рунет"> <a href="https://vk.com/wall-124560669_50286">Премия Рунета 2020, Игровая индустрия</a> </div> <div class="footer__awards"> <img src="" class="footer__skolkovo-icon" alt="Иконка Сколково"> <a href="https://navigator.sk.ru/?q=N4IgZiBcoC4IYHMDOB9GBPADgUyiA9gE4gC%2BANCEngLQC22tARtoSkgJYB2AxrhZlACMJIA">Участник Сколково</a> </div> </div> <div class="footer__legal-info"> <a href="https://www.school-xyz.com/sitemap">Карта сайта</a> <a href="https://school-xyz.com/info-about-educational-organization">Сведения об образовательной организации</a> <a href="https://school-xyz.com/privacy-policy">Обработка персональных данных</a> <a href="https://school-xyz.com/agreement">Оферта</a> <a href="#popup:sout">СОУТ</a> </div> </div> </div> </footer> <style>
:root {
    font-family: 'BebasRoboto';
    --color-bg: #17171b;
    --color-text: #fff;
    --color-text-opacity: rgba(255, 255, 255, 0.5);
    --color-accent: #6060ff;
    --color-border: #373742;
    --color-bg-contacts: #2B2A37;
    --color-bg-input: #212127;
    --color-social-icon: var(--color-accent);
    --color-bg-social-icon: #2B2B34;
    --url-runet-icon: url(https://static.tildacdn.com/tild6136-3933-4465-b933-613637353637/runet-icon-dark.svg);
    --url-skolkovo-icon: url(https://static.tildacdn.com/tild3235-3332-4635-a537-396662353164/skolkovo-icon-dark.svg);
    --url-arrow-down: url(https://static.tildacdn.com/tild6663-3965-4735-b337-393062313665/arrow-down-dark.svg);
}

:root .light-theme {
    --color-bg: #fff;
    --color-text: #17171b;
    --color-text-opacity: rgba(23, 23, 27, 0.4);
    --color-border: #EDEDED;
    --color-bg-contacts: #f5f5f5;
    --color-bg-input: #fff;
    --color-bg-social-icon: #fff;
    --url-runet-icon: url(https://static.tildacdn.com/tild6133-3337-4530-b063-336537643538/runet-icon-light_1.svg);
    --url-skolkovo-icon: url(https://static.tildacdn.com/tild3737-3331-4464-a437-613336636531/skolkovo-icon-light.svg);
    --url-arrow-down: url(https://static.tildacdn.com/tild3737-3062-4562-b662-623536383335/arrow-down-light.svg);
}

.t123 footer {
    position: relative;
    background: var(--color-bg);
    width: 100%;
    will-change: transform;
    -webkit-transform: translateZ(0);
    padding-top: 112px;
}

.footer__wrap {
    display: flex;
    max-width: 1160px;
    margin: 0 auto;
    box-sizing: border-box;
    flex-wrap: wrap;
    column-gap: 16px;
}

.footer__navigation {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 16px;
    padding-bottom: 64px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-border);
}

.footer__chapter-links-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

.footer__chapter-links {
    width: 278px;
    flex-shrink: 0;
}

.footer__chapter-links:last-child {
    flex-shrink: 1;
}

#allrecords .footer__chapter-links-list {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    list-style-type: none;
    padding-top: 16px;
    padding-left: 0;
    margin-bottom: 0;
}

.footer__chapter-links-heading {
    font-weight: 600;
    font-size: 24px;
    line-height: 130%;
    color: var(--color-text);
}

.footer__list-link {
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
}

#allrecords .footer__list-link a {
    text-decoration: none;
    transition: .2s ease;
    color: var(--color-text);
}

#allrecords .footer__list-link a:hover {
    color: var(--color-accent);
}

.footer__contacts-container {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 24px;
    width: 278px;
    box-sizing: border-box;
}

.footer__contacts-wrap {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

#allrecords .footer__contacts-wrap a {
    font-weight: 600;
    font-size: 24px;
    line-height: 130%;
    color: var(--color-text);
    text-decoration: none;
    transition: .2s ease;
}

#allrecords .footer__contacts-wrap a:hover {
    color: var(--color-accent);
}

#allrecords a.footer__contacts-email {
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    color: var(--color-accent);
    transition: .2s ease;
}

#allrecords a.footer__contacts-email:hover {
    color: var(--color-text);
}

.footer__social-links {
    display: flex;
    column-gap: 8px;
}

.footer__social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    transition: .2s ease;
}

.footer__social-icon:hover {
    transform: translateY(-4px);
}

.footer__other-info {
    display: flex;
    justify-content: space-between;
    column-gap: 24px;
    padding-bottom: 40px;
    width: 100%;
}

.footer__other-info-left-side {
    display: flex;
    align-items: center;
    column-gap: 32px;
}

.footer__other-info p {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-text-opacity);
}

.footer__awards {
    display: flex;
    align-items: center;
    column-gap: 10px;
    max-width: 160px;
}

#allrecords .footer__awards a {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-text-opacity);
    text-decoration: none;
}

.footer__runet-icon {
    content: var(--url-runet-icon);
    font-size: 10px;
}

.footer__skolkovo-icon {
    content: var(--url-skolkovo-icon);
    font-size: 10px;
}

.footer__skolkovo-icon + a {
    width: min-content;
}

.footer__legal-info {
    display: flex;
    align-items: center;
    column-gap: 16px;
}

#allrecords .footer__legal-info a {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-text-opacity);
    text-decoration: none;
    transition: .2s ease;
}

#allrecords .footer__legal-info a:hover {
    color: var(--color-text);
}

@media screen and (max-width: 1199px) {
    .t123 footer {
        padding-top: 96px;
    }
    
    .footer__wrap {
        max-width: 940px;
    }
    
    .footer__contacts-container {
        width: fit-content;
    }
    
    .footer__navigation {
        row-gap: 32px;
        padding-bottom: 40px;
    }
    
    .footer__chapter-links-wrapper {
        flex-direction: row;
        column-gap: 16px;
        order: 4;
    }

    .footer__chapter-links {
        width: 304px;
    }
    
    .footer__other-info {
        flex-direction: column;
        row-gap: 16px;
    }
    
    .footer__other-info-left-side {
        column-gap: 24px;
    }

    .footer__legal-info {
        column-gap: 16px;
    }
}

@media screen and (max-width: 959px) {
    .t123 footer {
        padding-top: 88px;
    }
    
    .footer__wrap {
        max-width: 620px;
        padding-top: 16px;
        border-top: 1px solid var(--color-border);
    }

    .footer__navigation {
        flex-direction: column;
        row-gap: 16px;
        width: 100%;
    }

    .footer__chapter-links {
        width: 100%;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--color-border);
    }
    
    .footer__chapter-links-wrapper {
        order: 3;
        flex-direction: column;
        row-gap: 16px;
    }

    .footer__chapter-links-heading {
        position: relative;
        display: flex;
        align-items: center;
        will-change: transform;
    }

    .footer__chapter-links-heading::after {
        content: ' ';
        background-image: var(--url-arrow-down);
        width: 24px;
        height: 24px;
        position: absolute;
        right: 0;
        transition: .4s ease;
    }

    .footer__chapter-links-heading.open::after {
        transform: rotateX(180deg);
    }

    .footer__chapter-links-wrap {
        display: none;
    }

    .footer__contacts-container {
        width: 620px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        height: fit-content;
        row-gap: 32px;
        padding-top: 24px;
        order: 4;
    }

    .footer__other-info {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .footer__other-info p {
        order: 2;
    }

    .footer__awards {
        order: 3;
    }

    .footer__legal-info {
        flex-wrap: wrap;
        order: 1;
        max-width: 100%;
        width: 100%;
        column-gap: 24px;
        row-gap: 8px;
    }
}

@media screen and (max-width: 639px) {
    .t123 footer {
        padding-top: 72px;
    }
    
    .footer__wrap {
        max-width: calc(100% - 24px);
    }
    
    .footer__chapter-links-heading {
        font-size: 16px;
    }
    
    .footer__list-link {
        font-size: 12px;
    }

    .footer__contacts-container {
        width: 100%;
        row-gap: 16px;
        padding-top: 16px;
    }
    
    #allrecords .footer__contacts-wrap a {
        font-size: 16px;
    }
    
    #allrecords a.footer__contacts-email {
        font-size: 12px;
    }
    
    .footer__social-links {
        width: fit-content;
    }
    
    .footer__navigation {
        padding-bottom: 32px;
        margin-bottom: 32px;
    }

    .footer__other-info {
        row-gap: 24px;
        justify-content: flex-start;
        padding-bottom: 32px;
    }

    .footer__other-info p {
        order: 3;
        text-align: center;
        font-size: 10px;
        width: 100%;
    }
    
    .footer__other-info-left-side {
        order: 2;
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 16px;
    }

    .footer__awards {
        order: 2;
        margin-bottom: 8px;
        max-width: 142px;
    }

    #allrecords .footer__awards a {
        font-size: 10px;
    }

    .footer__legal-info {
        align-items: flex-start;
    }
    
    #allrecords .footer__legal-info a {
        font-size: 10px;
        line-height: 16px;
    }
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
    if (document.documentElement.clientWidth < 960) {
        $('.footer__chapter-links-heading').click(function() {
            $(this).siblings('.footer__chapter-links-wrap').slideToggle();
            $(this).toggleClass('open');
        });
    }
});
</script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec958878116" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация новых чекбоксов от 15.04.25 --> <style>
.t-input-group.t-input-group_cb[data-field-name="privacy"], .t-input-group_cb:has(input[name="privacy"]) {
    margin-bottom: 0 !important;
}

/* скрываем чекбокс у согласия с политикой и оффертой */
.t-input-group_cb[data-field-name="privacy"] :is(.t-checkbox, .t-checkbox__indicator),
.t-input-group_cb input[name="privacy"], .t-input-group_cb input[name="privacy"] + .t-checkbox__indicator {
    display: none;
}

.t-input-group_cb[data-field-name="privacy"] .t-checkbox__labeltext,
.t-input-group_cb input[name="privacy"] ~ .t-checkbox__labeltext {
    margin-left: 0;
}

.t-input-group_cb[data-field-name="privacy"], .t-input-group_cb .t-checkbox__control:has([name="privacy"]) {
    pointer-events: none;
}

.t-input-group_cb[data-field-name="privacy"] a, .t-input-group_cb input[name="privacy"] ~ .t-checkbox__labeltext a {
    pointer-events: auto;
}

.t-input-group.t-input-group_cb[data-field-name="check"], .t-input-group_cb:has(input[name="check"]) {
    margin-top: 16px;
    margin-bottom: 0 !important;
}

.t-input-group.t-input-group_cb[data-field-name="check"] .t-checkbox__control {
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
</style> <!-- nominify end --> </div> </div> </div> </div> <!-- <strong>▼ Мини-футер ▼</strong> --> <div id="rec216668598" class="r t-rec t-rec_pb_0" style="padding-bottom:0px; " data-animationappear="off" data-record-type="396"> <!-- T396 --> <style>#rec216668598 .t396__artboard {height:530px;}#rec216668598 .t396__filter {height:530px;}#rec216668598 .t396__carrier{height:530px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec216668598 .t396__artboard,#rec216668598 .t396__filter,#rec216668598 .t396__carrier {height:522px;}#rec216668598 .t396__filter {}#rec216668598 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec216668598 .t396__artboard,#rec216668598 .t396__filter,#rec216668598 .t396__carrier {height:490px;}#rec216668598 .t396__filter {}#rec216668598 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec216668598 .t396__artboard,#rec216668598 .t396__filter,#rec216668598 .t396__carrier {height:649px;}#rec216668598 .t396__filter {}#rec216668598 .t396__carrier {background-attachment:scroll;}}#rec216668598 .tn-elem[data-elem-id="1564645816905"]{z-index:3;top:0px;;left:0px;;width:760px;height:530px;}#rec216668598 .tn-elem[data-elem-id="1564645816905"] .tn-atom{border-radius:24px 24px 24px 24px;background-color:#17171b;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1564645816905"]{top:0px;;left:0px;;width:620px;height:522px;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1564645816905"]{top:0px;;left:0px;;width:620px;height:490px;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1564645816905"]{top:0px;;left:0px;;width:300px;height:649px;border-radius:16px 16px 16px 16px;}#rec216668598 .tn-elem[data-elem-id="1564645816905"] .tn-atom{background-size:cover;border-radius:16px 16px 16px 16px;}}#rec216668598 .tn-elem[data-elem-id="1596205809432"]{color:#ffffff;z-index:4;top:144px;;left:40px;;width:310px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596205809432"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1596205809432"]{top:136px;;left:40px;;width:300px;height:auto;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1596205809432"]{top:112px;;left:32px;;width:260px;height:auto;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1596205809432"]{top:80px;;left:16px;;width:230px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596205809432"] .tn-atom{font-size:12px;background-size:cover;}}#rec216668598 .tn-elem[data-elem-id="1596206009249"]{color:#ffffff;z-index:5;top:144px;;left:350px;;width:280px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206009249"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1596206009249"]{top:136px;;left:340px;;width:188px;height:auto;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1596206009249"]{top:112px;;left:322px;;width:260px;height:auto;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1596206009249"]{top:324px;;left:16px;;width:240px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206009249"] .tn-atom{font-size:12px;background-size:cover;}}#rec216668598 .tn-elem[data-elem-id="1596206049927"]{color:#ffffff;z-index:6;top:40px;;left:40px;;width:418px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:80px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1;font-weight:500;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1596206049927"]{top:40px;;left:40px;;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{font-size:72px;background-size:cover;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1596206049927"]{top:32px;;left:32px;;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{font-size:56px;background-size:cover;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1596206049927"]{top:24px;;left:16px;;width:202px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{font-size:40px;background-size:cover;}}#rec216668598 .tn-elem[data-elem-id="1607933466856"]{color:#ffffff;z-index:7;top:424px;;left:40px;;width:440px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1607933466856"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1607933466856"]{top:416px;;left:40px;;width:434px;height:auto;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1607933466856"]{top:392px;;left:32px;;height:auto;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1607933466856"]{top:549px;;left:16px;;width:268px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1607933466856"] .tn-atom{vertical-align:middle;white-space:normal;font-size:12px;background-size:cover;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="216668598" data-artboard-screens="320,640,960,1200" data-artboard-height="530" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-heightmode="hug" data-artboard-height-res-320="649" data-artboard-height-res-640="490" data-artboard-height-res-960="522"> <div class="t396__carrier" data-artboard-recid="216668598"></div> <div class="t396__filter" data-artboard-recid="216668598"></div> <div class='t396__elem tn-elem requisites-bg tn-elem__2166685981564645816905' data-elem-id='1564645816905' data-elem-type='shape' data-field-top-value="0" data-field-left-value="0" data-field-height-value="530" data-field-width-value="760" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-heightmode-value="fixed" data-field-top-res-320-value="0" data-field-left-res-320-value="0" data-field-height-res-320-value="649" data-field-width-res-320-value="300" data-field-widthmode-res-320-value="fixed" data-field-heightmode-res-320-value="fixed" data-field-top-res-640-value="0" data-field-left-res-640-value="0" data-field-height-res-640-value="490" data-field-width-res-640-value="620" data-field-axisx-res-640-value="left" data-field-heightmode-res-640-value="fixed" data-field-top-res-960-value="0" data-field-left-res-960-value="0" data-field-height-res-960-value="522" data-field-width-res-960-value="620" data-field-heightmode-res-960-value="fixed"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2166685981596205809432' data-elem-id='1596205809432' data-elem-type='text' data-field-top-value="144" data-field-left-value="40" data-field-height-value="264" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="14" data-field-top-res-320-value="80" data-field-left-res-320-value="16" data-field-width-res-320-value="230" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="112" data-field-left-res-640-value="32" data-field-width-res-640-value="260" data-field-top-res-960-value="136" data-field-left-res-960-value="40" data-field-width-res-960-value="300"> <div class='tn-atom'field='tn_text_1596205809432'><span style="color: rgb(115, 115, 115);">Наименование</span><br>ООО "ИКС ВАЙ ЗЕТ НЕТВОРК" <br><br><span style="color: rgb(115, 115, 115);">ИНН</span><br>9705150153 <br><br><span style="color: rgb(115, 115, 115);">КПП</span> <br>770501001 <br><br><span style="color: rgb(115, 115, 115);">Счёт (₽) </span><br>40702810902500083750<br>1207700448361 ОГРН</div> </div> <div class='t396__elem tn-elem tn-elem__2166685981596206009249' data-elem-id='1596206009249' data-elem-type='text' data-field-top-value="144" data-field-left-value="350" data-field-height-value="242" data-field-width-value="280" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="14" data-field-top-res-320-value="324" data-field-left-res-320-value="16" data-field-width-res-320-value="240" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="112" data-field-left-res-640-value="322" data-field-width-res-640-value="260" data-field-top-res-960-value="136" data-field-left-res-960-value="340" data-field-width-res-960-value="188"> <div class='tn-atom'field='tn_text_1596206009249'><span style="color: rgb(115, 115, 115);">Банк получателя</span><br> "ООО "Банк Точка" "<br><br><span style="color: rgb(115, 115, 115);">Город </span><br>Москва<br><br><span style="color: rgb(115, 115, 115);">БИК </span><br>044525104<br><br><span style="color: rgb(115, 115, 115);">Корр. счёт </span><br>30101810745374525104</div> </div> <div class='t396__elem tn-elem tn-elem__2166685981596206049927' data-elem-id='1596206049927' data-elem-type='text' data-field-top-value="40" data-field-left-value="40" data-field-height-value="140" data-field-width-value="418" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="80" data-field-top-res-320-value="24" data-field-left-res-320-value="16" data-field-width-res-320-value="202" data-field-fontsize-res-320-value="40" data-field-top-res-640-value="32" data-field-left-res-640-value="32" data-field-fontsize-res-640-value="56" data-field-top-res-960-value="40" data-field-left-res-960-value="40" data-field-fontsize-res-960-value="72"> <div class='tn-atom'field='tn_text_1596206049927'>РЕКВИЗИТЫ</div> </div> <div class='t396__elem tn-elem tn-elem__2166685981607933466856' data-elem-id='1607933466856' data-elem-type='text' data-field-top-value="424" data-field-left-value="40" data-field-height-value="66" data-field-width-value="440" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="14" data-field-top-res-320-value="549" data-field-left-res-320-value="16" data-field-width-res-320-value="268" data-field-heightunits-res-320-value="px" data-field-textfit-res-320-value="autoheight" data-field-widthmode-res-320-value="fixed" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="392" data-field-left-res-640-value="32" data-field-top-res-960-value="416" data-field-left-res-960-value="40" data-field-width-res-960-value="434"> <div class='tn-atom'field='tn_text_1607933466856'><span style="color: rgb(115, 115, 115);">Юридический адрес</span><br>115184, г. Москва, вн.тер.г. муниципальный округ Замоскворечье, ул Бахрушина, д. 10, стр. 2</div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('216668598');});});</script> <!-- /T396 --> </div> <div id="rec216668599" class="r t-rec uc-requisites" style=" " data-record-type="390"> <div class="t390"> <div
class="t-popup" data-tooltip-hook="#popup:rec"
role="dialog"
aria-modal="true"
tabindex="-1"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#fff" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_8"> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec216668599');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('216668599');});});</script> </div> <div id="rec216668601" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация попапа Реквизиты --> <style>
.shirina {
    background: none !important;
    right: 0 !important;
    left: 0 !important;
}

.parpadding {
    padding: 0 !important;
}

:is(.uc-requisites, .t390, .t331) .t-popup__close {
    top: 24px;
    right: 24px !important;
    width: 44px;
    height: 44px;
    background: rgb(255 255 255 / 20%);
    border-radius: 30px;
    zoom: 0.8;
}

.t-popup__block-close-button {
    width: 18px;
    padding: 13px;
}

.t-popup__close-icon {
    display: block;
    width: 18px;
    height: 18px;
}

@media (max-width: 639px) {
    .uc-requisites .t-popup {
        background: rgb(0 0 0 / 40%);
    }
    
    .uc-requisites .t-popup__container.t-popup__container-static {
        margin: 24px auto;
    }
    
    :is(.uc-requisites, .t390) .t-popup__close {
        position: absolute;
        top: 16px;
        right: 16px !important;
    }
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
    var ZeroPopID = '#rec216668598';  //Прописываем ID Zero
    var PopWindID = '#rec216668599';  //Прописываем ID PopUp окна BF503
    //Переносим ZeroBlock в POPup + Добавляем новый клас в POPup
    $(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID));
    $(PopWindID + " .t-popup__container").parent(".t-popup").addClass("parpadding");
    
    // перемещаем крестик внутрь попапа
    $('.uc-requisites').each(function() {
        $(this).find('.requisites-bg').prepend($(this).find('.t-popup__close'));
    });
});
</script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec577164264" class="r t-rec uc-license-popup" style=" " data-record-type="390"> <div class="t390"> <div
class="t-popup" data-tooltip-hook="#popup:license"
role="dialog"
aria-modal="true"
tabindex="-1"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#17171b" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_6"> <div class="t390__wrapper t-align_center"> <div class="t390__descr t-descr t-descr_xs">Лицензия на&nbsp;образовательную деятельность рег. номер <span style="font-weight: 700;">Л035−1 298−77/179 677</span> от&nbsp;22&nbsp;февраля 2022</div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec577164264');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('577164264');});});</script> <style> #rec577164264 .t390__descr{color:#17171b;}</style> </div> <div id="rec586447967" class="r t-rec uc-license-popup" style=" " data-record-type="390"> <div class="t390"> <div
class="t-popup" data-tooltip-hook="#popup:sout"
role="dialog"
aria-modal="true"
tabindex="-1"
aria-label="Результаты СОУТ"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#17171b" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_8"> <div class="t390__wrapper t-align_left"> <div class="t390__title t-heading t-heading_lg" id="popuptitle_586447967">Результаты СОУТ</div> <div class="t390__descr t-descr t-descr_xs">В декабре 2022 года в соответствии с действующим законодательством Российской Федерации в ООО «ИКС ВАЙ ЗЕТ НЕТВОРК» была проведена специальная оценка условий труда.<br /><br />С учётом требований законодательства Российской Федерации о персональных данных и законодательства Российской Федерации о государственной и об иной охраняемой законом тайне публикуем:<br /><ul><li style="color: rgb(23, 23, 27);"><a href="https://drive.google.com/file/d/1Hf0P73TIs0gn8ZB2SeQOeCdK0y1RaYP_/view" target="_blank" rel="noreferrer noopener" style="color: rgb(23, 23, 27); border-bottom: 1px solid rgb(23, 23, 27); box-shadow: none; text-decoration: none;">сводную ведомость специальной оценки условий труда</a></li><li><a href="https://drive.google.com/file/d/1msPYwdLZh2h88eb6Jrz-xDyERfamTmQc/view" target="_blank" rel="noreferrer noopener" style="color: rgb(23, 23, 27); border-bottom: 1px solid rgb(23, 23, 27); box-shadow: none; text-decoration: none;">перечень мероприятий по улучшению условий и охраны труда работников</a>, на рабочих местах которых проводилась специальная оценка условий труда.</li></ul></div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec586447967');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('586447967');});});</script> <style> #rec586447967 .t390__title{color:#17171b;font-weight:500;text-transform:uppercase;}@media screen and (min-width:900px){#rec586447967 .t390__title{font-size:60px;line-height:1;}}#rec586447967 .t390__descr{font-size:14px;line-height:1.6;color:#17171b;}</style> </div> <div id="rec577164294" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация попапа с лицензией и СОУТ --> <style>
.uc-license-popup .t-popup__container {
    border-radius: 20px;
}

.uc-license-popup .t-popup__close {
    zoom: 0.8;
    background: #F0F0F0;
    border-radius: 30px;
    width: 44px;
    height: 44px;
}

.uc-license-popup .t-popup__block-close-button {
    width: 18px;
    padding: 13px;
}

.uc-license-popup .t-popup__close-icon {
    display: block;
    width: 18px;
    height: 18px;
}

@media screen and (max-width: 1199px) {
    .uc-license-popup .t390__title {
        font-size: 52px !important;
    }
}

@media screen and (max-width: 959px) {
    .uc-license-popup .t390__title {
        font-size: 48px !important;
    }
}

@media screen and (max-width: 639px) {
    .uc-license-popup .t-popup__close {
        zoom: 0.6;
        top: 16px;
        right: 16px;
    }
    
    .uc-license-popup .t390__wrapper {
        padding: 32px 40px;
    }
    
    .uc-license-popup .t390__title {
        font-size: 28px !important;
    }
    
    .uc-license-popup .t390__descr {
        font-size: 10px !important;
    }
}
</style> <script>
// переносим крестик внутрь попапа
document.addEventListener('DOMContentLoaded', function() {
    $('.uc-license-popup .t-popup').each(function() {
        $(this).find('.t-popup__container').prepend($(this).find('.t-popup__close'));
    });
});
</script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec602614066" class="r t-rec" style=" " data-animationappear="off" data-record-type="886"> <!-- T886 --> <div class="t886 t886_closed" data-storage-item="t886cookiename_1006203" style=""> <div class="t886__wrapper" style="background-color:#ffffff; width:740px;"> <div class="t886__text t-text t-text_xs t-valign_middle" field="text">Пользуясь нашим сайтом, ты соглашаешься с тем, что мы&nbsp;<u style="color: rgb(128, 128, 255);"><a href="https://www.school-xyz.com/privacy-policy" style="box-shadow: none; text-decoration: none; border-bottom-style: solid; border-bottom-color: rgb(128, 128, 255); color: rgb(128, 128, 255);">используем cookies</a></u>.</div> <div
class="t-btn t-btnflex t-btnflex_type_button t-btnflex_sm t886__btn"
type="button"><span class="t-btnflex__text">Принять</span> <style>#rec602614066 .t-btnflex.t-btnflex_type_button {color:#ffffff;background-color:#6060ff;border-style:solid !important;border-color:#6060ff !important;--border-width:1px;border-radius:50px;box-shadow:none !important;font-weight:400;padding:9px 24px 9px 24px;transition-duration:0.2s;transition-property:background-color,color,border-color,box-shadow,opacity,transform,gap;transition-timing-function:ease-in-out;}@media (hover:hover) {#rec602614066 .t-btnflex.t-btnflex_type_button:not(.t-animate_no-hover):hover {color:#ffffff !important;background-color:#6060ff !important;}#rec602614066 .t-btnflex.t-btnflex_type_button:not(.t-animate_no-hover):focus-visible {color:#ffffff !important;background-color:#6060ff !important;}}</style></div> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t886_init',function() {t886_init('602614066');});});</script> <style>#rec602614066 .t886__text{text-align:left;}</style> <style> #rec602614066 .t886__text{line-height:1.6;color:#17171b;}</style> <style>#rec602614066 .t886__wrapper {box-shadow:0px 0px 4px rgba(0,0,0,0.1);}</style> <style> #rec602614066 .t886__wrapper{border-radius:16px;}@media (max-width:480px){#rec602614066 .t886__wrapper{border-radius:8px;}}</style> </div> <div id="rec602637647" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация виджета cookie --> <style>
.t886 {
    width: 100%;
    z-index: 1000000001;
    transition: .3s ease;
}

.t-body.show-promobar:not(.hide-promobar) .t886 {
    bottom: calc(var(--dynamic-bottom) + 20px) !important;
}

.t886__wrapper {
    display: flex;
    padding: 12px 24px;
    margin: 0 auto;
    gap: 16px;
}

.t886__text {
    font-size: 14px;
    padding-right: 0 !important;
}

.t886__btn {
    font-size: 14px;
    line-height: 1.6;
}

@media screen and (max-width: 980px) {
    .t886 {
        width: calc(100% - 20px) !important;
        left: 10px !important;
        bottom: unset !important;
        top: 14px !important;
    }
    
    .t886__wrapper {
        border-radius: 8px !important;
        padding: 8px 16px;
        gap: 20px;
    }
}

@media (max-width: 639px) {
    .t886__text {
        font-size: 10px;
    }
}
</style> <!-- nominify end --> </div> </div> </div> </div> <div id="rec368502560" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- плагин интеграции amo crm -> yandex metrika --> <script type="text/javascript">
    (function(){
        var ya_counter_id = '65640406';
        var ya_client_id = '';
        var setYaClientId = function (){
            var intervalYaClientId = setInterval(function(){
                try {
                    if (typeof window['yaCounter'+ya_counter_id] !== "undefined" && typeof window['yaCounter'+ya_counter_id].getClientID !== "undefined") {
                        ya_client_id = window['yaCounter'+ya_counter_id].getClientID();
                        if (!ya_client_id)
                            return;
                        var forms = document.getElementsByTagName("form");
                        for (var i = 0; i < forms.length; i++) {
                            var input = document.createElement("INPUT");
                            input.type = "hidden";
                            input.name = "YMClientID";
                            input.value = ya_client_id;
                            forms[i].appendChild(input);
                        }
                        clearInterval(intervalYaClientId);
                    }
                } catch(err) {
                }
            }, 1000);
        };
        setYaClientId();
    })();
</script> <!-- nominify end --> </div> </div> </div> </div> </footer> <!--/footer--> </div> <!--/allrecords--> <!-- Stat --> <!-- Yandex.Metrika counter 65640406 --> <script type="text/javascript" data-tilda-cookie-type="analytics">setTimeout(function(){(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window,document,"script","https://mc.yandex.ru/metrika/tag.js","ym");window.mainMetrikaId='65640406';ym(window.mainMetrikaId,"init",{clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true,params:{__ym:{"ymCms":{"cms":"tilda","cmsVersion":"1.0","cmsCatalog":"1"}}},ecommerce:"dataLayer"});},2000);</script> <noscript><div><img src="https://mc.yandex.ru/watch/65640406" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <script type="text/javascript">if(!window.mainTracker) {window.mainTracker='tilda';}
window.tildastatscroll='yes';setTimeout(function(){(function(d,w,k,o,g) {var n=d.getElementsByTagName(o)[0],s=d.createElement(o),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.key=k;s.id="tildastatscript";s.src=g;if(w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded",f,false);} else {f();}})(document,window,'46f1ce95aad41ac8b0d98605c4e04383','script','https://static.tildacdn.com/js/tilda-stat-1.0.min.js');},2000);</script> <!-- Rating Mail.ru counter --> <script type="text/javascript" data-tilda-cookie-type="analytics">setTimeout(function(){var _tmr=window._tmr||(window._tmr=[]);_tmr.push({id:"3737289",type:"pageView",start:(new Date()).getTime()});window.mainMailruId='3737289';(function(d,w,id) {if(d.getElementById(id)) {return;}
var ts=d.createElement("script");ts.type="text/javascript";ts.async=true;ts.id=id;ts.src="https://top-fwz1.mail.ru/js/code.js";var f=function() {var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(ts,s);};if(w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded",f,false);} else {f();}})(document,window,"topmailru-code");},2000);</script> <noscript><img src="https://top-fwz1.mail.ru/counter?id=3737289;js=na" style="border:0;position:absolute;left:-9999px;width:1px;height:1px" alt="Top.Mail.Ru" /></noscript> <!-- //Rating Mail.ru counter --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTCCH4H" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> </body> </html>