[DirectX11] Tutorial 33 - 불효과

Tutorial 33 - 불효과

원문 : http://www.rastertek.com/dx11tut33.html

이번 예제에서는 HLSL과 C++를 이용하여 DirectX 11에서 불 셰이더를 구현하는 법을 설명하겠습니다. 코드 베이스는 이전 튜토리얼에서 이어집니다.

DirectX에서 가장 현실적인 불 효과를 만드는 방법 중 하나는 노이즈 텍스쳐를 사용하는 것인데 이전의 물, 유리, 얼음에서 했던 것과 같이 텍스쳐의 샘플링 위치를 흩뜨려 놓게 합니다. 이전 것들과의 차이점은 바로 노이즈 텍스쳐를 수정하고 텍스쳐 좌표를 흩뜨려 놓는 방법이 다르다는 것입니다.

우선 아래 회색조의 노이즈 텍스쳐를 보겠습니다

이 노이즈 텍스쳐는 여러 그래픽 툴을 이용하여 절차적으로 생성할 수 있습니다. 기억해야 할 것은 불 처럼 보이는 노이즈 설정을 찾아내야 한다는 것입니다.

불 효과를 만들기 위해 필요한 두 번째 텍스쳐는 불의 색상으로 구성된 노이즈와 화염의 경계가 보이는 텍스쳐입니다. 일례로 아래 보이는 텍스쳐는 불의 색상이 포함된 펄린 노이즈와 작은 화염의 텍스쳐로 구성되어 있습니다. 텍스쳐의 중간 아래쯤을 보시면 불꽃심과 속불꽃 부분을 보실 수 있습니다.

마지막으로 투명도를 위한 알파 텍스쳐를 사용하여 최종 모습이 작은 불꽃처럼 보이게 할 것입니다. 텍스쳐의 모습이 적당히 그려져 있어도 흩뜨려진 샘플링 위치가 불꽃의 형태를 잘 만들어줄 것입니다.

세 가지 텍스쳐가 준비되었으니 셰이더가 어떻게 동작하는지 설명할 차례입니다. 가장 먼저 하는 것은 노이즈 텍스쳐를 가져다가 세 개의 서로 다른 텍스쳐를 만들어내는 것입니다. 이 세 텍스쳐들은 원본은 같지만 전부 다르게 스케일링됩니다. 이 스케일링된 것들은 단순히 원본 텍스쳐를 반복 나열하여 디테일한 텍스쳐를 만든 것이므로 옥타브라고 부릅니다. 아래 세 노이즈 텍스쳐들은 1배, 2배, 3배 스케일링된 것들입니다

또한 이 노이즈 텍스쳐들을 위쪽으로 스크롤시켜 불꽃이 위쪽으로 타로오르는 듯한 모양을 만들어낼 것입니다. 이 스크를 속도는 텍스쳐마다 다르게 설정할 것입니다. 결국에는 모든 노이즈 텍스쳐들이 혼합될 것이기 때문에 서로 다른 스킄롤 속도는 불꽃의 깊이를 더해줍니다.

다음 단계는 (0, 1) 범위의 값인 노이즈 텍스쳐들을 (-1, +1) 범위로 변환하는 것입니다. 이렇게 하면 일부 노이즈가 사라지게 하고 좀 더 불꽃 모양에 가깝게 되게 합니다. 예를 들어 앞서 보여드렸던 노이즈 텍스쳐를 다음과 같이 보일 것입니다

모든 노이즈 텍스쳐를 (-1, +1)범위로 만들면 각 텍스쳐의 x축과 y축을 왜곡시킬 수 있습니다. 물이나 유리, 얼음 셰이더에서 했던 것과 비슷하게 노이즈의 크기를 스케일링하여 노이즈 텍스쳐를 왜곡시키게 됩니다. 노이즈 텍스쳐가 왜곡되고 나면 세 노이즈 텍스쳐 전부를 혼합하여 최종 노이즈 텍스쳐 모양을 만듭니다.

기억해야 할 것은 여기서 사용하는 왜곡이 오로지 x축과 y축으로만 이루어지기 때문에 이전에 노말맵을 이용하여 했던 것과 같이 마치 샘플링 위치를 정하기 위한 룩업 테이블처럼 사용될 것입니다. z축은 2D 샘플링에서는 이용되지 않기 때문에 무시됩니다.

또한 세 노이즈 텍스쳐 모두 각 프레임마다 서로 다른 속도로 위쪽 스크롤되기 때문에 이것들을 혼합하게 되면 정말로 불꽃과 같이 흐르는 듯한 노이즈가 만들어진다는 것을 기억하시기 바랍니다.

그 다음 단계는 매우 중요한데, 바로 원본 불꽃 색상 텍스쳐를 흩뜨리는 것입니다. 물이나 유리, 얼음 셰이더에서는 노말맵을 사용하여 샘플링 위치를 바꾸었습니다. 하지만 불꽃 예제에서는 노이즈 텍스쳐를 그 용도로 사용할 것입니다. 그러나 그 전에 노이즈 자체의 샘플링 위치도 흩뜨려져야 할 것입니다. 왜곡 스케일과 여백 값을 사용하여 왜곡이 텍스쳐 위쪽에서는 더 크게 되고 아래로 갈수록 적게 일어나도록 할 것인데, 이렇게 하여 불꽃이 아래쪽은 굳건하고 위로 갈 수록 불꽃이 핥는 듯한 모양을 만들 것입니다. 다시 말해 노이즈 역시 텍스쳐 아래쪽부터 시작해 y축을 따라 올라가면서 위로 갈수록 더 큰 값으로 왜곡을 할 것입니다.

왜곡된 최종 노이즈 텍스쳐를 룩업 테이블처럼 사용하여 불꽃 색상 텍스쳐를 샘플링할 것입니다. 참고로 색상 텍스쳐를 샘플링할 때에는 Wrap 대신 Clamp를 사용하여 바닥쪽이 망가지지 않게 합니다. 왜곡된 노이즈 텍스쳐를 이용하여 샘플링된 불꽃 색상 텍스쳐는 다음과 같이 보일 것입니다

꽤 그럴듯하게 불타오르는 모양의 사각형이 있으니 더욱 불꽃같이 다듬어 보도록 하겠습니다. 이를 위해 알파 블렌딩을 켜고 앞서 만들었던 알파 텍스쳐를 사용할 것입니다. 흩뜨려 놓은 노이즈 텍스쳐를 사용하여 알파 텍스쳐를 샘플링하면 알파 텍스쳐를 더욱 타오르는 불꽃처럼 보이게 만들 수 있다는 것이 핵심입니다. 또한 샘플링할 때 wrap대신 clamp을 좌표에 사용하여 불꽃의 바닥 주위에서 텍스쳐의 위쪽을 사용하는 것을 방지해야 합니다. 흩뜨려 샘플링한 알파 텍스쳐를 적용하면 아래와 같은 결과를 얻을 수 있습니다

이펙트를 완성하기 위해 만들어낸 알파 값을 불꽃의 알파 채널에 사용하여 알파블렌딩으로 마무리될 수 있게 합니다

실제 움직이는 모습을 본다면 정말 현실적으로 보일 겁니다.

프레임워크에는 TextureShaderClass에 불꽃 효과 부분이 업데이트된 FireShaderClass가 추가되었습니다.

프레임워크

HLSL 불꽃 셰이더부터 코드를 살펴보도록 하겠습니다.

Fire_vs.hlsl

////////////////////////////////////////////////////////////////////////////////
// Filename: fire_vs.hlsl
////////////////////////////////////////////////////////////////////////////////
 
 
/////////////
// GLOBALS //
/////////////
cbuffer MatrixBuffer
{
    matrix worldMatrix;
    matrix viewMatrix;
    matrix projectionMatrix;
};
 
cbuffer NoiseBuffer
{
    float frameTime;
    float3 scrollSpeeds;
    float3 scales;
    float padding;
};
 
 
//////////////
// TYPEDEFS //
//////////////
struct VertexInputType
{
    float4 position : POSITION;
    float2 tex : TEXCOORD0;
};
 
struct PixelInputType
{
    float4 position : SV_POSITION;
    float2 tex : TEXCOORD0;
       float2 texCoords1 : TEXCOORD1;
    float2 texCoords2 : TEXCOORD2;
    float2 texCoords3 : TEXCOORD3;
};
 
 
////////////////////////////////////////////////////////////////////////////////
// Vertex Shader
////////////////////////////////////////////////////////////////////////////////
PixelInputType FireVertexShader(VertexInputType input)
{
    PixelInputType output;
    
 
    // 적절한 행렬 계산을 위해 위치 벡터를 4 단위로 변경합니다.
    input.position.w = 1.0f;
 
    // 월드, 뷰 및 투영 행렬에 대한 정점의 위치를 ​​계산합니다.
    output.position = mul(input.position, worldMatrix);
    output.position = mul(output.position, viewMatrix);
    output.position = mul(output.position, projectionMatrix);
    
    // 픽셀 쉐이더의 텍스처 좌표를 저장한다.
    output.tex = input.tex;
 
    // 첫 번째 스케일 및 위쪽 스크롤링 속도 값을 사용하여 첫 번째 노이즈 텍스처에 대한 텍스처 좌표를 계산합니다.
    output.texCoords1 = (input.tex * scales.x);
    output.texCoords1.y = output.texCoords1.y + (frameTime * scrollSpeeds.x);
 
    // 두 번째 스케일 및 위쪽 스크롤링 속도 값을 사용하여 두 번째 노이즈 텍스처의 텍스처 좌표를 계산합니다.
    output.texCoords2 = (input.tex * scales.y);
    output.texCoords2.y = output.texCoords2.y + (frameTime * scrollSpeeds.y);
 
    // 세 번째 스케일 및 위쪽 스크롤링 속도 값을 사용하여 세 번째 노이즈 텍스처의 텍스처 좌표를 계산합니다.
    output.texCoords3 = (input.tex * scales.z);
    output.texCoords3.y = output.texCoords3.y + (frameTime * scrollSpeeds.z);
    
    return output;
}

Fire_ps.hlsl

////////////////////////////////////////////////////////////////////////////////
// Filename: fire_ps.hlsl
////////////////////////////////////////////////////////////////////////////////
 
 
/////////////
// GLOBALS //
/////////////
Texture2D fireTexture : register(t0);
Texture2D noiseTexture : register(t1);
Texture2D alphaTexture : register(t2);
SamplerState SampleType;
SamplerState SampleType2;
 
cbuffer DistortionBuffer
{
    float2 distortion1;
    float2 distortion2;
    float2 distortion3;
    float distortionScale;
    float distortionBias;
};
 
 
//////////////
// TYPEDEFS //
//////////////
struct PixelInputType
{
    float4 position : SV_POSITION;
    float2 tex : TEXCOORD0;
       float2 texCoords1 : TEXCOORD1;
    float2 texCoords2 : TEXCOORD2;
    float2 texCoords3 : TEXCOORD3;
};
 
 
////////////////////////////////////////////////////////////////////////////////
// Pixel Shader
////////////////////////////////////////////////////////////////////////////////
float4 FirePixelShader(PixelInputType input) : SV_TARGET
{
    float4 noise1;
    float4 noise2;
    float4 noise3;
    float4 finalNoise;
    float perturb;
    float2 noiseCoords;
    float4 fireColor;
    float4 alphaColor;
 
 
    // 3 개의 서로 다른 텍스처 좌표를 사용하여 동일한 노이즈 텍스처를 샘플링하여 3 개의 다른 노이즈 스케일을 얻습니다.
    noise1 = noiseTexture.Sample(SampleType, input.texCoords1);
    noise2 = noiseTexture.Sample(SampleType, input.texCoords2);
    noise3 = noiseTexture.Sample(SampleType, input.texCoords3);
 
    // (0, 1) 범위에서 (-1, +1) 범위로 노이즈를 이동합니다.
    noise1 = (noise1 - 0.5f) * 2.0f;
    noise2 = (noise2 - 0.5f) * 2.0f;
    noise3 = (noise3 - 0.5f) * 2.0f;
 
    // 3 개의 서로 다른 왜곡 x와 y 값으로 세 개의 노이즈 x와 y 좌표를 왜곡합니다.
    noise1.xy = noise1.xy * distortion1.xy;
    noise2.xy = noise2.xy * distortion2.xy;
    noise3.xy = noise3.xy * distortion3.xy;
 
    // 세 가지 왜곡 된 노이즈 결과를 모두 하나의 노이즈 결과로 결합합니다.
    finalNoise = noise1 + noise2 + noise3;
 
    // 왜곡 스케일 및 바이어스 값에 의해 입력 텍스처 Y 좌표를 왜곡합니다.
    // 위쪽 효과에서 불꽃이 깜박 거리는 텍스처를 위로 움직이면 섭동이 강해집니다.
    perturb = ((1.0f - input.tex.y) * distortionScale) + distortionBias;
 
    // 이제 화재 색상 텍스처를 샘플링하는 데 사용할 교란되고 왜곡 된 텍스처 샘플링 좌표를 만듭니다.
    noiseCoords.xy = (finalNoise.xy * perturb) + input.tex.xy;
 
    // 섭동되고 왜곡 된 텍스처 샘플링 좌표를 사용하여 화재 텍스처에서 색상을 샘플링합니다.
    // 화스랩 상태를 감싸는 대신 클램프 샘플 상태를 사용하여 화염을 감싸는 것을 방지합니다.
    fireColor = fireTexture.Sample(SampleType2, noiseCoords.xy);
 
    // 교란되고 왜곡 된 텍스처 샘플링 좌표를 사용하여 알파 텍스처에서 알파 값을 샘플링합니다.
    // 이것은 불의 투명도에 사용됩니다.
    // 화스랩 상태를 감싸는 대신 클램프 샘플 상태를 사용하여 화염을 감싸는 것을 방지합니다.
    alphaColor = alphaTexture.Sample(SampleType2, noiseCoords.xy);
 
    // 화재의 알파 블렌딩을 불안정하고 왜곡 된 알파 텍스처 값으로 설정합니다.
    fireColor.a = alphaColor;
    
    return fireColor;
}

FireShaderClass는 TextureShaderClass를 불꽃 효과 용도로 수정한 것입니다.

Fireshaderclass.h

#pragma once
 
class FireShaderClass : public AlignedAllocationPolicy<16>
{
private:
    struct MatrixBufferType
    {
        XMMATRIX world;
        XMMATRIX view;
        XMMATRIX projection;
    };
 
    struct NoiseBufferType
    {
        float frameTime;
        XMFLOAT3 scrollSpeeds;
        XMFLOAT3 scales;
        float padding;
    };
 
    struct DistortionBufferType
    {
        XMFLOAT2 distortion1;
        XMFLOAT2 distortion2;
        XMFLOAT2 distortion3;
        float distortionScale;
        float distortionBias;
    };
 
public:
    FireShaderClass();
    FireShaderClass(const FireShaderClass&);
    ~FireShaderClass();
 
    bool Initialize(ID3D11Device*, HWND);
    void Shutdown();
    bool Render(ID3D11DeviceContext*, int, XMMATRIX, XMMATRIX, XMMATRIX, ID3D11ShaderResourceView*, ID3D11ShaderResourceView*,
                ID3D11ShaderResourceView*, float, XMFLOAT3, XMFLOAT3, XMFLOAT2, XMFLOAT2, XMFLOAT2, float, float);
 
private:
    bool InitializeShader(ID3D11Device*, HWND, const WCHAR*, const WCHAR*);
    void ShutdownShader();
    void OutputShaderErrorMessage(ID3D10Blob*, HWND, const WCHAR*);
 
    bool SetShaderParameters(ID3D11DeviceContext*, XMMATRIX, XMMATRIX, XMMATRIX, ID3D11ShaderResourceView*,
                             ID3D11ShaderResourceView*, ID3D11ShaderResourceView*, float, XMFLOAT3, XMFLOAT3, XMFLOAT2,
                             XMFLOAT2, XMFLOAT2, float, float);
    void RenderShader(ID3D11DeviceContext*, int);
 
private:
    ID3D11VertexShader* m_vertexShader = nullptr;
    ID3D11PixelShader* m_pixelShader = nullptr;
    ID3D11InputLayout* m_layout = nullptr;
    ID3D11Buffer* m_matrixBuffer = nullptr;
    ID3D11Buffer* m_noiseBuffer = nullptr;
    ID3D11SamplerState* m_sampleState = nullptr;
    ID3D11SamplerState* m_sampleState2 = nullptr;
    ID3D11Buffer* m_distortionBuffer = nullptr;
};

Fireshaderclass.cpp

#include "stdafx.h"
#include "FireShaderClass.h"
 
 
FireShaderClass::FireShaderClass()
{
}
 
 
FireShaderClass::FireShaderClass(const FireShaderClass& other)
{
}
 
 
FireShaderClass::~FireShaderClass()
{
}
 
 
bool FireShaderClass::Initialize(ID3D11Device* device, HWND hwnd)
{
    // 정점 및 픽셀 쉐이더를 초기화합니다.
    return InitializeShader(device, hwnd, L"../Dx11Demo_33/fire_vs.hlsl", L"../Dx11Demo_33/fire_ps.hlsl");
}
 
 
void FireShaderClass::Shutdown()
{
    // 버텍스 및 픽셀 쉐이더와 관련된 객체를 종료합니다.
    ShutdownShader();
}
 
 
bool FireShaderClass::Render(ID3D11DeviceContext* deviceContext, int indexCount, XMMATRIX worldMatrix, XMMATRIX viewMatrix, 
                             XMMATRIX projectionMatrix, ID3D11ShaderResourceView* fireTexture, 
                             ID3D11ShaderResourceView* noiseTexture, ID3D11ShaderResourceView* alphaTexture,
                             float frameTime, XMFLOAT3 scrollSpeeds, XMFLOAT3 scales, XMFLOAT2 distortion1,
                             XMFLOAT2 distortion2, XMFLOAT2 distortion3, float distortionScale, float distortionBias)
{
    // 렌더링에 사용할 셰이더 매개 변수를 설정합니다.
    if (!SetShaderParameters(deviceContext, worldMatrix, viewMatrix, projectionMatrix, fireTexture, noiseTexture,
                             alphaTexture, frameTime, scrollSpeeds, scales, distortion1, distortion2, distortion3,
                             distortionScale, distortionBias))
    {
        return false;
    }
 
    // 설정된 버퍼를 셰이더로 렌더링한다.
    RenderShader(deviceContext, indexCount);
 
    return true;
}
 
 
bool FireShaderClass::InitializeShader(ID3D11Device* device, HWND hwnd, const WCHAR* vsFilename, const WCHAR* psFilename)
{
    HRESULT result;
    ID3D10Blob* errorMessage = nullptr;
 
    // 버텍스 쉐이더 코드를 컴파일한다.
    ID3D10Blob* vertexShaderBuffer = nullptr;
    result = D3DCompileFromFile(vsFilename, NULL, NULL, "FireVertexShader", "vs_5_0", D3D10_SHADER_ENABLE_STRICTNESS, 0,
                                &vertexShaderBuffer, &errorMessage);
    if (FAILED(result))
    {
        // 셰이더 컴파일 실패시 오류메시지를 출력합니다.
        if (errorMessage)
        {
            OutputShaderErrorMessage(errorMessage, hwnd, vsFilename);
        }
        // 컴파일 오류가 아니라면 셰이더 파일을 찾을 수 없는 경우입니다.
        else
        {
            MessageBox(hwnd, vsFilename, L"Missing Shader File", MB_OK);
        }
 
        return false;
    }
 
    // 픽셀 쉐이더 코드를 컴파일한다.
    ID3D10Blob* pixelShaderBuffer = nullptr;
    result = D3DCompileFromFile(psFilename, NULL, NULL, "FirePixelShader", "ps_5_0", D3D10_SHADER_ENABLE_STRICTNESS, 0,
                                &pixelShaderBuffer, &errorMessage);
    if (FAILED(result))
    {
        // 셰이더 컴파일 실패시 오류메시지를 출력합니다.
        if (errorMessage)
        {
            OutputShaderErrorMessage(errorMessage, hwnd, psFilename);
        }
        // 컴파일 오류가 아니라면 셰이더 파일을 찾을 수 없는 경우입니다.
        else
        {
            MessageBox(hwnd, psFilename, L"Missing Shader File", MB_OK);
        }
 
        return false;
    }
 
    // 버퍼로부터 정점 셰이더를 생성한다.
    result = device->CreateVertexShader(vertexShaderBuffer->GetBufferPointer(), vertexShaderBuffer->GetBufferSize(), NULL,
                                        &m_vertexShader);
    if (FAILED(result))
    {
        return false;
    }
 
    // 버퍼에서 픽셀 쉐이더를 생성합니다.
    result = device->CreatePixelShader(pixelShaderBuffer->GetBufferPointer(), pixelShaderBuffer->GetBufferSize(), NULL,
                                       &m_pixelShader);
    if (FAILED(result))
    {
        return false;
    }
 
    // 정점 입력 레이아웃 구조체를 설정합니다.
    // 이 설정은 ModelClass와 셰이더의 VertexType 구조와 일치해야합니다.
    D3D11_INPUT_ELEMENT_DESC polygonLayout[2];
    polygonLayout[0].SemanticName = "POSITION";
    polygonLayout[0].SemanticIndex = 0;
    polygonLayout[0].Format = DXGI_FORMAT_R32G32B32_FLOAT;
    polygonLayout[0].InputSlot = 0;
    polygonLayout[0].AlignedByteOffset = 0;
    polygonLayout[0].InputSlotClass = D3D11_INPUT_PER_VERTEX_DATA;
    polygonLayout[0].InstanceDataStepRate = 0;
 
    polygonLayout[1].SemanticName = "TEXCOORD";
    polygonLayout[1].SemanticIndex = 0;
    polygonLayout[1].Format = DXGI_FORMAT_R32G32_FLOAT;
    polygonLayout[1].InputSlot = 0;
    polygonLayout[1].AlignedByteOffset = D3D11_APPEND_ALIGNED_ELEMENT;
    polygonLayout[1].InputSlotClass = D3D11_INPUT_PER_VERTEX_DATA;
    polygonLayout[1].InstanceDataStepRate = 0;
 
    // 레이아웃의 요소 수를 가져옵니다.
    UINT numElements = sizeof(polygonLayout) / sizeof(polygonLayout[0]);
 
    // 정점 입력 레이아웃을 만듭니다.
    result = device->CreateInputLayout(polygonLayout, numElements, vertexShaderBuffer->GetBufferPointer(),
        vertexShaderBuffer->GetBufferSize(), &m_layout);
    if (FAILED(result))
    {
        return false;
    }
 
    // 더 이상 사용되지 않는 정점 셰이더 퍼버와 픽셀 셰이더 버퍼를 해제합니다.
    vertexShaderBuffer->Release();
    vertexShaderBuffer = 0;
 
    pixelShaderBuffer->Release();
    pixelShaderBuffer = 0;
 
    // 버텍스 쉐이더에있는 동적 행렬 상수 버퍼의 설명을 설정합니다.
    D3D11_BUFFER_DESC matrixBufferDesc;
    matrixBufferDesc.Usage = D3D11_USAGE_DYNAMIC;
    matrixBufferDesc.ByteWidth = sizeof(MatrixBufferType);
    matrixBufferDesc.BindFlags = D3D11_BIND_CONSTANT_BUFFER;
    matrixBufferDesc.CPUAccessFlags = D3D11_CPU_ACCESS_WRITE;
    matrixBufferDesc.MiscFlags = 0;
    matrixBufferDesc.StructureByteStride = 0;
 
    // 이 클래스 내에서 정점 셰이더 상수 버퍼에 액세스 할 수 있도록 행렬 버퍼 포인터를 만듭니다.
    result = device->CreateBuffer(&matrixBufferDesc, NULL, &m_matrixBuffer);
    if(FAILED(result))
    {
        return false;
    }
 
    // 버텍스 쉐이더에있는 동적 노이즈 상수 버퍼의 설명을 설정합니다.
    D3D11_BUFFER_DESC noiseBufferDesc;
    noiseBufferDesc.Usage = D3D11_USAGE_DYNAMIC;
    noiseBufferDesc.ByteWidth = sizeof(NoiseBufferType);
    noiseBufferDesc.BindFlags = D3D11_BIND_CONSTANT_BUFFER;
    noiseBufferDesc.CPUAccessFlags = D3D11_CPU_ACCESS_WRITE;
    noiseBufferDesc.MiscFlags = 0;
    noiseBufferDesc.StructureByteStride = 0;
 
    // 이 클래스 내에서 정점 셰이더 상수 버퍼에 액세스 할 수 있도록 노이즈 버퍼 포인터를 만듭니다.
    result = device->CreateBuffer(&noiseBufferDesc, NULL, &m_noiseBuffer);
    if(FAILED(result))
    {
        return false;
    }
 
    // 텍스처 샘플러 상태 설명을 만듭니다.
    D3D11_SAMPLER_DESC samplerDesc;
    samplerDesc.Filter = D3D11_FILTER_MIN_MAG_MIP_LINEAR;
    samplerDesc.AddressU = D3D11_TEXTURE_ADDRESS_WRAP;
    samplerDesc.AddressV = D3D11_TEXTURE_ADDRESS_WRAP;
    samplerDesc.AddressW = D3D11_TEXTURE_ADDRESS_WRAP;
    samplerDesc.MipLODBias = 0.0f;
    samplerDesc.MaxAnisotropy = 1;
    samplerDesc.ComparisonFunc = D3D11_COMPARISON_ALWAYS;
    samplerDesc.BorderColor[0] = 0;
    samplerDesc.BorderColor[1] = 0;
    samplerDesc.BorderColor[2] = 0;
    samplerDesc.BorderColor[3] = 0;
    samplerDesc.MinLOD = 0;
    samplerDesc.MaxLOD = D3D11_FLOAT32_MAX;
 
    // 텍스처 샘플러 상태를 만듭니다.
    result = device->CreateSamplerState(&samplerDesc, &m_sampleState);
    if(FAILED(result))
    {
        return false;
    }
 
    // 클램프 샘플러에 대한 두 번째 텍스처 샘플러 상태 설명을 만듭니다.
    D3D11_SAMPLER_DESC samplerDesc2;
    samplerDesc2.Filter = D3D11_FILTER_MIN_MAG_MIP_LINEAR;
    samplerDesc2.AddressU = D3D11_TEXTURE_ADDRESS_CLAMP;
    samplerDesc2.AddressV = D3D11_TEXTURE_ADDRESS_CLAMP;
    samplerDesc2.AddressW = D3D11_TEXTURE_ADDRESS_CLAMP;
    samplerDesc2.MipLODBias = 0.0f;
    samplerDesc2.MaxAnisotropy = 1;
    samplerDesc2.ComparisonFunc = D3D11_COMPARISON_ALWAYS;
    samplerDesc2.BorderColor[0] = 0;
    samplerDesc2.BorderColor[1] = 0;
    samplerDesc2.BorderColor[2] = 0;
    samplerDesc2.BorderColor[3] = 0;
    samplerDesc2.MinLOD = 0;
    samplerDesc2.MaxLOD = D3D11_FLOAT32_MAX;
 
    // 텍스처 샘플러 상태를 만듭니다.
    result = device->CreateSamplerState(&samplerDesc2, &m_sampleState2);
    if(FAILED(result))
    {
        return false;
    }
 
    // 픽셀 쉐이더에있는 동적 왜곡 상수 버퍼의 설명을 설정합니다.
    D3D11_BUFFER_DESC distortionBufferDesc;
    distortionBufferDesc.Usage = D3D11_USAGE_DYNAMIC;
    distortionBufferDesc.ByteWidth = sizeof(DistortionBufferType);
    distortionBufferDesc.BindFlags = D3D11_BIND_CONSTANT_BUFFER;
    distortionBufferDesc.CPUAccessFlags = D3D11_CPU_ACCESS_WRITE;
    distortionBufferDesc.MiscFlags = 0;
    distortionBufferDesc.StructureByteStride = 0;
 
    // 이 클래스 내에서 픽셀 쉐이더 상수 버퍼에 액세스 할 수 있도록 왜곡 버퍼 포인터를 만듭니다.
    result = device->CreateBuffer(&distortionBufferDesc, NULL, &m_distortionBuffer);
    if(FAILED(result))
    {
        return false;
    }
 
    return true;
}
 
 
void FireShaderClass::ShutdownShader()
{
    // 왜곡 상수 버퍼를 해제합니다.
    if (m_distortionBuffer)
    {
        m_distortionBuffer->Release();
        m_distortionBuffer = 0;
    }
 
    // 두 번째 샘플러 상태를 해제합니다.
    if (m_sampleState2)
    {
        m_sampleState2->Release();
        m_sampleState2 = 0;
    }
 
    // 샘플러 상태를 해제한다.
    if (m_sampleState)
    {
        m_sampleState->Release();
        m_sampleState = 0;
    }
 
    // 잡음 상수 버퍼를 해제한다.
    if (m_noiseBuffer)
    {
        m_noiseBuffer->Release();
        m_noiseBuffer = 0;
    }
 
    // 행렬 상수 버퍼를 해제합니다.
    if (m_matrixBuffer)
    {
        m_matrixBuffer->Release();
        m_matrixBuffer = 0;
    }
 
    // 레이아웃을 해제합니다.
    if (m_layout)
    {
        m_layout->Release();
        m_layout = 0;
    }
 
    // 픽셀 쉐이더를 해제합니다.
    if (m_pixelShader)
    {
        m_pixelShader->Release();
        m_pixelShader = 0;
    }
 
    // 버텍스 쉐이더를 해제합니다.
    if (m_vertexShader)
    {
        m_vertexShader->Release();
        m_vertexShader = 0;
    }
}
 
 
void FireShaderClass::OutputShaderErrorMessage(ID3D10Blob* errorMessage, HWND hwnd, const WCHAR* shaderFilename)
{
    // 에러 메시지를 출력창에 표시합니다.
    OutputDebugStringA(reinterpret_cast<const char*>(errorMessage->GetBufferPointer()));
 
    // 에러 메세지를 반환합니다.
    errorMessage->Release();
    errorMessage = 0;
 
    // 컴파일 에러가 있음을 팝업 메세지로 알려줍니다.
    MessageBox(hwnd, L"Error compiling shader.", shaderFilename, MB_OK);
}
 
 
bool FireShaderClass::SetShaderParameters(ID3D11DeviceContext* deviceContext, XMMATRIX worldMatrix, XMMATRIX viewMatrix,
                                          XMMATRIX projectionMatrix, ID3D11ShaderResourceView* fireTexture, 
                                          ID3D11ShaderResourceView* noiseTexture, ID3D11ShaderResourceView* alphaTexture, 
                                          float frameTime, XMFLOAT3 scrollSpeeds, XMFLOAT3 scales, XMFLOAT2 distortion1, 
                                          XMFLOAT2 distortion2, XMFLOAT2 distortion3, float distortionScale, 
                                          float distortionBias)
{
    // 행렬을 transpose하여 셰이더에서 사용할 수 있게 합니다
    worldMatrix = XMMatrixTranspose(worldMatrix);
    viewMatrix = XMMatrixTranspose(viewMatrix);
    projectionMatrix = XMMatrixTranspose(projectionMatrix);
 
    // 상수 버퍼의 내용을 쓸 수 있도록 잠급니다.
    D3D11_MAPPED_SUBRESOURCE mappedResource;
    if (FAILED(deviceContext->Map(m_matrixBuffer, 0, D3D11_MAP_WRITE_DISCARD, 0, &mappedResource)))
    {
        return false;
    }
 
    // 상수 버퍼의 데이터에 대한 포인터를 가져옵니다.
    MatrixBufferType* dataPtr = (MatrixBufferType*)mappedResource.pData;
 
    // 상수 버퍼에 행렬을 복사합니다.
    dataPtr->world = worldMatrix;
    dataPtr->view = viewMatrix;
    dataPtr->projection = projectionMatrix;
 
    // 상수 버퍼의 잠금을 풉니다.
    deviceContext->Unmap(m_matrixBuffer, 0);
 
    // 정점 셰이더에서의 상수 버퍼의 위치를 설정합니다.
    unsigned int bufferNumber = 0;
 
    // 마지막으로 정점 셰이더의 상수 버퍼를 바뀐 값으로 바꿉니다.
    deviceContext->VSSetConstantBuffers(bufferNumber, 1, &m_matrixBuffer);
 
    // 쓸 수 있도록 노이즈 상수 버퍼를 잠급니다.
    if(FAILED(deviceContext->Map(m_noiseBuffer, 0, D3D11_MAP_WRITE_DISCARD, 0, &mappedResource)))
    {
        return false;
    }
 
    // 노이즈 상수 버퍼의 데이터에 대한 포인터를 가져옵니다.
    NoiseBufferType* dataPtr2 = (NoiseBufferType*)mappedResource.pData;
 
    // 데이터를 노이즈 상수 버퍼에 복사합니다.
    dataPtr2->frameTime = frameTime;
    dataPtr2->scrollSpeeds = scrollSpeeds;
    dataPtr2->scales = scales;
    dataPtr2->padding = 0.0f;
 
    // 노이즈 상수 버퍼의 잠금을 해제합니다.
    deviceContext->Unmap(m_noiseBuffer, 0);
 
    // 버텍스 쉐이더에서 노이즈 상수 버퍼의 위치를 ​​설정합니다.
    bufferNumber = 1;
 
    // 이제 버텍스 쉐이더에서 업데이트 된 값으로 노이즈 상수 버퍼를 설정합니다.
    deviceContext->VSSetConstantBuffers(bufferNumber, 1, &m_noiseBuffer);
 
    // 픽셀 쉐이더에 3 개의 쉐이더 텍스처 리소스를 설정합니다.
    deviceContext->PSSetShaderResources(0, 1, &fireTexture);
    deviceContext->PSSetShaderResources(1, 1, &noiseTexture);
    deviceContext->PSSetShaderResources(2, 1, &alphaTexture);
 
    // 쓸 수 있도록 왜곡 상수 버퍼를 잠급니다.
    if(FAILED(deviceContext->Map(m_distortionBuffer, 0, D3D11_MAP_WRITE_DISCARD, 0, &mappedResource)))
    {
        return false;
    }
 
    // 왜곡 상수 버퍼의 데이터에 대한 포인터를 가져옵니다.
    DistortionBufferType* dataPtr3 = (DistortionBufferType*)mappedResource.pData;
 
    // 왜곡 상수 버퍼에 데이터를 복사합니다.
    dataPtr3->distortion1 = distortion1;
    dataPtr3->distortion2 = distortion2;
    dataPtr3->distortion3 = distortion3;
    dataPtr3->distortionScale = distortionScale;
    dataPtr3->distortionBias = distortionBias;
 
    // 왜곡 상수 버퍼의 잠금을 해제합니다.
    deviceContext->Unmap(m_distortionBuffer, 0);
 
    // 픽셀 쉐이더에서 왜곡 상수 버퍼의 위치를 ​​설정합니다.
    bufferNumber = 0;
 
    // 이제 픽셀 쉐이더에서 왜곡 상수 버퍼를 업데이트 된 값으로 설정합니다.
    deviceContext->PSSetConstantBuffers(bufferNumber, 1, &m_distortionBuffer);
 
    return true;
}
 
 
void FireShaderClass::RenderShader(ID3D11DeviceContext* deviceContext, int indexCount)
{
    // 정점 입력 레이아웃을 설정합니다.
    deviceContext->IASetInputLayout(m_layout);
 
    // 삼각형을 그릴 정점 셰이더와 픽셀 셰이더를 설정합니다.
    deviceContext->VSSetShader(m_vertexShader, NULL, 0);
    deviceContext->PSSetShader(m_pixelShader, NULL, 0);
 
    // 픽셀 쉐이더에서 샘플러 상태를 설정합니다.
    deviceContext->PSSetSamplers(0, 1, &m_sampleState);
    deviceContext->PSSetSamplers(1, 1, &m_sampleState2);
 
    // 삼각형을 렌더링합니다.
    deviceContext->DrawIndexed(indexCount, 0, 0);
}

Graphicsclass.h

#pragma once
 
/////////////
// GLOBALS //
/////////////
const bool FULL_SCREEN = false;
const bool VSYNC_ENABLED = true;
const float SCREEN_DEPTH = 1000.0f;
const float SCREEN_NEAR = 0.1f;
 
 
class D3DClass;
class CameraClass;
class ModelClass;
class FireShaderClass;
 
 
class GraphicsClass
{
public:
    GraphicsClass();
    GraphicsClass(const GraphicsClass&);
    ~GraphicsClass();
 
    bool Initialize(int, int, HWND);
    void Shutdown();
    bool Frame();
 
private:
    bool Render();
 
private:
    D3DClass* m_Direct3D = nullptr;
    CameraClass* m_Camera = nullptr;
    ModelClass* m_Model = nullptr;
    FireShaderClass* m_FireShader = nullptr;
};

Graphicsclass.cpp

#include "stdafx.h"
#include "d3dclass.h"
#include "cameraclass.h"
#include "modelclass.h"
#include "fireshaderclass.h"
#include "graphicsclass.h"
 
 
GraphicsClass::GraphicsClass()
{
}
 
 
GraphicsClass::GraphicsClass(const GraphicsClass& other)
{
}
 
 
GraphicsClass::~GraphicsClass()
{
}
 
 
bool GraphicsClass::Initialize(int screenWidth, int screenHeight, HWND hwnd)
{
    // Direct3D 객체 생성
    m_Direct3D = new D3DClass;
    if (!m_Direct3D)
    {
        return false;
    }
 
    // Direct3D 객체 초기화
    if (!m_Direct3D->Initialize(screenWidth, screenHeight, VSYNC_ENABLED, hwnd, FULL_SCREEN, SCREEN_DEPTH, SCREEN_NEAR))
    {
        MessageBox(hwnd, L"Could not initialize Direct3D.", L"Error", MB_OK);
        return false;
    }
 
    // m_Camera 객체 생성
    m_Camera = new CameraClass;
    if (!m_Camera)
    {
        return false;
    }
 
    // 모델 객체 생성
    m_Model = new ModelClass;
    if (!m_Model)
    {
        return false;
    }
 
    // 모델 객체 초기화
    if (!m_Model->Initialize(m_Direct3D->GetDevice(), "../Dx11Demo_33/data/square.txt", L"../Dx11Demo_33/data/fire01.dds", 
                                 L"../Dx11Demo_33/data/noise01.dds", L"../Dx11Demo_33/data/alpha01.dds"))
    {
        MessageBox(hwnd, L"Could not initialize the model object.", L"Error", MB_OK);
        return false;
    }
 
    // 파이어 쉐이더 객체를 생성한다.
    m_FireShader = new FireShaderClass;
    if(!m_FireShader)
    {
        return false;
    }
 
    // 화재 쉐이더 객체를 초기화합니다.
    if(!m_FireShader->Initialize(m_Direct3D->GetDevice(), hwnd))
    {
        MessageBox(hwnd, L"Could not initialize the fire shader object.", L"Error", MB_OK);
        return false;
    }
 
    return true;
}
 
 
void GraphicsClass::Shutdown()
{
    // fire shader 객체를 해제한다.
    if (m_FireShader)
    {
        m_FireShader->Shutdown();
        delete m_FireShader;
        m_FireShader = 0;
    }
 
    // 모델 객체를 해제합니다.
    if (m_Model)
    {
        m_Model->Shutdown();
        delete m_Model;
        m_Model = 0;
    }
 
    // m_Camera 객체 반환
    if (m_Camera)
    {
        delete m_Camera;
        m_Camera = 0;
    }
 
    // Direct3D 객체 반환
    if (m_Direct3D)
    {
        m_Direct3D->Shutdown();
        delete m_Direct3D;
        m_Direct3D = 0;
    }
}
 
 
bool GraphicsClass::Frame()
{
    // 카메라 위치를 설정합니다.
    m_Camera->SetPosition(0.0f, 0.0f, -3.0f);
 
    // 장면을 렌더링합니다.
    return Render();
}
 
 
bool GraphicsClass::Render()
{
    static float frameTime = 0.0f;
 
 
    // 프레임 시간 카운터를 증가시킵니다.
    frameTime += 0.01f;
    if(frameTime > 1000.0f)
    {
        frameTime = 0.0f;
    }
 
    // 세 가지 다른 노이즈 텍스처에 대해 세 가지 스크롤 속도를 설정합니다.
    XMFLOAT3 scrollSpeeds = XMFLOAT3(1.3f, 2.1f, 2.3f);
 
    // 세 개의 서로 다른 노이즈 옥타브 텍스처를 만드는 데 사용할 세 개의 스케일을 설정합니다.
    XMFLOAT3 scales = XMFLOAT3(1.0f, 2.0f, 3.0f);
 
    // 세 가지 다른 노이즈 텍스처에 대해 세 가지 다른 x 및 y 왜곡 인수를 설정합니다.
    XMFLOAT2 distortion1 = XMFLOAT2(0.1f, 0.2f);
    XMFLOAT2 distortion2 = XMFLOAT2(0.1f, 0.3f);
    XMFLOAT2 distortion3 = XMFLOAT2(0.1f, 0.1f);
 
    // 텍스처 좌표 샘플링 섭동의 스케일과 바이어스.
    float distortionScale = 0.8f;
    float distortionBias = 0.5f;
 
    // 장면을 시작할 버퍼를 지운다.
    m_Direct3D->BeginScene(0.0f, 0.0f, 0.0f, 1.0f);
 
    // 카메라의 위치에 따라 뷰 행렬을 생성합니다.
    m_Camera->Render();
 
    // 카메라 및 d3d 객체에서 월드, 뷰 및 오쏘 (ortho) 행렬을 가져옵니다.
    XMMATRIX worldMatrix, viewMatrix, projectionMatrix;
    m_Direct3D->GetWorldMatrix(worldMatrix);
    m_Camera->GetViewMatrix(viewMatrix);
    m_Direct3D->GetProjectionMatrix(projectionMatrix);
 
    // 화재 투명도의 알파 블렌드를 켭니다.
    m_Direct3D->TurnOnAlphaBlending();
 
    // 정사각형 모델의 정점과 인덱스 버퍼를 그래픽 파이프 라인에 배치하여 그리기를 준비합니다.
    m_Model->Render(m_Direct3D->GetDeviceContext());
 
    // 화재 쉐이더를 사용하여 사각형 모델을 렌더링합니다.
    if(!m_FireShader->Render(m_Direct3D->GetDeviceContext(), m_Model->GetIndexCount(), worldMatrix, viewMatrix,
                             projectionMatrix, m_Model->GetTexture1(), m_Model->GetTexture2(), m_Model->GetTexture3(),
                             frameTime, scrollSpeeds, scales, distortion1, distortion2, distortion3, distortionScale,
                             distortionBias))
    {
        return false;
    }
 
    // 알파 블렌딩을 끕니다.
    m_Direct3D->TurnOffAlphaBlending();
 
    // 렌더링 된 장면을 화면에 표시합니다.
    m_Direct3D->EndScene();
 
    return true;
}

출력 화면

마치면서

불꽃 셰이더는 엄청나게 사실적인 불꽃 효과를 만들어냅니다. 또한 하나 또는 몇 개의 셰이더 변수값을 조절함으로 거의 모든 유형의 불꽃을 만들 수 있기 때문에 매우 커스터마이징하기 편합니다. 하지만 여전히 이 불꽃은 3D 씬에 세팅될 때에는 사실적으로 보이기 위하여 빌보드로 그려지거나 한 위치에 여러 각도로 배치되어야 합니다.

연습문제

1. 프로그램을 컴파일하고 실행하여 보십시오. 움직이는 불꽃 효과를 보실 수 있을 겁니다. ESC키로 종료합니다.

2. 많은 셰이더 값들을 조정해 보고 만들어지는 다른 결과들을 관찰해 보십시오. 크기 및 바이어스값부터 고쳐보면 좋습니다. 또한 불꽃 셰이더의 몇몇 부분을 주석처리하여 각 텍스쳐가 어떤 효과를 담당하는지 확인해 볼 수 있습니다.

3. 여러분만의 노이즈 텍스쳐를 만들어 어떻게 불꽃이 달라지는지 확인해 보십시오.

4. 여러분만의 알파 텍스쳐를 만들어 불꽃의 전체적인 모양을 바꾸어 보십시오.

소스코드

소스코드 : Dx11Demo_33.zip