Directx11学习笔记【十二】 画一个旋转的彩色立方体

上一次我们学习了如何画一个2D三角形，现在让我们进一步学习如何画一个旋转的彩色立方体吧。

具体流程同画三角形类似，因此不再给出完整代码了，不同的部分会再说明。

由于我们要画彩色的立方体，所以顶点结构体中加入颜色变量

struct Vertex
{
    XMFLOAT3 pos;
    XMFLOAT4 color;
};

着色器代码

 cbuffer cbPerObject
 {
     float4x4 gWorldViewProj;
 };

 struct VertexIn
 {
     float3 PosL  : POSITION;
         float4 Color : COLOR;
 };

 struct VertexOut
 {
     float4 PosH  : SV_POSITION;
         float4 Color : COLOR;
 };

 VertexOut VS(VertexIn vin)
 {
     VertexOut vout;

     // Transform to homogeneous clip space.
     vout.PosH = mul(float4(vin.PosL, 1.0f), gWorldViewProj);

     // Just pass vertex color into the pixel shader.
         vout.Color = vin.Color;

         return vout;
 }

 float4 PS(VertexOut pin) : SV_Target
 {
     return pin.Color;
 }

 technique11 ColorTech
 {
     pass P0
     {
         SetVertexShader( CompileShader( vs_5_0, VS() ) );
         SetGeometryShader( NULL );
         SetPixelShader( CompileShader( ps_5_0, PS() ) );
     }
 }

定义了一个矩阵gWorldViewProj，后面我们会利用它进行旋转立方体

BoxDemo.h

 #pragma once

 #include "Dx11DemoBase.h"
 #include "d3dx11effect.h"

 class BoxDemo : public Dx11DemoBase
 {
 public:
     BoxDemo();
     ~BoxDemo();

     bool LoadContent() override;
     void UnLoadContent() override;

     void Update(float dt) override;
     void Render() override;

 private:
     ID3D11Buffer *m_pVertexBuffer;
     ID3D11Buffer *m_pIndexBuffer;//新增
     ID3D11InputLayout *m_pInputLayout;

     ID3DX11Effect *m_pFx;
     ID3DX11EffectTechnique *m_pTechnique;
     ID3DX11EffectMatrixVariable *m_pFxWorldViewProj;
     XMFLOAT4X4 m_world;
     XMFLOAT4X4 m_view;
     XMFLOAT4X4 m_proj;

 };

LoadContent()函数

顶点信息及缓冲的创建

 Vertex vertices[] =
     {
         { XMFLOAT3(-0.5f, -0.5f, -0.5f), XMFLOAT4(, , , ) },//white
         { XMFLOAT3(-0.5f, +0.5f, -0.5f), XMFLOAT4(, , , ) },//black
         { XMFLOAT3(+0.5f, +0.5f, -0.5f), XMFLOAT4(, , , ) },//red
         { XMFLOAT3(+0.5f, -0.5f, -0.5f), XMFLOAT4(, , , ) },//green
         { XMFLOAT3(-0.5f, -0.5f, +0.5f), XMFLOAT4(, , , ) },//blue
         { XMFLOAT3(-0.5f, +0.5f, +0.5f), XMFLOAT4(, , , ) },//yellow
         { XMFLOAT3(+0.5f, +0.5f, +0.5f), XMFLOAT4(, , , ) },//cyan
         { XMFLOAT3(+0.5f, -0.5f, +0.5f), XMFLOAT4(, , , ) }//magenta
     };

     D3D11_BUFFER_DESC vertexDesc;
     ZeroMemory(&vertexDesc, sizeof(vertexDesc));
     vertexDesc.Usage = D3D11_USAGE_DEFAULT;
     vertexDesc.BindFlags = D3D11_BIND_VERTEX_BUFFER;
     vertexDesc.ByteWidth = sizeof(Vertex)* ;

     D3D11_SUBRESOURCE_DATA resourceData;
     ZeroMemory(&resourceData, sizeof(resourceData));
     resourceData.pSysMem = vertices;
     result = m_pd3dDevice->CreateBuffer(&vertexDesc, &resourceData, &m_pVertexBuffer);
     if (FAILED(result))
     {
         return false;
     }

相比三角形，立方体还要定义Index信息，来确定立方体的六个面

 UINT indices[] = {
         // front face
         , , ,
         , , ,

         // back face
         , , ,
         , , ,

         // left face
         , , ,
         , , ,

         // right face
         , , ,
         , , ,

         // top face
         , , ,
         , , ,

         // bottom face
         , , ,
         , ,
     };

     D3D11_BUFFER_DESC indexDesc;
     ZeroMemory(&indexDesc, sizeof(indexDesc));
     indexDesc.Usage = D3D11_USAGE_IMMUTABLE;
     indexDesc.BindFlags = D3D11_BIND_INDEX_BUFFER;
     indexDesc.ByteWidth = sizeof(UINT)* ;

     D3D11_SUBRESOURCE_DATA indexData;
     ZeroMemory(&indexData, sizeof(indexData));
     indexData.pSysMem = indices;
     result = m_pd3dDevice->CreateBuffer(&indexDesc, &indexData, &m_pIndexBuffer);
     if (FAILED(result))
     {
         return false;
     }

定义输入布局

 D3D11_INPUT_ELEMENT_DESC solidColorLayout[] =
     {
         { "POSITION", , DXGI_FORMAT_R32G32B32_FLOAT, , , D3D11_INPUT_PER_VERTEX_DATA,  },
         { "COLOR", , DXGI_FORMAT_R32G32B32_FLOAT, , , D3D11_INPUT_PER_VERTEX_DATA,  }
     };
     UINT numLayoutElements = ARRAYSIZE(solidColorLayout);
     D3DX11_PASS_DESC passDesc;
     m_pTechnique->GetPassByIndex()->GetDesc(&passDesc);

     result = m_pd3dDevice->CreateInputLayout(solidColorLayout, numLayoutElements, passDesc.pIAInputSignature,
         passDesc.IAInputSignatureSize, &m_pInputLayout);

Update()函数----实现旋转

怎么实现立方体的旋转呢？我们之前不是给出了 world,view,proj三个矩阵吗，实现旋转的一种方式就是根据游戏时间旋转相应矩阵(例如world矩阵)。

可以定义一个静态变量表示游戏时间，每一帧运行时更新t值，同时对矩阵作相应旋转即可。

 static float t = 0.0f;
     t += (float)XM_PI * 0.0125f;
     static DWORD dwTimeStart = ;
     DWORD dwTimeCur = GetTickCount();
     if (dwTimeStart == )
         dwTimeStart = dwTimeCur;
     t = (dwTimeCur - dwTimeStart) / 1000.0f;

     XMVECTOR pos = XMVectorSet(2.0f, 0.0f, 0.0f, 1.0f);
     XMVECTOR target = XMVectorSet(0.0f, 0.0f, 0.0f, 1.0f);
     XMVECTOR up = XMVectorSet(0.0f, 1.0f, 0.0f, 0.0f);

     XMMATRIX V = XMMatrixLookAtLH(pos, target, up);
     XMStoreFloat4x4(&m_view, V);
     XMMATRIX T = XMMatrixPerspectiveFovLH(XM_PIDIV2, m_width / static_cast<float>(m_height),
         0.01f, 100.0f);
     XMStoreFloat4x4(&m_proj, T);
     //根据时间旋转world矩阵
     XMMATRIX P = XMMatrixRotationY(t);
     XMStoreFloat4x4(&m_world, P);

Render()函数

和之前的代码大部分一样，不同的是要设置IndexBuffer，绘制的时候要用DrawIndexed()而不是Draw().

 if (m_pImmediateContext == )
         return;
     //清除渲染目标视图
     float clearColor[] = { 1.0f, 1.0f, 1.0f, 1.0f };//背景颜色
     m_pImmediateContext->ClearRenderTargetView(m_pRenderTargetView, clearColor);

     UINT stride = sizeof(Vertex);
     UINT offset = ;
     //设置数据信息格式控制信息
     m_pImmediateContext->IASetInputLayout(m_pInputLayout);
     //设置要绘制的几何体信息
     m_pImmediateContext->IASetVertexBuffers(,,&m_pVertexBuffer,&stride,&offset);
     m_pImmediateContext->IASetIndexBuffer(m_pIndexBuffer, DXGI_FORMAT_R32_UINT, );
     //指明如何绘制
     m_pImmediateContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST);

     //设置常量
     XMMATRIX world = XMLoadFloat4x4(&m_world);
     XMMATRIX view = XMLoadFloat4x4(&m_view);
     XMMATRIX proj = XMLoadFloat4x4(&m_proj);
     XMMATRIX worldViewProj = world*view*proj;
     m_pFxWorldViewProj->SetMatrix(reinterpret_cast<float*>(&worldViewProj));

     D3DX11_TECHNIQUE_DESC techDesc;
     m_pTechnique->GetDesc(&techDesc);
     for (UINT i = ; i < techDesc.Passes; ++i)
     {
         m_pTechnique->GetPassByIndex(i)->Apply(, m_pImmediateContext);
         m_pImmediateContext->DrawIndexed(, , );
     }
     //马上输出
     m_pSwapChain->Present(, );

这样我们的工作都完成了，运行便可以得到一个旋转的彩色立方体了.

下面是运行的一个截图