[DX] 그리드(Grid) 그리기, 그리드 공식

🎨 그리드(Grid) 그리기

가로 정점의 수는 "칸 수 + 1"으로 볼 수있고, 한칸을 그릴 때 필요한 인덱스의 개수는 "칸 수 x 6" 이 된다.

전체 그리드의 정점의 개수(Vertex Count)는 (width+1) * (height+1) 이 될 것이고,

전체 그리드의 인덱스의 개수(Index Count)는 (width)* (height) * 6이다.

 

각 칸의 규칙을 따라가면 그리드를 그릴 때 필요한 사각형의 인덱스를 구성하는 공식을 찾을 수 있다.

 

우선 3x3 그리드에서 중앙에 있는 사각형의 인덱스 정보는 아래와 같다.

왼쪽 하단: 5  / 오른쪽 하단: 6 / 왼쪽 상단: 9 / 오른쪽 상단: 10

이제 해당 결과를 바탕으로 가로(width) = 3, 세로(height) = 3인 그리드에서 한 칸의 사각형을 구성하는 공식은 아래와 같다.

왼쪽 하단: (width + 1) * y + x
왼쪽 상단: (width + 1) * (y + 1) + x
오른쪽 하단: (width + 1) * y + (x + 1)
오른쪽 상단: (width + 1) * (y + 1) + (x + 1)

 

검토)

왼쪽 하단 공식 (width + 1) * y + x에 가운데 사각형 정보(왼쪽 하단 x,y : 1,1)를 대입해보면,

(3 + 1) * 1 + 1 = 4 * 1 + 1 = 5

왼쪽 하단 인덱스인 5 결과가 정상적으로 나온것을 확인할 수 있었다.

 

해당 수식을 이용하여 for문을 사용한 그리드 그리는 코드는 아래와 같다.

UINT index = 0;
for (UINT y = 0; y < height; y++)
{
	for (UINT x = 0; x < width; x++)
	{
		indices[index + 0] = (width + 1) * y + x;
		indices[index + 1] = (width + 1) * (y + 1) + x;
		indices[index + 2] = (width + 1) * y + (x + 1);
		indices[index + 3] = (width + 1) * y + (x + 1);
		indices[index + 4] = (width + 1) * (y + 1) + x;
		indices[index + 5] = (width + 1) * (y + 1) + (x + 1);
        
		index += 6;
	}
}

---

[ 실행 결과 ]