Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты

Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты

Наталья ТатарчукATI Research, Inc3D Application Research Group

КРИ, Москва 2004

2KRI Conference, Moscow, Russia, February 2004

Обзор Материала

• Создание эффекта металлической автомобильной краски

• Эффект дымки и разгоряченного воздуха (heat and haze simulation)

• Изображение объёмного освещения в реальном времени (light shafts)


Металлическая Краска


Создание Металлической Краски для Автомобиля• Создание многотональной прослойки

краски

• Симуляция металлических частиц в эмали

• Блестящее покрытие

• Создание динамически размытых отражений


Слои Металлической Краски

Multi-Tone Base Color Microflake Layer

Clear gloss coat Final Color Composite


Многотональная Основа Краски

• Смешивание двух цветовкраски в зависимости от направления обозревателя

• Нормаль N из карты нормалей

• Используем третий тон для балансирования результатов смешения


Вершинный ШейдерVS_OUTPUT main( float4 Pos : POSITION, float3 Normal : NORMAL, float2 Tex : TEXCOORD0, float3 Tangent : TANGENT, float3 Binormal: 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;}


Пиксельный Шейдер

float4 main( float4 Diff: COLOR0, float2 Tex: TEXCOORD0, float3 Tangent: TEXCOORD1, float3 Binormal: TEXCOORD2, float3 Normal: TEXCOORD3, float3 View: TEXCOORD4 ) : COLOR{ float3 vNormal = tex2D( normalMap, Tex ); vNormal = 2 * vNormal - 1.0;

float3 vView = normalize( View );

float3x3 mTangentToWorld = transpose( float3x3( Tangent, Binormal, Normal )); float3 vNormalWorld = normalize( mul(mTangentToWorld,vNormal)); float fNdotV = saturate( dot( vNormalWorld, vView ) );

float fNdotVSq = fNdotV * fNdotV; float4 paintColor = fNdotV * paintColor0 + fNdotVSq * paintColorMid + fNdotVSq * fNdotVSq * paintColor2;

return float4( paintColor.rgb, 1.0 );}

Fetch normal froma normal map andscale and bias it

to move into [-1; 1]

Normalize the viewvector to ensure

higher quality results

Compute Nw • V using world-space

normal vector

Compute the result color by lerping

three input tones using computed

fresnel term.


Слой Микрочастиц


Прослойка Микрочастиц• Моделирование взаимодействия фотонов,

отраженных металлическими микрочастицами в слое эмали

• Алгоритм использует высокочастотную карту нормалей (Nn), содержащую шумы, повторяющуюся по поверхности машины


Расчет Нормалей Микрочастиц

• Сначала подсчитываем нормаль, N, из карты нормалей для машины

• Используя высокочастотнуюкарту шумов, рассчитываем пертурбированную нормаль Np

• Моделируем два слоя микрочастиц подсчитывая пертурбированные нормали Np1 и Np2 на основе нормали шумов Np

где a << b где c = b

bNaN

bNaNN

n

np

1

dNcN

dNcNN

n

np

2


Пиксельный Шейдерfloat4 main(float4 Diff: COLOR0, float2 Tex : TEXCOORD0,

float3 Tangent: TEXCOORD1, float3 Binormal: TEXCOORD2, float3 Normal: TEXCOORD3, float3 View: TEXCOORD4, float3 SparkleTex : TEXCOORD5 ) : COLOR

{ … fetch and signed scale the normal fetched from the normal map

float3 vFlakesNormal = 2 * tex2D( microflakeNMap, SparkleTex ) - 1;float3 vNp1 = microflakePerturbationA * vFlakesNormal + normalPerturbation * vNormal ; float3 vNp2 = microflakePerturbation * ( vFlakesNormal + vNormal ) ;

float3 vView = normalize( View );float3x3 mTangentToWorld = transpose( float3x3( Tangent, Binormal, Normal ));

float3 vNp1World = normalize( mul( mTangentToWorld, vNp1) );float fFresnel1 = saturate( dot( vNp1World, vView ));

float3 vNp2World = normalize( mul( mTangentToWorld, vNp2 ));float fFresnel2 = saturate( dot( vNp2World, vView ));

float fFresnel1Sq = fFresnel1 * fFresnel1;float4 paintColor = fFresnel1 * flakeColor + fFresnel1Sq * flakeColor + fFresnel1Sq * fFresnel1Sq * flakeColor + pow( fFresnel2, 16 ) * flakeColor;

return float4( paintColor, 1.0 );}

Пертурбированная нормальиз карты шумов

Подсчитываем нормалидля обоих слоев микрочастиц

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

обозревателя с нормалями Для обоих слоев микрочастиц

Компонуем многотональныйцвет прослойки микрочастиц


Блестящее покрытие


Динамически Размытые Отраженные Объекты

Размытые отражения объектов


Подсчет Динамически Размытых Отражений• Можно использовать карту глянца (gloss

map) для обозначения регионов, где отражения должны быть более размытыми

• Изпользуйте bias читая текстуру environment map, чтобы размывать отражения– Используйте texCUBEbias для текстурного

чтения

• Для более размытого спекулярного отражения, значение bias – высокое, что собственно и создает эффект размытости


float4 ps_main( ... /* same inputs as in the previous shader */ ){ // ... use normal in world space (see Multi-tone pixel shader)

// Compute reflection vector:float fFresnel = saturate(dot( vNormalWorld, vView));float3 vReflection = 2 * vNormalWorld * fFresnel - vView;

float fEnvBias = glossLevel;

// Sample environment map using this reflection vector and bias:float4 envMap = texCUBEbias( showroomMap, float4( vReflection, fEnvBias ) );

// Premultiply by alpha: envMap.rgb = envMap.rgb * envMap.a;

// Brighten the environment map sampling result:envMap.rgb *= brightnessFactor;

// Combine result of environment map reflection with the paint // color:float fEnvContribution = 1.0 - 0.5 * fFresnel;

return float4( envMap.rgb * fEnvContribution, 1.0 );}

Пиксельный Шейдер

Просчитайте вектор отражениядля доступа к environment map

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

при bias’е чтения environment map

Зараннее помножим на альфу изenvironment map, чтобы подсветитьотражения и правильно просчитать

спекулярные блики

Отраженные блики


Компонование Многотонального Слоя Краски и Прослойки Микрочастиц

Базовый цвет материала и

микрочастичный эффект подсчитывается

по вот этой формуле:color0(Np1·V) + color1(Np1·V)2 + color2(Np1·V)4 + color3(Np2·V)16

Базовый материал

Микрочастицы


Компонование Финального Эффекта{

...

// 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;

}


Результат - Красивая Машинка


Эффект дымки и разгоряченного воздуха (Heat and haze simulation)


Об Эффекте

• Естественное явление атмосфере, хорошо знакомый всем

• Лучи света преломляются, проходя через воздух и другие среды разных плотностей

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


• Горячий воздух имеет меньшую плотность, чем холодный воздух

• Индекс преломления лучей света зависит от плотности материала

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

Дрожание и Рассеивание Лучей Света


Алгоритм– Нарисуйте сцену в RGBA текстуру (offscreen-buffer)

(renderable texture)• Цвет материала в каналы RGB• Специальный параметр искажения в канал Alpha

– Нарисуйте полноэкранный прямоугольник в буфер кадра• Используйте параметр искажения чтобы изменить текстурные

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

Расчет параметра искажения:– Самой простой: просто используйте глубину сцены

– Рассеивание используя геометрический объект

– Динамическое рассеивание и дрожание света используя температурные текстуры


Дрожание и Рассеивание Света на Основе Специальных Объектов

• Отличный подход для изображения однородных газов

– Для изображения воздуха над отдушиной горячих газов либо позади струи реактивного самолета

• Рисуйте сцену используя специальные «температурные» объекты: единственное предназначение этих объектов в том, чтобы создавать параметр искажения в канал альфа

– Они не прорисовываются в главном рендеринге сцены в каналы RGB

• Просчитайте параметр искажения для этих объектов


Температурные Объекты


Параметры Искажения

• Глубина сцены – неплохой фактор искажения, но ваши художники наверняка захотят что-то более легко контролируемое

• Решение: – Изменяйте маштаб параметра искажения

(scale) расстоянием от источника тепла, чтобы создать эффект рассеивания и дрожания воздуха из-за дисперсии температуры


Избегайте Слишком Резкого Изображения

• Старайтесь не рисовать слишком ровные края температурных объектов в канал альфа

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

• Для избежания этих проблем, модулируйте параметр искажения при помощи N • V (Fresnel)


Температурные Текстуры

• Расширение предыдущего подхода• Отлично изображают газы с

хаотическим распределением плотности


Совместное Использование Температурных Текстур и Объектов• Скроллайте температурные текстуры по

поверхности температурных объектов– Направление движения текстур важно: облегчает

восприятие рассеивания газов при изменяющейся температуры

• Скролл вверх (world-space) для изображения эффекта горячего воздуха, поднимающегося над разогретым шоссе

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

– Направления скроллинга так же может зависить от температурных объектов

• Начальный параметр искажения должен быть модулирован значением глубины сцены температурного объекта


Full-Screen QuadDrawn to Back Buffer

Renderable Texture

Эффект Рассеиваемых Газов

• Рисуйте полноэкранный прямоугольник, используя раннее созданный off-screen buffer (renderable texture) и пертурбационные температурные карты

Perturbation Map


Пертурбационные Температурные Карты

• 2х-компонентный вектор сохраняется в каналах RB• Скроллайте эту карту в двух различных направлениях по

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

переведите в диапазон [-1.0, 1.0]• Модулируйте вектор параметром искажения• Таким образом получаем вектор пертурбации

Average


Как Использовать Вектор Пертурбации Для Эффекта Рассеивания• Простое измение значения пикселей

выглядит сносно– Но! Таким образом мы не создаем эффект

размытости воздуха из-за преломления света с точки зрения обозревателя

• Размывайте (blur) измененный пиксель, используя параметр искажения:

– Для этого можно использовать расширяемый диск Пуассона для размытия

– Так же можно использовать отделимые фильтры Гаусса


Вектор Пертурбации (Perturbation Vector)

• Этот вектор используется, чтобы изменить начальную текстурную координаты

• Длиной этого вектора является значение параметра искажения

• Эта новая измененная текстурная координата используется для зависимой (dependant) прочитки буфера off-screen с прорисовкой главной сцены

Original <u,v> + Perturbation vector <x,y>


Шейдер для Подсчета Искажения

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;}


Шейдер Расширяемого Диска Пуассона

float3 SiGrowablePoissonDisc13FilterRGB (sampler tSource, float2 texCoord, float2 pixelSize, float discRadius){ float3 cOut; float2 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++) { float2 coord = texCoord.xy + (pixelSize * poisson[tap] * discRadius);

// Sample pixel cOut += tex2D (tSource, coord); } return (cOut / 13.0f);}

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


Создание Объёмного Освещения в Реальном Времени• Мы видим только освещение, достигающее

наших глаз, так каким же образом мы замечаем объёмное освещение?

• Лучи света рассеиваются от подвешенных в воздухе частиц (либо любой другой среды, через которую проходят лучи света)

• В этом случае тени, особенно динамические, выглядять очень драматичный эффект


Рассеянные Лучи Сквозь Пыльную Комнату

From From CSICSI


Примеры из Игр

• Практически каждая игра так или иначе создает объёмное освещение

– Zelda: Windwaker

– Splinter Cell

– Tomb Raider

– I.C.O


From Zelda: The Wind Waker


Что же Именно Они Делают в Зельде?

• Скорее всего используют самый простой алгоритм• Аддитивный блендинг полигонов,

вытянутых по направлению от источника света• Они рисуются последними и просто с

z-буферингом по всей сцене• Понижают яркость с растоянием


Затемнение По Растоянию

• В-общем-то отличная идея для любых объектов

• Мы можем использовать это для источников освещения даже когда мы не будем просчитывать рассеивание света из-за частиц в среде

• Это может улучшить производительность

distance


Проблема: Z-Buffering Против Сцены

• Сцена рисуется до рисования объемного освещения

• В этом случае, плоскости объемного освещения оставляют заметные линии в местах пересечений с геометрическими объектами в сцене


Отличный Визуальный Эффект

• Из последнего Tomb Raider:


Splinter Cell


Как Были Нарисованы Эти Эффекты?• Большинство игр вытягивают контур

окна либо формы источника света– В зависимости от угла обзора, это может

быть очень сильно заметно

– Так же достаточно сложно нарисовать по-настоящему объемное освещение либо изменять цвет

• Использование системы частиц так же может неплохо выглядеть• Но сложно сделать хорошие тени


Возьмем Пример из Объемной Визуализации

• Того же рода, как и просто объемная визуализацилия для медицинских программных приложений

From [Dobashi00a]


Прорисовка Объемного Освещения

Sampling Planes

Viewpoint

Screen

• Разработано Добаши и Нишита

• Занимает алгоритм из визуализации медицинских данных

• Окрасьте плоскости в пространстве источника света

• Скомпонуйте в буфер кадра, чтобы просчитать интеграл по векторам обзора (приблизительно)

Light Space


Прорисовка Объемного Освещения


Результати Проекта Добаши и Нишита


Дополнительные Результаты


• «Умное» модулирование в вершинном шейдере– Статичный ВБ, который используется для рисования

переменного количества плоскостей– Сохраняйте параметр позиции и интерполируйте (трехлинейно),

чтобы заполнить границы (в простанстве обзора) светового столпа (light frustum):

// Trilerp position within view-space-AABB of light's frustumfloat4 pos = vMinBounds * vPosition + vMaxBounds * (1 -

vPosition);pos.w = 1.0f;

// Output clip-space positionOut.Pos = mul (matProj, pos);

• Отсеките при помощи user clip planes столп источника света• Нужен всего один прямоугольник для плоскости сэмплинга

– Добаши и Нишита тесселируют их плоскости сэмплинга для подсчета низко-частотной части рассеивания света

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

Плоскости Сэмплинга


Проектируемые Текстуры

• Огромное количество проектируемых текстур

• На данный момент мы делаем 4 прочитки проективных текстур из 3х 2D текстур, которые спроектированы на плоскости сэмплинга и окружающую среду1. Текстура формы источника света(Cookie texture)2. Shadow map

• Можно использовать stencil shadows для сцены если хочется

3. Карта шумов (прочитывается дважды)• Отсечение к столпу света решает

проблему back-projection на плоскостях сэмплинга. Необходимо следить за этим для сцены


Частицы в Неоднородной Среде

• В плоскости– Скроллайте пару скалярных карты шумов

2D в проективном пространстве источника света

– Компонуйте

– Модулируйте с остальными частями уравнения освещения

– Выглядит отлично! – особенно если остальная сцена достаточно статична

– Так же может отлично помочь с алиасингом


Карта Теней (Shadow Mapping)

• На данный момент используется 2й depth shadow map (front-face culling)

• Необходимо проектирование на плоскости сэмплинга, но не обязательно на саму сцену, если там все равно просчитываются тени (допустим, stencil)

• Может быть статичной (не нужно просчитывать каждый кадр)

Shadow map

Shadows in Fog and scene


Как Решить Проблемы Алиасинга?

• Наиболее видно возле самого источника света

• Размажьте высоко-частотные детали формы источника света (cookie details) около самого источника

– А может размазывать слишком сильно и сделать маленькие мип-мапы по-ярче? Вроде бы помогло

– Так же можно изменять параметр затухания таким образом, чтобы было насыщение около источника света?

Increa

sing S

atura

tion


Что Работает Лучше Всего?

• Расположение / Геометрия– Избегайте слишком глубокий столп

света (в пространстве обзора)– Уменьшайте объем столпа света

• Используйте низко-частотную форму источника света (cookie)

• Варьируйте цвет cookie – Это помогает уменьшить насыщение, так

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

• Этот эффект отлично выглядит, даже без shadow depth map, для источников света расположенных на краю сцены.

Отвратительно выглядит:

Хорошо:

Отлично:


Опримизация: Уменьшайте fill!

• Уменьшайте количество плоскостей сэмплинга– Модулируйте на основе глубины столпа света

• Старайтесь уменьшить инструкции в пиксельном шейдере

– Добавление скролловых шумов - дорого

– Shadow mapping - дорого

– that part of frustum with simpler shader?• Уменьшайте количество нарисованных пикселей

– Активно используйте отсечение, так же разделяйте столпы света

– ( Тест)


Делите Столпы Света


Отсекайте Столп Света На Плоскости Земли

Источник света

Плоскость земли

Far plane clipping

Groundplane clipping


Плюсы и Минусы Этого Алгоритма

• Плюсы– Эффект мягкого освещения– Легко создать ощущение неоднородной среды– Легко создать эффект витража

• Минусы– Fillrate-heavy– Стоимость прохода рисования shadow map (если

динамичны)– Возможны заметные артифакты из-за shadow map– High fillrate required– Можно недостаточно дискретизировать столп света– Проблемы точности из-за насыщения битов в 8ми

канальных текстур рисования (render target)– Нужно ли напоминать что этот алгоритм использует а

lot of fill?

Documents

Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты