Generic Refraction Simulation Shader Study  (http://cafe.naver.com/shader.cafe) Codevania  (http://codevania.textcube.com)
Index <ul><li>Introduce </li></ul><ul><li>Beforehand </li></ul><ul><li>Basic Technique </li></ul><ul><li>Refraction Mask <...
Introduction <ul><li>Refraction </li></ul><ul><ul><li>굴절체를 통해 다른 곳으로 이동하는 빛의 휨  </li></ul></ul><ul><ul><li>Real-time  에서는 ...
Introduction (cont.) <ul><li>Technique used in this chapter </li></ul><ul><ul><li>Non-Refractive  물체들이 그려진  Texture 의 좌표를 ...
Introduction (cont.) <ul><li>Ways to simulate Refraction </li></ul><ul><ul><li>환경맵을 미리 계산하여 실행시간에 사용  </li></ul></ul><ul><...
Introduction (cont.) <ul><li>Simple Technique to Overcome These Problem </li></ul><ul><ul><li>시작 :  기본 기법 </li></ul></ul><...
Beforehand <ul><li>Fresnel Term </li></ul><ul><ul><li>시선이 표면과 평행할 때  100%  반사가 일어난다 </li></ul></ul><ul><ul><li>아래 그림에서 , <...
Basic Technique <ul><li>Step1 </li></ul><ul><ul><li>scene 내  geometry 를  Texture(=  S ) 에 렌더링 </li></ul></ul><ul><ul><ul><...
Basic Technique (cont.) Example 19-1. Shader for Basic Refraction Technique
Refraction Mask <ul><li>기본 기법은 다양한 상황에서  꽤 잘 동작할 것임  </li></ul><ul><li>비굴절체가 굴절체 앞에 있을 때 ,  perturbation 을 위해  bump 가 아주 큰...
Refraction Mask (cont.) <ul><li>Refraction Leakage </li></ul><ul><ul><li>Texture  S 는 모든  Scene Geometry 를 담고 있다 .  </li><...
Refraction Mask (cont.) <ul><li>기본 기법에 대한 수정 </li></ul><ul><ul><li>Texture  S 의  Alpha Channel Clear: White (1.0f)  </li><...
Refraction Mask (cont.) Figure 19-3 Artifacts Caused by the Technique  Figure 19-5 Artifacts Removed by Using the Refracti...
Refraction Mask (cont.) Example 19-2. Improved Shader That Uses the Refraction Mask  to Avoid Including Pixels from Object...
Example 1. Water <ul><li>Refractive Water 는 특별히 효율적임 </li></ul><ul><ul><li>현재 기법들은 굴절맵을 생성하기 위해 별도의  pass 를 사용 </li></ul><...
Example 1. Water (cont.) <ul><li>렌더링 </li></ul><ul><ul><li>Refraction Mask 를 위하여  back-buffer alpha channel 에 물평면  Render ...
Example 1. Water (cont.) <ul><li>Bump Layer </li></ul><ul><ul><li>4 개의  Bump Layer 를 사용  </li></ul></ul><ul><ul><li>Textur...
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  Ey...
Example 1. Water (cont.) Frame Buffer Render Target
Example 2. Glass <ul><li>일반적인  Glass Simulation </li></ul><ul><ul><li>반사와 굴절을 위해  Cube-maps 를 사용하고 ,  Fresnel term 을사용하여 결...
Example 2. Glass (cont.) <ul><li>렌더링 </li></ul><ul><ul><li>평소처럼 장면을  Texture  S 에 렌더 .  (Alpha Channel 에는  Refraction Mask...
Example 2. Glass (cont.) Example 19-5. Shader for Refractive/Reflective Glass Simulation   half4  main (      float2  Base...
Example 2. Glass (cont.)
Conclusion <ul><li>Strong Point </li></ul><ul><ul><li>여기서 사용된 기법이 물리적인 기법은 아니지만 ,  </li></ul></ul><ul><ul><li>Good Viisual...
Upcoming SlideShare
Loading in …5
×

Generic Refraction Simulation

1,579 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,579
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Generic Refraction Simulation

  1. 1. Generic Refraction Simulation Shader Study (http://cafe.naver.com/shader.cafe) Codevania (http://codevania.textcube.com)
  2. 2. Index <ul><li>Introduce </li></ul><ul><li>Beforehand </li></ul><ul><li>Basic Technique </li></ul><ul><li>Refraction Mask </li></ul><ul><li>Example1. Water </li></ul><ul><li>Example2. Glass </li></ul>
  3. 3. Introduction <ul><li>Refraction </li></ul><ul><ul><li>굴절체를 통해 다른 곳으로 이동하는 빛의 휨 </li></ul></ul><ul><ul><li>Real-time  에서는 어려운 문제임 </li></ul></ul>
  4. 4. Introduction (cont.) <ul><li>Technique used in this chapter </li></ul><ul><ul><li>Non-Refractive 물체들이 그려진 Texture 의 좌표를 perturbing( 섭동 , 교란 ) 함에 바탕을 둠 </li></ul></ul><ul><ul><li>매우 효율적이고 잘 동작함 </li></ul></ul><ul><ul><li>Far Cry 에서 사용한 여러 가지 렌더링 기법의 확장판임 </li></ul></ul><ul><ul><ul><li>water, heat haze, and the sniper-scope lens, among other effects </li></ul></ul></ul>
  5. 5. Introduction (cont.) <ul><li>Ways to simulate Refraction </li></ul><ul><ul><li>환경맵을 미리 계산하여 실행시간에 사용 </li></ul></ul><ul><ul><li>실행중에 환경맵을 계산하여 사용 </li></ul></ul><ul><ul><ul><li>문제점 </li></ul></ul></ul><ul><ul><ul><ul><li>높은 텍스처 메모리 사용량 , 성능 penalty </li></ul></ul></ul></ul><ul><ul><ul><ul><li>특히 , 많은 굴절체들이 있고 이것들이 다양한 환경맵을 요구하는 경우에 심각함 </li></ul></ul></ul></ul><ul><ul><ul><li>현재 water refraction simulation  기법에서의 또 다른 문제점 </li></ul></ul></ul><ul><ul><ul><ul><li>2 Rendering Passes 가 요구됨 </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Pass1: 절단된 물 평면 위의 geometry 를 위한  Refraction Map 생성 </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Pass2: 물 표면 렌더링 </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>복잡한 렝더링 상황에서 특히 성능 저하 </li></ul></ul></ul></ul>
  6. 6. Introduction (cont.) <ul><li>Simple Technique to Overcome These Problem </li></ul><ul><ul><li>시작 : 기본 기법 </li></ul></ul><ul><ul><ul><li>현재 back buffer 를 refraction map 으로 사용 </li></ul></ul></ul><ul><ul><ul><li>굴절을 연출하기 위해 텍스처 좌표에 변위를 추가 </li></ul></ul></ul><ul><ul><li>기본 기법은 artifact 를 유발함 </li></ul></ul><ul><ul><li>Refraction Map 에서 geometry 를 mask out </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>Water </li></ul></ul><ul><ul><li>Glass </li></ul></ul>
  7. 7. Beforehand <ul><li>Fresnel Term </li></ul><ul><ul><li>시선이 표면과 평행할 때 100% 반사가 일어난다 </li></ul></ul><ul><ul><li>아래 그림에서 , </li></ul></ul><ul><ul><ul><li>바닥은 30% 의 반사력을 가진다 </li></ul></ul></ul><ul><ul><ul><li>하지만 , Grazing Angle 이 되었을 때 100% 의 반사력에 도달한다 </li></ul></ul></ul>
  8. 8. Basic Technique <ul><li>Step1 </li></ul><ul><ul><li>scene 내 geometry 를  Texture(= S ) 에 렌더링 </li></ul></ul><ul><ul><ul><li>어느 물체들이 굴절체 ( 다음 pass 에 그려짐 )  뒤에서 보이는지 판단하기 위해 사용됨 </li></ul></ul></ul><ul><ul><li>굴절 메쉬들은  skip </li></ul></ul><ul><li>Step2 </li></ul><ul><ul><li>굴절체 렌더링 </li></ul></ul><ul><ul><ul><li>굴절을 연출하기 위해 perturbation 하면서 texture S 를 lookup </li></ul></ul></ul><ul><ul><ul><li>Perturbation 은  Normal Map(= N ) 를 사용하여 구현 . </li></ul></ul></ul><ul><ul><ul><ul><li>투영된 텍스처 좌표들에 변위를 추가하기 위해 RG component 가 사용됨 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>(1): Fetch the Texture N </li></ul></ul></ul></ul><ul><ul><ul><ul><li>(2): RG component 를 작은 값으로 scale 하여 변위값으로 지정 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>(3): 이 변위값을 투영된  Texture S 에 더한다 </li></ul></ul></ul></ul>
  9. 9. Basic Technique (cont.) Example 19-1. Shader for Basic Refraction Technique
  10. 10. Refraction Mask <ul><li>기본 기법은 다양한 상황에서  꽤 잘 동작할 것임 </li></ul><ul><li>비굴절체가 굴절체 앞에 있을 때 , perturbation 을 위해 bump 가 아주 큰 값으로 사용되면  artifacts 가 생길 수 있음 </li></ul><ul><li>19-3. 갈색구가 굴절체 보다 앞에 있는데도 ,  굴절체인 주전자에 갈색구가 그려졌음 </li></ul>Figure 19-3 Artifacts Caused by the Technique
  11. 11. Refraction Mask (cont.) <ul><li>Refraction Leakage </li></ul><ul><ul><li>Texture S 는 모든 Scene Geometry 를 담고 있다 . </li></ul></ul><ul><ul><li>모든  Pixel 에 대해서 무차별적으로 Perturbation 을 적용했다 . </li></ul></ul><ul><ul><li>그래서 Artifacts 가 보인다 . </li></ul></ul><ul><li>Worse Solution </li></ul><ul><ul><li>적용된 Perturbation 의 양을 시각적 품질 수준에서 수용할 만할 때까지 감소시킴 </li></ul></ul><ul><ul><li>모든 환경에서 잘 동작할만한 Scale 값을 찾기 어려움 </li></ul></ul><ul><ul><li>굴절 표면의  bumpy 한 정도의 상한에 대한 부작용 존재 </li></ul></ul><ul><li>Better Solution </li></ul><ul><ul><li>잘못된 Pixel 들에 대해서는  perturbation 을 추가하지 않도록 보장 </li></ul></ul><ul><ul><li>그렇게 하기 위해서는 </li></ul></ul><ul><ul><ul><li>Texture S 의 Alpha channle 에 , 모든 굴절체들을 놓아서 Mask 시키고 , </li></ul></ul></ul><ul><ul><ul><li>굴절체의 영역 내에 Perturbed 좌표가 있을 때에만 , 이 좌표를 사용함을 보장 </li></ul></ul></ul>
  12. 12. Refraction Mask (cont.) <ul><li>기본 기법에 대한 수정 </li></ul><ul><ul><li>Texture S 의 Alpha Channel Clear: White (1.0f) </li></ul></ul><ul><ul><li>Texture S 의 Alpha Channel Render: Black(0.0f) 으로 굴절체를 렌더 </li></ul></ul><ul><li>굴절체 렌더링 </li></ul><ul><ul><li>Texture S 의 Alpha Channel 에 저장된 별도의 정보를 사용하여 , 어떤 Pixel 들이 처리될 것인지 구별 </li></ul></ul><ul><ul><li>Alpha is White: Perturbation 추가 X </li></ul></ul><ul><ul><li>Alpha is Black: Perturbation 추가 O </li></ul></ul><ul><ul><li>게다가 , Perturbation 이 굴절체의 외부 픽셀을 포함하면 , Original Pixel 을 사용 </li></ul></ul><ul><ul><li>물체 바로 뒤에 없는 물체들이 보여지게 되는 부정확한 결과를 낳더라도 , 실용적으로 잘 동작하고 꽤 효율적이다 . </li></ul></ul>
  13. 13. 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
  14. 14. 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 가 존재한다 .
  15. 15. Example 1. Water <ul><li>Refractive Water 는 특별히 효율적임 </li></ul><ul><ul><li>현재 기법들은 굴절맵을 생성하기 위해 별도의 pass 를 사용 </li></ul></ul><ul><ul><ul><li>물평면 위의 geometry 를 잘라서 장면을 다시 랜더링하여 굴절맵 생성 </li></ul></ul></ul><ul><ul><li>우리의 기법으로는  1 Pass 만으로 충분함 </li></ul></ul><ul><ul><ul><li>별도의 작업은  Refraction Mask 를 위하여  Texture  S 의 alpha channel 에 물평면을 그리는 것 뿐임 </li></ul></ul></ul><ul><li>Far Cry 에 대해서는 , </li></ul><ul><ul><li>움직이는  Bump Texture 를 사용 . 정말 잘 동작함 . </li></ul></ul><ul><li>최근의 실혐에서 , </li></ul><ul><ul><li>Water Waves 를 움직이기 위해 Multiple Bump-map Layers 를 사용하여 더 좋아졌음 </li></ul></ul><ul><ul><li>그 다음에 , Reflection 과 Refraction 을 Per-pixel Fresnel Term 으로 Blending </li></ul></ul>
  16. 16. Example 1. Water (cont.) <ul><li>렌더링 </li></ul><ul><ul><li>Refraction Mask 를 위하여 back-buffer alpha channel 에 물평면 Render </li></ul></ul><ul><ul><li>그 다음에 , Water Reflection Map 을 생성 </li></ul></ul><ul><ul><ul><li>물평면에 의해 반사된 장면을 Reflection Map 에 Render </li></ul></ul></ul><ul><ul><ul><li>물평면 아래에 있는 geometry 는 잘라냄 </li></ul></ul></ul><ul><ul><li>Refraction Map 에 대해 별도의 렌더링 패스가 필요없음 </li></ul></ul><ul><ul><ul><ul><li>Texture S 와  Alpha Channel 에 대한 그것의 Refraction Mask 를 사용할 수 있기 때문 </li></ul></ul></ul></ul>Figure 19-6 The Rendering Steps for Water
  17. 17. Example 1. Water (cont.) <ul><li>Bump Layer </li></ul><ul><ul><li>4 개의 Bump Layer 를 사용 </li></ul></ul><ul><ul><li>Texture Coordinates 는 VS 에서 Scale 되는데 , 그래서 Water Waves 의 좋은 저주파 / 고주파를 얻는다 </li></ul></ul>
  18. 18. Example 1. Water (cont.) Example 19-3. Fresnel Approximation Computation for Water Rendering
  19. 19. 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… }
  20. 20. Example 1. Water (cont.) Frame Buffer Render Target
  21. 21. Example 2. Glass <ul><li>일반적인 Glass Simulation </li></ul><ul><ul><li>반사와 굴절을 위해 Cube-maps 를 사용하고 , Fresnel term 을사용하여 결과들을 Blending  시킴 </li></ul></ul><ul><ul><li>어떤 기법들은 더 진보되어 , 색체 변형 (Chromatic Aberration) 을 연출하기 위해 굴절을 파장 의존적로 만들기도 함 </li></ul></ul><ul><li>우리의 Glass Simulation </li></ul><ul><ul><li>Glass 에서 굴절과 반사를 연출하기 위해 Texture S 와 2D 반사맵 만을 사용 </li></ul></ul><ul><ul><li>하지만 위에 언급된 일반적인 기법을 포함하여 확장할 수도 있음 </li></ul></ul>
  22. 22. Example 2. Glass (cont.) <ul><li>렌더링 </li></ul><ul><ul><li>평소처럼 장면을 Texture S 에 렌더 .  (Alpha Channel 에는 Refraction Mask 사용 ) </li></ul></ul><ul><ul><li>Glass 는  Per-pixel Fresnel term 을 사용하여 Refraction Map 과 Blend 된 환경 범프매핑을 사용하여 렌더링 된다 . </li></ul></ul><ul><ul><li>Glass 색은 Diffuse Texture 에 굴절맵 값을  곱하여 구한다 . </li></ul></ul>Figure 19-7 The Rendering Steps for Stained Glass
  23. 23. 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 ; }
  24. 24. Example 2. Glass (cont.)
  25. 25. Conclusion <ul><li>Strong Point </li></ul><ul><ul><li>여기서 사용된 기법이 물리적인 기법은 아니지만 , </li></ul></ul><ul><ul><li>Good Viisual Quality </li></ul></ul><ul><ul><li>Extremely Efficient </li></ul></ul><ul><li>Weak Point </li></ul><ul><ul><li>different-colored 굴절 표면에 대해 적용할 때 제한적 </li></ul></ul><ul><ul><li>표면들이 겹칠 때 부정확한 결과를 산출 </li></ul></ul><ul><li>Accurate Solutions </li></ul><ul><ul><li>뒤에서 앞으로 굴절체들을 정렬 </li></ul></ul><ul><ul><li>굴절체들이 그려질 때마다 굴절맵을  Update </li></ul></ul><ul><li>Less Accurate Solution </li></ul><ul><ul><li>뒤에서 앞으로 굴절체들을 정렬 </li></ul></ul><ul><ul><li>굴절체들을 그릴 때 Alpha Blending 사용 </li></ul></ul>

×