앞선 글에서 정육면체 폴리곤 색상들이 어딘가 이상한 형태로 렌더링되는 것을 살펴보았다. 그 이유는 우리가 코드에서 폴리곤들에게 색상을 입힐 때 폴리곤의 위치와 관계없이 무조건 일정한 순서로 입혔기 때문인데, // Game.cpp ... (생략) void Game::ComposeFrame() { const Color colors[12] = { Colors::White, Colors::Blue, Colors::Cyan, Colors::Gray, Colors::Green, Colors::Magenta, Colors::LightGray, Colors::Red, Colors::Yellow, Colors::White, Colors::Blue, Colors::Cyan }; // 현재로썬 큐브의 변을 그릴 방법이 없으..
Occlusion은 앞에 있는 물체가 뒤에 있는 물체를 가리는 것을 말한다. 이 Occlusion이 있어야 우리는 어떤 공간을 쉽게 인식할 수 있다. Occlusion이 없이 지금처럼 wireframe rendering만 한다면 위 그림에서 빨간 큐브와 하얀 큐브 중 어떤게 더 앞에 있는 지를 알 수 없을 것이다. 때문에 Occlusion이 포함된 Solid rendering은 굉장히 중요하다. 이를 구현하기 위해 우리는 폴리곤을 사용한다. (모든 다각형은 여러 개의 작은 삼각형들로 분해할 수 있으므로, 컴퓨터그래픽스에서는 삼각형들로 모든 물체들을 구상해 그려낸다.) 폴리곤의 각 verticies들로부터 선들을 그린 후 그 사이의 픽셀들의 색을 채우는 방식으로 어떤 면을 그릴 수 있다. 이렇게 폴리곤이 ..
현재 우리는 3차원 오브젝트를 orthographic한 방식으로 projection하고 있다. 즉 z축에 의한 원근을 무시한 채 그리고 있다. z축이 영향을 주게 만들어보자. (Perspective projection) perspective를 구현해보기 전에 우리의 시각이 현실에서 어떻게 작동하는지를 이해해보자. 우리는 왜 멀리 있는 물체를 더 "작다"고 인식할까? pinhole camera를 사용해 직관적으로 이해할 수 있다. 만약 pinhole이 없이 그냥 물체로부터 바로 센서로 빛이 들어오게 하면 어떨까? 물체에서 반사된 여러 광선들이 전부 다 센서로 들어오게 되므로 센서 전체에 골고루 빛이 퍼져 상이 뿌옇게 보일 것이다. pinhole은 이 중 특정 광선들만을 통과시킴으로써 상을 뚜렷하게 만들어준..
2차원 회전 행렬을 먼저 살펴보자. 여기서 주의해야 할 점은, 위 사진은 xA 꼴로 곱하고 있기 때문에 Ax꼴일때의 회전행렬을 transpose 해주어야 한다는 것이다. (블로그 글을 살펴보면 행렬이 다르다는 것을 알 수 있다. 이는 블로그 글은 Ax꼴이라 행렬이 transpose 되어서 그렇다. 보통 수학에서는 행렬곱을 Ax꼴로 표현하므로 주의할 것.) 또 한가지 주의할 점은 2D그래픽스에서는 x, y 좌표계의 양의 방향을 x 오른쪽, y 아랫쪽 으로 나타내기 때문에 크기가 양인 세타가 주어졌을 때회전의 방향이 반시계 방향이 아닌 시계 방향이다. (참고) 단 3D 회전에서 z축 기준 회전일 경우에는 x양이 오른쪽, y양이 위쪽 동일하므로 반시계 방향 그대로이다. 2차원 회전행렬은 3차원에서 z축을 회전..
참고: 벡터 * 행렬 순으로 곱셈을 하는 방법 (x, y) * ((a, b), (c, d)) = ((x, y)(a, c), (x, y)(b, d)) 3차원 공간을 나타내보자. 일단 벡터3 클래스가 필요하다. Vec3 클래스를 정의할 때 Vec2를 상속받아 정의하자. 단 모든 연산 관련 함수는 오버라이딩 해야한다. #pragma once #include #include "ChiliMath.h" #include "Vec2.h" template class _Vec3 : public _Vec2 { public: _Vec3() = default; _Vec3( T x,T y,T z ) : _Vec2( x,y ), z( z ) {} template explicit operator _Vec3() const { retu..
본 학습의 목표는 PlanetChili의 프레임워크나 WinAPI, Dx를 이해하는 것보다는 그래픽스의 기반이 되는 지식들을 이해하는 데 있다. 때문에 코드를 세세히 살펴보기보다는 핵심이 되는 이론적 개념들을 이해하고 정리하는 것에 집중할 것이다. 프레임워크에 대한 대략적인 설명은 여기에서 확인 가능하다. 또한 본 프레임워크에서는 행렬을 곱할 때 통상적인 Ax 순서 (행렬 * 벡터)가 아닌 xA(벡터 * 행렬)을 사용한다. 이는 Dx11이 해당 방식을 사용하기 때문이며, 때문에 v * A * B * C의 경우 (((vA)B)*C) 순서로 처리된다. 프레임워크의 실제 사용 모습을 아래 별 그리기 예제와 함께 살펴보자. (세부적인 내용은 굳이 이해할 필요X) /**************************..
3D Graphics 카테고리의 글들은 제가 컴퓨터그래픽스를 공부하며 쌓은 지식들을 정리해 둔 일종의 개인 학습 노트입니다. 학습 기록 원본은 제 깃허브 레포지토리에서 확인하실 수 있으며, 티스토리 사이트보다는 제 깃헙에서 확인하시는 걸 권장드립니다. 학습의 목표는 다음과 같습니다. 3차원 그래픽스의 기반이 되는 지식들을 이해하기 하드웨어 렌더링 파이프라인에서 내부적으로 동작하는 로직을 CPU상에서 돌아가는 코드로 구현해보며 그 작동원리를 더 깊게 이해하기 때문에 본 레포지토리에서는 D3D를 이용한 GPU 프로그래밍이나 WinAPI 같은 부가적인 요소에 집중하기보다는, 컴퓨터그래픽스의 이론과 원리 그 자체를 학습하는 것에 초점을 두고 있습니다. 개인 학습 기록인 만큼 설명이 다소 함축적일 수 있다는 점 ..
