Эта статья представляет собой перевод статьи Саймона Шрайбта «Diablo 3 — Resource Bubbles».
В мире есть три вещи, на которые я могу смотреть вечно: Огонь, как работают другие и ресурсные сферы в мире.
Диабло3 .
Мне уже нравится стиль Blizzard, о чем вы, наверное, можете судить по моя статья про их 2.5D деревья .
Сегодня мы говорим о другом.
Сегодня мы заглянем вглубь хрустальных сфер Диабло в поисках истины.
(внутри много картинок)
Они кажутся такими глубокими.
Такой круглый.
Очаровательная смесь размытия и четкости.
Опишу свои первые мысли о том, как этого можно было добиться (короче: обе они неправы.
Я на ложном пути (woodway прим.
пер.
), как у нас говорят в Германии):
Первый ложный след
Возьмите многоугольную сферу, отрежьте половину и поместите текстуру на поверхность.Почему это неправильно? Потому что я проверил сетку пузырьков в игре.
И угадай что? Это НЕ пузырь! Посмотрите на мое видение (красная сфера) и реальную сетку из Diablo3 (зеленая), которая, кстати, содержит всего 218 треугольников против моих 960.
Второй ложный след
Я спросил Неокс что он думает и предложил взять сферу, запечь ее в карту нормалей и все остальное сделать в шейдере.Это была хорошая идея, но я не смог найти подобную текстуру в файлах Diablo. Так какого черта я трачу ваше время на всю эту ерунду? Да потому, что Микекс опубликовано отличный пример , что похоже на идею Neox. Я думаю, это будет моя следующая статья .
Теперь просто посмотрите на изображение и обратите внимание, как здорово выглядит земная сфера.
Но мы не ищем легких путей.
Теперь поговорим о правильном решении.
Первый адский путь – «УФ-сканирование»
Мне удалось вытащить «пузырьковую» сетку и посмотреть на ее текстурную карту (UV).
И вот как это выглядит:
UV-развертки модифицированы (растянуты по краям и сжаты в центре).
Давайте посмотрим, что произойдет, если мы применим к пузырю шахматный узор и позволим UV перемещаться слева направо:
Возможно, он не выглядит идеальной сферой (скорее похожей на круглую шляпу), но поскольку края пузыря в основном покрыты нарисованными отражениями или печальным каменным ангелом, на мой взгляд, это работает очень хорошо.
Я действительно думаю, что она выглядит круто.
Второй адский путь – "Геометрия"
Однако перемещение всего лишь одной текстуры не создаст того прекрасного тандема движения и глубины.Благодаря Просмотр моделей D3 мы видим, что здесь более одной плоскости.
Вы заработаете 666 очков, если заметите, что эти текстуры содержат совершенно неправильные цвета и узоры.
Я как бывалый игрок старой Diablo2 искал в файлах термин «мана», но в ресурсах Diablo3 колдун называет его Arcane Energy. Мана используется колдуном.
Хотя мне кажется, что они для этого используют меш пузырьков маны, так как какой-то особой геометрии для аркан-сферы мне найти не удалось.
ты bb0x Был отличный вопрос по поводу строки, которая появляется, когда ресурс заполнен не на 100%.
Эта линия не изогнута, и он упомянул, что для этого они могут использовать второй УФ-слой.
К счастью для нас, Джулиан Лав рассказал нам, как это было сделано, и я добавил это ниже.
Третий адский путь – «Текстуры»
Текстуры для ресурса колдуна выглядят так:Честно говоря, я не могу точно сказать, как все это сочетается.
Но хочу сделать пару замечаний (догадок): #1 03 — это альфа-канал из 02. Кроме 04, ни одна другая текстура не имеет собственного альфа-канала.
#2 Я серьезно начал копаться в том, как они заставили текстуру жидкости подниматься чуть выше фактического уровня заполнения.
04 и три другие небольшие текстуры используются для рендеринга уровня.
#3
Если вы посмотрите кадр за кадром, вы увидите прозрачную сферу, и я думаю, что 01 используется для нее в качестве альфа-канала.
Я не понимаю, почему все остальное рендерится позже, но мне кажется, что игра все равно обрабатывает это по-другому.
(Мне кажется, речь идет о том, что первый слой полностью покрыт дальнейшим рисованием и вроде бы рисуется зря.
Возможно, он рисуется в буфер для дальнейшего использования, но по порядку он первый На анимации ниже видно, что первый кадр полностью перекрыт вторым.
ок.
переулок )
Вы дочитали статью почти до конца.
Саймон слишком грустен.
написать больше, потому что ему не нравится, что он не смог найти больше информации о смешивании текстур.
Он надеется, что Blizzard наймет его на роль грустного ангела, сидящего на левой стороне пузыря.
Тогда он сможет собирать больше крутых фишек прямо из самого сердца искусства.
Дополнение №1
Я имел честь получить более подробную информацию о пузырьках от Джулиан Лав : Текстуры перемножаются друг с другом.Они не смешиваются.
Вот отсюда и вся сложность в движении цвета.
Вот также, как обрабатывается движение ватерлинии.
[…] Вот формула альфа-маски ватерлинии: а = tex1.a * tex2.a * 4 Также линия воды искажается ультрафиолетом, но это искажение очень сложно заметить, если смотреть на сферу прямо спереди».
Поскольку у меня нет особых знаний о коде шейдеров, я спросил его, что, если «*4» используется для осветления текстуры, поскольку его умножение сильно затемняет ее.
Его ответ был: Да, *4 в конце очень значительно делает его ярче.
То же самое делаем с цветом, только используем *2. Формула цвета: rgb = ((tex1.rgb * text2.rgb * 2) * text3.rgb * 2) Каждая текстура на самом деле является экземпляром одной и той же текстуры, только каждый этап имеет разное смещение, скорость и масштаб UV. Благодаря этим святым программам: D3TexConv v0.9b & Экстрактор MPQ & Блендер .
Без них написание этой статьи было бы невозможно.
MikieX упомянул несколько действительно хороших блестящие шарики .
Я не могу поверить, что это всего лишь спрайт с магией тяжелых пиксельных шейдеров.
Как круто? Апекс восстановил пузырь и даже имеет ползунок для управления уровнем заполнения! Он сделал это в Unity, и вы можете увидеть это здесь.
.
Проверьте это! Теги: #игры #графика #DirectX #секреты графики #Разработка игр
-
Структура Данных B-Дерева
19 Oct, 24 -
Лучшие Примеры Анимированной Инфографики
19 Oct, 24 -
Об Информационной Войне
19 Oct, 24 -
Расиос — Мечтай, Планируй, Реализуй!
19 Oct, 24