Diablo 3 — Пузыри Ресурсов

Эта статья представляет собой перевод статьи Саймона Шрайбта «Diablo 3 — Resource Bubbles».



Diablo 3 — Пузыри ресурсов

В мире есть три вещи, на которые я могу смотреть вечно: Огонь, как работают другие и ресурсные сферы в мире.

Диабло3 .

Мне уже нравится стиль Blizzard, о чем вы, наверное, можете судить по моя статья про их 2.5D деревья .

Сегодня мы говорим о другом.

Сегодня мы заглянем вглубь хрустальных сфер Диабло в поисках истины.

(внутри много картинок)

Diablo 3 — Пузыри ресурсов



Diablo 3 — Пузыри ресурсов



Diablo 3 — Пузыри ресурсов

Они кажутся такими глубокими.

Такой круглый.

Очаровательная смесь размытия и четкости.

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

Я на ложном пути (woodway прим.

пер.

), как у нас говорят в Германии):



Первый ложный след

Возьмите многоугольную сферу, отрежьте половину и поместите текстуру на поверхность.

Почему это неправильно? Потому что я проверил сетку пузырьков в игре.

И угадай что? Это НЕ пузырь! Посмотрите на мое видение (красная сфера) и реальную сетку из Diablo3 (зеленая), которая, кстати, содержит всего 218 треугольников против моих 960.

Diablo 3 — Пузыри ресурсов



Второй ложный след

Я спросил Неокс что он думает и предложил взять сферу, запечь ее в карту нормалей и все остальное сделать в шейдере.

Это была хорошая идея, но я не смог найти подобную текстуру в файлах Diablo. Так какого черта я трачу ваше время на всю эту ерунду? Да потому, что Микекс опубликовано отличный пример , что похоже на идею Neox. Я думаю, это будет моя следующая статья .

Теперь просто посмотрите на изображение и обратите внимание, как здорово выглядит земная сфера.

Но мы не ищем легких путей.



Diablo 3 — Пузыри ресурсов

Теперь поговорим о правильном решении.



Первый адский путь – «УФ-сканирование»

Мне удалось вытащить «пузырьковую» сетку и посмотреть на ее текстурную карту (UV).

И вот как это выглядит:

Diablo 3 — Пузыри ресурсов

UV-развертки модифицированы (растянуты по краям и сжаты в центре).

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

Diablo 3 — Пузыри ресурсов

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

Я действительно думаю, что она выглядит круто.



Diablo 3 — Пузыри ресурсов



Второй адский путь – "Геометрия"

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

Благодаря Просмотр моделей D3 мы видим, что здесь более одной плоскости.



Diablo 3 — Пузыри ресурсов

Вы заработаете 666 очков, если заметите, что эти текстуры содержат совершенно неправильные цвета и узоры.

Я как бывалый игрок старой Diablo2 искал в файлах термин «мана», но в ресурсах Diablo3 колдун называет его Arcane Energy. Мана используется колдуном.

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

ты bb0x Был отличный вопрос по поводу строки, которая появляется, когда ресурс заполнен не на 100%.

Эта линия не изогнута, и он упомянул, что для этого они могут использовать второй УФ-слой.



Diablo 3 — Пузыри ресурсов

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



Третий адский путь – «Текстуры»

Текстуры для ресурса колдуна выглядят так:

Diablo 3 — Пузыри ресурсов

Честно говоря, я не могу точно сказать, как все это сочетается.

Но хочу сделать пару замечаний (догадок): #1 03 — это альфа-канал из 02. Кроме 04, ни одна другая текстура не имеет собственного альфа-канала.

#2 Я серьезно начал копаться в том, как они заставили текстуру жидкости подниматься чуть выше фактического уровня заполнения.

04 и три другие небольшие текстуры используются для рендеринга уровня.



Diablo 3 — Пузыри ресурсов

#3 Если вы посмотрите кадр за кадром, вы увидите прозрачную сферу, и я думаю, что 01 используется для нее в качестве альфа-канала.

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

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

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

ок.

переулок )

Diablo 3 — Пузыри ресурсов

Вы дочитали статью почти до конца.

Саймон слишком грустен.

написать больше, потому что ему не нравится, что он не смог найти больше информации о смешивании текстур.

Он надеется, что 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 #секреты графики #Разработка игр

Вместе с данным постом часто просматривают:

Автор Статьи


Зарегистрирован: 2019-12-10 15:07:06
Баллов опыта: 0
Всего постов на сайте: 0
Всего комментарий на сайте: 0
Dima Manisha

Dima Manisha

Эксперт Wmlog. Профессиональный веб-мастер, SEO-специалист, дизайнер, маркетолог и интернет-предприниматель.