用DirectX实现魔方(二)_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > 用DirectX实现魔方(二)

用DirectX实现魔方(二)

 2013/7/11 11:14:51  zdd  博客园  我要评论(0)
  • 摘要:这篇说一下如何构造魔方,主要包括魔方几何体的构造及纹理贴图。以下论述皆以三阶魔方为例,三阶魔方共有3x3x3=27个小立方体。构造魔方在第一篇里面说过,最初模型用的是微软的.x文件格式,由于魔方要实现按层旋转,所以不能将整个模型做成一个.x文件,只能分成若干个小立方体,每个立方体对应一个.x文件。这导致在发布程序的时候也要发布这些模型文件,而且.x文件已经逐渐为微软遗弃,所以就干脆不用了,自己画吧。魔方由27个小立方体构成,所以只要绘制一个小立方体,并复制27分
  • 标签:实现

这篇说一下如何构造魔方,主要包括魔方几何体的构造及纹理贴图。以下论述皆以三阶魔方为例,三阶魔方共有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!

发表评论
用户名: 匿名