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

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

Tutorial7 : 텍스처 매핑

📌 Texture Mapping

텍스처 매핑은 2D 이미지를 3D 형상에 투영하는 것을 말한다. 그리기 위해서는 표면의 점들이 2D 이미지와 어떻게 대응되는지 명시해야 한다.

이번 튜토리얼의 예시에서는 정점에 의해 텍스처 좌표가 결정되며, 보간된다.

📌 Creating a Shader Resource from the Texture and Sampler State

텍스처는 셰이더 리소스 뷰를 만드는 데 사용되는 2D 이미지이다.

hr = D3DX11CreateShaderResourceViewFromFile( g_pd3dDevice, L"seafloor.dds", NULL, NULL, 
         &g_pTextureRV, NULL );

셰이더가 필터링(filtering), addressing 등의 방식을 제어하는 sampler state를 만들어야 한다. 텍스쳐 addressing은 UV좌표가 0과 1 사이가 아닌 다른 값이 되었을 때, 어떻게 표현될 것인 지를 결정하는 옵션이다.
sampler state를 생성하기 위해 D3D11Device::CreateSamplerState()를 호출한다.

    // Create the sample state
    D3D11_SAMPLER_DESC sampDesc;
    ZeroMemory( &sampDesc, sizeof(sampDesc) );
    sampDesc.Filter = D3D11_FILTER_MIN_MAG_MIP_LINEAR;
    sampDesc.AddressU = D3D11_TEXTURE_ADDRESS_WRAP;
    sampDesc.AddressV = D3D11_TEXTURE_ADDRESS_WRAP;
    sampDesc.AddressW = D3D11_TEXTURE_ADDRESS_WRAP;
    sampDesc.ComparisonFunc = D3D11_COMPARISON_NEVER;
    sampDesc.MinLOD = 0;
    sampDesc.MaxLOD = D3D11_FLOAT32_MAX;
    hr = g_pd3dDevice->CreateSamplerState( &sampDesc, &g_pSamplerLinear );

📌 Defining the Coordinates (좌표계 정의하기)

이미지를 큐브에 매핑하기 전에 먼저 큐브의 각 정점에 텍스처 좌표를 정의해야 한다. 사용된 좌표계는 [0, 1]로 표준화 되었다. (텍스처의 왼쪽 상단 모서리는 (0,0), 오른쪽 하단 모서리는 (1,1))

먼저 정점을 정의할 때 텍스처 좌표를 포함시켜 주었다.

struct SimpleVertex
{
    XMFLOAT3 Pos;
    XMFLOAT2 Tex;
};

그런 다음 셰이더에 input layout도 업데이트하여 포함시켜주었다.

// Define the input layout
D3D11_INPUT_ELEMENT_DESC layout[] =
{
    { "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0 },
    { "TEXCOORD", 0, DXGI_FORMAT_R32G32_FLOAT, 0, 12, D3D11_INPUT_PER_VERTEX_DATA, 0 },
};

input layout이 변경되었으므로 해당 정점 셰이더 입력도 일치하도록 수정해야 한다.

struct VS_INPUT
{
    float4 Pos : POSITION;
    float2 Tex : TEXCOORD;
};

마지막으로 정점에 대응되는 텍스처 좌표를 입력해준다. 큐브의 각 꼭지점은 텍스처의 모서리에 해당한다. 이렇게 하면 각 꼭짓점이 (0,0) (0,1) (1,0) 또는 (1,1)을 좌표로 갖는 단순 매핑이 만들어집니다.

// Create vertex buffer
SimpleVertex vertices[] =
{
    { XMFLOAT3( -1.0f, 1.0f, -1.0f ), XMFLOAT2( 0.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, 1.0f, -1.0f ), XMFLOAT2( 1.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, 1.0f, 1.0f ), XMFLOAT2( 1.0f, 1.0f ) },
    { XMFLOAT3( -1.0f, 1.0f, 1.0f ), XMFLOAT2( 0.0f, 1.0f ) },

    { XMFLOAT3( -1.0f, -1.0f, -1.0f ), XMFLOAT2( 0.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, -1.0f, -1.0f ), XMFLOAT2( 1.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, -1.0f, 1.0f ), XMFLOAT2( 1.0f, 1.0f ) },
    { XMFLOAT3( -1.0f, -1.0f, 1.0f ), XMFLOAT2( 0.0f, 1.0f ) },

    { XMFLOAT3( -1.0f, -1.0f, 1.0f ), XMFLOAT2( 0.0f, 0.0f ) },
    { XMFLOAT3( -1.0f, -1.0f, -1.0f ), XMFLOAT2( 1.0f, 0.0f ) },
    { XMFLOAT3( -1.0f, 1.0f, -1.0f ), XMFLOAT2( 1.0f, 1.0f ) },
    { XMFLOAT3( -1.0f, 1.0f, 1.0f ), XMFLOAT2( 0.0f, 1.0f ) },

    { XMFLOAT3( 1.0f, -1.0f, 1.0f ), XMFLOAT2( 0.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, -1.0f, -1.0f ), XMFLOAT2( 1.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, 1.0f, -1.0f ), XMFLOAT2( 1.0f, 1.0f ) },
    { XMFLOAT3( 1.0f, 1.0f, 1.0f ), XMFLOAT2( 0.0f, 1.0f ) },

    { XMFLOAT3( -1.0f, -1.0f, -1.0f ), XMFLOAT2( 0.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, -1.0f, -1.0f ), XMFLOAT2( 1.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, 1.0f, -1.0f ), XMFLOAT2( 1.0f, 1.0f ) },
    { XMFLOAT3( -1.0f, 1.0f, -1.0f ), XMFLOAT2( 0.0f, 1.0f ) },

    { XMFLOAT3( -1.0f, -1.0f, 1.0f ), XMFLOAT2( 0.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, -1.0f, 1.0f ), XMFLOAT2( 1.0f, 0.0f ) },
    { XMFLOAT3( 1.0f, 1.0f, 1.0f ), XMFLOAT2( 1.0f, 1.0f ) },
    { XMFLOAT3( -1.0f, 1.0f, 1.0f ), XMFLOAT2( 0.0f, 1.0f ) },
};

📌 Bind Texture as Shader Resource (텍스처를 셰이더 리소스로 바인딩)

텍스처와 sampler state는 이전 튜토리얼에서 살펴본 Constant와 같은 객체이다. 셰이더가 사용하기 전에 ID3D11DeviceContext::PSSetSamplers(), ID3D11DeviceContext::PSSetShaderResources() 등을 호출해주어야 한다.

    g_pImmediateContext->PSSetShaderResources( 0, 1, &g_pTextureRV );
    g_pImmediateContext->PSSetSamplers( 0, 1, &g_pSamplerLinear );

이렇게 하면 셰이더에서 텍스처를 사용할 준비가 끝난다.

📌 Applying the Texture (텍스처 적용하기)

텍스처를 매핑하기 위해 픽셀 셰이더에서 texture lookup function을 호출한다. 2D 텍스처를 조회한 다음 샘플 색상을 반환한다.

아래 픽셀 셰이더는 이 함수를 호출하여 메시 색상(또는 머터리얼 색상)으로 곱한 다음 최종 색상을 출력한다.

• txDiffuse : 우리가 리소스뷰 g_pTextureRV를 바인딩할 때 전달된 텍스처를 저장하는 객체

// Pixel Shader
float4 PS( PS_INPUT input) : SV_Target
{
    return txDiffuse.Sample( samLinear, input.Tex ) * vMeshColor;
}

정점 셰이더를 통해 텍스처 좌표를 전달해야 한다.

// Vertex Shader
PS_INPUT VS( VS_INPUT input )
{
    PS_INPUT output = (PS_INPUT)0;
    output.Pos = mul( input.Pos, World );
    output.Pos = mul( output.Pos, View );
    output.Pos = mul( output.Pos, Projection );
    output.Tex = input.Tex;
        
    return output;
}

📌 Constant Buffers (상수 버퍼)

Direct3D 11에서 Constant Buffer를 사용하여 셰이더 상수(셰이더 변수)를 설정할 수 있다. Constant Buffer는 셰이더 상수를 업데이트하는데 필요한 bandwidth를 줄인다.

이전 튜토리얼에서는 하나의 Constant Buffer를 이용하여 필요한 모든 셰이더 상수를 보관했다. 그러나 Constant Buffer를 효율적으로 사용하는 가장 좋은 방법은 셰이더 변수를 업데이트 빈도에 따라 구성하는 것이다. 이를 통해 어플리케이션은 셰이더 상수를 업데이트 하는데 필요한 bandwidth를 최소화 할 수 있다.

예를 들어 이 튜토리얼에서는 상수를 세가지 구조로 그룹화 하였다.
하나는 모든 프레임에서 변경되는 변수, 다른 하나는 창 크기가 변경될 때만 변경되는 변수, 다른 하나는 처음 한 번 설정된 후 변경되지 않는 변수이다.

    cbuffer cbNeverChanges
    {
        matrix View;
    };
    
    cbuffer cbChangeOnResize
    {
        matrix Projection;
    };
    
    cbuffer cbChangesEveryFrame
    {
        matrix World;
        float4 vMeshColor;
    };

Constant Buffer를 사용하려면 각 버퍼에 대해 ID3D11Buffer 객체를 생성해야 한다. 그런 다음 ID3D11DeviceContext::UpdateSubresource()를 호출하여 필요한 경우 다른 상수 버퍼에 영향을 미치지 않고 각 상수 버퍼를 업데이트 할 수 있다.

    //
    // Update variables that change once per frame
    //
    CBChangesEveryFrame cb;
    cb.mWorld = XMMatrixTranspose( g_World );
    cb.vMeshColor = g_vMeshColor;
    g_pImmediateContext->UpdateSubresource( g_pCBChangesEveryFrame, 0, NULL, &cb, 0, 0 );