Generic Refraction Simulation

Shader Study (http://cafe.naver.com/shader.cafe)

Codevania (http://codevania.textcube.com)

Index

• Introduce• Beforehand• Basic Technique• Refraction Mask• Example1. Water• Example2. Glass

Introduction

• Refraction–굴절체를 통해 다른 곳으로 이동하는 빛의 휨 – Real-time 에서는 어려운 문제임

Introduction (cont.)

• Technique used in this chapter– Non-Refractive 물체들이 그려진

Texture 의 좌표를 perturbing( 섭동 , 교란 ) 함에 바탕을 둠

–매우 효율적이고 잘 동작함 – Far Cry 에서 사용한 여러 가지 렌더링 기법의

확장판임• water, heat haze, and the sniper-scope lens, among other

effects

Introduction (cont.)

• Ways to simulate Refraction–환경맵을 미리 계산하여 실행시간에 사용 –실행중에 환경맵을 계산하여 사용

• 문제점– 높은 텍스처 메모리 사용량 , 성능 penalty – 특히 , 많은 굴절체들이 있고 이것들이 다양한 환경맵을 요구하는

경우에 심각함

• 현재 water refraction simulation 기법에서의 또 다른 문제점– 2 Rendering Passes 가 요구됨

» Pass1: 절단된 물 평면 위의 geometry 를 위한 Refraction Map 생성

» Pass2: 물 표면 렌더링– 복잡한 렝더링 상황에서 특히 성능 저하

Introduction (cont.)

• Simple Technique to Overcome These Problem–시작 : 기본 기법

• 현재 back buffer 를 refraction map 으로 사용 • 굴절을 연출하기 위해 텍스처 좌표에 변위를 추가

–기본 기법은 artifact 를 유발함 – Refraction Map 에서 geometry 를 mask out

• Examples– Water – Glass

Beforehand

• Fresnel Term–시선이 표면과 평행할 때 100% 반사가 일어난다–아래 그림에서 ,

• 바닥은 30% 의 반사력을 가진다• 하지만 , Grazing Angle 이 되었을 때

100% 의 반사력에 도달한다

Basic Technique

• Step1– scene 내 geometry 를 Texture(= S) 에 렌더링

• 어느 물체들이 굴절체 ( 다음 pass 에 그려짐 ) 뒤에서 보이는지 판단하기 위해 사용됨

– 굴절 메쉬들은 skip

• Step2– 굴절체 렌더링

• 굴절을 연출하기 위해 perturbation 하면서 texture S 를 lookup • Perturbation 은 Normal Map(= N) 를 사용하여 구현 .

– 투영된 텍스처 좌표들에 변위를 추가하기 위해 RG component 가 사용됨 – (1): Fetch the Texture N – (2): RG component 를 작은 값으로 scale 하여 변위값으로 지정 – (3): 이 변위값을 투영된 Texture S 에 더한다

Basic Technique (cont.)Example 19-1. Shader for Basic Refraction Technique

Refraction Mask

• 기본 기법은 다양한 상황에서 꽤 잘 동작할 것임

• 비굴절체가 굴절체 앞에 있을 때 , perturbation 을 위해 bump 가 아주 큰 값으로 사용되면 artifacts 가 생길 수 있음

• 19-3. 갈색구가 굴절체 보다 앞에 있는데도 , 굴절체인 주전자에 갈색구가 그려졌음

Figure 19-3 Artifacts Caused by the Technique

Refraction Mask (cont.)

• Refraction Leakage– Texture S 는 모든 Scene Geometry 를 담고 있다 . – 모든 Pixel 에 대해서 무차별적으로 Perturbation 을 적용했다 . – 그래서 Artifacts 가 보인다 .

• Worse Solution– 적용된 Perturbation 의 양을

시각적 품질 수준에서 수용할 만할 때까지 감소시킴 – 모든 환경에서 잘 동작할만한 Scale 값을 찾기 어려움 – 굴절 표면의 bumpy 한 정도의 상한에 대한 부작용 존재

• Better Solution– 잘못된 Pixel 들에 대해서는 perturbation 을 추가하지 않도록 보장 – 그렇게 하기 위해서는

• Texture S 의 Alpha channle 에 , 모든 굴절체들을 놓아서 Mask 시키고 , • 굴절체의 영역 내에 Perturbed 좌표가 있을 때에만 ,

이 좌표를 사용함을 보장

Refraction Mask (cont.)

• 기본 기법에 대한 수정– Texture S 의 Alpha Channel Clear: White (1.0f) – Texture S 의 Alpha Channel Render: Black(0.0f) 으로

굴절체를 렌더

• 굴절체 렌더링– Texture S 의 Alpha Channel 에 저장된 별도의 정보를

사용하여 , 어떤 Pixel 들이 처리될 것인지 구별 – Alpha is White: Perturbation 추가 X – Alpha is Black: Perturbation 추가 O – 게다가 , Perturbation 이 굴절체의 외부 픽셀을 포함하면 , Ori

ginal Pixel 을 사용 – 물체 바로 뒤에 없는 물체들이 보여지게 되는 부정확한

결과를 낳더라도 , 실용적으로 잘 동작하고 꽤 효율적이다 .

Refraction Mask (cont.)

Figure 19-3 Artifacts Caused by the Technique

Figure 19-5 Artifacts Removed by Using the Refraction Mask

Figure 19-4 The Alpha Channel in the Frame Buffer

Refraction Mask (cont.)Example 19-2. Improved Shader That Uses the Refraction Mask to Avoid Including Pixels from Objects in Front of the Refractive Object

- 이 굴절 시뮬레이션 기법을 모든 메쉬타입에 대해 적용함으로써 artifacts 를 제거할 수 있다 .

- 하지만 사실 그렇게 한다고 해도 , Occluder Pixel Colors 를 Background Color 로 바꿨기 때문에 ,여전히 artifacts 가 존재한다 .

Example 1. Water

• Refractive Water 는 특별히 효율적임– 현재 기법들은 굴절맵을 생성하기 위해 별도의 pass 를 사용

• 물평면 위의 geometry 를 잘라서 장면을 다시 랜더링하여 굴절맵 생성

– 우리의 기법으로는 1 Pass 만으로 충분함• 별도의 작업은 Refraction Mask 를 위하여

Texture S 의 alpha channel 에 물평면을 그리는 것 뿐임

• Far Cry 에 대해서는 ,– 움직이는 Bump Texture 를 사용 . 정말 잘 동작함 .

• 최근의 실혐에서 ,– Water Waves 를 움직이기 위해

Multiple Bump-map Layers 를 사용하여 더 좋아졌음 – 그 다음에 , Reflection 과 Refraction 을

Per-pixel Fresnel Term 으로 Blending

Example 1. Water (cont.)

• 렌더링– Refraction Mask 를 위하여

back-buffer alpha channel 에 물평면 Render – 그 다음에 , Water Reflection Map 을 생성

• 물평면에 의해 반사된 장면을 Reflection Map 에 Render • 물평면 아래에 있는 geometry 는 잘라냄

– Refraction Map 에 대해 별도의 렌더링 패스가 필요없음– Texture S 와 Alpha Channel 에 대한 그것의 Refraction Mask 를 사용할

수 있기 때문

Figure 19-6 The Rendering Steps for Water

Example 1. Water (cont.)

• Bump Layer– 4 개의 Bump Layer 를 사용 – Texture Coordinates 는 VS 에서 Scale 되는데 ,

그래서 Water Waves 의 좋은 저주파 / 고주파를 얻는다

Example 1. Water (cont.)Example 19-3. Fresnel Approximation Computation for Water Rendering

Example 1. Water (cont.)Example 19-4. The Fragment Program for Refractive/Reflective Water

half4 main( float3 Eye : TEXCOORD0, float4 Wave0, 1, 2, 3 : TEXCOORD1, 2, 3, 4, float4 ScreenPos : TEXCOORD5, uniform sampler2D tex0, 1, 2 ) : COLOR{ // Get bump layers… // Average bump layers half3 vBumpTex = normalize( 2.0 * (vBumpTexA.xyz + vBumpTexB.xyz + vBumpTexC.xyz + vBumpTexD.xyz) - 4.0); // Apply individual bump scale for refraction and reflection… // Compute projected coordinates half2 vProj = ( ScreenPos.xy / ScreenPos.w ); half4 vReflection = tex2D( tex2, vProj.xy + vReflBump.xy ); half4 vRefrA = tex2D( tex1, vProj.xy + vRefrBump.xy ); half4 vRefrB = tex2D( tex1, vProj.xy ); // Mask occluders from refraction map half4 vRefraction = vRefrB * vRefrA.w + vRefrA * ( 1 - vRefrA.w ); // Compute Fresnel term half NdotL = max( dot( vEye, vReflBump ), 0 ); half facing = ( 1.0 - NdotL ); half fresnel = Fresnel( NdotL, 0.2, 5.0 ); // Use distance to lerp between refraction and deep water color half fDistScale = saturate( 10.0 / Wave0.w ); half3 WaterDeepColor = ( vRefraction.xyz * fDistScale + ( 1 - fDistScale ) * half3( 0, 0.15, 0.115 ) ); // Lerp between water color and deep water color… // final water = reflection_color * fresnel + water_color…}

Example 1. Water (cont.)

FrameBuffer

RenderTarget

Example 2. Glass

• 일반적인 Glass Simulation–반사와 굴절을 위해 Cube-maps 를 사용하고 ,

Fresnel term 을사용하여 결과들을 Blending 시킴 –어떤 기법들은 더 진보되어 ,

색체 변형 (Chromatic Aberration) 을 연출하기 위해 굴절을 파장 의존적로 만들기도 함

• 우리의 Glass Simulation– Glass 에서 굴절과 반사를 연출하기 위해

Texture S 와 2D 반사맵 만을 사용 –하지만 위에 언급된 일반적인 기법을 포함하여

확장할 수도 있음

Example 2. Glass (cont.)

• 렌더링–평소처럼 장면을 Texture S 에 렌더 .

(Alpha Channel 에는 Refraction Mask 사용 ) – Glass 는 Per-pixel Fresnel term 을 사용하여 Refract

ion Map 과 Blend 된 환경 범프매핑을 사용하여 렌더링 된다 .

– Glass 색은 Diffuse Texture 에 굴절맵 값을 곱하여 구한다 .

Figure 19-7 The Rendering Steps for Stained Glass

Example 2. Glass (cont.)Example 19-5. Shader for Refractive/Reflective Glass Simulation

half4 main( float2 BaseUV : TEXCOORD0, float4 ScreenPos : TEXCOORD1, float3 Eye : TEXCOORD2, uniform sampler2D tex0, 1, 2, 3 ) : COLOR{ // Get bump and apply scale, then get diffuse half4 vBumpTex = 2.0 * tex2D( tex1, BaseUV.xy ) - 1.0; half3 vBump = normalize( vBumpTex.xyz * half3( 0.2, 0.2, 1.0 ) ); half4 vDiffuse = tex2D( tex0, BaseUV.xy ); // Compute reflection vector half LdotN = dot( vBump.xyz, vEye.xyz ); half3 vReflect = 2.0 * LdotN * vBump.xyz - vEye; // Reflection vector coordinates used for environmental mapping half4 vEnvMap = tex2D( tex3, ( vReflect.xy + 1.0 ) * 0.5 ); // Compute projected coordinates and add perturbation half2 vProj = ( ScreenPos.xy / ScreenPos.w ); half4 vRefrA = tex2D( tex2, vProj.xy + vBump.xy ); half4 vRefrB = tex2D( tex2, vProj.xy ); // Mask occluders from refraction map half4 vFinal = vRefrB * vRefrA.w + vRefrA * ( 1 - vRefrA.w ); // Compute Fresnel term half fresnel = Fresnel( LdotN, 0.4, 5.0 ); // Lerp between 1 and diffuse for glass transparency vDiffuse.xyz = saturate( 0.1 + vDiffuse.xyz * 0.9 ); // Final output blends reflection and refraction using Fresnel term return vDiffuse * vFinal * ( 1 - fresnel ) + vEnvMap * fresnel;}

Example 2. Glass (cont.)

Conclusion

• Strong Point– 여기서 사용된 기법이 물리적인 기법은 아니지만 , – Good Viisual Quality – Extremely Efficient

• Weak Point– different-colored 굴절 표면에 대해 적용할 때 제한적 – 표면들이 겹칠 때 부정확한 결과를 산출

• Accurate Solutions– 뒤에서 앞으로 굴절체들을 정렬 – 굴절체들이 그려질 때마다 굴절맵을 Update

• Less Accurate Solution– 뒤에서 앞으로 굴절체들을 정렬 – 굴절체들을 그릴 때 Alpha Blending 사용