SlideShare a Scribd company logo
1 of 20
깊이와 현실감
향상 시키기
  Han-byeol Jeon
깊이 버퍼
•   픽셀의 깊이값을 저장하는 버퍼.
•   쉽게 말해 Z축 데이터이다!
•   값이 클 수록 카메라에서 멀다.
•   깊이 버퍼가 없다면
    o 그리는 순서대로 그려질 것(페인터 알고리즘)
       • 원근감을 위해선 멀리있는 것 부터 그려야 함.
FBO 의사코드
WritePixel( x, y, z, color)
{
      // Depth가 더 작으면 앞에 있는거니깐 덮어씌움.
      If( DepthTestDisabled || z < DepthBuffer[x, y])
      {
              DepthBuffer[x, y] = z;
              ColorzBuffer[x, y] = color;
      }
}
깊이 버퍼 생성과 설정
• 프레임 버퍼 오브젝트(Frame Buffer Object) 생성
• 컬러 렌더 버퍼 생성
• 깊이 렌더 버퍼 생성
• 프레임 버퍼 오브젝트에 컬러 렌더 버퍼와 깊이 렌더 버퍼
  를 연결
• 깊이 테스트 활성화
• glClear시 GL_DEPTH_BUFFER_BIT 추가
Z Fighting
• 깊이 값이 거의 비슷할 때 발생.
• 해결방안
  o Near 평면을 원점에서 좀 멀리
  o Far 평면을 좀 가까이
  o 깊이 버퍼의 수 늘리기
      • Storage 생성시 24bit까지 줄 수 있음
  o …
  o 정밀도를 늘리던가
    스케일 공간을 늘리던가
파라메트릭 곡면
  삼각 분할
결과
왜 그냥 하얀색이야!
조명
법선 벡터
      Surface Normal
• 곡면의 한 점과 접하는 평면에 수직하는 노말 벡터

                      P = Evaluate( s, t )
                      U = Evaluate(s + ds, t) – p
                      V = Evaluate(s, t + dt) – p
                      N = Normalize( u x v )
법선 벡터는
       버텍스의 속성
• Color처럼.
• Position처럼.
• 따라서 정점을 카메라 뷰로 변환할 때 법선벡터도 포지션
  처럼 그 월드에 맞게 변환되어야 함.
• 근데.. 약간 다름.
법선 벡터 변환
• 기존의 행렬 변환으로는 불가능.
• 비 직교 변환 때문에.
  o 직교 변환이면 가능

• 법선 벡터 변환 공식
  o N’ = N * (M^(-1))^T   직교   비직교
• ES1에서는 알아서 해줌.
• ES2에서는 알아서 해야함.
수학은 여기까지!




  조명으로 가보자
Ambient(주변광)
• 걍 색깔
• 물체의 고유 색깔..이라고 할까?
Diffuse(확산광)
•   햇빛을 받는 각에 따라 반사하는 빛의 양이 다름
•   Diffuse Color =
           LightIntensity
           *
           MaterialColor
           *
           df
•   Df = max( 0, dot(N, L) )
•   햇빛을 정면으로 받으면
    더 밝고,
    햇빛을 엇나가게 받으면
    덜 밝다.
L vector를 구하는 방법
• L = normalize( 빛의 위치 – 버텍스 위치 )
• 빛이 무한히 멀리 있으면?
• L = normalize( 빛의 위치 )
Specular(경면광)
• 눈에 들어오는 빛의 양(카메라의 위치 반영)




• H = normalize( L + E)
• Sf = [max(0, dot(N, H))]^shininess
• E가 무산히 멀리 떨어져 있을 경우 -> E = [0, 0, 1]
감이 안오신다구요?
조명 달아보기
• 노말 벡터를 버텍스 속성에 추가
• Specular(경면광) 속성 설정
    o Specular 색상
    o Shininess

•   모델 뷰에 조명 위치 설정
•   모델-뷰 변환 설정
•   투상 행렬 설정
•   Diffuse 속성 설정.
•   버텍스 정보 넘기기
    o 위치, 법선 벡터

• Draw
셰이더
•   셰이더의 타입들( 209p )
•   attribute vec4 Position;
•   attribute vec4 SourceColor;
•   varying vec4 DestinationColor;
•   uniform mat4 Projection;
•   uniform mat4 Modelview;
•   void main(void)
•   {
•     DestinationColor = SourceColor;
•     gl_Position = Projection * Modelview * Position;
•   }
여기부터는 책으로..

More Related Content

What's hot

노말 맵핑(Normal mapping)
노말 맵핑(Normal mapping)노말 맵핑(Normal mapping)
노말 맵핑(Normal mapping)QooJuice
 
Cascade Shadow Mapping
Cascade Shadow MappingCascade Shadow Mapping
Cascade Shadow MappingSukwoo Lee
 
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기동석 김
 
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌민웅 이
 
리얼타임 렌더링 - 조명 입문편 -
리얼타임 렌더링 - 조명  입문편 -리얼타임 렌더링 - 조명  입문편 -
리얼타임 렌더링 - 조명 입문편 -Sukwoo Lee
 
3D 컴퓨터 그래픽스 기초
3D 컴퓨터 그래픽스 기초3D 컴퓨터 그래픽스 기초
3D 컴퓨터 그래픽스 기초Seung Joon Choi
 
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)민웅 이
 
언차티드4 테크아트 파트2 mipFog
언차티드4 테크아트 파트2 mipFog언차티드4 테크아트 파트2 mipFog
언차티드4 테크아트 파트2 mipFogDae Hyek KIM
 
마른 하늘에 날구름 넣기
 마른 하늘에 날구름 넣기 마른 하늘에 날구름 넣기
마른 하늘에 날구름 넣기ajin kim
 
Gamma and linear color-space
Gamma and linear color-spaceGamma and linear color-space
Gamma and linear color-space민웅 이
 
[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1MoonLightMS
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환Yggdrasil610
 
자동 동적 3차원 입체시각
자동 동적 3차원 입체시각자동 동적 3차원 입체시각
자동 동적 3차원 입체시각민웅 이
 
물리 기반 셰이더의 이해
물리 기반 셰이더의 이해물리 기반 셰이더의 이해
물리 기반 셰이더의 이해tartist
 
제노블레이도 2 ray marching을사용한 구름 표현
제노블레이도 2 ray marching을사용한 구름 표현제노블레이도 2 ray marching을사용한 구름 표현
제노블레이도 2 ray marching을사용한 구름 표현민웅 이
 
2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링Sukwoo Lee
 

What's hot (19)

노말 맵핑(Normal mapping)
노말 맵핑(Normal mapping)노말 맵핑(Normal mapping)
노말 맵핑(Normal mapping)
 
Cascade Shadow Mapping
Cascade Shadow MappingCascade Shadow Mapping
Cascade Shadow Mapping
 
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
[Ndc13]Ndc 2013 김동석:UDK로 물리기반 셰이더 만들기
 
Ssao
SsaoSsao
Ssao
 
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
니시카와젠지의 3 d게임 팬을 위한「gravity daze」그래픽스 강좌
 
리얼타임 렌더링 - 조명 입문편 -
리얼타임 렌더링 - 조명  입문편 -리얼타임 렌더링 - 조명  입문편 -
리얼타임 렌더링 - 조명 입문편 -
 
3D 컴퓨터 그래픽스 기초
3D 컴퓨터 그래픽스 기초3D 컴퓨터 그래픽스 기초
3D 컴퓨터 그래픽스 기초
 
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
 
Uncharted4 part1
Uncharted4 part1Uncharted4 part1
Uncharted4 part1
 
언차티드4 테크아트 파트2 mipFog
언차티드4 테크아트 파트2 mipFog언차티드4 테크아트 파트2 mipFog
언차티드4 테크아트 파트2 mipFog
 
마른 하늘에 날구름 넣기
 마른 하늘에 날구름 넣기 마른 하늘에 날구름 넣기
마른 하늘에 날구름 넣기
 
Gamma and linear color-space
Gamma and linear color-spaceGamma and linear color-space
Gamma and linear color-space
 
[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1
 
카툰 렌더링
카툰 렌더링카툰 렌더링
카툰 렌더링
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환
 
자동 동적 3차원 입체시각
자동 동적 3차원 입체시각자동 동적 3차원 입체시각
자동 동적 3차원 입체시각
 
물리 기반 셰이더의 이해
물리 기반 셰이더의 이해물리 기반 셰이더의 이해
물리 기반 셰이더의 이해
 
제노블레이도 2 ray marching을사용한 구름 표현
제노블레이도 2 ray marching을사용한 구름 표현제노블레이도 2 ray marching을사용한 구름 표현
제노블레이도 2 ray marching을사용한 구름 표현
 
2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링
 

Similar to I phone3d programming - Chap04:깊이와 현실감 향상시키기

Depth buffershadow
Depth buffershadowDepth buffershadow
Depth buffershadowMoonLightMS
 
Voxel based game_optimazation_relelase
Voxel based game_optimazation_relelaseVoxel based game_optimazation_relelase
Voxel based game_optimazation_relelaseYEONG-CHEON YOU
 
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법강 민우
 
알기쉬운 Variational autoencoder
알기쉬운 Variational autoencoder알기쉬운 Variational autoencoder
알기쉬운 Variational autoencoder홍배 김
 
카툰 렌더링
카툰 렌더링카툰 렌더링
카툰 렌더링samagu0030
 
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)해강
 
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들Dae Hyek KIM
 
실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬현찬 양
 

Similar to I phone3d programming - Chap04:깊이와 현실감 향상시키기 (8)

Depth buffershadow
Depth buffershadowDepth buffershadow
Depth buffershadow
 
Voxel based game_optimazation_relelase
Voxel based game_optimazation_relelaseVoxel based game_optimazation_relelase
Voxel based game_optimazation_relelase
 
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
 
알기쉬운 Variational autoencoder
알기쉬운 Variational autoencoder알기쉬운 Variational autoencoder
알기쉬운 Variational autoencoder
 
카툰 렌더링
카툰 렌더링카툰 렌더링
카툰 렌더링
 
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
[Shader study] the rendering technology of lords of the fallen - 발표메모(14.06.23)
 
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
 
실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬
 

I phone3d programming - Chap04:깊이와 현실감 향상시키기

  • 2. 깊이 버퍼 • 픽셀의 깊이값을 저장하는 버퍼. • 쉽게 말해 Z축 데이터이다! • 값이 클 수록 카메라에서 멀다. • 깊이 버퍼가 없다면 o 그리는 순서대로 그려질 것(페인터 알고리즘) • 원근감을 위해선 멀리있는 것 부터 그려야 함.
  • 3. FBO 의사코드 WritePixel( x, y, z, color) { // Depth가 더 작으면 앞에 있는거니깐 덮어씌움. If( DepthTestDisabled || z < DepthBuffer[x, y]) { DepthBuffer[x, y] = z; ColorzBuffer[x, y] = color; } }
  • 4. 깊이 버퍼 생성과 설정 • 프레임 버퍼 오브젝트(Frame Buffer Object) 생성 • 컬러 렌더 버퍼 생성 • 깊이 렌더 버퍼 생성 • 프레임 버퍼 오브젝트에 컬러 렌더 버퍼와 깊이 렌더 버퍼 를 연결 • 깊이 테스트 활성화 • glClear시 GL_DEPTH_BUFFER_BIT 추가
  • 5. Z Fighting • 깊이 값이 거의 비슷할 때 발생. • 해결방안 o Near 평면을 원점에서 좀 멀리 o Far 평면을 좀 가까이 o 깊이 버퍼의 수 늘리기 • Storage 생성시 24bit까지 줄 수 있음 o … o 정밀도를 늘리던가 스케일 공간을 늘리던가
  • 6. 파라메트릭 곡면 삼각 분할
  • 9. 법선 벡터 Surface Normal • 곡면의 한 점과 접하는 평면에 수직하는 노말 벡터 P = Evaluate( s, t ) U = Evaluate(s + ds, t) – p V = Evaluate(s, t + dt) – p N = Normalize( u x v )
  • 10. 법선 벡터는 버텍스의 속성 • Color처럼. • Position처럼. • 따라서 정점을 카메라 뷰로 변환할 때 법선벡터도 포지션 처럼 그 월드에 맞게 변환되어야 함. • 근데.. 약간 다름.
  • 11. 법선 벡터 변환 • 기존의 행렬 변환으로는 불가능. • 비 직교 변환 때문에. o 직교 변환이면 가능 • 법선 벡터 변환 공식 o N’ = N * (M^(-1))^T 직교 비직교 • ES1에서는 알아서 해줌. • ES2에서는 알아서 해야함.
  • 12. 수학은 여기까지! 조명으로 가보자
  • 13. Ambient(주변광) • 걍 색깔 • 물체의 고유 색깔..이라고 할까?
  • 14. Diffuse(확산광) • 햇빛을 받는 각에 따라 반사하는 빛의 양이 다름 • Diffuse Color = LightIntensity * MaterialColor * df • Df = max( 0, dot(N, L) ) • 햇빛을 정면으로 받으면 더 밝고, 햇빛을 엇나가게 받으면 덜 밝다.
  • 15. L vector를 구하는 방법 • L = normalize( 빛의 위치 – 버텍스 위치 ) • 빛이 무한히 멀리 있으면? • L = normalize( 빛의 위치 )
  • 16. Specular(경면광) • 눈에 들어오는 빛의 양(카메라의 위치 반영) • H = normalize( L + E) • Sf = [max(0, dot(N, H))]^shininess • E가 무산히 멀리 떨어져 있을 경우 -> E = [0, 0, 1]
  • 18. 조명 달아보기 • 노말 벡터를 버텍스 속성에 추가 • Specular(경면광) 속성 설정 o Specular 색상 o Shininess • 모델 뷰에 조명 위치 설정 • 모델-뷰 변환 설정 • 투상 행렬 설정 • Diffuse 속성 설정. • 버텍스 정보 넘기기 o 위치, 법선 벡터 • Draw
  • 19. 셰이더 • 셰이더의 타입들( 209p ) • attribute vec4 Position; • attribute vec4 SourceColor; • varying vec4 DestinationColor; • uniform mat4 Projection; • uniform mat4 Modelview; • void main(void) • { • DestinationColor = SourceColor; • gl_Position = Projection * Modelview * Position; • }