Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты Наталья Татарчук ATI Research, Inc 3D Application Research Group КРИ, Москва 2004

2 KRI Conference, Moscow, Russia, February 2004 Обзор Материала Создание эффекта металлической автомобильной краски Эффект дымки и разгоряченного воздуха (heat and haze simulation) Изображение объёмного освещения в реальном времени (light shafts)

3 KRI Conference, Moscow, Russia, February 2004 Металлическая Краска

4 KRI Conference, Moscow, Russia, February 2004 Создание Металлической Краски для Автомобиля Создание многотональной прослойки краски Симуляция металлических частиц в эмали Блестящее покрытие Создание динамически размытых отражений

5 KRI Conference, Moscow, Russia, February 2004 Слои Металлической Краски Multi-Tone Base Color Microflake Layer Clear gloss coatFinal Color Composite

6 KRI Conference, Moscow, Russia, February 2004 Многотональная Основа Краски Смешивание двух цветов краски в зависимости от направления обозревателя Нормаль N из карты нормалей Используем третий тон для балансирования результатов смешения

7 KRI Conference, Moscow, Russia, February 2004 Декомпрессия Карт Нормалей Карта нормалей в двух канальном формате Z выводится по +sqrt (1 – x 2 – y 2 ) Результат – более высокая точность, чем при использовании формате

8 KRI Conference, Moscow, Russia, February 2004 Вершинный Шейдер 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; }

9 KRI Conference, Moscow, Russia, February 2004 Пиксельный Шейдер 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 from a normal map and scale and bias it to move into [-1; 1] Normalize the view vector 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.

10 KRI Conference, Moscow, Russia, February 2004 Слой Микрочастиц

11 KRI Conference, Moscow, Russia, February 2004 Прослойка Микрочастиц Моделирование взаимодействия фотонов, отраженных металлическими микрочастицами в слое эмали Алгоритм использует высокочастотную карту нормалей (N n ), содержащую шумы, повторяющуюся по поверхности машины

12 KRI Conference, Moscow, Russia, February 2004 Расчет Нормалей Микрочастиц Сначала подсчитываем нормаль, N, из карты нормалей для машины Используя высокочастотную карту шумов, рассчитываем пертурбированную нормаль N p Моделируем два слоя микрочастиц подсчитывая пертурбированные нормали N p1 и N p2 на основе нормали шумов N p где a

13 KRI Conference, Moscow, Russia, February 2004 Вершинный Шейдер 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; // Compute microflake tiling factor: Out.SparkleTex = float4( Tex * fFlakeTilingFactor, 0, 1 ); return Out; } Compute texture coordinates for accessing noise map using input texture coordinates and a tiling factor

14 KRI Conference, Moscow, Russia, February 2004 Пиксельный Шейдер 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 ); } Пертурбированная нормаль из карты шумов Подсчитываем нормали для обоих слоев микрочастиц Подчитываем скалярные продукты нормализированного вектора обозревателя с нормалями Для обоих слоев микрочастиц Компонуем многотональный цвет прослойки микрочастиц

15 KRI Conference, Moscow, Russia, February 2004 Блестящее покрытие

16 KRI Conference, Moscow, Russia, February 2004 Динамически Размытые Отраженные Объекты Размытые отражения объектов

17 KRI Conference, Moscow, Russia, February 2004 Подсчет Динамически Размытых Отражений Можно использовать карту глянца (gloss map) для обозначения регионов, где отражения должны быть более размытыми Изпользуйте bias читая текстуру environment map, чтобы размывать отражения –Используйте texCUBEbias для текстурного чтения Для более размытого спекулярного отражения, значение bias – высокое, что собственно и создает эффект размытости

18 KRI Conference, Moscow, Russia, February 2004 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 = * fFresnel; return float4( envMap.rgb * fEnvContribution, 1.0 ); } Пиксельный Шейдер Просчитайте вектор отражения для доступа к environment map Этот параметр используется для динамического размывания отражений при biasе чтения environment map Зараннее помножим на альфу из environment map, чтобы подсветить отражения и правильно просчитать спекулярные блики Отраженные блики

19 KRI Conference, Moscow, Russia, February 2004 Компонование Многотонального Слоя Краски и Прослойки Микрочастиц Базовый цвет материала и микрочастичный эффект подсчитывается по вот этой формуле: color 0 (N p1 ·V) + color 1 (N p1 ·V) 2 + color 2 (N p1 ·V) 4 + color 3 (N p2 ·V) 16 Базовый материал Микрочастицы

20 KRI Conference, Moscow, Russia, February 2004 Компонование Финального Эффекта {... // 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 = * fNdotV; // Assemble the final look: float4 finalColor; finalColor.a = 1.0; finalColor.rgb = envMap * fEnvContribution + paintColor; return finalColor; }

21 KRI Conference, Moscow, Russia, February 2004 Результат - Красивая Машинка

22 KRI Conference, Moscow, Russia, February 2004 Эффект дымки и разгоряченного воздуха (Heat and haze simulation)

23 KRI Conference, Moscow, Russia, February 2004 Об Эффекте Естественное явление атмосфере, хорошо знакомый всем Лучи света преломляются, проходя через воздух и другие среды разных плотностей Не обязательно использовать формулу из учебника по физике для создания правильно выглядещего эффекта для игр

24 KRI Conference, Moscow, Russia, February 2004 Горячий воздух имеет меньшую плотность, чем холодный воздух Индекс преломления лучей света зависит от плотности материала По мере поднятия, горячий воздух перемешивается с холодным, таким образом преломляя лучи света Дрожание и Рассеивание Лучей Света

25 KRI Conference, Moscow, Russia, February 2004 Алгоритм –Нарисуйте сцену в RGBA текстуру (offscreen-buffer) (renderable texture) Цвет материала в каналы RGB Специальный параметр искажения в канал Alpha –Нарисуйте полноэкранный прямоугольник в буфер кадра Используйте параметр искажения чтобы изменить текстурные координаты для прочитки текстуры сцены, чтобы создать эффект преломления света в горячем воздухе Расчет параметра искажения: –Самой простой: просто используйте глубину сцены –Рассеивание используя геометрический объект –Динамическое рассеивание и дрожание света используя температурные текстуры

26 KRI Conference, Moscow, Russia, February 2004 Дрожание и Рассеивание Света на Основе Специальных Объектов Отличный подход для изображения однородных газов –Для изображения воздуха над отдушиной горячих газов либо позади струи реактивного самолета Рисуйте сцену используя специальные «температурные» объекты: единственное предназначение этих объектов в том, чтобы создавать параметр искажения в канал альфа –Они не прорисовываются в главном рендеринге сцены в каналы RGB Просчитайте параметр искажения для этих объектов

27 KRI Conference, Moscow, Russia, February 2004 Температурные Объекты

28 KRI Conference, Moscow, Russia, February 2004 Параметры Искажения Глубина сцены – неплохой фактор искажения, но ваши художники наверняка захотят что-то более легко контролируемое Решение: –Изменяйте маштаб параметра искажения (scale) расстоянием от источника тепла, чтобы создать эффект рассеивания и дрожания воздуха из-за дисперсии температуры

29 KRI Conference, Moscow, Russia, February 2004 Избегайте Слишком Резкого Изображения Старайтесь не рисовать слишком ровные края температурных объектов в канал альфа –Не забывайте, что газы расширяются, чтобы заполнять всю окружающюю среду Для избежания этих проблем, модулируйте параметр искажения при помощи N V (Fresnel)

30 KRI Conference, Moscow, Russia, February 2004 Температурные Текстуры Расширение предыдущего подхода Отлично изображают газы с хаотическим распределением плотности

31 KRI Conference, Moscow, Russia, February 2004 Совместное Использование Температурных Текстур и Объектов Скроллайте температурные текстуры по поверхности температурных об ъектов –Направление движения текстур важно: облегчает восприятие рассеивания газов при изменяющейся температуры Скролл вверх (world-space) для изображения эффекта горячего воздуха, поднимающегося над разогретым шоссе Для изображения струи горячего воздуха из двигателя реактивного самолета, текстуры должны скроллаться по направлению движения воздуха из мотора –Направления скроллинга так же может зависить от температурных объектов Начальный параметр искажения должен быть модулирован значением глубины сцены температурного об ъекта

32 KRI Conference, Moscow, Russia, February 2004 Full-Screen Quad Drawn to Back Buffer Renderable Texture Эффект Рассеиваемых Газов Рисуйте полноэкранный прямоугольник, используя раннее созданный off-screen buffer (renderable texture) и пертурбационные температурные карты Perturbation Map

33 KRI Conference, Moscow, Russia, February 2004 Пертурбационные Температурные Карты 2х-компонентный вектор сохраняется в каналах RB Скроллайте эту карту в двух различных направлениях по полноэкранному прямоугольнику и считывайте дважды Расчитайте среднее значение обоих самплов, за тем переведите в диапазон [-1.0, 1.0] Модулируйте вектор параметром искажения Таким образом получаем вектор пертурбации Average

34 KRI Conference, Moscow, Russia, February 2004 Как Использовать Вектор Пертурбации Для Эффекта Рассеивания Простое измение значения пикселей выглядит сносно –Но! Таким образом мы не создаем эффект размытости воздуха из-за преломления света с точки зрения обозревателя Размывайте (blur) измененный пиксель, используя параметр искажения: –Для этого можно использовать расширяемый диск Пуассона для размытия –Так же можно использовать отделимые фильтры Гаусса

35 KRI Conference, Moscow, Russia, February 2004 Вектор Пертурбации (Perturbation Vector) Этот вектор используется, чтобы изменить начальную текстурную координаты Длиной этого вектора является значение параметра искажения Эта новая измененная текстурная координата используется для зависимой (dependant) прочитки буфера off-screen с прорисовкой главной сцены Original + Perturbation vector

36 KRI Conference, Moscow, Russia, February 2004 Шейдер для Подсчета Искажения 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; }

37 KRI Conference, Moscow, Russia, February 2004 Шейдер Расширяемого Диска Пуассона float3 SiGrowablePoissonDisc13FilterRGB (sampler tSource, float2 texCoord, float2 pixelSize, float discRadius) { float3 cOut; float2 poisson[12] = {float2( f, f), float2( f, f), float2( f, f), float2( f, f), float2( f, f), float2( f, f), float2( f, f), float2( f, f), float2( f, f), float2( f, f), float2( f, f), float2( f, f)}; // 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); } Радиус диска и количество сэмплов контролирует качество размывки. Для поддержки большего размера ядра фильтра с лучшим качеством, этот шейдер должен изменять количество сэмплов в зависимости от размера диска.

38 KRI Conference, Moscow, Russia, February 2004 Создание Объёмного Освещения в Реальном Времени Мы видим только освещение, достигающее наших глаз, так каким же образом мы замечаем объёмное освещение? Лучи света рассеиваются от подвешенных в воздухе частиц (либо любой другой среды, через которую проходят лучи света) В этом случае тени, особенно динамические, выглядять очень драматичный эффект

39 KRI Conference, Moscow, Russia, February 2004 Рассеянные Лучи Сквозь Пыльную Комнату From CSI

40 KRI Conference, Moscow, Russia, February 2004 Примеры из Игр Практически каждая игра так или иначе создает объёмное освещение –Zelda: Windwaker –Splinter Cell –Tomb Raider –I.C.O

41 KRI Conference, Moscow, Russia, February 2004 From Zelda: The Wind Waker

42 KRI Conference, Moscow, Russia, February 2004 Что же Именно Они Делают в Зельде? Скорее всего используют самый простой алгоритм Аддитивный блендинг полигонов, вытянутых по направлению от источника света Они рисуются последними и просто с z-буферингом по всей сцене Понижают яркость с растоянием

43 KRI Conference, Moscow, Russia, February 2004 Затемнение По Растоянию В-общем-то отличная идея для любых объектов Мы можем использовать это для источников освещения даже когда мы не будем просчитывать рассеивание света из- за частиц в среде Это может улучшить производительность distance

44 KRI Conference, Moscow, Russia, February 2004 Проблема: Z-Buffering Против Сцены Сцена рисуется до рисования объемного освещения В этом случае, плоскости объемного освещения оставляют заметные линии в местах пересечений с геометрическими объектами в сцене

45 KRI Conference, Moscow, Russia, February 2004 Отличный Визуальный Эффект Из последнего Tomb Raider:

46 KRI Conference, Moscow, Russia, February 2004 Splinter Cell

47 KRI Conference, Moscow, Russia, February 2004 Как Были Нарисованы Эти Эффекты? Большинство игр вытягивают контур окна либо формы источника света –В зависимости от угла обзора, это может быть очень сильно заметно –Так же достаточно сложно нарисовать по- настоящему объемное освещение либо изменять цвет Использование системы частиц так же может неплохо выглядеть Но сложно сделать хорошие тени

48 KRI Conference, Moscow, Russia, February 2004 Возьмем Пример из Объемной Визуализации Того же рода, как и просто объемная визуализацилия для медицинских программных приложений From [Dobashi00a]

49 KRI Conference, Moscow, Russia, February 2004 Прорисовка Объемного Освещения Sampling Planes Viewpoint Screen Разработано Добаши и Нишита Занимает алгоритм из визуализации медицинских данных Окрасьте плоскости в пространстве источника света Скомпонуйте в буфер кадра, чтобы просчитать интеграл по векторам обзора (приблизительно) Light Space

50 KRI Conference, Moscow, Russia, February 2004 Прорисовка Объемного Освещения

51 KRI Conference, Moscow, Russia, February 2004 Результати Проекта Добаши и Нишита

52 KRI Conference, Moscow, Russia, February 2004 Дополнительные Результаты

53 KRI Conference, Moscow, Russia, February 2004 «Умное» модулирование в вершинном шейдере –Статичный ВБ, который используется для рисования переменного количества плоскостей –Сохраняйте параметр позиции и интерполируйте (трехлинейно), чтобы заполнить границы (в простанстве обзора) светового столпа (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 ) Плоскости Сэмплинга

54 KRI Conference, Moscow, Russia, February 2004 Проектируемые Текстуры Огромное количество проектируемых текстур На данный момент мы делаем 4 прочитки проективных текстур из 3х 2D текстур, которые спроектированы на плоскости сэмплинга и окружающую среду 1.Текстура формы источника света(Cookie texture) 2.Shadow map Можно использовать stencil shadows для сцены если хочется 3.Карта шумов (прочитывается дважды) Отсечение к столпу света решает проблему back-projection на плоскостях сэмплинга. Необходимо следить за этим для сцены

55 KRI Conference, Moscow, Russia, February 2004 Частицы в Неоднородной Среде В плоскости –Скроллайте пару скалярных карты шумов 2D в проективном пространстве источника света –Компонуйте –Модулируйте с остальными частями уравнения освещения –Выглядит отлично! – особенно если остальная сцена достаточно статична –Так же может отлично помочь с алиасингом

56 KRI Conference, Moscow, Russia, February 2004 Карта Теней (Shadow Mapping) На данный момент используется 2й depth shadow map (front-face culling) Необходимо проектирование на плоскости сэмплинга, но не обязательно на саму сцену, если там все равно просчитываются тени (допустим, stencil) Может быть статичной (не нужно просчитывать каждый кадр) Shadow map Shadows in Fog and scene

57 KRI Conference, Moscow, Russia, February 2004 Undersampling and Quantization Undersampling –This technique is a discrete approximation to integrals along rays through the volume –If you undersample, and the cookie texture has high spatial frequencies, youll get aliasing. Even worse given the relatively hard-edged (high spatial frequency) shadows from the shadow map –Hence, you want many sampling planes in order to capture the high frequency content of the cookie and shadow maps Quantization –The discrete approximations to the integrals along rays through the volume are computed by additive blending with the frame buffer. –Current hardware can only do blending on 8 bit per channel surfaces –Hence, you want few sampling planes so that each addition has at least a few bits of precision in the value added to the frame buffer Conflicting goals!

58 KRI Conference, Moscow, Russia, February 2004 Как Решить Проблемы Алиасинга? Наиболее видно возле самого источника света Размажьте высоко-частотные детали формы источника света (cookie details) около самого источника –А может размазывать слишком сильно и сделать маленькие мип- мапы по-ярче? Вроде бы помогло –Так же можно изменять параметр затухания таким образом, чтобы было насыщение около источника света? Increasing Saturation

59 KRI Conference, Moscow, Russia, February 2004 Что Работает Лучше Всего? Расположение / Геометрия –Избегайте слишком глубокий столп света (в пространстве обзора) –Уменьшайте объем столпа света Используйте низко-частотную форму источника света (cookie) Варьируйте цвет cookie –Это помогает уменьшить насыщение, так как больше вероятности, что в пикселе будет использованы различные каналы по мере рисования плоскостей Этот эффект отлично выглядит, даже без shadow depth map, для источников света расположенных на краю сцены. Отвратительно выглядит: Хорошо: Отлично:

60 KRI Conference, Moscow, Russia, February 2004 Опримизация: Уменьшайте fill! Уменьшайте количество плоскостей сэмплинга –Модулируйте на основе глубины столпа света Старайтесь уменьшить инструкции в пиксельном шейдере –Добавление скролловых шумов - дорого –Shadow mapping - дорого –that part of frustum with simpler shader? Уменьшайте количество нарисованных пикселей –Активно используйте отсечение, так же разделяйте столпы света –( Тест)

61 KRI Conference, Moscow, Russia, February 2004 Делите Столпы Света

62 KRI Conference, Moscow, Russia, February 2004 Отсекайте Столп Света На Плоскости Земли Источник света Плоскость земли Far plane clipping Ground plane clipping

63 KRI Conference, Moscow, Russia, February 2004 Плюсы и Минусы Этого Алгоритма Плюсы –Эффект мягкого освещения –Легко создать ощущение неоднородной среды –Легко создать эффект витража Минусы –Fillrate-heavy –Стоимость прохода рисования shadow map (если динамичны) –Возможны заметные артифакты из-за shadow map –High fillrate required –Можно недостаточно дискретизировать столп света –Проблемы точности из-за насыщения битов в 8ми канальных текстур рисования (render target) –Нужно ли напоминать что этот алгоритм использует а lot of fill?