Огонь, Вода и Медные Трубы: Новые, Интересные...
DESCRIPTION
Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты. Наталья Татарчук ATI Research, Inc 3D Application Research Group. КРИ, Москва 2004. Обзор Материала. Создание эффекта металлической автомобильной краски Эффект дымки и разгоряченного воздуха (heat and haze simulation) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/1.jpg)
Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты
Наталья ТатарчукATI Research, Inc3D Application Research Group
КРИ, Москва 2004
![Page 2: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/2.jpg)
2KRI Conference, Moscow, Russia, February 2004
Обзор Материала
• Создание эффекта металлической автомобильной краски
• Эффект дымки и разгоряченного воздуха (heat and haze simulation)
• Изображение объёмного освещения в реальном времени (light shafts)
![Page 3: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/3.jpg)
3KRI Conference, Moscow, Russia, February 2004
Металлическая Краска
![Page 4: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/4.jpg)
4KRI Conference, Moscow, Russia, February 2004
Создание Металлической Краски для Автомобиля• Создание многотональной прослойки
краски
• Симуляция металлических частиц в эмали
• Блестящее покрытие
• Создание динамически размытых отражений
![Page 5: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/5.jpg)
5KRI Conference, Moscow, Russia, February 2004
Слои Металлической Краски
Multi-Tone Base Color Microflake Layer
Clear gloss coat Final Color Composite
![Page 6: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/6.jpg)
6KRI Conference, Moscow, Russia, February 2004
Многотональная Основа Краски
• Смешивание двух цветовкраски в зависимости от направления обозревателя
• Нормаль N из карты нормалей
• Используем третий тон для балансирования результатов смешения
![Page 7: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/7.jpg)
8KRI 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;}
![Page 8: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/8.jpg)
9KRI 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 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.
![Page 9: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/9.jpg)
10KRI Conference, Moscow, Russia, February 2004
Слой Микрочастиц
![Page 10: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/10.jpg)
11KRI Conference, Moscow, Russia, February 2004
Прослойка Микрочастиц• Моделирование взаимодействия фотонов,
отраженных металлическими микрочастицами в слое эмали
• Алгоритм использует высокочастотную карту нормалей (Nn), содержащую шумы, повторяющуюся по поверхности машины
![Page 11: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/11.jpg)
12KRI Conference, Moscow, Russia, February 2004
Расчет Нормалей Микрочастиц
• Сначала подсчитываем нормаль, N, из карты нормалей для машины
• Используя высокочастотнуюкарту шумов, рассчитываем пертурбированную нормаль Np
• Моделируем два слоя микрочастиц подсчитывая пертурбированные нормали Np1 и Np2 на основе нормали шумов Np
где a << b где c = b
bNaN
bNaNN
n
np
1
dNcN
dNcNN
n
np
2
![Page 12: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/12.jpg)
14KRI 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 );}
Пертурбированная нормальиз карты шумов
Подсчитываем нормалидля обоих слоев микрочастиц
Подчитываем скалярные продукты нормализированного вектора
обозревателя с нормалями Для обоих слоев микрочастиц
Компонуем многотональныйцвет прослойки микрочастиц
![Page 13: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/13.jpg)
15KRI Conference, Moscow, Russia, February 2004
Блестящее покрытие
![Page 14: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/14.jpg)
16KRI Conference, Moscow, Russia, February 2004
Динамически Размытые Отраженные Объекты
Размытые отражения объектов
![Page 15: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/15.jpg)
17KRI Conference, Moscow, Russia, February 2004
Подсчет Динамически Размытых Отражений• Можно использовать карту глянца (gloss
map) для обозначения регионов, где отражения должны быть более размытыми
• Изпользуйте bias читая текстуру environment map, чтобы размывать отражения– Используйте texCUBEbias для текстурного
чтения
• Для более размытого спекулярного отражения, значение bias – высокое, что собственно и создает эффект размытости
![Page 16: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/16.jpg)
18KRI 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 = 1.0 - 0.5 * fFresnel;
return float4( envMap.rgb * fEnvContribution, 1.0 );}
Пиксельный Шейдер
Просчитайте вектор отражениядля доступа к environment map
Этот параметр используется для динамического размывания отражений
при bias’е чтения environment map
Зараннее помножим на альфу изenvironment map, чтобы подсветитьотражения и правильно просчитать
спекулярные блики
Отраженные блики
![Page 17: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/17.jpg)
19KRI Conference, Moscow, Russia, February 2004
Компонование Многотонального Слоя Краски и Прослойки Микрочастиц
Базовый цвет материала и
микрочастичный эффект подсчитывается
по вот этой формуле:color0(Np1·V) + color1(Np1·V)2 + color2(Np1·V)4 + color3(Np2·V)16
Базовый материал
Микрочастицы
![Page 18: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/18.jpg)
20KRI 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 = 1.0 - 0.5 * fNdotV;
// Assemble the final look:
float4 finalColor;
finalColor.a = 1.0;finalColor.rgb = envMap * fEnvContribution + paintColor;
return finalColor;
}
![Page 19: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/19.jpg)
21KRI Conference, Moscow, Russia, February 2004
Результат - Красивая Машинка
![Page 20: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/20.jpg)
22KRI Conference, Moscow, Russia, February 2004
Эффект дымки и разгоряченного воздуха (Heat and haze simulation)
![Page 21: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/21.jpg)
23KRI Conference, Moscow, Russia, February 2004
Об Эффекте
• Естественное явление атмосфере, хорошо знакомый всем
• Лучи света преломляются, проходя через воздух и другие среды разных плотностей
• Не обязательно использовать формулу из учебника по физике для создания правильно выглядещего эффекта для игр
![Page 22: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/22.jpg)
24KRI Conference, Moscow, Russia, February 2004
• Горячий воздух имеет меньшую плотность, чем холодный воздух
• Индекс преломления лучей света зависит от плотности материала
• По мере поднятия, горячий воздух перемешивается с холодным, таким образом преломляя лучи света
Дрожание и Рассеивание Лучей Света
![Page 23: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/23.jpg)
25KRI Conference, Moscow, Russia, February 2004
Алгоритм– Нарисуйте сцену в RGBA текстуру (offscreen-buffer)
(renderable texture)• Цвет материала в каналы RGB• Специальный параметр искажения в канал Alpha
– Нарисуйте полноэкранный прямоугольник в буфер кадра• Используйте параметр искажения чтобы изменить текстурные
координаты для прочитки текстуры сцены, чтобы создать эффект преломления света в горячем воздухе
Расчет параметра искажения:– Самой простой: просто используйте глубину сцены
– Рассеивание используя геометрический объект
– Динамическое рассеивание и дрожание света используя температурные текстуры
![Page 24: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/24.jpg)
26KRI Conference, Moscow, Russia, February 2004
Дрожание и Рассеивание Света на Основе Специальных Объектов
• Отличный подход для изображения однородных газов
– Для изображения воздуха над отдушиной горячих газов либо позади струи реактивного самолета
• Рисуйте сцену используя специальные «температурные» объекты: единственное предназначение этих объектов в том, чтобы создавать параметр искажения в канал альфа
– Они не прорисовываются в главном рендеринге сцены в каналы RGB
• Просчитайте параметр искажения для этих объектов
![Page 25: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/25.jpg)
27KRI Conference, Moscow, Russia, February 2004
Температурные Объекты
![Page 26: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/26.jpg)
28KRI Conference, Moscow, Russia, February 2004
Параметры Искажения
• Глубина сцены – неплохой фактор искажения, но ваши художники наверняка захотят что-то более легко контролируемое
• Решение: – Изменяйте маштаб параметра искажения
(scale) расстоянием от источника тепла, чтобы создать эффект рассеивания и дрожания воздуха из-за дисперсии температуры
![Page 27: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/27.jpg)
29KRI Conference, Moscow, Russia, February 2004
Избегайте Слишком Резкого Изображения
• Старайтесь не рисовать слишком ровные края температурных объектов в канал альфа
– Не забывайте, что газы расширяются, чтобы заполнять всю окружающюю среду
• Для избежания этих проблем, модулируйте параметр искажения при помощи N • V (Fresnel)
![Page 28: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/28.jpg)
30KRI Conference, Moscow, Russia, February 2004
Температурные Текстуры
• Расширение предыдущего подхода• Отлично изображают газы с
хаотическим распределением плотности
![Page 29: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/29.jpg)
31KRI Conference, Moscow, Russia, February 2004
Совместное Использование Температурных Текстур и Объектов• Скроллайте температурные текстуры по
поверхности температурных объектов– Направление движения текстур важно: облегчает
восприятие рассеивания газов при изменяющейся температуры
• Скролл вверх (world-space) для изображения эффекта горячего воздуха, поднимающегося над разогретым шоссе
• Для изображения струи горячего воздуха из двигателя реактивного самолета, текстуры должны скроллаться по направлению движения воздуха из мотора
– Направления скроллинга так же может зависить от температурных объектов
• Начальный параметр искажения должен быть модулирован значением глубины сцены температурного объекта
![Page 30: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/30.jpg)
32KRI Conference, Moscow, Russia, February 2004
Full-Screen QuadDrawn to Back Buffer
Renderable Texture
Эффект Рассеиваемых Газов
• Рисуйте полноэкранный прямоугольник, используя раннее созданный off-screen buffer (renderable texture) и пертурбационные температурные карты
Perturbation Map
![Page 31: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/31.jpg)
33KRI Conference, Moscow, Russia, February 2004
Пертурбационные Температурные Карты
• 2х-компонентный вектор сохраняется в каналах RB• Скроллайте эту карту в двух различных направлениях по
полноэкранному прямоугольнику и считывайте дважды• Расчитайте среднее значение обоих самплов, за тем
переведите в диапазон [-1.0, 1.0]• Модулируйте вектор параметром искажения• Таким образом получаем вектор пертурбации
Average
![Page 32: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/32.jpg)
34KRI Conference, Moscow, Russia, February 2004
Как Использовать Вектор Пертурбации Для Эффекта Рассеивания• Простое измение значения пикселей
выглядит сносно– Но! Таким образом мы не создаем эффект
размытости воздуха из-за преломления света с точки зрения обозревателя
• Размывайте (blur) измененный пиксель, используя параметр искажения:
– Для этого можно использовать расширяемый диск Пуассона для размытия
– Так же можно использовать отделимые фильтры Гаусса
![Page 33: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/33.jpg)
35KRI Conference, Moscow, Russia, February 2004
Вектор Пертурбации (Perturbation Vector)
• Этот вектор используется, чтобы изменить начальную текстурную координаты
• Длиной этого вектора является значение параметра искажения
• Эта новая измененная текстурная координата используется для зависимой (dependant) прочитки буфера off-screen с прорисовкой главной сцены
Original <u,v> + Perturbation vector <x,y>
![Page 34: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/34.jpg)
36KRI 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;}
![Page 35: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/35.jpg)
37KRI Conference, Moscow, Russia, February 2004
Шейдер Расширяемого Диска Пуассона
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);}
Радиус диска и количество сэмпловконтролирует качестворазмывки. Для поддержки большегоразмера ядра фильтрас лучшим качеством, этот шейдер должен изменять количествосэмплов в зависимостиот размера диска.
![Page 36: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/36.jpg)
38KRI Conference, Moscow, Russia, February 2004
Создание Объёмного Освещения в Реальном Времени• Мы видим только освещение, достигающее
наших глаз, так каким же образом мы замечаем объёмное освещение?
• Лучи света рассеиваются от подвешенных в воздухе частиц (либо любой другой среды, через которую проходят лучи света)
• В этом случае тени, особенно динамические, выглядять очень драматичный эффект
![Page 37: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/37.jpg)
39KRI Conference, Moscow, Russia, February 2004
Рассеянные Лучи Сквозь Пыльную Комнату
From From CSICSI
![Page 38: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/38.jpg)
40KRI Conference, Moscow, Russia, February 2004
Примеры из Игр
• Практически каждая игра так или иначе создает объёмное освещение
– Zelda: Windwaker
– Splinter Cell
– Tomb Raider
– I.C.O
![Page 39: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/39.jpg)
41KRI Conference, Moscow, Russia, February 2004
From Zelda: The Wind Waker
![Page 40: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/40.jpg)
42KRI Conference, Moscow, Russia, February 2004
Что же Именно Они Делают в Зельде?
• Скорее всего используют самый простой алгоритм• Аддитивный блендинг полигонов,
вытянутых по направлению от источника света• Они рисуются последними и просто с
z-буферингом по всей сцене• Понижают яркость с растоянием
![Page 41: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/41.jpg)
43KRI Conference, Moscow, Russia, February 2004
Затемнение По Растоянию
• В-общем-то отличная идея для любых объектов
• Мы можем использовать это для источников освещения даже когда мы не будем просчитывать рассеивание света из-за частиц в среде
• Это может улучшить производительность
distance
![Page 42: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/42.jpg)
44KRI Conference, Moscow, Russia, February 2004
Проблема: Z-Buffering Против Сцены
• Сцена рисуется до рисования объемного освещения
• В этом случае, плоскости объемного освещения оставляют заметные линии в местах пересечений с геометрическими объектами в сцене
![Page 43: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/43.jpg)
45KRI Conference, Moscow, Russia, February 2004
Отличный Визуальный Эффект
• Из последнего Tomb Raider:
![Page 44: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/44.jpg)
46KRI Conference, Moscow, Russia, February 2004
Splinter Cell
![Page 45: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/45.jpg)
47KRI Conference, Moscow, Russia, February 2004
Как Были Нарисованы Эти Эффекты?• Большинство игр вытягивают контур
окна либо формы источника света– В зависимости от угла обзора, это может
быть очень сильно заметно
– Так же достаточно сложно нарисовать по-настоящему объемное освещение либо изменять цвет
• Использование системы частиц так же может неплохо выглядеть• Но сложно сделать хорошие тени
![Page 46: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/46.jpg)
48KRI Conference, Moscow, Russia, February 2004
Возьмем Пример из Объемной Визуализации
• Того же рода, как и просто объемная визуализацилия для медицинских программных приложений
From [Dobashi00a]
![Page 47: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/47.jpg)
49KRI Conference, Moscow, Russia, February 2004
Прорисовка Объемного Освещения
Sampling Planes
Viewpoint
Screen
• Разработано Добаши и Нишита
• Занимает алгоритм из визуализации медицинских данных
• Окрасьте плоскости в пространстве источника света
• Скомпонуйте в буфер кадра, чтобы просчитать интеграл по векторам обзора (приблизительно)
Light Space
![Page 48: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/48.jpg)
50KRI Conference, Moscow, Russia, February 2004
Прорисовка Объемного Освещения
![Page 49: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/49.jpg)
51KRI Conference, Moscow, Russia, February 2004
Результати Проекта Добаши и Нишита
![Page 50: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/50.jpg)
52KRI Conference, Moscow, Russia, February 2004
Дополнительные Результаты
![Page 51: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/51.jpg)
53KRI Conference, Moscow, Russia, February 2004
• «Умное» модулирование в вершинном шейдере– Статичный ВБ, который используется для рисования
переменного количества плоскостей– Сохраняйте параметр позиции и интерполируйте (трехлинейно),
чтобы заполнить границы (в простанстве обзора) светового столпа (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)
Плоскости Сэмплинга
![Page 52: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/52.jpg)
54KRI Conference, Moscow, Russia, February 2004
Проектируемые Текстуры
• Огромное количество проектируемых текстур
• На данный момент мы делаем 4 прочитки проективных текстур из 3х 2D текстур, которые спроектированы на плоскости сэмплинга и окружающую среду1. Текстура формы источника света(Cookie texture)2. Shadow map
• Можно использовать stencil shadows для сцены если хочется
3. Карта шумов (прочитывается дважды)• Отсечение к столпу света решает
проблему back-projection на плоскостях сэмплинга. Необходимо следить за этим для сцены
![Page 53: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/53.jpg)
55KRI Conference, Moscow, Russia, February 2004
Частицы в Неоднородной Среде
• В плоскости– Скроллайте пару скалярных карты шумов
2D в проективном пространстве источника света
– Компонуйте
– Модулируйте с остальными частями уравнения освещения
– Выглядит отлично! – особенно если остальная сцена достаточно статична
– Так же может отлично помочь с алиасингом
![Page 54: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/54.jpg)
56KRI Conference, Moscow, Russia, February 2004
Карта Теней (Shadow Mapping)
• На данный момент используется 2й depth shadow map (front-face culling)
• Необходимо проектирование на плоскости сэмплинга, но не обязательно на саму сцену, если там все равно просчитываются тени (допустим, stencil)
• Может быть статичной (не нужно просчитывать каждый кадр)
Shadow map
Shadows in Fog and scene
![Page 55: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/55.jpg)
58KRI Conference, Moscow, Russia, February 2004
Как Решить Проблемы Алиасинга?
• Наиболее видно возле самого источника света
• Размажьте высоко-частотные детали формы источника света (cookie details) около самого источника
– А может размазывать слишком сильно и сделать маленькие мип-мапы по-ярче? Вроде бы помогло
– Так же можно изменять параметр затухания таким образом, чтобы было насыщение около источника света?
Increa
sing S
atura
tion
![Page 56: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/56.jpg)
59KRI Conference, Moscow, Russia, February 2004
Что Работает Лучше Всего?
• Расположение / Геометрия– Избегайте слишком глубокий столп
света (в пространстве обзора)– Уменьшайте объем столпа света
• Используйте низко-частотную форму источника света (cookie)
• Варьируйте цвет cookie – Это помогает уменьшить насыщение, так
как больше вероятности, что в пикселе будет использованы различные каналы по мере рисования плоскостей
• Этот эффект отлично выглядит, даже без shadow depth map, для источников света расположенных на краю сцены.
Отвратительно выглядит:
Хорошо:
Отлично:
![Page 57: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/57.jpg)
60KRI Conference, Moscow, Russia, February 2004
Опримизация: Уменьшайте fill!
• Уменьшайте количество плоскостей сэмплинга– Модулируйте на основе глубины столпа света
• Старайтесь уменьшить инструкции в пиксельном шейдере
– Добавление скролловых шумов - дорого
– Shadow mapping - дорого
– that part of frustum with simpler shader?• Уменьшайте количество нарисованных пикселей
– Активно используйте отсечение, так же разделяйте столпы света
– ( Тест)
![Page 58: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/58.jpg)
61KRI Conference, Moscow, Russia, February 2004
Делите Столпы Света
![Page 59: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/59.jpg)
62KRI Conference, Moscow, Russia, February 2004
Отсекайте Столп Света На Плоскости Земли
Источник света
Плоскость земли
Far plane clipping
Groundplane clipping
![Page 60: Огонь, Вода и Медные Трубы: Новые, Интересные Графические Эффекты](https://reader035.vdocuments.pub/reader035/viewer/2022062520/56815c20550346895dc9f62e/html5/thumbnails/60.jpg)
63KRI Conference, Moscow, Russia, February 2004
Плюсы и Минусы Этого Алгоритма
• Плюсы– Эффект мягкого освещения– Легко создать ощущение неоднородной среды– Легко создать эффект витража
• Минусы– Fillrate-heavy– Стоимость прохода рисования shadow map (если
динамичны)– Возможны заметные артифакты из-за shadow map– High fillrate required– Можно недостаточно дискретизировать столп света– Проблемы точности из-за насыщения битов в 8ми
канальных текстур рисования (render target)– Нужно ли напоминать что этот алгоритм использует а
lot of fill?