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