← SEARCHABLE ARCHIVE
DirectX 11 · 2026-07-03

DirectX 11 原生三角形渲染

從Device to Draw繪製一個三角形

INTERACTIVE READING MODE →

該部落格上撰寫的文章是出於教學目的而創建的。 另外,文章中的資訊可能不正確,請謹慎。

要在 DirectX 11 中繪製三角形,您需要 Device、DeviceContext、SwapChain、RenderTargetView、VertexBuffer 和 Shader。 我們只總結一下渲染所需的核心流程,不包括視窗創建程式碼。

創建設備和交換鏈

DXGI_SWAP_CHAIN_DESC Desc{};
Desc.BufferCount = 1;
Desc.BufferDesc.Width = Width;
Desc.BufferDesc.Height = Height;
Desc.BufferDesc.Format = DXGI_FORMAT_R8G8B8A8_UNORM;
Desc.BufferUsage = DXGI_USAGE_RENDER_TARGET_OUTPUT;
Desc.OutputWindow = WindowHandle;
Desc.SampleDesc.Count = 1;
Desc.Windowed = TRUE;
Desc.SwapEffect = DXGI_SWAP_EFFECT_DISCARD;

D3D11CreateDeviceAndSwapChain(
    nullptr,
    D3D_DRIVER_TYPE_HARDWARE,
    nullptr,
    0,
    nullptr,
    0,
    D3D11_SDK_VERSION,
    &Desc,
    &SwapChain,
    &Device,
    nullptr,
    &DeviceContext
);

Device建立GPU資源,DeviceContext用於記錄和執行命令。 SwapChain 取代了螢幕上顯示的 BackBuffer。

建立渲染目標視圖

ID3D11Texture2D* BackBuffer = nullptr;
SwapChain->GetBuffer(0, IID_PPV_ARGS(&BackBuffer));
Device->CreateRenderTargetView(BackBuffer, nullptr, &RenderTargetView);
BackBuffer->Release();

建立一個View,以便BackBuffer紋理可以用作渲染目標。

建立頂點緩衝區

struct Vertex
{
    DirectX::XMFLOAT3 Position;
    DirectX::XMFLOAT4 Color;
};

Vertex Vertices[] =
{
    { {  0.0f,  0.5f, 0.0f }, { 1, 0, 0, 1 } },
    { {  0.5f, -0.5f, 0.0f }, { 0, 1, 0, 1 } },
    { { -0.5f, -0.5f, 0.0f }, { 0, 0, 1, 1 } }
};

D3D11_BUFFER_DESC BufferDesc{};
BufferDesc.ByteWidth = sizeof(Vertices);
BufferDesc.Usage = D3D11_USAGE_DEFAULT;
BufferDesc.BindFlags = D3D11_BIND_VERTEX_BUFFER;

D3D11_SUBRESOURCE_DATA InitialData{};
InitialData.pSysMem = Vertices;

Device->CreateBuffer(&BufferDesc, &InitialData, &VertexBuffer);

繪製每一幀

const float ClearColor[4] = { 0.08f, 0.08f, 0.12f, 1.0f };
DeviceContext->ClearRenderTargetView(RenderTargetView, ClearColor);

UINT Stride = sizeof(Vertex);
UINT Offset = 0;
DeviceContext->IASetVertexBuffers(0, 1, &VertexBuffer, &Stride, &Offset);
DeviceContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST);
DeviceContext->IASetInputLayout(InputLayout);

DeviceContext->VSSetShader(VertexShader, nullptr, 0);
DeviceContext->PSSetShader(PixelShader, nullptr, 0);
DeviceContext->OMSetRenderTargets(1, &RenderTargetView, nullptr);
DeviceContext->RSSetViewports(1, &Viewport);

DeviceContext->Draw(3, 0);
SwapChain->Present(1, 0);

Draw(3, 0)從0開始讀取3個頂點並繪製一個三角形。 如果只出現黑屏,最好檢查頂點順序、Viewport、Shader編譯結果、RenderTarget連線。