게임 개발을 위한 렌더링 기법 한성환

4,837 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

게임 개발을 위한 렌더링 기법 한성환

  1. 1. 게임 개발을 위한 렌더링 기법<br />민커뮤니케이션<br />MAD팀 한성환<br />2010.05.26<br />
  2. 2. 목차<br />Shading<br />Base Rendering<br />Advanced Rendering<br />렌더링 관련 최적화<br />
  3. 3. Shading<br />Flat Shading<br />Gouraud Shading<br />Phong Shading<br />
  4. 4. Flat Shading<br />
  5. 5. Flat Shading<br />
  6. 6. Gouraud Shading<br />
  7. 7. Phong Shading<br />
  8. 8. 목차<br />Shading<br />Base Rendering<br />Advanced Rendering<br />렌더링 관련 최적화<br />
  9. 9. Base Rendering(Gouraud Shading)<br />Feature (특징)<br />Diffuse<br />Specular<br />장단점<br />
  10. 10. Feature(Gouraud Shading)<br />점단위의Color 계산<br />두점 사이의 컬러값 선형보간<br />
  11. 11. Diffuse<br />점의 Normal 방향<br />Light 방향 <br />내적<br />Material Diffuse<br />Light Diffuse<br />
  12. 12. Diffuse 문제<br />Light Diffuse Color ( 255, 255, 0 )<br />Material Diffuse Color ( 0, 0, 255 )<br />무슨 컬러가 나올까요~?<br />LightDiffuse * MaterialDiffuse * 내적(Normal,LightDir)<br />R = 255 * 0 * 내적수치;<br />G = 255 * 0 * 내적수치;<br />B = 0 * 255 * 내적수치;<br />Color( R, G, B ) -> Color( 0, 0, 0 )<br />
  13. 13. Specular<br />점의 Normal 방향<br />Light 방향 <br />캐릭터 시점<br />Half Vector<br />내적 ( Half, Normal )<br />
  14. 14. Base Rendering 장단점<br />작업이 쉽다.<br />모든 그래픽 카드에 지원이 가능하다.<br />퀄리티가 부족하다.<br />장점<br />단점<br />
  15. 15. Base Rendering의 보완책은…<br />Phong Shading<br />Specular는 점단위에 의지 하지 않도록 작업<br />
  16. 16. Pixel Shader 1.4 = Phong Shading<br />우리에게 필요한 것은~!!<br />Normalize()<br />Pixel 단위 Normal 수치 선형 보간<br />Phong Shading은 Pixel Shader 2.0이상 부터 지원<br />
  17. 17. 목차<br />Shading<br />Base Rendering<br />Advanced Rendering<br />렌더링 관련 최적화<br />
  18. 18. Advanced Rendering<br />Environment Mapping<br /> - Sphere Mapping<br /> - Cube Mapping<br />Toon Shading<br />Edge Rendering<br />Rim Lighting<br />Glow<br />Fur Rendering<br />T&L에 있는 것 전부<br />NormalMap<br />T&L<br />Shader<br />
  19. 19. Sphere Mapping #1<br />
  20. 20. SphereMapping #2<br />카메라 시점<br />Vertex의 Normal<br />TEXTURETRANSFORMFLAGS<br /> - D3DTSS_TCI_CAMERASPACENORMAL<br /> - Normal (-1~1) -> UV (-1~1)<br />텍스쳐 행렬<br />- D3DTS_TEXTURE0<br /> - UV (-1~1) -> UV (0~1)<br /> x = ( (x) * 0.5 + 0.5 );<br /> y = ( -(y) * 0.5 + 0.5 );<br />0.0, 1.0<br />0.5, 1.5<br />0.7, 0.7<br />0.85, 0.15<br />0.0, 0.5<br />0.5, 0.75<br />0.35, 0.35<br />0.67, 0.67<br />1.0, 0.0<br />0.0, 0.0<br />0.5, 0.0<br />-1.0, 0.0<br />0.5, 0.5<br />0.75, 0.5<br />1.0, 0.5<br />0.0, 0.5<br />0.0, -1.0<br />0.5, 0.0<br />
  21. 21. Advanced Rendering<br />Environment Mapping<br /> - Sphere Mapping<br /> - Cube Mapping<br />Toon Shading<br />Edge Rendering<br />Rim Lighting<br />Glow<br />Fur Rendering<br />T&L에 있는 것 전부<br />NormalMap<br />T&L<br />Shader<br />
  22. 22. RimLight #1 ( SphereMapping )<br />
  23. 23. RimLight #2<br />
  24. 24. RimLight원리 ( T&L용 )<br />카메라 공간에서의 Normal 수치를 가지고 텍스쳐를 입힘<br />Sphere Mapping<br />Sphere Texture 를 조작<br />D3DTSS_COLOROP 는 D3DTOP_ADD 사용<br />
  25. 25. Advanced Rendering<br />Environment Mapping<br /> - Sphere Mapping<br /> - Cube Mapping<br />Toon Shading<br />Edge Rendering<br />Rim Lighting<br />Glow<br />Fur Rendering<br />T&L에 있는 것 전부<br />NormalMap<br />T&L<br />Shader<br />
  26. 26. Cube Mapping #1<br />
  27. 27. Cube Mapping #2<br />Sphere Mapping과 비교<br />왜곡 현상이 덜 하다.<br />여러방향에서Environment mapping을 볼수 있다.<br />(하지만 시각적으로 인지하기 어려움.)<br />
  28. 28. Cube Mapping #3<br />Sphere Mapping과 비교<br />
  29. 29. Cube Mapping #4<br />Sphere Mapping과 비교<br />왜곡 현상이 덜 하다.<br />여러방향에서Environment mapping을 볼수 있다.<br />Texture Size가 크다.<br />실시간으로 만드는 것이 비교적 쉽다.<br />(하지만 시각적으로 인지하기 어려움.)<br />
  30. 30. Cube Mapping #5<br />실시간 생성<br />
  31. 31. Advanced Rendering<br />Environment Mapping<br /> - Sphere Mapping<br /> - Cube Mapping<br />Toon Shading<br />Edge Rendering<br />Rim Lighting<br />Glow<br />Fur Rendering<br />T&L에 있는 것 전부<br />NormalMap<br />T&L<br />Shader<br />
  32. 32. Toon Shading #1<br />Light 방향<br />Vertex의 Normal<br />TEXTURETRANSFORMFLAGS<br /> - D3DTSS_TCI_CAMERASPACENORMAL<br />텍스쳐 행렬<br /> - D3DTS_TEXTURE0<br />
  33. 33. Toon Shading #2<br />
  34. 34. Toon Shading #3<br />T&L의 Texture방식의 Feature<br /> - Shading 용 텍스쳐로 여러 느낌가능.<br /> - Diffuse Color를 Phong Shading 비슷하게 할 수 있음.<br /> - Phong Shading느낌의Specular는 불가능<br /> - Line이 곡선이 아닌 직선으로 생김<br />
  35. 35. Advanced Rendering<br />Environment Mapping<br /> - Sphere Mapping<br /> - Cube Mapping<br />Toon Shading<br />Edge Rendering<br />Rim Lighting<br />Glow<br />Fur Rendering<br />T&L에 있는 것 전부<br />NormalMap<br />T&L<br />Shader<br />
  36. 36. Edge Rendering #1<br />종류<br />One Pixel 짜리 선 생성<br />메쉬 내부에서 선 생성<br />메쉬 외부에서 생성되는 외각선<br />Pixel Shader를 사용하여 Pixel에 기입<br />
  37. 37. Edge Rendering #2<br />One Pixel 선 생성<br />메쉬 내부에서 선 생성<br />(Silhouette Edge Rendering)<br />Sphere Mapping 응용<br />RimLight와 반대되는 Image를 사용함.<br />WIREFRAME Render<br />Z bias<br />Anti-Aliasing<br />
  38. 38. Edge Rendering #3<br />Surface Angle Silhouetting<br />
  39. 39. Edge Rendering #4<br />메쉬 외부에서 선 생성<br />Normal 방향으로 스케일된Mesh를 Render<br />미리 계산된 Normal Mesh를 생성<br />Mesh 생성시 정점을 Merge 시켜줌<br />
  40. 40. Edge Rendering #5<br />NormalMesh를 그대로 사용할 경우 문제점<br />같은 위치에 있는 점이지만 Merge 되어 있지 않은 상태<br />(노멀값이 다른 상태)<br />
  41. 41. Edge Rendering #6<br />Pixel Shader를 이용<br />Laplician Filter<br /> - ColorBuffer<br /> - Z Buffer<br /> - Normalmap<br />
  42. 42. Advanced Rendering<br />Environment Mapping<br /> - Sphere Mapping<br /> - Cube Mapping<br />Toon Shading<br />Edge Rendering<br />Rim Lighting<br />Glow<br />Fur Rendering<br />T&L에 있는 것 전부<br />NormalMap<br />T&L<br />Shader<br />
  43. 43. Glow #1<br />좌우로 늘린 후 상하로 늘린다.<br />GPU부하와 Quality<br />Texture Size<br />Pixel Move Count<br />- 512<br />- 3칸<br />
  44. 44. Glow #2<br />
  45. 45. Glow #3<br />
  46. 46. Advanced Rendering<br />Environment Mapping<br /> - Sphere Mapping<br /> - Cube Mapping<br />Toon Shading<br />Edge Rendering<br />Rim Lighting<br />Glow<br />Fur Rendering<br />T&L에 있는 것 전부<br />NormalMap<br />T&L<br />Shader<br />
  47. 47. Fur Rendering #1<br />구현 방법<br />예제) 완다와 거상<br />ALPHA TEST<br />여러층의Mesh<br />
  48. 48. Fur Rendering #2<br />단점<br />면을 평평한 각도로 보면 어색함이 표시<br />추가 Rendering 필요.<br />값 비싼 Alpha Test 필요<br />
  49. 49. Advanced Rendering<br />Environment Mapping<br /> - Sphere Mapping<br /> - Cube Mapping<br />Toon Shading<br />Edge Rendering<br />Rim Lighting<br />Glow<br />Fur Rendering<br />T&L에 있는 것 전부<br />NormalMap<br />T&L<br />Shader<br />
  50. 50. NormalMap #1<br />Use Shader<br />High Quality<br />Graphic Card의 가격하락과 성능향상<br /> ( Pixel Shader지원 카드 대중화 )<br />Specular하나만으로도 충분한 효과 발휘<br />
  51. 51. NormalMap #2<br />
  52. 52. Advanced Rendering<br />Environment Mapping<br /> - Sphere Mapping<br /> - Cube Mapping<br />Toon Shading<br />Edge Rendering<br />Rim Lighting<br />Glow<br />Fur Rendering<br />T&L에 있는 것 전부<br />NormalMap<br />메르메르에서 쓰이는 연마효과<br />T&L<br />Shader<br />
  53. 53. 메르메르에서 쓰이는 연마효과<br />이미지의 조합으로 연마효과를 만듬.<br />Ambient 수치를 변경<br />Specular수치 변경<br />특정 Texture를 흐르게 작업.<br />(Flow Texture)<br />
  54. 54. 연마효과(Flow Texture 셋팅방법)<br />RenderTarget을 이용하여 Flow Texture 2장을 <br />대칭되게 움직여 랜덤한 이미지 생성<br />새로 생성한 이미지를 Sphere Mapping과 같은 원리로 작업.<br />컬러도 customizing 가능하도록 작업.<br />
  55. 55. 목차<br />Shading<br />Base Rendering<br />Advanced Rendering<br />렌더링 관련 최적화<br />
  56. 56. 렌더링 관련 최적화<br />DIP Calls ( DrawIndexedPrimitive )<br />VB Change<br />Texture Changes<br />State Changes sets<br />DrawPrimitiveUP<br />Alpha Tex<br />Index Buffer<br />( < 500DIP )<br />( < 500 )<br />( < 200 )<br />( < 200 )<br />
  57. 57. 속도 향상을 위한 텍스쳐 제작<br />Texture는 가능하다면 1장으로 해결<br />( 단점 - 제작시간이 오래 걸림. )<br />Texture 사이즈를 최대한 작게 제작<br />DDS 포맷 사용<br />기술적으로 Texture를 합치는 기능을 만들어 준다.<br />옵션에 Texture 사이즈 변경 기능 추가<br />그래픽 팀<br />프로그램 팀<br />
  58. 58. DDS 구조 (DXT1)<br />(1Pixel)ARGB = 32Bit = 4Byte<br />1<br />0<br />1<br />3<br />0<br />2<br />1<br />2<br />0<br />0<br />1<br />3<br />(16Pixel) 4Byte * 16 = 64Byte<br />1<br />3<br />1<br />2<br />최고<br />최저<br />보간<br />보간<br />최고와 최저 수치의 Color를 얻어옵니다.<br />(1Pixel)RGB = 16Bit = 2Byte<br />(최고,최저Pixel) 2Byte * 2 = 4Byte<br />4Byte(Color) + 4Byte(Index) =<br />8Byte 사용 (16Pixel)<br />각 Pixel에 Index사용으로 2Bit를 할당합니다.<br />2Bit는 0, 1, 2, 3으로 4개의 값을 가질수 있습니다.<br />(16Pixel) 2Bit * 16 = 32Bit -> 4Byte<br />
  59. 59. DDS 사용 예<br />Opaque Texture<br /> - DXT1<br />Hard Alpha Texture<br /> - DXT1, DXT3<br />Soft Alpha Texture<br /> - DXT5<br />
  60. 60. 이름을 사용한 Alpha 구별<br />Opaque Texture<br /> - 기존 이름을 사용한다.<br />Hard Alpha Texture<br /> - 이름 뒤에 _a 를 추가로 붙인다. ( DXT5 예외 )<br />Soft Alpha Texture<br /> - 이름 뒤에 _a, _a1, _a2 를 추가로 붙인다.<br /> - DXT5 일 경우만 적용<br />
  61. 61. 왜 SoftAlpha는 a, a1, a2 으로 나눴을까?<br />AlphaTest를 쓰면 OK<br />하지만….<br />
  62. 62. Alpha Texture의 위험성<br />남발 할 경우 느리다.<br />
  63. 63. Q & A<br />
  64. 64. 감사합니다<br />궁금하신 부분이 있으시다면!!<br />

×