SlideShare a Scribd company logo
1 of 21
Chapter 15. Blueprint Rendering and “Sketchy Drawings” GPU Gems 2 http://cafe.naver.com/shader 임용균 (guardin@naver.com)
Introduction image-space non-photorealistic rendering Blueprint rendering Sketchy drawing
Basic Principles To preserve images of intermediate renderings of the scene’s geometry To implement an edge enhancement technique To apply depth sprite rendering
Intermediate Rendering Results 3D Geometry를 texture들에 렌더링하여2D 데이터로 나타내는 것을 Intermediate Rendering Results 라고 한다. (G-Buffer) scene buffer, normal buffer, z-buffer Intermediate Rendering Results를 한번 생성하고 뒤이은 렌더링 패스들에서 그것들을 이용한다.
Edge Enhancement image-space edge enhancement technique siluette, border, crease edge normal buffer와 depth buffer의 불연속성으로 edge들을 검출한다.  주위 텍셀을샘플링하여 불연속성을 검사할 수 있다. 검출된 edge들을 텍스쳐에렌더링 하여 edge map을 생성한다.
Edge Enhancement
Depth Sprite Rendering depth testing을 위한 추가적인 z-value를 제공하는 2D이미지를 depth sprite라 한다. z-value를 포함하고 있는 고해상도 텍스쳐에렌더링 한다. fragment z-value를 변경하는 특수화된 fragment shader를 적용한다. 일반적인 depth-test 과정 후에 렌더링 한다. depth sprite rendering은 image-based rendering의 가시성을 올바르게 해결한다.
Blueprint Rendering 3D geometry의 visible/non-visible edge들을 추출한다. visible edge는 카메라에 직접적으로 보이는 edge이다. non-visible edge는 3D geometry에 가려지는 edge이다. edge들을 추출하기 위해서 depth-peeling technique과 depth enhancement technique을 합쳐서 사용했다. visible/non-visible edge들을 frame buffer에서 합친다.
Sketchy Rendering visually important edges and surface colors 3D geometry non-uniformly using uncertainty
Sketchy Rendering intermediate rendering results를 이용하여 edge와 surface color를 표현한다. sketch에 image-space의무작위 값을 적용(uncertainty value)하여 이 텍스쳐들이 일정하지 않도록(non-uniformly) 한다.
Edges and Color Patches edge enhancement technique을 이용하여 edge map을 생성한다.  3D geometry의 surface color를 강조되는 색으로 텍스쳐에 평면적으로 렌더링한다. (cartoon-like style) 이 텍스쳐를shade map이라고 부른다.
Applying Uncertainty 프레임과 프레임 사이의 일치성(coherence)을 위하여 uncertainty value를 나타내는 추가적인 텍스쳐가 필요하다.  (perlin noise) noise texture는 offset texture로 사용되며 edge, shade map을 교란(perturbation)시킨다. uncertainty value값의 정도를 결정하기 위해 2x2 행렬을 사용한다.
Applying Uncertainty sketchiness effect의 효과를 향상시키기 위해서 edge map과 shade map의 perturbation 정도를 다르게 적용한다. offs = turbulence(s, t);  offt = turbulence(1 - s, 1 - t);
Adjusting Depth 특히 uncertainty가 적용되었을때 original geometry의 z-values는 안쪽 지역에 존재 하지 않을 수 있다. 외부 지역의 original geometry에z-values가 존재하지 않을 수 있다. 장면의 다른 오브젝트들과 올바르게 상호작용하지 못 한다. edge map perturbation과 shade map perturbation을 적용한 값중 작은 depth값 depth map에 적용한다.
Variations of Sketchy Rendering Roughened Profiles and Color Transitions (a) (b) Repeated Edges (c)
Controlling Uncertainty image-space에서 “swim” 문제가 나타난다.(shower-door effect) 이 문제를 극복하기 위해서는? uncertainty value를 조절할 필요가 있다. uncertainty value를 측정하기 위해 geometric properties를 유지한다. 외부 지역의 uncertainty value를 적어도 3D geometry에 가깝게 유지한다.
Preserving Geometric Properties uncertainty value를 계산하기 위해 surface position, normals, curvature(뒤틀림) 정보를 보존해 놓는다. G-Buffer에 추가로 geometric properties를 렌더링 한다. 화면에 정렬된 quad texture에 기록되며 텍스쳐 좌표 (s, t)로 geometric properties에 접근 가능하다. uncertainty value를 계산할 때 parameters로 이용한다. f: (s, t) <- (s', t') f (s, t) = p(s, t, g(s, t)),
Enlarging the Geometry mesh의 각각의 vertex들을 object space에서 normal 방향으로 약간 이동(shifting)하면 된다. 단 surface들이 모두 연결되어 있어야 하고 공유되는 vertex들은 interpolated normal값을 가져야 한다. 3D geometry를 확장함으로써 안쪽 지역뿐 아니라 바깥쪽 지역도(원본 이미지의 근처) geometric properties를 렌더링 할 수 있다. 안쪽 지역은 3d geometry의 경계를 넘어서 스케치 될 수 있고 바깥쪽 지역은 안쪽 지역을 뚫을수 있다.
Reducing the Shower-door Effect texture에 확장된 3D geometry의 object-space position을 렌더링 한다. -> g(s, t) g(s, t)를 기반으로 p()를 이용하여 왜곡된 텍스쳐 좌표인 f(s, t)를 계산할 수 있다. f(s, t) = p(s, t, g(s, t)) (perturbation) Fedge(s, t)와 Fshade(s, t)를 다른 행렬들을 이용하여 계산한다.
Sketchy Rendering
Conclusion

More Related Content

Similar to Gpu Gems 2 Chapter 15 Sketchy Rendering

이미지프로세싱
이미지프로세싱이미지프로세싱
이미지프로세싱일규 최
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환Yggdrasil610
 
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌민웅 이
 
2015.12.10 defferd renderring_
2015.12.10 defferd renderring_2015.12.10 defferd renderring_
2015.12.10 defferd renderring_재현 최
 
247 deview 2013 이미지 분석 - 민재식
247 deview 2013 이미지 분석 - 민재식247 deview 2013 이미지 분석 - 민재식
247 deview 2013 이미지 분석 - 민재식NAVER D2
 
111118 ch 4_basic image manipulation_web
111118 ch 4_basic image manipulation_web111118 ch 4_basic image manipulation_web
111118 ch 4_basic image manipulation_webCARROTCG
 
실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬현찬 양
 
Rendering realistic Ice objects
Rendering realistic Ice objectsRendering realistic Ice objects
Rendering realistic Ice objectsyong gyun im
 

Similar to Gpu Gems 2 Chapter 15 Sketchy Rendering (10)

이미지프로세싱
이미지프로세싱이미지프로세싱
이미지프로세싱
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환
 
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
 
2015.12.10 defferd renderring_
2015.12.10 defferd renderring_2015.12.10 defferd renderring_
2015.12.10 defferd renderring_
 
Color Control
Color ControlColor Control
Color Control
 
247 deview 2013 이미지 분석 - 민재식
247 deview 2013 이미지 분석 - 민재식247 deview 2013 이미지 분석 - 민재식
247 deview 2013 이미지 분석 - 민재식
 
111118 ch 4_basic image manipulation_web
111118 ch 4_basic image manipulation_web111118 ch 4_basic image manipulation_web
111118 ch 4_basic image manipulation_web
 
김문기
김문기김문기
김문기
 
실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬
 
Rendering realistic Ice objects
Rendering realistic Ice objectsRendering realistic Ice objects
Rendering realistic Ice objects
 

More from yong gyun im

More from yong gyun im (6)

Fast skin shading
Fast skin shadingFast skin shading
Fast skin shading
 
Fur rendering
Fur renderingFur rendering
Fur rendering
 
Sumie rendering
Sumie renderingSumie rendering
Sumie rendering
 
Inferred Lighting
Inferred LightingInferred Lighting
Inferred Lighting
 
Gpu Gems 1 Chapter 6
Gpu Gems 1 Chapter 6Gpu Gems 1 Chapter 6
Gpu Gems 1 Chapter 6
 
Shaderstudy Motion Blur
Shaderstudy Motion BlurShaderstudy Motion Blur
Shaderstudy Motion Blur
 

Gpu Gems 2 Chapter 15 Sketchy Rendering

  • 1. Chapter 15. Blueprint Rendering and “Sketchy Drawings” GPU Gems 2 http://cafe.naver.com/shader 임용균 (guardin@naver.com)
  • 2. Introduction image-space non-photorealistic rendering Blueprint rendering Sketchy drawing
  • 3. Basic Principles To preserve images of intermediate renderings of the scene’s geometry To implement an edge enhancement technique To apply depth sprite rendering
  • 4. Intermediate Rendering Results 3D Geometry를 texture들에 렌더링하여2D 데이터로 나타내는 것을 Intermediate Rendering Results 라고 한다. (G-Buffer) scene buffer, normal buffer, z-buffer Intermediate Rendering Results를 한번 생성하고 뒤이은 렌더링 패스들에서 그것들을 이용한다.
  • 5. Edge Enhancement image-space edge enhancement technique siluette, border, crease edge normal buffer와 depth buffer의 불연속성으로 edge들을 검출한다. 주위 텍셀을샘플링하여 불연속성을 검사할 수 있다. 검출된 edge들을 텍스쳐에렌더링 하여 edge map을 생성한다.
  • 7. Depth Sprite Rendering depth testing을 위한 추가적인 z-value를 제공하는 2D이미지를 depth sprite라 한다. z-value를 포함하고 있는 고해상도 텍스쳐에렌더링 한다. fragment z-value를 변경하는 특수화된 fragment shader를 적용한다. 일반적인 depth-test 과정 후에 렌더링 한다. depth sprite rendering은 image-based rendering의 가시성을 올바르게 해결한다.
  • 8. Blueprint Rendering 3D geometry의 visible/non-visible edge들을 추출한다. visible edge는 카메라에 직접적으로 보이는 edge이다. non-visible edge는 3D geometry에 가려지는 edge이다. edge들을 추출하기 위해서 depth-peeling technique과 depth enhancement technique을 합쳐서 사용했다. visible/non-visible edge들을 frame buffer에서 합친다.
  • 9. Sketchy Rendering visually important edges and surface colors 3D geometry non-uniformly using uncertainty
  • 10. Sketchy Rendering intermediate rendering results를 이용하여 edge와 surface color를 표현한다. sketch에 image-space의무작위 값을 적용(uncertainty value)하여 이 텍스쳐들이 일정하지 않도록(non-uniformly) 한다.
  • 11. Edges and Color Patches edge enhancement technique을 이용하여 edge map을 생성한다. 3D geometry의 surface color를 강조되는 색으로 텍스쳐에 평면적으로 렌더링한다. (cartoon-like style) 이 텍스쳐를shade map이라고 부른다.
  • 12. Applying Uncertainty 프레임과 프레임 사이의 일치성(coherence)을 위하여 uncertainty value를 나타내는 추가적인 텍스쳐가 필요하다. (perlin noise) noise texture는 offset texture로 사용되며 edge, shade map을 교란(perturbation)시킨다. uncertainty value값의 정도를 결정하기 위해 2x2 행렬을 사용한다.
  • 13. Applying Uncertainty sketchiness effect의 효과를 향상시키기 위해서 edge map과 shade map의 perturbation 정도를 다르게 적용한다. offs = turbulence(s, t); offt = turbulence(1 - s, 1 - t);
  • 14. Adjusting Depth 특히 uncertainty가 적용되었을때 original geometry의 z-values는 안쪽 지역에 존재 하지 않을 수 있다. 외부 지역의 original geometry에z-values가 존재하지 않을 수 있다. 장면의 다른 오브젝트들과 올바르게 상호작용하지 못 한다. edge map perturbation과 shade map perturbation을 적용한 값중 작은 depth값 depth map에 적용한다.
  • 15. Variations of Sketchy Rendering Roughened Profiles and Color Transitions (a) (b) Repeated Edges (c)
  • 16. Controlling Uncertainty image-space에서 “swim” 문제가 나타난다.(shower-door effect) 이 문제를 극복하기 위해서는? uncertainty value를 조절할 필요가 있다. uncertainty value를 측정하기 위해 geometric properties를 유지한다. 외부 지역의 uncertainty value를 적어도 3D geometry에 가깝게 유지한다.
  • 17. Preserving Geometric Properties uncertainty value를 계산하기 위해 surface position, normals, curvature(뒤틀림) 정보를 보존해 놓는다. G-Buffer에 추가로 geometric properties를 렌더링 한다. 화면에 정렬된 quad texture에 기록되며 텍스쳐 좌표 (s, t)로 geometric properties에 접근 가능하다. uncertainty value를 계산할 때 parameters로 이용한다. f: (s, t) <- (s', t') f (s, t) = p(s, t, g(s, t)),
  • 18. Enlarging the Geometry mesh의 각각의 vertex들을 object space에서 normal 방향으로 약간 이동(shifting)하면 된다. 단 surface들이 모두 연결되어 있어야 하고 공유되는 vertex들은 interpolated normal값을 가져야 한다. 3D geometry를 확장함으로써 안쪽 지역뿐 아니라 바깥쪽 지역도(원본 이미지의 근처) geometric properties를 렌더링 할 수 있다. 안쪽 지역은 3d geometry의 경계를 넘어서 스케치 될 수 있고 바깥쪽 지역은 안쪽 지역을 뚫을수 있다.
  • 19. Reducing the Shower-door Effect texture에 확장된 3D geometry의 object-space position을 렌더링 한다. -> g(s, t) g(s, t)를 기반으로 p()를 이용하여 왜곡된 텍스쳐 좌표인 f(s, t)를 계산할 수 있다. f(s, t) = p(s, t, g(s, t)) (perturbation) Fedge(s, t)와 Fshade(s, t)를 다른 행렬들을 이용하여 계산한다.