Transcript Об Эффекте
Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты
Наталья Татарчук ATI Research, Inc 3D Application Research Group КРИ, Москва 2004
Обзор Материала
• Создание эффекта металлической автомобильной краски • Эффект дымки и разгоряченного воздуха (heat and haze simulation) •
Изображение объёмного освещения в реальном времени (light shafts)
KRI Conference, Moscow, Russia, February 2004
2
Металлическая Краска
KRI Conference, Moscow, Russia, February 2004
3
Создание Металлической Краски для Автомобиля
• Создание многотональной прослойки краски • Симуляция металлических частиц в эмали • Блестящее покрытие • Создание динамически размытых отражений KRI Conference, Moscow, Russia, February 2004
4
Слои Металлической Краски
Multi-Tone Base Color Microflake Layer Clear gloss coat Final Color Composite
KRI Conference, Moscow, Russia, February 2004
5
Многотональная Основа Краски
• Смешивание двух цветов краски в зависимости от направления обозревателя • Нормаль N из карты нормалей • Используем третий тон для балансирования результатов смешения KRI Conference, Moscow, Russia, February 2004
6
Вершинный Шейдер
VS_OUTPUT main ( float4 float3 float2 float3 float3 Pos : Normal : Tex : Tangent : Binormal: POSITION , NORMAL , TEXCOORD0 , TANGENT , BINORMAL ) { VS_OUTPUT Out = (VS_OUTPUT) 0; // Propagate transformed position out: Out.Pos = mul ( view_proj_matrix, Pos ); // Compute view vector: Out.View = normalize ( mul (inv_view_matrix, float4 ( 0, 0, 0, 1)) - Pos ); // Propagate texture coordinates: Out.Tex = Tex; // Propagate tangent, binormal, and normal vectors to pixel shader: Out.Normal = Normal; Out.Tangent = Tangent; Out.Binormal = Binormal; } return Out;
KRI Conference, Moscow, Russia, February 2004
8
Пиксельный Шейдер
float4 main( float4 float3 float3 Diff: COLOR0 , float2 Tangent: TEXCOORD1 , float3 Normal: TEXCOORD3 , float3 : { COLOR float3 vNormal = tex2D ( normalMap, Tex ); vNormal = 2 * vNormal - 1.0; float3 vView = normalize ( View ); Tex: TEXCOORD0 , Binormal: TEXCOORD2 , View: TEXCOORD4 )
Fetch normal from Normalize the view a normal map and vector to ensure scale and bias it higher quality results to move into [-1; 1]
float3x3 float3 mTangentToWorld = vNormalWorld = transpose ( float3x3 ( Tangent, Binormal, Normal )); normalize ( mul (mTangentToWorld,vNormal )); float fNdotV = saturate ( dot ( vNormalWorld, vView ) ); float float4 fNdotVSq = fNdotV * fNdotV ; paintColor = fNdotV * paintColor0 + fNdotVSq * paintColorMid + fNdotVSq * fNdotVSq * paintColor2 ; } return float4 ( paintColor.rgb, 1.0 );
KRI Conference, Moscow, Russia, February 2004
9
Слой Микрочастиц
KRI Conference, Moscow, Russia, February 2004
10
Прослойка Микрочастиц
• • Моделирование взаимодействия фотонов, отраженных металлическими микрочастицами в слое эмали Алгоритм использует высокочастотную карту нормалей (N n ) , содержащую шумы, повторяющуюся по поверхности машины KRI Conference, Moscow, Russia, February 2004
11
Расчет Нормалей Микрочастиц
• • Сначала подсчитываем нормаль, N, из карты нормалей для машины Используя высокочастотную карту шумов, рассчитываем пертурбированную нормаль
N p
• Моделируем два слоя микрочастиц подсчитывая пертурбированные нормали
N p1
N p2 на основе нормали шумов
N p
и
N p
1
aN n aN n
bN
bN
где a << b
N p
2
cN cN n
где c = b
n
dN
dN
KRI Conference, Moscow, Russia, February 2004
12
Пиксельный Шейдер
float4 main ( float4 float3 float3 float3 Diff: Tangent: Normal: COLOR0 , TEXCOORD1 TEXCOORD3 , , float2 float3 float3 SparkleTex : TEXCOORD5 Tex : TEXCOORD0 , Binormal: TEXCOORD2 , View: TEXCOORD4 , ) : COLOR { … fetch and signed scale the normal fetched from the normal map float3 float3 float3 vFlakesNormal = 2 * tex2D
Подчитываем скалярные продукты нормализированного вектора обозревателя с нормалями
vNp2 = microflakePerturbation * ( vFlakesNormal + vNormal ) ;
Для обоих слоев микрочастиц
float3 float3x3 float3 float vView = normalize ( View ); mTangentToWorld = vNp1World = fFresnel1 = transpose normalize saturate ( ( mul dot
Пертурбированная нормаль
(
Компонуем многотональный Подсчитываем нормали для обоих слоев микрочастиц
float3 float vNp2World = normalize ( mul ( mTangentToWorld, vNp2 )); fFresnel2 = saturate ( dot ( vNp2World, vView )); float float4 fFresnel1Sq = fFresnel1 * fFresnel1; paintColor = fFresnel1 * flakeColor + fFresnel1Sq * flakeColor + fFresnel1Sq * fFresnel1Sq * flakeColor + pow ( fFresnel2, 16 ) * flakeColor; } return float4 ( paintColor, 1.0 );
KRI Conference, Moscow, Russia, February 2004
14
Блестящее покрытие
KRI Conference, Moscow, Russia, February 2004
15
Динамически Размытые Отраженные Объекты
Размытые отражения объектов KRI Conference, Moscow, Russia, February 2004
16
Подсчет Динамически Размытых Отражений
• • • Можно использовать карту глянца (gloss map) для обозначения регионов, где отражения должны быть более размытыми Изпользуйте bias читая текстуру environment map , чтобы размывать отражения – Используйте
texCUBEbias
для текстурного чтения Для более размытого спекулярного отражения, значение bias – высокое, что собственно и создает эффект размытости KRI Conference, Moscow, Russia, February 2004
17
Пиксельный Шейдер
float4 ps_main(
Зараннее помножим на альфу из
{ float fFresnel =
environment map , чтобы подсветить отражения и правильно просчитать
// Compute reflection vector: saturate (
спекулярные блики
float3 vReflection = 2 * vNormalWorld * fFresnel - vView; ) float fEnvBias = glossLevel; float4 envMap = texCUBEbias // Premultiply by alpha:
Отраженные блики
( showroomMap, float4 ( vReflection,
Просчитайте вектор отражения для доступа к environment map
envMap.rgb = envMap.rgb * envMap.a; // Brighten the environment map sampling result: // color: float
Этот параметр используется для динамического размывания отражений при bias’е чтения environment map
fEnvContribution = 1.0 - 0.5 * fFresnel; } return float4 ( envMap.rgb * fEnvContribution, 1.0 );
KRI Conference, Moscow, Russia, February 2004
18
Компонование Многотонального Слоя Краски и Прослойки Микрочастиц
Базовый цвет материала и микрочастичный эффект подсчитывается по вот этой формуле:
color 0
(N
p1
·V) + color
1
(N
p1
·V) 2 + color
2
(N
p1
·V) 4 + color
3
(N
p2
·V) 16 Базовый материал Микрочастицы
KRI Conference, Moscow, Russia, February 2004
19
{
Компонование Финального Эффекта
... // Compute final paint color: combines all layers of paint as well // as two layers of microflakes: float fFresnel1Sq = fFresnel1 * fFresnel1; float4 paintColor = fFresnel1 * paintColor0 + fFresnel1Sq * paintColorMid + fFresnel1Sq * fFresnel1Sq * paintColor2 + pow ( fFresnel2, 16 ) * flakeLayerColor; // Combine result of environment map reflection with the paint // color: float fEnvContribution = 1.0 - 0.5 * fNdotV; // Assemble the final look: float4 finalColor; finalColor.a = 1.0; finalColor.rgb = envMap * fEnvContribution + paintColor; } return finalColor;
KRI Conference, Moscow, Russia, February 2004
20
Результат - Красивая Машинка
KRI Conference, Moscow, Russia, February 2004
21
Эффект дымки и разгоряченного воздуха (Heat and haze simulation)
KRI Conference, Moscow, Russia, February 2004
22
Об Эффекте
• Естественное явление атмосфере, хорошо знакомый всем • Лучи света преломляются, проходя через воздух и другие среды разных плотностей • Не обязательно использовать формулу из учебника по физике для создания правильно выглядещего эффекта для игр KRI Conference, Moscow, Russia, February 2004
23
Дрожание и Рассеивание Лучей Света
• • • Горячий воздух имеет меньшую плотность, чем холодный воздух Индекс преломления лучей света зависит от плотности материала По мере поднятия, горячий воздух перемешивается с холодным, таким образом преломляя лучи света KRI Conference, Moscow, Russia, February 2004
24
Алгоритм
– Нарисуйте сцену в RGBA текстуру (offscreen-buffer) (renderable texture) • • Цвет материала в каналы RGB Специальный параметр искажения в канал Alpha – Нарисуйте полноэкранный прямоугольник в буфер кадра • Используйте параметр искажения чтобы изменить текстурные координаты для прочитки текстуры сцены, чтобы создать эффект преломления света в горячем воздухе Расчет параметра искажения: – Самой простой: просто используйте глубину сцены – Рассеивание используя геометрический объект – Динамическое рассеивание и дрожание света используя температурные текстуры KRI Conference, Moscow, Russia, February 2004
25
Дрожание и Рассеивание Света на Основе Специальных Объектов
• • • Отличный подход для изображения однородных газов – Для изображения воздуха над отдушиной горячих газов либо позади струи реактивного самолета Рисуйте сцену используя специальные «температурные» объекты: единственное предназначение этих объектов в том, чтобы создавать параметр искажения в канал альфа – Они не прорисовываются в главном рендеринге сцены в каналы RGB Просчитайте параметр искажения для этих объектов KRI Conference, Moscow, Russia, February 2004
26
Температурные Объекты
KRI Conference, Moscow, Russia, February 2004
27
Параметры Искажения
• Глубина сцены – неплохой фактор искажения, но ваши художники наверняка захотят что-то более легко контролируемое • Решение: – Изменяйте маштаб параметра искажения (scale) расстоянием от источника тепла, чтобы создать эффект рассеивания и дрожания воздуха из-за дисперсии температуры KRI Conference, Moscow, Russia, February 2004
28
Избегайте Слишком Резкого Изображения
• • Старайтесь не рисовать слишком ровные края температурных объектов в канал альфа – Не забывайте, что газы расширяются, чтобы заполнять всю окружающюю среду Для избежания этих проблем, модулируйте параметр искажения при помощи N • V (Fresnel) KRI Conference, Moscow, Russia, February 2004
29
Температурные Текстуры
• Расширение предыдущего подхода • Отлично изображают газы с хаотическим распреде лением пл о тн ости KRI Conference, Moscow, Russia, February 2004
30
Совместное Использование Температурных Текстур и Объектов
• Скроллайте температурные текстуры по поверхности температурных об ъектов – Направление движения текстур важно: облегчает восприятие рассеивания газов при изменяющейся температуры • • Скролл вверх (world-space) для изображения эффекта горячего воздуха, поднимающегося над разогретым шоссе Для изображения струи горячего воздуха из двигателя реактивного самолета, текстуры должны скроллаться по направлению движения воздуха из мотора • – Направления скроллинга так же может зависить от температурных объектов Начальный параметр искажения должен быть модулирован значением глубины сцены температурного об ъекта KRI Conference, Moscow, Russia, February 2004
31
Эффект Рассеиваемых Газов
Renderable Texture Perturbation Map Full-Screen Quad Drawn to Back Buffer • Рисуйте полноэкранный прямоугольник, используя раннее созданный off-screen buffer (renderable texture) и пертурбационные температурные карты KRI Conference, Moscow, Russia, February 2004
32
Пертурбационные Температурные Карты
Average • • • • • 2х-компонентный вектор сохраняется в каналах RB Скроллайте эту карту в двух различных направлениях по полноэкранному прямоугольнику и считывайте дважды Расчитайте среднее значение обоих самплов, за тем переведите в диапазон [-1.0, 1.0] Модулируйте вектор параметром искажения Таким образом получаем
вектор пертурбации
KRI Conference, Moscow, Russia, February 2004
33
Как Использовать Вектор Пертурбации Для Эффекта Рассеивания
• Простое измение значения пикселей выглядит сносно – Но! Таким образом мы не создаем эффект размытости воздуха из-за преломления света с точки зрения обозревателя • Размывайте (blur) измененный пиксель, используя параметр искажения: – Для этого можно использовать расширяемый диск Пуассона для размытия – Так же можно использовать отделимые фильтры Гаусса KRI Conference, Moscow, Russia, February 2004
34
Вектор Пертурбации (Perturbation Vector)
Original
35
Шейдер для Подсчета Искажения
float4 { main ( PsInput i) : COLOR // fetch from perturbation map with scrolling texture coords float3 vPerturb0 = tex2D (tPerturbationMap, i.texCoord1); float3 vPerturb1 = tex2D (tPerturbationMap, i.texCoord2); // scale and bias: (color - 0.5f)*2.0f
vPerturb0 = SiConvertColorToVector(vPerturb0); vPerturb1 = SiConvertColorToVector(vPerturb1); // average perturbation vectors float2 offset = (vPerturb0.xy + vPerturb1.xy) * 0.5f; // get distortion weight from renderable texture (stored in alpha) float4 cDistWeight = tex2D (tRBFullRes, i.texCoord0); // square distortion weight cDistWeight.a *= cDistWeight.a; // compute distorted texture coords offset.xy = ((offset.xy * cDistWeight.a) * fPerturbScale) + i.texCoord0; } // fetch the distorted color float4 o; o.rgb = SiPoissonDisc13RGB(tRBFullRes, offset, 1.0f/screenRes.xy, cDistWeight.a); o.a = 1.0f; return o;
KRI Conference, Moscow, Russia, February 2004
36
Шейдер Расширяемого Диска Пуассона
float3 { SiGrowablePoissonDisc13FilterRGB ( sampler { float3 float2 tSource, float2 cOut; texCoord, float2 pixelSize, float poisson[12] = { float2 (-0.326212f, -0.40581f), float2 (-0.840144f, -0.07358f), float2 (-0.695914f, 0.457137f), float2 (-0.203345f, 0.620716f), float2 (0.96234f, -0.194983f), float2 (0.473434f, -0.480026f), float2 (0.519456f, 0.767022f), float2 (0.185461f, -0.893124f), float2 (0.507431f, 0.064425f), float2 (0.89642f, 0.412458f), float2 (-0.32194f, -0.932615f), float2 (-0.791559f, -0.59771f)}; // Center tap cOut = tex2D (tSource, texCoord); for ( int tap = 0; tap < 12; tap++) discRadius)
Радиус диска и количество сэмплов контролирует качество размывки. Для поддержки большего размера ядра фильтра с лучшим качеством, этот шейдер должен изменять количество сэмплов в зависимости от размера диска.
float2 coord = texCoord.xy + (pixelSize * poisson[tap] * discRadius); } // Sample pixel cOut += tex2D (tSource, coord); } return (cOut / 13.0f);
KRI Conference, Moscow, Russia, February 2004
37
Создание Объёмного Освещения в Реальном Времени
• Мы видим только освещение, достигающее наших глаз, так каким же образом мы замечаем объёмное освещение?
• Лучи света рассеиваются от подвешенных в воздухе частиц (либо любой другой среды, через которую проходят лучи света) • В этом случае тени, особенно динамические, выглядять очень драматичный эффект KRI Conference, Moscow, Russia, February 2004
38
Рассеянные Лучи Сквозь Пыльную Комнату
From CSI
KRI Conference, Moscow, Russia, February 2004
39
Примеры из Игр
• Практически каждая игра так или иначе создает объёмное освещение –
Zelda: Windwaker
–
Splinter Cell
–
Tomb Raider
–
I.C.O
KRI Conference, Moscow, Russia, February 2004
40
From Zelda: The Wind Waker
KRI Conference, Moscow, Russia, February 2004
41
Что же Именно Они Делают в Зельде?
• Скорее всего используют самый простой алгоритм • Аддитивный блендинг полигонов, вытянутых по направлению от источника света • Они рисуются последними и просто с z буферингом по всей сцене • Понижают яркость с растоянием KRI Conference, Moscow, Russia, February 2004
42
Затемнение По Растоянию
• • • В-общем-то отличная идея для любых объектов Мы можем использовать это для источников освещения даже когда мы не будем просчитывать рассеивание света из за частиц в среде Это может улучшить производительность KRI Conference, Moscow, Russia, February 2004
43
Проблема: Z-Buffering Против Сцены
• • Сцена рисуется до рисования объемного освещения В этом случае, плоскости объемного освещения оставляют заметные линии в местах пересечений с геометрическими объектами в сцене KRI Conference, Moscow, Russia, February 2004
44
Отличный Визуальный Эффект
• Из последнего Tomb Raider: KRI Conference, Moscow, Russia, February 2004
45
Splinter Cell
KRI Conference, Moscow, Russia, February 2004
46
Как Были Нарисованы Эти Эффекты?
• Большинство игр вытягивают контур окна либо формы источника света – В зависимости от угла обзора, это может быть очень сильно заметно – Так же достаточно сложно нарисовать по настоящему объемное освещение либо изменять цвет • Использование системы частиц так же может неплохо выглядеть • Но сложно сделать хорошие тени KRI Conference, Moscow, Russia, February 2004
47
Возьмем Пример из Объемной Визуализации
• Того же рода, как и просто объемная визуализацилия для медицинских программных приложений From [Dobashi00a] KRI Conference, Moscow, Russia, February 2004
48
Прорисовка Объемного Освещения
• Разработано Добаши и Нишита • Занимает алгоритм из визуализации медицинских данных • Окрасьте плоскости в пространстве источника света • Скомпонуйте в буфер кадра, чтобы просчитать интеграл по векторам обзора (приблизительно)
Sampling Planes Screen Light Space Viewpoint
KRI Conference, Moscow, Russia, February 2004
49
Прорисовка Объемного Освещения
KRI Conference, Moscow, Russia, February 2004
50
Результати Проекта Добаши и Нишита
KRI Conference, Moscow, Russia, February 2004
51
Дополнительные Результаты
KRI Conference, Moscow, Russia, February 2004
52
Плоскости Сэмплинга
• «Умное» модулирование в вершинном шейдере – Статичный ВБ, который используется для рисования переменного количества плоскостей – Сохраняйте параметр позиции и интерполируйте (трехлинейно), чтобы заполнить границы (в простанстве обзора) светового столпа (light frustum):
// Trilerp position within view-space-AABB of light's frustum float4 pos = vMinBounds * vPosition + vMaxBounds * (1 vPosition); pos.w = 1.0f; // Output clip-space position Out.Pos = mul (matProj, pos);
• • Отсеките при помощи user clip planes столп источника света Нужен всего один прямоугольник для плоскости сэмплинга – Добаши и Нишита тесселируют их плоскости сэмплинга для подсчета низко-частотной части рассеивания света – Держите это в уме, когда разрабатываете (т. e. Позицию интерполяции и расчитывайте по-пиксельно
dist 2
) KRI Conference, Moscow, Russia, February 2004
53
Проектируемые Текстуры
• • • Огромное количество проектируемых текстур На данный момент мы делаем 4 прочитки проективных текстур из 3х 2D текстур, которые спроектированы на плоскости сэмплинга и окружающую среду 1.
Текстура формы источника света(Cookie texture) 2. Shadow map • Можно использовать stencil shadows для сцены если хочется 3.
Карта шумов (прочитывается дважды) Отсечение к столпу света решает проблему back-projection на плоскостях сэмплинга. Необходимо следить за этим для сцены KRI Conference, Moscow, Russia, February 2004
54
Частицы в Неоднородной Среде
• В плоскости – Скроллайте пару скалярных карты шумов 2D в проективном пространстве источника света – Компонуйте – Модулируйте с остальными частями уравнения освещения – Выглядит отлично! – особенно если остальная сцена достаточно статична – Так же может отлично помочь с алиасингом KRI Conference, Moscow, Russia, February 2004
55
• • •
Карта Теней (Shadow Mapping)
На данный момент используется 2й depth shadow map (front-face culling) Необходимо проектирование на плоскости сэмплинга, но не обязательно на саму сцену, если там все равно просчитываются тени (допустим, stencil) Может быть статичной (не нужно просчитывать каждый кадр)
Shadow map
Shadows in Fog and scene KRI Conference, Moscow, Russia, February 2004
56
Как Решить Проблемы Алиасинга?
• • Наиболее видно возле самого источника света Размажьте высоко-частотные детали формы источника света (cookie details ) около самого источника – А может размазывать слишком сильно и сделать маленькие мип мапы по-ярче? Вроде бы помогло – Так же можно изменять параметр затухания таким образом, чтобы было насыщение около источника света?
KRI Conference, Moscow, Russia, February 2004
58
Что Работает Лучше Всего?
• • • • Расположение / Геометрия – Избегайте слишком глубокий столп света (в пространстве обзора) – Уменьшайте объем столпа света Используйте низко-частотную форму источника света (cookie) Варьируйте цвет cookie – Это помогает уменьшить насыщение, так как больше вероятности, что в пикселе будет использованы различные каналы по мере рисования плоскостей Этот эффект отлично выглядит, даже без shadow depth map, для источников света расположенных на краю сцены.
Отвратительно выглядит: Хорошо: Отлично: KRI Conference, Moscow, Russia, February 2004
59
Опримизация: Уменьшайте fill!
• • • Уменьшайте количество плоскостей сэмплинга – Модулируйте на основе глубины столпа света Старайтесь уменьшить инструкции в пиксельном шейдере – Добавление скролловых шумов - дорого – Shadow mapping - дорого – that part of frustum with simpler shader?
Уменьшайте количество нарисованных пикселей – Активно используйте отсечение, так же разделяйте столпы света – ( Тест) KRI Conference, Moscow, Russia, February 2004
60
Делите Столпы Света
KRI Conference, Moscow, Russia, February 2004
61
Отсекайте Столп Света На Плоскости Земли
Far plane clipping Источник света Плоскость земли Ground plane clipping KRI Conference, Moscow, Russia, February 2004
62
Плюсы и Минусы Этого Алгоритма
• • Плюсы – Эффект мягкого освещения – Легко создать ощущение неоднородной среды – Легко создать эффект витража Минусы – Fillrate-heavy – Стоимость прохода рисования shadow map (если динамичны) – Возможны заметные артифакты из-за shadow map – High fillrate required – Можно недостаточно дискретизировать столп света – Проблемы точности из-за насыщения битов в 8ми канальных текстур рисования (render target) – Нужно ли напоминать что этот алгоритм использует а lot of fill?
KRI Conference, Moscow, Russia, February 2004
63