https://docs.microsoft.com/en-us/previous-versions//ff729719(v=vs.85)?redirectedfrom=MSDN

위 내용을 참고하여 정리한 내용입니다.

Tutorial2 : 삼각형 그리기

📌 Elements of a Triangle (삼각형의 요소)

GPU가 삼각형을 렌더링하기 위해서는 삼각형의 꼭짓점 위치 3개가 주어져야 한다.

정점 버퍼에 꼭짓점 3개를 저장하면 된다. 그렇다면 각 정점을 버퍼에 저장하기 위해서는 몇 바이트가 필요한지 알아보자. 먼저 정점 레이아웃에 대한 이해가 필요하다.

📌 Input Layout

정점은 위치, 노멀, 색상, 텍스처 좌표(텍스처 매핑에 이용) 등을 가지고 있다. 정점 레이아웃은 이러한 속성들이 메모리에 어떻게 위치하는지를 나타낸다. (각 속성들이 어떤 데이터 타입을 이용하는지, 각 속성의 사이즈는 얼마인지, 저장된 순서 등)

각 속성은 다른 타입을 가지고 있기 때문에 정점은 일반적으로 구조체로 표현한다. 정점의 사이즈는 구조체의 사이즈로 쉽게 얻을 수 있다.

이 튜토리얼에서는 꼭짓점의 위치에 대해서만 설명한다.
따라서 XMFLOAT3 타입만 이용하여 정점 구조체를 정의한다. XMFLOAT3는 float 3개의 벡터이다.

struct SimpleVertex
{
	XMFLOAT3 Pos; // Position
};

이걸 GPU에 공급하기 위해서는 input layout을 알고 있어야 한다. (GPU는 이게 정점에 대한 정보라는걸 모른다)

Direct3D 11에서 input layout은 GPU가 이해할 수 있는 형태로 정점 구조체를 설명하는 객체이다. 각 정점 속성들은 D3D11_INPUT_ELEMENT_DESC 구조체를 이용하여 설명될 수 있다.
어플리케이션은 D3D11_INPUT_ELEMENT_DESC 배열을 하나 이상 정의한 다음, 전체 정점을 서술하는 input layout 객체를 만들기 위해 사용한다.

D3D11_INPUT_ELEMENT_DESC에 대해 좀 더 자세히 알아보자.

🔎 D3D11_INPUT_ELEMENT_DESC

• SemanticName

: Semantic name은 요소의 성격이나 목적을 설명하는 문자열이다. 여기선 POSITION이다.

• SemanticIndex

: 정점은 동일한 성질의 여러 속성을 가질 수 있다. 예를 들어 색상이 2개 일수도 있고 텍스처 좌표가 2개 일 수도 있다. 이 때 같은 COLOR 이라는 Semantic name을 쓰면서 Semantic index를 0과 1로 설정해준다.

• Format

: 요소에 사용할 데이터 타입을 정의한다. 예를 들어 DXGI_FORMAT_R32G32B32_FLOAT은 3개의 32비트 float을 가지고 있어 총 12byte가 된다.

• InputSlot

: Direct3D 11에서 GPU에 최대 16개의 정점 버퍼가 동시에 공급될 수 있다. 각 정점 버퍼는 0부터 15까지의 숫자를 가진다. InputSlot이 이 숫자를 이용해서 뭘 가져올건지 알려주는 역할을 한다.

• AlignedByteOffset

: AlignedByteOffeset은 GPU에 메모리 상에서 정점 버퍼가 시작되는 위치를 알려준다.

• InputSlotClass

: 여기엔 일반적으로 D3D11_INPUT_PER_VERTEX_DATA를 쓴다.

• InstanceDataStepRate

: 인스턴스화에 사용됩니다. 튜토리얼에서는 인스턴스화를 사용하지 0으로 설정한다.

이제 input layout을 만들기 위해 D3D11_INPUT_ELEMENT_DESC 배열을 만들 수 있다.

// Define the input layout
D3D11_INPUT_ELEMENT_DESC layout[] =
{
    { "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0 },  
};
UINT numElements = ARRAYSIZE(layout);

📌 Vertex Layout

vetex shader랑 vertex layout이 밀접하게 연관되어 있다. vertex layout을 만들려면 vertext shader의 input signature이 필요하기 때문이다.

D3DX11CompileFromFile에서 반환되는 ID3DBlob 객체를 이용하여 정점 셰이더의 input signature을 나타내는 이진 데이터를 검색한다.

우리가 이 데이터를 가지고 있으면 우리는 ID3D11Device::CreateInputLayout()를 불러서 vertext layout 객체를 만들 수 있고, ID3D11DeviceContext::IASetInputLayout()로 활성화 시킬 수 있다.

// Create the input layout
if( FAILED( g_pd3dDevice->CreateInputLayout( layout, numElements, pVSBlob->GetBufferPointer(), 
        pVSBlob->GetBufferSize(), &g_pVertexLayout ) ) )
    return FALSE;
// Set the input layout
g_pImmediateContext->IASetInputLayout( g_pVertexLayout );

📌 Creating Vertex Buffer

초기화할동안 해야할 일 중 하나는 정점 데이터를 저장한 정점 버퍼를 만드는 것이다.
Direct3D 11에서 정점 버퍼를 만들려면 D3D11_BUFFER_DESC, D3D11_SUBRESOURCE_DATA 두가지 구조체를 만들고 ID3D11Device::CreateBuffer()를 호출해야 한다.

• D3D11_BUFFER_DESC : 정점 버퍼 객체를 서술한다.
• D3D11_SUBRESOURCE_DATA : 정점 버퍼에 복사될 실제 데이터를 서술한다.

정점 버퍼에 복사될 데이터는 아래 코드에서 SimpleVertex에 저장된 3개의 정점들이다.
정점 버퍼가 생성된 후 ID3D11DeviceContext::IASetVertexBuffers()를 호출하여 디바이스에 바인딩 할 수 있다.

🔎 vertex buffer 만들기

// Create vertex buffer
SimpleVertex vertices[] =
{
    XMFLOAT3( 0.0f, 0.5f, 0.5f ),
    XMFLOAT3( 0.5f, -0.5f, 0.5f ),
    XMFLOAT3( -0.5f, -0.5f, 0.5f ),
};
D3D11_BUFFER_DESC bd;
ZeroMemory( &bd, sizeof(bd) );
bd.Usage = D3D11_USAGE_DEFAULT;
bd.ByteWidth = sizeof( SimpleVertex ) * 3;
bd.BindFlags = D3D11_BIND_VERTEX_BUFFER;
bd.CPUAccessFlags = 0;
bd.MiscFlags = 0;
D3D11_SUBRESOURCE_DATA InitData; 
ZeroMemory( &InitData, sizeof(InitData) );
InitData.pSysMem = vertices;
if( FAILED( g_pd3dDevice->CreateBuffer( &bd, &InitData, &g_pVertexBuffer ) ) )
    return FALSE;

// Set vertex buffer
UINT stride = sizeof( SimpleVertex );
UINT offset = 0;
g_pImmediateContext->IASetVertexBuffers( 0, 1, &g_pVertexBuffer, &stride, &offset );

📌 Primitive Topology

Primitive Topology 는 GPU가 삼각형을 렌더링하는데 필요한 3개의 정점을 얻는 방법을 말한다.

만약 삼각형을 2개 그리고 싶다면 GPU에 6개의 정점을 보내면 되고 이 때 topology를 삼각형 리스트(triangle list)라고 부른다. 삼각형 리스트는 이해가 쉽지만, 비효율적이다. 여러개의 삼각형이 정점을 공유하는 경우 한 정점이 여러번 저장된다.

A B C C B D

위 그림처럼 삼각형이 두개의 꼭짓점을 공유한다면 먼저 그려진 삼각형에서 두 개의 정점을 사용하고 정점 버퍼에서 한개만 가져온다면 훨씬 효율적일 것이다. 이렇게 할 때 topology는 triangle strip이다.
triangle strip을 이용하면 두번째 삼각형을 그릴 때 이전 삼각형에서 마지막 두 정점을 가져오고, 정점 버퍼에서 그 다음 정점을 하나 가져온다.

A B C D

위 도형의 경우 아래와 같이 전달된다.

A B C D E

두번째, 네번째, 여섯번째 삼각형 등은 반시계방향으로 정점이 주어진다.
(기본적으론 시계)

🔎 삼각형 리스트를 이용하여 topology 설정

// Set primitive topology
g_pImmediateContext->IASetPrimitiveTopology( D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST );

📌 Rendering the Triangle

이제 삼각형을 렌더링해보자. 렌더링을 위해 정점 셰이더와 픽셀 셰이더 두개를 만들었다. 정점 셰이더는 삼각형의 정점들을 올바른 위치로 변환하는 역할을 한다. 픽셀 셰이더는 삼각형의 각 픽셀의 색상을 계산한다. (이건 다음 튜토리얼에서)

이러한 셰이더들을 사용하려면 각각 ID3D11DeviceContext::VSSetShader(), ID3D11DeviceContext::PSSetShader()을 호출하면 된다.

마지막으로 ID3D11DeviceContext::Draw()를 호출하여 현재 정점 버퍼, 정점 레이아웃, primitive topology 등을 사용하여 GPU가 렌더링하도록 하면 된다.

Draw()의 첫 번째 매개변수는 GPU로 보낼 정점 수이고, 두 번째 매개변수는 보낼 첫번째 정점의 인덱스이다. 우리는 하나의 삼각형을 렌더링하고 정점 버퍼의 처음에서부터 하기 때문에 각각 3, 0 에 해당한다.

// Render a triangle 
g_pImmediateContext->VSSetShader( g_pVertexShader, NULL, 0 );
g_pImmediateContext->PSSetShader( g_pPixelShader, NULL, 0 );
g_pImmediateContext->Draw( 3, 0 );