이번 시간에는 카메라를 이동시킬 수 있는 기능을 구현해보자. 현재 우리의 프레임워크에서는 카메라의 좌표와 방향이 고정되어있는데, 이를 보다 유동적으로 동작할 수 있도록 수정해보자. (사실 이 내용은 예전에 내가 블로그에서 다룬 적이 있는 내용이기도 하다. 참조) 스크린에 나타나는 물체의 위치는 물체와 카메라의 상대적 위치관계에 의해 결정되는 것을 알 수 있다. (2D 카메라의 경우부터 생각해보면 쉽다. 카메라가 위로 움직이면 물체는 아래로 움직인다) 때문에 카메라의 실제 좌표를 파이프라인 상에서 자유롭게 움직이게 하는 대신, 카메라를 고정시켜 두고 물체들이 카메라의 움직임에 맞추어 상대적으로 이동하게 만드는 방법을 사용할 수 있다. (이렇게 하는 가장 큰 이유는 파이프라인에서 카메라의 좌표는 0,0,0이..
시작에 앞서 지금까지 구축한 파이프라인을 한 번 살펴보자. 정점이 처리되며 거쳐가는 공간은 위와 같다. homogeneous coordinates와 ndc space로의 변환은 지난 글에서 다루었던 내용이다. 파이프라인의 세부적인 프로세스들을 살펴보면 다음과 같다. 정점을 나눠 vertex shader를 거치고 triangle assembly로 삼각형들로 만든 후, 카메라 방향에 의한 culling을 처리하고, geometry shader를 거치고 나서 persepctive division 및 screen transform을 처리하고, triangle rasterization, z-buffering을 처리한 후 pixel shader를 처리하고 최종적으로 스크린에 렌더링한다. 여기서 잠시 한 가지 문제를..
Projection matrix(투영 행렬)은 아주 중요하고 아주 널리 다루어지지만 완벽하게 이해하기 까다로운 내용이다. 본 학습에서는 이를 최대한 완벽하게 이해할 수 있도록 다뤄보겠다. 본 학습에서 구현하고자 하는 기능은 화면 ratio 조절, fov 조절이다. 그리고 이 기능들을 추가하기 위한 더 나은 frustum을 사용한 projection 방법을 적용할 것이다. (Frustum이 뭔지는 잠시 뒤에서 다루겠다) 그리고 이 Frustum을 사용한 projection 방법은 정점에 Projection matrix를 곱하는 과정을 통해 이루어지는데, 우리는 이 과정에 필요한 이 projection matrix를 구하는 과정을 살펴볼 것이다. 우리의 프레임워크에서는 현재로써는 focal plane(Fru..
크기 4짜리 벡터와 4x4 행렬을 우리 프레임워크가 지원가능하도록 만들어보자. 더 자세히 들어가기 전에, 우리의 프레임워크는 row vector(가로로 긴 형태의 벡터)를 기본값으로 한다는 걸 예전 글에서도 언급한 적 있다. (DirectX 또한 row vector를 기본값으로 한다 - https://nicoschertler.wordpress.com/2012/01/27/directx-and-matrices/) 때문에 행렬-벡터 연산 또한 이에 맞추어 계산된디. (실제로 아래 코드에서 .Translation() 함수를 살펴보면 우리가 흔히 아는 변환행렬의 꼴을 transpose한 모습, 즉 tx ty tz가 행렬 아랫부분에 위치하고 있음을 알 수 있다.) 왜 4x4를 지원해야 하는가에 대한 설명은 잠시 뒤..
물체가 질감에 따라 다르게 보이는 이유는 무엇일까? 질감에 따라 표면의 울퉁불퉁한 정도가 다르고, 때문에 빛이 표면에서 반사되는 방향이 표면 자체의 방향과 일치하지 않기 때문이다. 이번 포스트에서는 이러한 질감을 구현하기 위해 물체의 Diffuse와 Specular한 정도에 따라서 빛이 적절한 수준으로 퍼지게 만들어 보다 현실적인 그래픽을 그려보겠다. 구현에 앞서 한가지 질문을 던져보겠다. 반짝거리는 금속과 같은 물체에 보이는 "광"은 왜 나타나는 것일까? 빛이 물체의 표면에 맞고 반사되어 카메라(관찰자)를 향해 맞는다면 그 부분이 더 밝게 보이기 때문에 광이 보이는 것이다. 이를 컴퓨터그래픽스에서는 어떻게 구현해야 할까? 단순히 어떤 빛이 물체의 표면 위의 점 A에 맞고 튕겨나온 반사광이 카메라가 위치..
오늘은 phong shading, 정확히는 per-pixel lighting을 살펴보자. phong shading은 per-pixel lighting에 추가적으로 다른 개념들이 사용된 셰이딩 방법이지만, 일단은 편의를 위해 phong shading이라고 표현하겠다. 지난번 글에서 우리의 파이프라인의 point light에 한가지 문제가 있음을 언급했다. 이 사진을 보면 이해가 빠르다. 바로 빛이 거리의 영향을 받지 않는 문제이다. 그러나 우리는 분명 지난 시간에 거리에 따른 빛의 명암을 구현했는데, 이게 무슨 일일까? 물체를 기울여보면 그 문제의 원인에 대해 대략 감을 잡을 수 있다. 우리가 빛과 물체의 거리를 측정할 때는 정점을 기준으로 하고 있다. 그리고 정점과 정점 사이의 공간에 대해서는 두 정점에..
Directional light로는 표현할 수 없는 상황들이 게임 속에는 다수 존재한다. 빛과 물체의 상대적인 위치에 따라 물체에 가해지는 명암이 달라지는 경우 특히 그러한데, 방 안에 전구가 있고 그 전구를 기점으로 물체가 빙글빙글 돌아갈 때의 명암을 생각하면 쉽다. 또한 빛과 물체의 거리와 상관없이 빛의 세기가 일정한 directional light와는 다르게, 먼 물체일 수 록 더 어둡게 표현하고 싶다면 다른 형태의 빛이 필요하다. 이런 상황들에서 사용할 수 있는 게 바로 point light 이다. 상대적인 위치에 따라 명암을 동적으로 계산할 뿐만 아니라, 거리에 따라 빛이 감소(dropoff)하기도 한다. 이는 1/(거리)^2 에 비례한 형태로 나타나는데, 이때 명암을 단순히 1/x^2로 설정해..
Gouraud shading에 대해 알아보자. Gouraud shading은 flat shading과 다르게 폴리곤 별로 색상 하나를 지정해주는 방식의 shading이 아니라 모든 폴리곤들에 대해 색을 interpolate 시켜서 부드러운 명암 효과를 줄 수 있다. 이를 시각적으로 쉽게 알아보기 위해서는 구 오브젝트에 셰이딩을 적용시켜보는 게 가장 직관적인데, 이를 위해 우선 구를 제작해보자. 구형 오브젝트를 만드는 방법은 여러가지가 있지만 이번 글에서는 위도와 경도를 이용한 방법을 사용하겠다. 이 방법을 사용해 일단 모든 정점들을 생성하고 (격자의 교점) 그 정점들이 생성하는 모든 폴리곤들을 점과 맵핑해 생성한 후 위 뚜껑과 아래 뚜껑을 제작하면 구 생성이 종료된다. 이를 구현하기 위해 우리는 z축(꼭..
