使用Windows GDI 做一个3D”软引擎“-Part1

2020-12-13 03:19

阅读：385

标签：des style class blog code java

前：

　　最近几天一个很虎比的教程吸引了我的视线，原作者使用c# / JavaScript逐步实现了一个基本的3D软引擎。

我不懂上面提到的语言，所以，准备用我熟悉的C++和Win32实现重造这个轮子。：）

注意：

这不是一篇关于DirectX / OpenGL （GPU）的文章，本系列文章将实现一个软件（CPU）驱动的“DirectX”，很有趣吧，啊哈。
本文假设读者有一定的计算机图形学的基础，使用OpenGL / DirectX 写过程序。
本文假设读者有一定的Win32基础（不是MFC），最起码能写出一个空白窗口的程序。
有人可能会问，现在的计算机都有显卡，问什么还要写软引擎呢？的确，对于实际的应用来说，这东西确实没啥用，写这个东西只是出于好玩，另外，它也能帮助你真正的理解3D流水线，当你再去学DirectX和OpenGL的时候，也会变得更加简单。

正文：

　　本文将实现下面这个小玩意（仅仅使用Win32中的SetPixel()函数）：

soscw.com,搜素材

源码下载：链接: http://pan.baidu.com/s/1kTidLYn 密码: 5qul

（注：源码中使用了一点C++11的特性，请使用支持C++11的编译器编译）

1.创建窗口.

要绘制东西，首先要有一个窗口，为此我们设计一个BasicGame类:

BasicGame.h

 1 #ifndef _BASIC_GAME_
 2 #define _BASIC_GAME_
 3 
 4 #include  5 #include string>
 6 
 7 class BasicGame
 8 {
 9 public:
10     virtual bool init(){return true;}
11     virtual void render(){}
12     virtual void quit(){}
13     virtual void update(float deltaTime){};
14 
15     BasicGame();
16     virtual ~BasicGame(){}
17 
18     bool create(HINSTANCE instance, int cmdShow);
19 
20     std::string getCaption() {return caption_;}
21     int    getWidth() {return width_;}
22     int getHeight() {return height_;}
23     HWND getHwnd(){return hwnd_;}
24 
25     void setCaption(std::string caption){caption_ = caption;}
26     void setWidth(int width) {width_ = width;}
27     void setHeight(int height) {height_ = height;}
28 
29 private:
30     WORD registerClass(HINSTANCE instance);
31     bool windowInit(HINSTANCE instance, int cmdShow);
32 
33     static LRESULT CALLBACK WndProc(HWND wnd, UINT msg, WPARAM wParam, LPARAM lParam);
34 
35 protected:
36     std::string caption_;
37     int height_;
38     int width_;
39     HWND hwnd_;
40 };
41 
42 #endif //_BASIC_GAME_

BasicGame.cpp

 1 #include "BasicGame.h"
 2 
 3 BasicGame::BasicGame()
 4 {
 5     width_ = 800;
 6     height_ = 600;
 7 }
 8 
 9 bool BasicGame::create(HINSTANCE instance, int cmdShow)
10 {
11     registerClass(instance);
12 
13     if(!windowInit(instance, cmdShow))
14     {
15         return false;
16     }
17 
18     return true;
19 }
20 
21 WORD BasicGame::registerClass(HINSTANCE instance)
22 {
23     WNDCLASSEX wcex;
24 
25     wcex.cbSize = sizeof(WNDCLASSEX); 
26 
27     wcex.style            = CS_HREDRAW | CS_VREDRAW;
28     wcex.lpfnWndProc    = (WNDPROC)BasicGame::WndProc;
29     wcex.cbClsExtra        = 0;
30     wcex.cbWndExtra        = 0;
31     wcex.hInstance        = instance;
32     wcex.hIcon            = NULL;
33     wcex.hCursor        = LoadCursor(NULL, IDC_ARROW);
34     wcex.hbrBackground    = (HBRUSH)(COLOR_WINDOW+1);
35     wcex.lpszMenuName    = NULL;
36     wcex.lpszClassName    = "BasicGame";
37     wcex.hIconSm        = NULL;
38 
39     return RegisterClassEx(&wcex);
40 }
41 
42 bool BasicGame::windowInit(HINSTANCE instance, int cmdShow)
43 {
44     hwnd_ = CreateWindow(
45         "BasicGame", 
46         caption_.c_str(), 
47         WS_OVERLAPPEDWINDOW,
48         CW_USEDEFAULT, 
49         0, 
50         CW_USEDEFAULT,
51         0, 
52         NULL, 
53         NULL, 
54         instance, 
55         NULL);
56 
57     if (!hwnd_)
58         return false;
59 
60     MoveWindow(hwnd_,0,0,width_,height_,true);
61     ShowWindow(hwnd_, cmdShow);
62     UpdateWindow(hwnd_);
63 
64     return true;
65 }
66 
67 LRESULT CALLBACK  BasicGame::WndProc(HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam)
68 {
69     switch (msg) 
70     {
71     case WM_DESTROY:
72         PostQuitMessage(0);
73         break;
74     }
75     return DefWindowProc(hWnd, msg, wParam, lParam);
76 }

BasicGame简单的对窗口创建进行了封装，其中

1 virtual bool init(){return true;}
2 virtual void render(){}
3 virtual void quit(){}
4 virtual void update(float deltaTime){};

View Code

是为了后面实现游戏循环预留的接口，我们要创建窗口，只需要继承BasicGame就可以了。

2.游戏循环。

利用上面的类，我们便可以这样写WinMain()函数：

 1 #include "BasicGame.h"
 2 #include  3 
 4 int WINAPI WinMain(HINSTANCE hInstance,
 5                    HINSTANCE hPrevInstance,
 6                    LPSTR lpCmdLine,
 7                    int nCmdShow)
 8 {
 9     std::unique_ptr game(new BasicGame);
10 
11     game->setCaption("Hello,World");
12     game->setWidth(800);
13     game->setHeight(600);
14 
15     if(!game->create(hInstance, nCmdShow))
16         return -1;
17 
18     game->init();
19 
20     float tNow = 0.f;
21     float tPre = static_castfloat>(GetTickCount()) / 1000;
22 
23     float timeSinceLastUpdate = 0.f;
24 
25     float timePerPrame = 1.f / 60.f;
26 
27     MSG msg;
28     for(;;)
29     {
30         if(PeekMessage(&msg, NULL, 0, 0, PM_REMOVE))
31         {
32             if(msg.message == WM_QUIT) break;
33             TranslateMessage(&msg);
34             DispatchMessage(&msg);
35         }
36         else
37         {
38             tNow = static_castfloat>(GetTickCount()) / 1000;
39 
40             timeSinceLastUpdate += (tNow - tPre);
41             while(timeSinceLastUpdate > timePerPrame)
42             {
43                 timeSinceLastUpdate -= timePerPrame;
44                 game->update(timePerPrame);
45             }
46             tPre = tNow;
47             game->render();
48         }
49     }
50     game->quit();
51     
52     return static_castint>(msg.wParam);
53 };

如果我们在一个继承自BasicGame的新类NewGame，只需要将

1 std::unique_ptr game(new BasicGame);

换成

1 std::unique_ptr game(new NewGame);

然后再NewGame类中实现init(),render(),quit(),update(float)四个函数即可。

重点在于20-50行到底做了什么？如果你做过游戏，那么你一定不会陌生：-）

GetTickCount()函数返回系统启动到现在经过的时间（毫秒），能存储的最大值约为49.71天，超过这个期限，就会归零，我们认为是无穷大即可。

我们用TimeSinceLastUpdate变量表示自从上一次执行update函数所经过的时间。

每次执行update函数，我们便减去一个TimePerFrame（每帧所耗费的时间）。

上面的示例中，TimePerFrame = 1.0f / 60.0f ，则update()函数每秒将被执行60次，无论你的电脑性能如何。这个特性对于视频游戏来说是非常非常重要的。

3.数学基础。

本文不是讨论3D数学的，所以直接使用了开源的数学库（GLM），关于这个库的用法请看这篇博文。

4.Camera & Mesh。

现在可以开始我们的软引擎的编码了。：）

首先，我们需要定义Camera和Mesh两个结构体，其中Mesh用来表示3D空间中的一个物体。

代码如下：

 1 #define GLM_FORCE_RADIANS
 2 #include  3 #include  4 #include string>
 5 
 6 namespace SoftEngine
 7 {
 8 
 9     struct Camera
10     {
11         glm::vec3 position_;
12         glm::vec3 target_;
13     };
14 
15     struct Mesh
16     {
17         std::string name_;
18         glm::vec3 position_;
19         float rotation_;
20         glm::vec4 *vertices_;
21         int verticesCount_;
22 
23         Mesh(std::string name, int verticesCount)
24         {
25             verticesCount_ = verticesCount;
26             vertices_ = new glm::vec4 [verticesCount_];
27 
28             name_ = name;
29         }
30         ~Mesh()
31         {
32             delete vertices_;
33         }
34     };
35 }

举例来说，如果你用Mesh来描述一个立方体：

soscw.com,搜素材

通常只需要这样做：

 1 SoftEngine::Mesh mesh("Cube", 8);
 2 
 3 mesh.vertices_[0] = glm::vec4(-1.f, 1.f, 1.f, 1.f);
 4 mesh.vertices_[1] = glm::vec4( 1.f, 1.f, 1.f, 1.f);
 5 mesh.vertices_[2] = glm::vec4(-1.f,-1.f, 1.f, 1.f);
 6 mesh.vertices_[3] = glm::vec4( 1.f,-1.f, 1.f, 1.f);
 7 mesh.vertices_[4] = glm::vec4(-1.f, 1.f,-1.f, 1.f);
 8 mesh.vertices_[5] = glm::vec4( 1.f, 1.f,-1.f, 1.f);
 9 mesh.vertices_[6] = glm::vec4( 1.f,-1.f,-1.f, 1.f);
10 mesh.vertices_[7] = glm::vec4(-1.f,-1.f,-1.f, 1.f);

5.Device.

有了Mesh，如何显示它呢？

我们知道，屏幕是二维的，而Mesh中的点是3维的，所以，如何把3维世界中的点画到二维的世界中是关键所在。

我们创建Device类，完成这项工作。

由第三部分提到的那篇博文，我们知道，最重要的部分在于下面的等式：

1 auto transformMatrix = projectionMatrix * viewMatrix * worldMatrix;

我们的Device类如下所示：

 1 namespace SoftEngine
 2 {
 3     class Device
 4     {
 5     public:
 6 
 7         Device(HWND hWnd);
 8 
 9         ~Device();
10 
11         void present();
12 
13         void render(Camera camera, Mesh *meshes, int length);
14 
15     private:
16         
17         glm::vec2 TransformCoordinates(glm::vec4 vector, glm::mat4 transformation);
18 
19         void putPixel(int x, int y, COLORREF color);
20         
21         void drawPoint(glm::vec2 point);
22         
23         glm::vec2 project(glm::vec4 coord, glm::mat4 transMat);
24     private:
25 
26         byte *backBuffer_;
27         HWND hWnd_;
28         HDC hDc_;
29         HDC mDc_;
30         float width_;
31         float height_;
32         HBITMAP bmp_;
33 
34     };
35 }

类的定义：

 1 #include "SoftEngine.h"
 2 #include  3 
 4 namespace SoftEngine
 5 {
 6 
 7     Device::Device(HWND hWnd)
 8     {
 9         hWnd_ = hWnd;
10 
11         hDc_ = GetDC(hWnd_);
12         mDc_ = ::CreateCompatibleDC(hDc_);
13 
14         RECT rect = {0, 0, 0, 0};
15         GetClientRect(hWnd_, &rect);
16         width_ = static_castfloat>(rect.right - rect.left);
17         height_ = static_castfloat>(rect.bottom - rect.top);
18 
19         DeleteObject(bmp_);
20         bmp_ = ::CreateCompatibleBitmap(hDc_, width_, height_);
21         ::SelectObject(mDc_, bmp_);
22     }
23 
24     Device::~Device()
25     {
26         DeleteObject(hDc_);
27         DeleteObject(mDc_);
28     }
29 
30     void Device::present()
31     {
32         BitBlt(hDc_, 0, 0, width_, height_, mDc_, 0, 0, SRCCOPY);
33         DeleteObject(bmp_);
34         bmp_ = ::CreateCompatibleBitmap(hDc_, width_, height_);
35         ::SelectObject(mDc_, bmp_);
36     }
37 
38     void Device::putPixel(int x, int y, COLORREF color)
39     {
40         SetPixel(mDc_, x, y, color);
41     }
42 
43     glm::vec2 Device::TransformCoordinates(glm::vec4 vector, glm::mat4 transformation)
44     {
45         auto x = (vector.x * transformation[0][0]) + (vector.y * transformation[1][0]) + (vector.z * transformation[2][0]) + transformation[3][0];
46         auto y = (vector.x * transformation[0][1]) + (vector.y * transformation[1][1]) + (vector.z * transformation[2][1]) + transformation[3][1];
47         //    auto z = (vector.x * transformation[0][2]) + (vector.y * transformation[1][2]) + (vector.z * transformation[2][2]) + transformation[3][2];
48         auto w = (vector.x * transformation[0][3]) + (vector.y * transformation[1][3]) + (vector.z * transformation[2][3]) + transformation[3][3];
49         return glm::vec2(x/ w, y / w);
50     }
51 
52     glm::vec2 Device::project(glm::vec4 coord, glm::mat4 transMat)
53     {
54         glm::vec2 point = TransformCoordinates(coord, transMat);
55 
56         auto x =   point.x * width_  + width_  / 2.0f;
57         auto y = - point.y * height_ + height_ / 2.0f;
58 
59         return glm::vec2(x, y);
60     }
61 
62     void Device::drawPoint(glm::vec2 point)
63     {
64         //Clipping.
65         if(point.x >= 0 && point.y >= 0 && point.x  height_)
66         {
67             putPixel(point.x, point.y, RGB(255, 255, 0));
68         }
69     }
70 
71     void Device::render(Camera camera, Mesh *meshes, int length)
72     {
73         auto viewMatrix = glm::lookAt(camera.position_, camera.target_,
74             glm::vec3(0.0f, 1.0f, 0.0f));
75 
76         auto temp = width_ / height_;
77         auto projectionMatrix = glm::perspective(45.0f, temp, 0.01f, 10.0f);
78 
79         for(int i = 0; i )
80         {
81             auto worldMatrix = glm::rotate(glm::mat4(1.0f), meshes[i].rotation_, meshes[i].position_);
82 
83             auto transformMatrix = projectionMatrix * viewMatrix * worldMatrix;
84 
85             auto &curMesh = meshes[i];
86 
87             for(int j = 0; j )
88             {
89                 auto point = project(curMesh.vertices_[j], transformMatrix);
90                 drawPoint(point);
91             }
92         }
93     }
94 }

为了显示物体，我们创建自己的Game类：

 1 #ifndef _GAME_
 2 #define _GAME_
 3 
 4 #include "BasicGame.h"
 5 #include "SoftEngine.h"
 6 using namespace SoftEngine;
 7 
 8 class Game : public BasicGame
 9 {
10 public:
11     Game();
12     virtual bool init();
13     virtual void render();
14     virtual void quit();
15     virtual void update(float deltaTime);
16 
17 private:
18     Device device_;
19     Mesh mesh_;
20     Camera camera_;
21 };
22 
23 #endif //_GAME_

类的定义：

 1 #include "Game.h"
 2 
 3 Game::Game()
 4     :device_()
 5     ,mesh_("Cube", 8)
 6     ,camera_()
 7 {}
 8 
 9 bool Game::init()
10 {
11     device_.init(getHwnd());
12 
13     mesh_.vertices_[0] = glm::vec4(-1.f, 1.f, 1.f, 1.f);
14     mesh_.vertices_[1] = glm::vec4( 1.f, 1.f, 1.f, 1.f);
15     mesh_.vertices_[2] = glm::vec4(-1.f,-1.f, 1.f, 1.f);
16     mesh_.vertices_[3] = glm::vec4( 1.f,-1.f, 1.f, 1.f);
17     mesh_.vertices_[4] = glm::vec4(-1.f, 1.f,-1.f, 1.f);
18     mesh_.vertices_[5] = glm::vec4( 1.f, 1.f,-1.f, 1.f);
19     mesh_.vertices_[6] = glm::vec4( 1.f,-1.f,-1.f, 1.f);
20     mesh_.vertices_[7] = glm::vec4(-1.f,-1.f,-1.f, 1.f);
21     
22     mesh_.position_ = glm::vec3(0.5f, 1.0f, 0.0f);
23 
24     mesh_.rotation_ = 0.f;
25 
26     camera_.position_ =  glm::vec3(0, 0, 10.f);
27     camera_.target_ = glm::vec3(0.f);
28 
29     return true;
30 }
31 
32 void Game::render()
33 {
34     device_.render(camera_, &mesh_, 1);
35 
36     device_.present();
37 }
38 
39 void Game::quit()
40 {
41 
42 }
43 
44 void Game::update(float deltaTime)
45 {
46     mesh_.rotation_ += 0.4f * deltaTime;
47     if(mesh_.rotation_ > 360.f)
48         mesh_.rotation_ = 0.f;
49 }

好了，现在运行程序，可以看到立方体的8个顶点在屏幕中央开心的旋转 X)

soscw.com,搜素材

我们现在要做的是在8个点之间连上线，使其看起来更舒服一些。

那么怎么画线呢？请看这里。

我们编写画线函数：

 1 void Device::drawBresenhamLine(glm::vec2 point0, glm::vec2 point1)
 2 {
 3     int x0 = (int)point0.x;
 4     int y0 = (int)point0.y;
 5     int x1 = (int)point1.x;
 6     int y1 = (int)point1.y;
 7 
 8     auto dx = abs(x1 - x0);
 9     auto dy = abs(y1 - y0);
10     auto sx = (x0 1 : -1;
11     auto sy = (y0 1 : -1;
12     auto err = dx - dy;
13 
14     while (true)
15     {
16         drawPoint(glm::vec2(x0, y0));
17 
18         if ((x0 == x1) && (y0 == y1)) break;
19         auto e2 = 2 * err;
20         if (e2 > -dy) { err -= dy; x0 += sx; }
21         if (e2  sy; }
22     }
23 }

有3D基础的人都知道，3D里面最基本的元素就是三角形，如果能画三角形，我们就能画任何物体。

我们称一个三角形为一个“Face”，下面编写我们的Face类：

 1 struct Face
 2 {
 3     int a_;
 4     int b_;
 5     int c_;
 6 
 7     void set(int a, int b, int c)
 8     {
 9         a_ = a;
10         b_ = b;
11         c_ = c;
12     }
13 };

改写Mesh类：

 1 struct Mesh
 2 {
 3     std::string name_;
 4     glm::vec3 position_;
 5     float rotation_;
 6     glm::vec4 *vertices_;
 7     int verticesCount_;
 8     Face *faces_;
 9     int facesCount_;
10 
11     Mesh(std::string name, int verticesCount, int facesCount)
12     {
13         verticesCount_ = verticesCount;
14         vertices_ = new glm::vec4 [verticesCount_];
15         facesCount_ = facesCount;
16         faces_ = new Face [facesCount_];
17 
18         name_ = name;
19     }
20     ~Mesh()
21     {
22         delete vertices_;
23         delete faces_;
24     }
25 };

现在，要显示一个四边形，我们只需要如下代码：

1 mesh_.vertices_[0] = glm::vec4(-1.f, 1.f, 1.f, 1.f);
2 mesh_.vertices_[1] = glm::vec4( 1.f, 1.f, 1.f, 1.f);
3 mesh_.vertices_[2] = glm::vec4(-1.f,-1.f, 1.f, 1.f);
4 mesh_.vertices_[3] = glm::vec4( 1.f,-1.f, 1.f, 1.f);
5 
6 mesh_.faces_[0 ].set(0, 1, 2);
7 mesh_.faces_[1 ].set(1, 2, 3);

下面我们为此编写相应的代码：

 1 auto &curMesh = meshes[i];
 2 
 3 for(int j = 0; j )
 4 {
 5     auto &face = curMesh.faces_[j];
 6 
 7     auto vertexA = curMesh.vertices_[face.a_];
 8     auto vertexB = curMesh.vertices_[face.b_];
 9     auto vertexC = curMesh.vertices_[face.c_];
10 
11     auto pixelA = project(vertexA, transformMatrix);
12     auto pixelB = project(vertexB, transformMatrix);
13     auto pixelC = project(vertexC, transformMatrix);
14 
15     drawBresenhamLine(pixelA, pixelB);
16     drawBresenhamLine(pixelB, pixelC);
17     drawBresenhamLine(pixelC, pixelA);
18 }

现在我们只需要定义立方体的8个顶点和12个面，立方体就能正确地显示了：

 1 mesh_.vertices_[0] = glm::vec4(-1.f, 1.f, 1.f, 1.f);
 2 mesh_.vertices_[1] = glm::vec4( 1.f, 1.f, 1.f, 1.f);
 3 mesh_.vertices_[2] = glm::vec4(-1.f,-1.f, 1.f, 1.f);
 4 mesh_.vertices_[3] = glm::vec4( 1.f,-1.f, 1.f, 1.f);
 5 mesh_.vertices_[4] = glm::vec4(-1.f, 1.f,-1.f, 1.f);
 6 mesh_.vertices_[5] = glm::vec4( 1.f, 1.f,-1.f, 1.f);
 7 mesh_.vertices_[6] = glm::vec4( 1.f,-1.f,-1.f, 1.f);
 8 mesh_.vertices_[7] = glm::vec4(-1.f,-1.f,-1.f, 1.f);
 9     
10 mesh_.faces_[0 ].set(0, 1, 2);
11 mesh_.faces_[1 ].set(1, 2, 3);
12 mesh_.faces_[2 ].set(1, 3, 6);
13 mesh_.faces_[3 ].set(1, 5, 6);
14 mesh_.faces_[4 ].set(0, 1, 4);
15 mesh_.faces_[5 ].set(1, 4, 5);
16     
17 mesh_.faces_[6 ].set(2, 3, 7);
18 mesh_.faces_[7 ].set(3, 6, 7);
19 mesh_.faces_[8 ].set(0, 2, 7);
20 mesh_.faces_[9 ].set(0, 4, 7);
21 mesh_.faces_[10].set(4, 5, 6);
22 mesh_.faces_[11].set(4, 6, 7);

现在我们的程序看起来象下面这样：

soscw.com,搜素材

很神奇对吗？我们只用了一个画点的函数，就画出了这么好玩的东西，Awesome！

ksco

2014.6.24

转载请注明出处。

使用Windows GDI 做一个3D”软引擎“-Part1,搜素材,soscw.com

使用Windows GDI 做一个3D”软引擎“-Part1

标签：des style class blog code java

原文地址：http://www.cnblogs.com/ksco/p/3D_SoftRender_Part1.html

上一篇：html5 canvas绘图-刻度仪表盘的绘制

下一篇：spring源码解析之IOC容器（一）

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：使用Windows GDI 做一个3D”软引擎“-Part1
文章链接：http://soscw.com/essay/27422.html

亲，登录后才可以留言！

使用Windows GDI 做一个3D”软引擎“-Part1

评论

热门文章

推荐文章

最新文章

置顶文章