Directx11教程(5) 画一个简单的三角形(1)

      在本篇教程中，我们将通过D3D11画一个简单的三角形。在D3D11中，GPU的渲染主要通过shader来操作(当然还有一些操作是由GPU固定管线完成，比如光栅化操作)，最常用的shader操作是顶点shader(vertex shader)和像素shader(pixel shader)。其实shader就是在GPU中执行的代码，这些代码被driver编译成硬件依赖的机器码，最终被GPU中shader pipe执行，从而完成3D渲染。D3D11中shader是用一种类C的语言HLSL编写的。

     下面我们先来了解几个概念：

      三维物体的模型，通常3D对象都是通过mesh(三角形)来表示的。比如我们看到的一个渲染后的球体，实际上它是有许许多多的小的mesh组成。

     顶点缓冲就是一个buffer，用来存放3D物体的顶点数据。

     索引缓冲，就是对顶点缓冲的索引，可以用来减少渲染物体时候传入显存的顶点数量。比如一个正方体有8个顶点，同时也是由12个三角形组成(每个面2个三角形)，我们渲染3D物体，在硬件层次都是通过三角形来渲染的，所以渲染这12个三角形，就需要36个顶点数据，但是通过索引缓冲，我们只需传入8个顶点，通过索引不同顺序的3个顶点，来实现12个三角形的渲染。

[GPU和系统内存之间，通过PCIE总线连接，传入数据受总线宽度的影响，所以我们要尽可能减少传输数据的数量]

程序的框架现在如下图所示：

 

我们增加了3个类：

   ModelClass主要用来建立顶点缓冲、索引缓冲，准备渲染数据。

   CamerClass主要用来得到view矩阵，就是得到摄像机在三维空间的位置和方位。

   ColorShaderClass主要用来处理shader相关的代码。

下面我们将贴出关键的程序代码：

color.vs的代码如下：

/////////////
// GLOBALS //
//shader中使用的全局变量都在定义在const buffer中
//这样shader编译后，这些变量放在gpu的const buffer中
/////////////
cbuffer MatrixBuffer
{
    matrix worldMatrix;
    matrix viewMatrix;
    matrix projectionMatrix;
};

//////////////
// TYPEDEFS //
//注意：POSITION, COLOR等是我们在定义顶点布局时定义的名字。
//////////////
struct VertexInputType
{
    float4 position : POSITION;
    float4 color : COLOR;
};

struct PixelInputType
{
    float4 position : SV_POSITION; //SV表示系统自动定义的格式。
    float4 color : COLOR;
};

////////////////////////////////////////////////////////////////////////////////
// Vertex Shader
////////////////////////////////////////////////////////////////////////////////
PixelInputType ColorVertexShader(VertexInputType input)
{
    PixelInputType output;
   

    //顶点坐标扩展成四个分量，并设置为1，以便矩阵运算
    input.position.w = 1.0f;

    // 乘以3个矩阵，得到clip空间的坐标。
    output.position = mul(input.position, worldMatrix);
    output.position = mul(output.position, viewMatrix);
    output.position = mul(output.position, projectionMatrix);
   
    //直接输出顶点的颜色(顶点之间的颜色，会在光栅化阶段采用插值的方式计算）
    output.color = input.color;
   
    return output;
}

color.ps的代码如下，代码非常简单，直接输出像素的颜色：

//////////////
// TYPEDEFS //
//像素输入格式
//////////////
struct PixelInputType
{
    float4 position : SV_POSITION;
    float4 color : COLOR;
};

////////////////////////////////////////////////////////////////////////////////
// Pixel Shader
////////////////////////////////////////////////////////////////////////////////
float4 ColorPixelShader(PixelInputType input) : SV_TARGET
{
    return input.color;
}

GraphicsClass.h代码如下：

#pragma once

#include <windows.h>
#include "d3dclass.h"
#include "cameraclass.h"
#include "modelclass.h"
#include "colorshaderclass.h"

/////////////
// GLOBALS //
/////////////
const bool FULL_SCREEN = false; //是否全屏
const bool VSYNC_ENABLED = true; //是否垂直同步
const float SCREEN_DEPTH = 1000.0f; //深度，远点
const float SCREEN_NEAR = 0.1f; //深度，近点

class GraphicsClass
    {
    public:
        GraphicsClass(void);
        GraphicsClass(const GraphicsClass&);
        ~GraphicsClass(void);
        bool Initialize(int, int, HWND);
        void Shutdown();
        bool Frame();

    private:
        bool Render();

       //定义一个D3DClass类成员变量
        D3DClass* m_D3D;
        CameraClass* m_Camera;
        ModelClass* m_Model;
        ColorShaderClass* m_ColorShader;

    };

GraphicsClass.cpp主要代码如下：

       首先会计算三个矩阵：世界矩阵(模型坐标空间到世界坐标空间转化矩阵)、视点矩阵(世界坐标空间转化到视点坐标空间、或者说是摄像机坐标空间)、投影矩阵(视点坐标空间进行投影操作，在透视投影情况下，产生一个称作frustum的视锥体，在平行投影的情况下，产生一个长方体)。

      然后在Shader类中执行具体的渲染操作。

bool GraphicsClass::Render()
    {

    D3DXMATRIX viewMatrix, projectionMatrix, worldMatrix;
    bool result;

    // 设置framebuffer.为浅蓝色
    m_D3D->BeginScene(0.0f, 0.0f, 0.5f, 1.0f);

    // 得到view矩阵.
   m_Camera->Render();

    // 得到3个矩阵.
    m_Camera->GetViewMatrix(viewMatrix);
    m_D3D->GetWorldMatrix(worldMatrix);
    m_D3D->GetProjectionMatrix(projectionMatrix);

    // 把模型顶点和索引缓冲放入管线，准备渲染.
    m_Model->Render(m_D3D->GetDeviceContext());

    // 用shader渲染.
    result = m_ColorShader->Render(m_D3D->GetDeviceContext(), m_Model->GetIndexCount(), worldMatrix, viewMatrix, projectionMatrix);
    if(!result)
        {
        return false;
        }
   
    //把framebuffer中的图像present到屏幕上.
    m_D3D->EndScene();

    return true;
    }

     ModelClass类的关键函数是InitializeBuffers和RenderBuffer，在初始化函数中产生顶点缓冲和索引缓冲，在RenderBuffer函数中，把缓冲绑定到管线，并且指定渲染体元类型。

bool ModelClass::InitializeBuffers(ID3D11Device* device)
    {
    VertexType* vertices;
    unsigned long* indices;
    D3D11_BUFFER_DESC vertexBufferDesc, indexBufferDesc;
    D3D11_SUBRESOURCE_DATA vertexData, indexData;
    HRESULT result;

    //首先，我们创建2个临时缓冲存放顶点和索引数据，以便后面使用。.

    // 设置顶点缓冲大小为3，一个三角形.
    m_vertexCount = 3;

    // 设置索引缓冲大小.
    m_indexCount = 3;

    // 创建顶点临时缓冲.
    vertices = new VertexType[m_vertexCount];
    if(!vertices)
        {
        return false;
        }

    // 创建索引缓冲.
    indices = new unsigned long[m_indexCount];
    if(!indices)
        {
        return false;
        }
    //创建顺时针方向的三角形，左手规则
    // 设置顶点数据.
    vertices[0].position = D3DXVECTOR3(-1.0f, -1.0f, 0.0f);  // 左下
    vertices[0].color = D3DXVECTOR4(1.0f, 1.0f, 0.0f, 1.0f);

    vertices[1].position = D3DXVECTOR3(0.0f, 1.0f, 0.0f);  // 中上.
    vertices[1].color = D3DXVECTOR4(0.0f, 1.0f, 0.0f, 1.0f);

    vertices[2].position = D3DXVECTOR3(1.0f, -1.0f, 0.0f);  // 底右
    vertices[2].color = D3DXVECTOR4(0.0f, 1.0f, 1.0f, 1.0f);

   // 设置索引缓冲数据.
    indices[0] = 0;  // Bottom left.
    indices[1] = 1;  // Top middle.
    indices[2] = 2;  // Bottom right.

    // 设置顶点缓冲描述
    vertexBufferDesc.Usage = D3D11_USAGE_DEFAULT;
    vertexBufferDesc.ByteWidth = sizeof(VertexType) * m_vertexCount;
    vertexBufferDesc.BindFlags = D3D11_BIND_VERTEX_BUFFER;
    vertexBufferDesc.CPUAccessFlags = 0;
    vertexBufferDesc.MiscFlags = 0;
    vertexBufferDesc.StructureByteStride = 0;

   // 指向保存顶点数据的临时缓冲.
    vertexData.pSysMem = vertices;
    vertexData.SysMemPitch = 0;
    vertexData.SysMemSlicePitch = 0;

    // 创建顶点缓冲.
    result = device->CreateBuffer(&vertexBufferDesc, &vertexData, &m_vertexBuffer);
    if(FAILED(result))
        {
        return false;
        }

    // 设置索引缓冲描述.
    indexBufferDesc.Usage = D3D11_USAGE_DEFAULT;
    indexBufferDesc.ByteWidth = sizeof(unsigned long) * m_indexCount;
    indexBufferDesc.BindFlags = D3D11_BIND_INDEX_BUFFER;
    indexBufferDesc.CPUAccessFlags = 0;
    indexBufferDesc.MiscFlags = 0;
    indexBufferDesc.StructureByteStride = 0;

    // 指向存临时索引缓冲.
    indexData.pSysMem = indices;
    indexData.SysMemPitch = 0;
    indexData.SysMemSlicePitch = 0;

   // 创建索引缓冲.
    result = device->CreateBuffer(&indexBufferDesc, &indexData, &m_indexBuffer);
    if(FAILED(result))
        {
        return false;
        }

   // 释放临时缓冲.
    delete [] vertices;
    vertices = 0;

    delete [] indices;
    indices = 0;

    return true;
    }

void ModelClass::RenderBuffers(ID3D11DeviceContext* deviceContext)
    {
    unsigned int stride;
    unsigned int offset;

   // 设置顶点缓冲跨度和偏移.
    stride = sizeof(VertexType);
    offset = 0;

    //在input assemberl阶段绑定顶点缓冲，以便能够被渲染
    deviceContext->IASetVertexBuffers(0, 1, &m_vertexBuffer, &stride, &offset);

    //在input assemberl阶段绑定索引缓冲，以便能够被渲染
    deviceContext->IASetIndexBuffer(m_indexBuffer, DXGI_FORMAT_R32_UINT, 0);

   // 设置体元语义，渲染三角形列表.
    deviceContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST);

    return;
    }

CameraClass类主要是得到视图矩阵，代码就不贴了。

    下面是本章的关键部分，shader代码部分，主要包括打开shader文件，编译shader文件，绑定常量缓冲，定义顶点布局，调用shader执行渲染操作等等。

ColorShaderClass.cpp主要代码如下：

bool ColorShaderClass::Render(ID3D11DeviceContext* deviceContext, int indexCount, D3DXMATRIX worldMatrix,
    D3DXMATRIX viewMatrix, D3DXMATRIX projectionMatrix)
    {
    bool result;

这几个shader参数是我们在vs中定义在const buffer中的。

    // 设置shader参数.
    result = SetShaderParameters(deviceContext, worldMatrix, viewMatrix, projectionMatrix);
    if(!result)
        {
        return false;
        }

    // 用shader渲染指定缓冲顶点
    RenderShader(deviceContext, indexCount);

    return true;
    }

bool ColorShaderClass::InitializeShader(ID3D11Device* device, HWND hwnd, WCHAR* vsFilename, WCHAR* psFilename)
    {
    HRESULT result;
    ID3D10Blob* errorMessage;
    ID3D10Blob* vertexShaderBuffer;
    ID3D10Blob* pixelShaderBuffer;
    D3D11_INPUT_ELEMENT_DESC polygonLayout[2];
    unsigned int numElements;
    D3D11_BUFFER_DESC matrixBufferDesc;

   // 初始化指针为空.
    errorMessage = 0;
    vertexShaderBuffer = 0;
    pixelShaderBuffer = 0;

   // 编译vs代码.
    result = D3DX11CompileFromFile(vsFilename, NULL, NULL, "ColorVertexShader", "vs_5_0", D3D10_SHADER_ENABLE_STRICTNESS, 0, NULL,
        &vertexShaderBuffer, &errorMessage, NULL);
    if(FAILED(result))
        {
        // 如果vs编译失败，输出错误消息.
        if(errorMessage)
            {
            OutputShaderErrorMessage(errorMessage, hwnd, vsFilename);
            }
        // 如果没有任何错误消息，可能是shader文件丢失.
        else
            {
            MessageBox(hwnd, vsFilename, L"Missing Shader File", MB_OK);
            }

        return false;
        }

    // 编译ps.
    result = D3DX11CompileFromFile(psFilename, NULL, NULL, "ColorPixelShader", "ps_5_0", D3D10_SHADER_ENABLE_STRICTNESS, 0, NULL,
        &pixelShaderBuffer, &errorMessage, NULL);
    if(FAILED(result))
        {
        // 如果ps编译失败，输出错误信息.
        if(errorMessage)
            {
            OutputShaderErrorMessage(errorMessage, hwnd, psFilename);
            }
        // 如果没有任何错误消息，可能是shader文件丢失.
        else
            {
            MessageBox(hwnd, psFilename, L"Missing Shader File", MB_OK);
            }

        return false;
        }

   // 从缓冲创建vs shader.
    result = device->CreateVertexShader(vertexShaderBuffer->GetBufferPointer(), vertexShaderBuffer->GetBufferSize(), NULL, &m_vertexShader);
    if(FAILED(result))
        {
        return false;
        }

    // 从缓冲创建ps shader.
    result = device->CreatePixelShader(pixelShaderBuffer->GetBufferPointer(), pixelShaderBuffer->GetBufferSize(), NULL, &m_pixelShader);
    if(FAILED(result))
        {
        return false;
        }

    // 设置数据布局layout，以便在shader中使用.
    // 定义要和ModelClass中的顶点结构一致.
    polygonLayout[0].SemanticName = "POSITION"; //vs中的输入参数
    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 = "COLOR";
    polygonLayout[1].SemanticIndex = 0;
    polygonLayout[1].Format = DXGI_FORMAT_R32G32B32A32_FLOAT;
    polygonLayout[1].InputSlot = 0;
    polygonLayout[1].AlignedByteOffset = D3D11_APPEND_ALIGNED_ELEMENT;
    polygonLayout[1].InputSlotClass = D3D11_INPUT_PER_VERTEX_DATA;
    polygonLayout[1].InstanceDataStepRate = 0;

   // 得到layout中的元素数量
    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;

    // 设置动态矩阵描述.
    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;

    // 创建const buffer指针，以便访问shader常量.
    result = device->CreateBuffer(&matrixBufferDesc, NULL, &m_matrixBuffer);
    if(FAILED(result))
        {
        return false;
        }

    return true;
    }

bool ColorShaderClass::SetShaderParameters(ID3D11DeviceContext* deviceContext, D3DXMATRIX worldMatrix,
    D3DXMATRIX viewMatrix, D3DXMATRIX projectionMatrix)
    {
    HRESULT result;
    D3D11_MAPPED_SUBRESOURCE mappedResource;
    MatrixBufferType* dataPtr;
    unsigned int bufferNumber;

    // 传入shader前，确保矩阵转置，这是D3D11的要求.
    D3DXMatrixTranspose(&worldMatrix, &worldMatrix);
    D3DXMatrixTranspose(&viewMatrix, &viewMatrix);
    D3DXMatrixTranspose(&projectionMatrix, &projectionMatrix);

    //  锁定常量缓冲，以便能够写入.
    result = deviceContext->Map(m_matrixBuffer, 0, D3D11_MAP_WRITE_DISCARD, 0, &mappedResource);
    if(FAILED(result))
        {
        return false;
        }

    // 得到const buffer指针.
    dataPtr = (MatrixBufferType*)mappedResource.pData;

    // 设置world,view以及projection矩阵.
    dataPtr->world = worldMatrix;
    dataPtr->view = viewMatrix;
    dataPtr->projection = projectionMatrix;

    // 解锁常量缓冲.
    deviceContext->Unmap(m_matrixBuffer, 0);

    // 设置常量缓冲位置.
    bufferNumber = 0;

    // 用更新后的值设置常量缓冲.
    deviceContext->VSSetConstantBuffers(bufferNumber, 1, &m_matrixBuffer);

    return true;
    }

DrawIndexed函数会根据指定的索引缓冲、体元类型、相关shader，向GPU传送一个draw primitive的命令，从而真正开始体元的渲染操作。

void ColorShaderClass::RenderShader(ID3D11DeviceContext* deviceContext, int indexCount)
    {
    // 绑定顶点布局.
    deviceContext->IASetInputLayout(m_layout);

    // 设置渲染使用vs和ps.
    deviceContext->VSSetShader(m_vertexShader, NULL, 0);
    deviceContext->PSSetShader(m_pixelShader, NULL, 0);

   // 渲染三角形
    deviceContext->DrawIndexed(indexCount, 0, 0);

    return;
    }

程序运行后如下图所示：

 

完整的代码请参考：

工程文件myTutorialD3D11_4

代码下载：

https://files.cnblogs.com/mikewolf2002/myTutorialD3D11.zip