성대아싸의 멍충한 프로그래밍

프로젝트/초간단3d엔진 20112011. 12. 29. 15:25

7. Camera

지금까지는 로컬좌표계 <-> 월드좌표계 하는 위주로 살펴봤스빈당

이게 왜 중요하냐면

각 모델들은 각자의 로컬좌표계에서 데이터를 가지다가

월드에 박혀버릴테죠 ,

아니면 어떤 모델을 기준으로 월드가 어떻게 보이는가?

도 해결할수도 있습니다.

우선 점들의 좌표변환이 이제 3d에서 어떻게 이루어지는지 보겠스빈당

(이미지: 구글링)

이제 월드가 대충 어케 동작하는지 알았으니 Camera를 만듭시다.

Camera 는 Obj3d 객체를 상속합니다.

(Camera.js)

카메라는 어떤 물체를 바라봅니다.

이때 카메라가 바라볼때 월드의 좌표계산은

로컬 -> 월드 의 계산이죠

이를 모델뷰 변환 이라고 합니다.

그런데 여기서는 at 방향 벡터가 반대군요 이는 좌표 변환의 용이성을 위해서 그런겁니다.

카메라로 세상을 보면 원근감이 나타나죠

실제로 세상의 좌표를 우리가 보는 것은

3차원 -> 2차원으로 옮기는 겁니다. 투영을 하는거죠 여기서는

이는 그 유명한 절두체(Frustum) 공간을 만들고 이를 압축시키는 과정 입니디.

절두체 공간안에 있는 물체를 강제로 정육면체 공간으로 바꿔버립니다. 그러면

그 안에 있던 모든 점들은 가까이 있던 점은 더 벌어지고 하겠죠

이것이 원근감을 느끼는 원리입니디

자세한 원리는

절두체를 45도 각도의 절두체로 변환한뒤 정육면체 공간으로 바꿔버립니다.

이것들은 전부 4 by 4 행렬로 표현 가능합니다

정말 행렬은 강력한 툴이져

깊이값에 따른 왜곡 계산과 스케일변환 ( 압축 ) 에다가 삐뚤어진것을 똑바로 잡아주는 쉬어링 변환이 연속으로 배치됩니다.

전부 계산되면

엄충 복잡하져... 근데 대충 흐름만 알아두고

그냥 저 행렬을 사용만 합시다. 너무 복잡하잔아여

l: left , r: right, b: bottom , t: top, n:near , f: far

입니다.

그런데 카메라에서 left 좌표라든지 right 좌표, top 좌표 bottom 좌표를 입력하는것을 본적이 없스빈당

대개 시야각을 정해주고 가까운 초점거리와 가장 먼 초점거리를 지정하죠

FOV (Field Of View) : 시야각

솔직히 어떤 보고싶은 영역을 사각형으로 지정하는것은 좀 그렇죠

정확한지도 잘 모르고 얼마나 넓은 시야로 보고 있는지 모르지 않습니까?

그래서 (FOV , aspect, near, far) 네가지 변수를 가지고

(left, right, bottim, top, near, far) 를 추출해낼수 있어야 댑니다.

이 그림이 개념이 잘 나와 있네요

위에 모든것들을 반영하여

Mat4 에다가 기능추가를 하겠습니다.

카메라 때문에 추가된 부분을 찾아보세요

/*
 * @author: SKKUASSA
 */

ASSA3d.Mat4 = function(
		n11,n12,n13,n14,
		n21,n22,n23,n24,
		n31,n32,n33,n34,
		n41,n42,n43,n44
	){
	// 단위행렬
	this.set(
		n11||1, n12||0, n13||0, n14||0,
		n21||0, n22||1, n23||0, n24||0,
		n31||0, n32||0, n33||1, n34||0,
		n41||0, n42||0, n43||0, n44||1
	);
};

ASSA3d.Mat4.prototype = {
	
	constructor: ASSA3d.Mat4,
	
	set: function(
		n11,n12,n13,n14,
		n21,n22,n23,n24,
		n31,n32,n33,n34,
		n41,n42,n43,n44
	){
		this.n11=n11; this.n12=n12; this.n13=n13; this.n14=n14; 
		this.n21=n21; this.n22=n22; this.n23=n23; this.n24=n24; 
		this.n31=n31; this.n32=n32; this.n33=n33; this.n34=n34; 
		this.n41=n41; this.n42=n42; this.n43=n43; this.n44=n44; 
		return this;
	},
	
	// Mat4 프로토타입에 추가하기	
	setIdentity: function(){
		return this.set(
			1,0,0,0,
			0,1,0,0,
			0,0,1,0,
			0,0,0,1
		);
	},
	setTranslation: function( x, y, z ){
		return this.set(
			1,0,0,x,
			0,1,0,y,
			0,0,1,z,
			0,0,0,1
		);
	},
	/*
	 * Orthogonal Matrix Transpose
	 * 로컬 좌표계 좌표 에서 
	 * 월드 좌표계로 좌표 회전 변환 
	 * 이동변환과 맞물려서 계산된다.
	 * 
	 *  u: x 축 , _hv
	 *  v: y 축 , up
	 *  n: z 축 , at
	 */
	setOrthogonalT: function( u, v, n ){
		return this.set(
			u.x, v.x, n.x, 0,
			u.y, v.y, n.y, 0,
			u.z, v.z, n.z, 0,
			0, 0, 0, 1
		);
	},
	/*
	 * 원점이 일치할 때 
	 * 월드 좌표계의 좌표가 로컬좌표계에서
	 * 어떻게 보이는가
	 */
	setOrthogonal: function( u, v, n ){
		return this.set(
			u.x, u.y, u.z, 0,
			v.x, v.y, v.z, 0,
			n.x, n.y, n.z, 0,
			0, 0, 0, 1
		);
	},
	/*
	 * in Mat4
	 * 카메라 세팅 추가
	 */
	setModelview: function( camera ){
				
		var u = camera._hv, v = camera.up, n = camera.at;
		var cop=  camera.position;
		
		return this.set(
			-u.x, -u.y, -u.z, +u.x*cop.x + u.y*cop.y + u.z*cop.z,
			 v.x,  v.y,  v.z, -v.x*cop.x - v.y*cop.y - v.z*cop.z,
			-n.x, -n.y, -n.z, +n.x*cop.x + n.y*cop.y + n.z*cop.z,
			0,0,0,1
		);
	},
	setFrustum: function( l, r, b, t, n, f){
		return this.set(
			2*n/(r-l), 0 , (r+l)/(r-l), 0,
			0, 2*n/(t-b), (t+b)/(t-b), 0,
			0,0,(n+f)/(n-f), 2*n*f/(n-f),
			0,0,-1,0
			
		);
	},
	setPerspective: function( camera ){
		
		var n = camera.near;
		var f = camera.far;
		var t = n * Math.tan(camera.fov * Math.PI/360.0);
		var b = -t;
		var l = b * camera.aspect;
		var r = t * camera.aspect;
		
		return this.setFrustum(l,r,b,t,n,f);
		
	},
	
	mulVec4: function( v ){
		var vx = v.x, vy = v.y, vz = v.z, vw = v.w;
		
		v.x = this.n11*vx + this.n12*vy + this.n13*vz + this.n14*vw;
		v.y = this.n21*vx + this.n22*vy + this.n23*vz + this.n24*vw;
		v.z = this.n31*vx + this.n32*vy + this.n33*vz + this.n34*vw;
		v.w = this.n41*vx + this.n42*vy + this.n43*vz + this.n44*vw;
	
		return v;
	}
};

(Mat4.js)

저작자표시

'프로젝트 > 초간단3d엔진 2011' 카테고리의 다른 글

9. 행렬스택, 장면 그리고 렌더러 (1)	2011.12.29
8. 뷰포트 변환과 간단한 그리기 테스트 (1)	2011.12.29
7. Camera (0)	2011.12.29
6. Orthogonal Matrix와 로컬좌표계, 월드좌표계 (0)	2011.12.29
5. Matrix 4 by 4와 Vector 4 만들기 (0)	2011.12.29
4. 테스트용 html 정의와, 3차원 객체 기능 부가하기 (0)	2011.12.28

Posted by 멍충한아싸

Trackback 0 Comment 0

댓글을 달아 주세요

«이전 1 ··· 16 17 18 19 20 21 22 23 24 ··· 240 다음»

성대아싸의 멍충한 프로그래밍

7. Camera

'프로젝트 > 초간단3d엔진 2011' 카테고리의 다른 글

TRACKBACK

댓글을 달아 주세요

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

« » 2021.1
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31