1. 技术文章
  2. 用DirectX实现魔方（二）

用DirectX实现魔方（二）

由 六眼飞鱼酱① 提交于 2019-12-31 02:00:56

这篇说一下如何构造魔方，主要包括魔方几何体的构造及纹理贴图。以下论述皆以三阶魔方为例，三阶魔方共有3 x 3 x 3 = 27个小立方体。

构造魔方

在第一篇里面说过，最初模型用的是微软的.x文件格式，由于魔方要实现按层旋转，所以不能将整个模型做成一个.x文件，只能分成若干个小立方体，每个立方体对应一个.x文件。这导致在发布程序的时候也要发布这些模型文件，而且.x文件已经逐渐为微软遗弃，所以就干脆不用了，自己画吧。魔方由27个小立方体构成，所以只要绘制一个小立方体，并复制27分，再将这个27个小立方体按一定顺序堆叠在一起，最后贴上纹理，就可以构成一个完整的魔方了。

一个小立方体包含六个面，由于每个面的纹理可能不同，所以需要逐个面绘制，这样可以方便的为每个面单独设置纹理。

一个面由两个三角形构成，这里采用TriangleStrip的方式进行绘制，只需要指定四个顶点即可，如果是TriangleList，则需要六个顶点。

顶点结构

下面来分析一下顶点的数据结构，首先要有一个位置坐标（位置是一个顶点必须要包含的信息），其次，为了添加光照效果，还需要一个法向量。最后，为了实现纹理贴图，需要有纹理坐标。所以一个完整的顶点有以下三部分构成：

  • 位置
  • 法向量
  • 纹理坐标

用一个结构体来表示顶点，如下：

struct Vertex
{
    float  x,  y,  z; // position
    float nx, ny, nz; // normal
    float  u,  v;     // texture
};

定义顶点数组

对于任意一个立方体，它的边长是固定的，所以只要给定立方体8个顶点中任意一个，就可以推算出其他的顶点坐标，这里使用立方体的左下角顶点来计算其他顶点。假设左下角顶点坐标为P(x,y,z)，正方形边长为length，那么有如下关系成立。

顶点数组按面定义，顺序如下：

  • Front face
  • Back  face
  • Left   face
  • Right face
  • Top   face
  • Bottom face

在定义任意一个面的四个顶点时，从左下角点开始按顺时针方向至右下角点结束，如下：

代码如下，解释一下第一行，其他行类似。

  • x,y,z是位置坐标
  • 0.0f, 0.0f, -1.0f是法向量，法向量垂直于该面指向外。
  • 0.0f, 0.0f是纹理坐标
// Vertex buffer data
Vertex vertices[] =
{
    // Front face
    {          x,           y,           z,  0.0f,  0.0f, -1.0f, 0.0f, 0.0f}, // 0
    {          x, y + length_,           z,  0.0f,  0.0f, -1.0f, 1.0f, 0.0f}, // 1
    {x + length_, y + length_,           z,  0.0f,  0.0f, -1.0f, 1.0f, 1.0f}, // 2
    {x + length_,           y,           z,  0.0f,  0.0f, -1.0f, 0.0f, 1.0f}, // 3

    // Back face
    {x + length_,           y, z + length_,  0.0f,  0.0f,  1.0f, 0.0f, 0.0f}, // 4
    {x + length_, y + length_, z + length_,  0.0f,  0.0f,  1.0f, 1.0f, 0.0f}, // 5
    {          x, y + length_, z + length_,  0.0f,  0.0f,  1.0f, 1.0f, 1.0f}, // 6
    {          x,           y, z + length_,  0.0f,  0.0f,  1.0f, 0.0f, 1.0f}, // 7

    // Left face
    {          x,           y, z + length_, -1.0f,  0.0f,  0.0f, 0.0f, 0.0f}, // 8
    {          x, y + length_, z + length_, -1.0f,  0.0f,  0.0f, 1.0f, 0.0f}, // 9
    {          x, y + length_,           z, -1.0f,  0.0f,  0.0f, 1.0f, 1.0f}, // 10
    {          x,           y,           z, -1.0f,  0.0f,  0.0f, 0.0f, 1.0f}, // 11

    // Right face 
    {x + length_,           y,           z,  1.0f,  0.0f,  0.0f, 0.0f, 0.0f}, // 12
    {x + length_, y + length_,           z,  1.0f,  0.0f,  0.0f, 1.0f, 0.0f}, // 13
    {x + length_, y + length_, z + length_,  1.0f,  0.0f,  0.0f, 1.0f, 1.0f}, // 14
    {x + length_,           y, z + length_,  1.0f,  0.0f,  0.0f, 0.0f, 1.0f}, // 15

    // Top face
    {          x, y + length_,           z,  0.0f,  1.0f,  0.0f, 0.0f, 0.0f}, // 16
    {          x, y + length_, z + length_,  0.0f,  1.0f,  0.0f, 1.0f, 0.0f}, // 17
    {x + length_, y + length_, z + length_,  0.0f,  1.0f,  0.0f, 1.0f, 1.0f}, // 18
    {x + length_, y + length_,           z,  0.0f,  1.0f,  0.0f, 0.0f, 1.0f}, // 19

    // Bottom face
    {x + length_,           y,           z,  0.0f, -1.0f,  0.0f, 0.0f, 0.0f}, // 20
    {x + length_,           y, z + length_,  0.0f, -1.0f,  0.0f, 1.0f, 0.0f}, // 21
    {          x,           y, z + length_,  0.0f, -1.0f,  0.0f, 1.0f, 1.0f}, // 22
    {          x,           y,           z,  0.0f, -1.0f,  0.0f, 0.0f, 1.0f}, // 23
};

层的编号

层的编号主要用来确定旋转那一层，层的编号依如下顺序进行。

  • X轴，从左到右，依次为0，1，2层
  • Y轴，从下到上，依次为3，4，5层
  • Z轴，从后至前，依次为6，7，8层

实际上编号都是由各个坐标轴的负方向到正方向依次递增，因为DirectX使用左手系，所以Z轴垂直屏幕向内为正，这与OpenGL正好相反，如果是OpenGL的话，需要将678层颠倒一下。

 

小立方体编号

小立方体编号是初始化小立方体数组时的顺序，在本程序中不以立方体编号来确定哪些立方体要旋转，因为这样比较麻烦，在旋转之后需要更新编号，而且扩展性不好。小立方体编号按上图中6,7,8号层依次进行。顺序从左到右，从下到上，如下图所示（注意，这里只标出了能看见的立方体，看不见的可以按顺序计算出来）

面的编号 

给面编号的原因是，当鼠标点击魔方时，需要确定当前拾取的是哪个面，确定了面以后，再根据鼠标的位置来确定旋转那一层，后续的篇章有详细介绍。面的编号按如下规则。下图中只有三个面可见，看不见的面可以推算出来。

  • Front face    - 0
  • Back face     - 1
  • Left face      - 2
  • Right face    - 3
  • Top face      - 4
  • Bottom face - 5 

纹理贴图

纹理布局如下：前白，后黄，左红，右橙，上绿，下蓝。

 

最初纹理是从图片生成的，后来发现魔方的颜色都是简单颜色，可以省去加载图片的步骤，直接在内存中创建纹理即可。函数CreateTexture有三个参数，分别是纹理宽度，高度及颜色，该函数内部调用D3DXCreateTexture来创建纹理。纹理创建好以后，调用Lock函数锁定之，然后使用memcpy进行颜色填充。

LPDIRECT3DTEXTURE9 D3D9::CreateTexture(int texWidth, int texHeight, D3DCOLOR color)
{
    LPDIRECT3DTEXTURE9 pTexture;

    HRESULT hr = D3DXCreateTexture(d3ddevice_, 
        texWidth, 
        texHeight, 
        0, 
        0, 
        D3DFMT_A8R8G8B8,  // 4 bytes for a pixel 
        D3DPOOL_MANAGED, 
        &pTexture);

    if (FAILED(hr))
    {
        MessageBox(NULL, L"Create texture failed", L"Error", 0);
    }

    // Lock the texture and fill in color
    D3DLOCKED_RECT lockedRect;
    hr = pTexture->LockRect(0, &lockedRect, NULL, 0);
    if (FAILED(hr))
    {
        MessageBox(NULL, L"Lock texture failed!", L"Error", 0);
    }

    DWORD sideColor = 0xff000000; // the side line color

    int side_width = 10;

    // Calculate number of rows in the locked Rect
    int rowCount = (texWidth * texHeight * 4 ) / lockedRect.Pitch;

    for (int i = 0; i < texWidth; ++i)
    {
        for (int j = 0; j < texHeight; ++j)
        {
            int index = i * rowCount + j;

            int* pData = (int*)lockedRect.pBits;

            if (i <= side_width || i >= texWidth - side_width 
                || j <= side_width || j >= texHeight - side_width)
            {
                memcpy(&pData[index], &sideColor, 4);
            }
            else
            {
                memcpy(&pData[index], &color, 4);
            }
        }
    }

    pTexture->UnlockRect(0);

    return pTexture;
}

调用上面的函数依次创建6个面的颜色纹理及魔方内部的纹理（旋转时可见，白色）。

void RubikCube::InitTextures()
{
    DWORD colors[] = 
    {
        0xffffffff, // White,   front face
        0xffffff00, // Yellow,    back face
        0xffff0000, // Red,        left face
        0xffffa500,    // Orange,    right face
        0xff00ff00, // Green,    top face
        0xff0000ff, // Blue,    bottom face
    };

    // Create face textures
    for(int i = 0; i < kNumFaces; ++i)
    {
        face_textures_[i] = d3d9->CreateTexture(texture_width_, texture_height_, colors[i]);
    }

    // Create inner texture
    inner_textures_ = d3d9->CreateInnerTexture(texture_width_, texture_height_, 0xffffffff);

    Cube::SetFaceTexture(face_textures_, kNumFaces);
    Cube::SetInnerTexture(inner_textures_);
}

绘制

在RubikCube类里面依次初始化所有的小立方体。

void RubikCube::InitCubes()
{// Get unit cube length and gaps between layers
    float length = cubes[0].GetLength();
    float cube_length = cubes[0].GetLength();
    float gap = gap_between_layers_;

    // Calculate half face length
    float half_face_length = face_length_ / 2;
    for (int i = 0; i < kNumLayers; ++i)
    {
        for (int j = 0; j < kNumLayers; ++j)
        {
            for (int k = 0; k < kNumLayers; ++k)
            {
                // calculate the front-bottom-left corner coodinates for current cube
                // The Rubik Cube's center was the coordinate center, but the calculation assume the front-bottom-left corner
                // of the Rubik Cube was in the coodinates center, so move half_face_length for each coordinates component.
                float x = i * (cube_length + gap) - half_face_length;
                float y = j * (cube_length + gap) - half_face_length;
                float z = k * (cube_length + gap) - half_face_length;

                // calculate the unit cube index in inti_pos
                int n = i + (j * kNumLayers) + (k * kNumLayers * kNumLayers);

                // Initiliaze cube n
                cubes[n].Init(D3DXVECTOR3(x, y, z));
            }
        }
    }
}

绘制一个小立方体，pIB是一个index buffer数组，共有六个元素，每个元素代表一个面的index buffer。常量kNumFaces_=6。在绘制每个面的时候要先设置这个面的纹理。

void Cube::Draw()
{
    // Setup world matrix for current cube
    d3d_device_->SetTransform(D3DTS_WORLD, &world_matrix_) ;

    // Draw cube by draw every face of the cube
    for(int i = 0; i < kNumFaces_; ++i)
    {
        if(textureId[i] >= 0)
        {
            d3d_device_->SetTexture(0, pTextures[textureId[i]]);
        }
        else
        {
            d3d_device_->SetTexture(0, inner_texture_);
        }

        d3d_device_->SetStreamSource(0, vertex_buffer_, 0, sizeof(Vertex));
        d3d_device_->SetIndices(pIB[i]) ;
        d3d_device_->SetFVF(VERTEX_FVF);

        d3d_device_->DrawIndexedPrimitive(D3DPT_TRIANGLESTRIP, 0, 0, 24, 0, 2);
    }
}

绘制整个魔方，kNumCubes是一个魔方中小立方体的总数，对于三阶魔方来说是3 x 3 x 3 = 27。

//draw all unit cubes to build the Rubik cube
for(int i = 0; i < kNumCubes; i++)
{
    cubes[i].Draw();
}

程序下载

RubikCube

上次发布的时候有一个严重的bug，在旋转的时候会出现丢失某一层的情况，现已修复，欢迎各位继续捉虫。

Haypp coding!

标签
立方体
三阶魔方
顶点坐标
directx
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!