Textures not for texturing
•Download as PPTX, PDF•
0 likes•71 views
Andrew Chaiko, Senior Unity Developer, Heyworks We’ll look at textures’ use other than for texturing. We’ll see how textures can be used in shaders to create exciting and cheap VFXs.
Recommended
More Related Content
More from DevGAMM Conference
More from DevGAMM Conference (20)
Textures not for texturing
- 1. Андрей Чайко Старший Unity3D разработчик в компании
- 2. Применение текстур не по назначению
- 5. Градиенты
- 6. Прогрессбар
- 9. Усложним?
- 10. R G + x ==
- 11. R G + =
- 12. Шум
- 13. + =
- 17. + =x
- 18. Material Capture
- 20. Искажение UV
- 22. + =
- 26. R G B A
- 28. Earn to die 2
Editor's Notes
- Здравствуйте, меня зову Андрей Чайко, и я люблю шейдеры.
- Мой доклад называется “Применение текстур не по назначению”. С помощью этого доклада мне бы хотелость, чтобы вы стали воспринимать текстуры не как что-то содержащее цвет - а как контейнер для данных. А как использовать эти данные - решать уже вам. Понимание этой концепции открывает перед вами безграничные возможности!
- Но для начала вопрос - кто среди здесь присутствующих хочет немного уличной магии, в смысле, писал шейдеры для своих проектов? Хорошо, я думал будет хуже. Те кто поднял руку - молодцы, вы на правильном пути. Кто нет - надеюсь мой доклад поможет вам понять что в шейдерах нет ничего срашного и неподьемного, и осознать полезность их написания.
- Лично я при разработке стараюсь придерживаться правила - если что-то можно посчитать на GPU - то нужно делать это на GPU. Смысл в том, чтобы разгрузить ваш центральный процессор, перенеся часть вычислений на видеокарту, и оставить больше времени для выполнения скриптов. Итак, начнем.
- Первый, так сказать, “тип” текстуры, который может быть нам полезен - это градиент. В математике это слово имеет значение, определяющее градиент как нейкий вектор или направление возрастания какой-то величины. В этом смысле мы можем использовать градиенты, например,
- ...для реализации прогрессбаров. Вот такой простейший прогрессбар можно сделать с помощью градиентной текстуры и небольшого шейдера.
- Как это работает?
- Очень просто. Но сперва, давайте абстрагируемся от того, что мы видим на экране. Забудьте, что это цвета от черного к белому. Для компьютера это в первую очередь последовательность чисел от 0 до 255. Именно это мы используем, чтобы сделать прогрессбар. При отрисовке каждого пикселя этого полигона мы будем сравнивать цвет, семплированный с текстуры градиента с текущим значением прогресса, который мы передаем в шейдер, и рисовать только те пиксели, значение цвета которых меньше. Делается это таким вот шейдером. Сначала получаем цвет пикселя, который мы собираемся нарисовать. Так как все компоненты в черно-белой текстуре одинаковы, берем из него любой компонент, в нашем случае - красный, и с помощью функции step сравниваем его с текущим значением прогресса. Эта функция работает следующим образом - если первый параметр меньше второго, она вернет единици, и ноль - если наоборот. Умножаем полученное число на цвет - и получаем заливку прогрессбара нужного цвета.
- В предыдущем примере нам понадобился только один канал из целой RGB текстуры. Так зачем зря терять пространство? В следующем примере мы будем более хозяйственными,
- и используем сразу два канала. Этот шейдер работает так же как и предыдущий, лишь с той разницей, что в R канале мы будем держать маску, определяющую форму нашего прогрессбара, а в G канале - градиент, который в этом случае имеет круговую заливку. Снова умножаем на цвет и вуаля - прогрессбар уже выглядит интереснее.
- Но зачем себя ограничивать простыми формами? Подумал наш художник и сделал на основе этого шейдера эффект появляющегося дерева. Шейдер здесь также несложный, и отличается от предыдущего тем, что я добавил параметр с не очень удачным названием _AnimWidth, который обозначает ширину области затухания, благодаря которой листья на дереве не появляются попиксельно из-за ступенчатой функции step из предыдущего примера, а проявляются плавно. Помимо этого, градиент нарисован таким образом, чтобы листья появлялись заметно позднее веток. Уверен, что области применения этого шейдера ограничиваются лишь фантазией художника.
- Шум есть не что иное, как градиент, только более сложной формы. И благодаря ему на прогрессбар может быть например
- Таким. Ну, может это уже и не прогрессбар - вам решать. Например, с похожим эффектом пропадали мертвые враги в DOOM3.
- Как это работает? Немного сложнее, но все еще без какой-либо магии.
- Этот шейдер работает по тому же принципу, но имеет несколько отличий. Здесь нам помимо текстуры с шумом понадобится основная (еще говорят диффузная) текстура. Уровень level, который мы будем сравнивать со значением прогресса, мы как и в предыдущих примерах берем из красного канала текстуры шума, но здесь, вместо простого плавноого затухания в прозрачность, мы дважды будем интерполировать цвет. Для наглядности я настроил градиент, чтобы проще было понять что происходит. Сначала мы интерполируемся от диффузного цвета, который на градиенте показан зеленым, к холодному, в этом примере черному. А затем от холодного к горячему, который здесь красный. Остальные пиксели, как и в предыдущих примерах - прозрачные. Обратите внимание на 3 и четвертую строчки с конца - там происходит интерполяция. Заметьте, что значение интерполяции я взял в квадрат. Это не тяжелая для GPU функция, но она позволяет уйти от линейности. А человеческий глаз очень хорошо замечает все линейное и симметричное - ведь его мало в реальном мире. Так что и вы старайтесь этого избегать, чтобы ваши игры казались более живыми.
- Look Up текстура. Опять градиенты, скажете вы. И будете правы, но лишь отчасти. Призвание Look Up текстуры - ускорить вычисления, путем запечения в нее предрассчитанной информации.
- Здесь, к примеру, мне нужно было подсвечивать определенные участки растения по синусоиде. Да, можно было просто взять и использовать функцию синуса. Но эта функция достаточно медленная, да и используя текстуру у меня появилась возможность добавить вариативности в виде шума. Советую обратить внимание на альфа канал главной текстуры. Здесь альфа - это не прозрачность, а мультипликатор свечения. В этом канале художник рисует участки, которые светятся белым, а те что нет - черным.
- Еще один пример использования лукап текстуры, который уже выходит за рамки градиентов. Посмотрите на текстуру слева. Здесь мы пошли дальше, и запекли внешний вид целого материала. Работает это следующим образом.
- Например, нам нужно найти цвет, с которым нужно нарисовать эту точку. Зная направление нормали меша, мы можем определить угол между этой нормалью и плоскостью камеры, а значит и координаты пикселя лукап текстуры, который нужно получить. Этот прием позволяет симулировать поверхности со сложным поведением света, честное вычисление которых заняло бы много ресурсов. Но без жертв не обойтись - так как материал запекается для определенного положения обьекта в пространстве, то и камера в вашей игре не должна вращаться. За то маткап шейдера - одни из самых быстрых, и для мобильной игры это отличный способ получить классную графику.
- Идем дальше. Искажение ЮВ.
- Этот прием я подсмотрел в классном блоге Саймона Трамплера, который работает FX артистом. В своем блоге он занимается реверс инженерингом эффектов из различных игр, а так же рассказывает про свои разработки. Там вы можете прочитать о том, как был реализован флаг Шариф Индастриз из DeusEx. К его работам Саймона мы еще вернемся.
- Так вот эффект раскачивающейся по ветру материи я использовал для создания эффекта огня для выделения редких предметов в игре The Troopers. Идея в том, чтобы брать с текстуры шума амплитуду смещения UV. Если при этом двигать по диагонали саму UV текстуры шума, появится эффект волнистого искажения.
- Делается это следующим шейдером. Обратите внимание, что в структуру с вертексными данными добавилось поле для еще одной UV координаты, сделано это потому, что главная текстура статична, а UV текстуры шума постоянно смещается. Далее, в зависимости от времени, вычисляем смещение текстуры шума, делается это в вертексном шейдере - так быстрее, ведь вертексов на экране в сотни раз меньше, чем фрагментов. Во фрагментном шейдере берутся занчения амплитуды смещения из текстуры шума и применяются к UV главной текстуры. Просто и красиво. А главное - быстро.
- Похожий прием был использован для создания эффекта воды в The Troopers. К сожалению, эта локация не вошла в релизную версию, но оценить работу шейдера можно на видео. Здесь используется то же смещение UV координат, но дабы усилить эффект обтекания камней водой, художник сделал сетку определенной формы. В дополнение к основной текстуре в экранных координатах накладывается тайлящаяся текстура облаков. К ней так же применяется искажение одновременно с движением ее по экрану. В вертексном шейдере мы по синусоиде немного шевелим вертексы, можем менять прозрачность и степень отражения. В зависимости от угла наклона относительно камеры меняется степень прозрачности воды.
- Поскольку этот шейдер практически аналогичен предыдущему по принципу действия, я покажу только вертексную его часть, в которой вычисляются УВ координаты для текстуры отражения. Берутся они из координат вершин в пространстве камеры, таким образом облака как бы “проецируются” на меш. По похожему принципу работают всякие ScreenSpaceReflections.
- Следующий эффект, который Саймон описывает в своем блоге, это двухмерный эффект огня. Это то же искажение UV, но большей силы. Здесь используются две текстуры. В первой текстуре в R и G каналах лежат маски, показывающие распределение двух цветов, в данном случае оранжевого и желтого по спрайту. B канал содержит мультипликатор для амплитуды искажения и не дает огню отрываться от нижней границы спрайта. В альфа канале содержится маска прозрачности, формирующая затухание языков пламени. Вторая текстура содержит в первых двух каналах множители амплитуды UV искажений, которые смещаются вверх относительно спрайта с разными скоростями, для того чтобы минимизировать повторяемость анимации. Если быть честным, шейдер который вы здесь видите я набросал на скорую руку, и не делал разных скоростей для R и G каналов, иначе пришлось бы лишний раз проводить семплирование текстуры, потому цикличность огня так сильна заметна. А последний, B канал, содержит текстуру с партиклами, которая вместе с остальными каналами так же смещается вверх. Просто для красоты.
- Еще один эффект, из последней записи блога Саймона, который меня очень впечатлил - эффект дыма от сигареты. По сути он не отличается от того что вы видели ранее, однако здесь искажение с помощью текстуры шума применяется не к UV развертке, а непосредственно к вершинам меша в вертексном шейдере. Подробно об этом эффекте так же можете почитать в блоге, но есть пара моментов, о которых стоит упомянуть отдельно. Во первых, семплирование текстуры в вертексном шейдере немного отличает от фрагментного. Дело в том, что на этом этапе мы не знаем из какой мипмапы брать значение цвета, и должны указать это шейдеру вручную. Делается это в функции tex2Dlod. Она принимает вектор, первые две компоненты которого - UV координаты, третья не используется, а в четвертой - уровень детализации. Во-вторых, если вы присмотритесь внимательно, то увидите, что вершины двигаются и вверх и вниз. Сделано это благодаря тому, что значения, взятые с текстуры шума, из диапазона от 0 до 1 были приведены к диапазону от -1 до 1 следуюшим методом. В том же посте в увидите еще более интересное применение тестуры - для хранения позиций вертексов в разные моменты времени, для возможности перемотки эффекта в обратном направлении. Саймон в текстуру вместо значений цвета записывает значения смещений вертексов в каждый момент времени, а затем читает текстуру как пластинку, воспроизводя эффект в любом направлении. Что еще раз доказывает, что в текстуру можно затолкать абсолютно любые данные.
- Как например - карта повреждений. Скажу сразу - это лишь мои предположения, но если бы меня попросили сделать повреждения чего-либо в 2D игре - я подумал бы именно в эту сторону. Так вот, рискую предположить, что в этой игре Earn to die, используется текстура, каждый пиксель которой хранит вектор направления удара, и его амплитуду. В изначально черную текстуру я бы записывал значения направления удара в виде небольших крадиентных пятен, и в шейдере вычитывал эти значения и смещал пиксели в определенном направлении. К слову, тот же World of Tanks в текстуре хранит толщину металла, из которой высчитывается пробиваемость машины в определенных местах. Могу быть не прав, но я такое слышал :)
- В любом случае, применение текстур ограничивается лишь вашей фантазией и умениями, надеюсь только что вы будете делиться вашими наработками с сообществом. На этом у меня все, спасибо за внимание!