使用Windows GDI 做一个3D”软引擎“-Part1
时间：2014-06-25 21:04:36
收藏：0
阅读：390
前：
最近几天一个很虎比的教程吸引了我的视线，原作者使用c# / JavaScript逐步实现了一个基本的3D软引擎。
我不懂上面提到的语言，所以，准备用我熟悉的C++和Win32实现重造这个轮子。：）
注意：
- 这不是一篇关于DirectX / OpenGL （GPU）的文章，本系列文章将实现一个软件（CPU）驱动的“DirectX”，很有趣吧，啊哈。
- 本文假设读者有一定的计算机图形学的基础，使用OpenGL / DirectX 写过程序。
- 本文假设读者有一定的Win32基础（不是MFC），最起码能写出一个空白窗口的程序。
- 有人可能会问，现在的计算机都有显卡，问什么还要写软引擎呢？的确，对于实际的应用来说，这东西确实没啥用，写这个东西只是出于好玩，另外，它也能帮助你真正的理解3D流水线，当你再去学DirectX和OpenGL的时候，也会变得更加简单。
正文：
本文将实现下面这个小玩意（仅仅使用Win32中的SetPixel()函数）：
源码下载：链接: 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 <windows.h> 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){};
是为了后面实现游戏循环预留的接口，我们要创建窗口，只需要继承BasicGame就可以了。
2.游戏循环。
利用上面的类，我们便可以这样写WinMain()函数：
1 #include "BasicGame.h" 2 #include <memory> 3 4 int WINAPI WinMain(HINSTANCE hInstance, 5 HINSTANCE hPrevInstance, 6 LPSTR lpCmdLine, 7 int nCmdShow) 8 { 9 std::unique_ptr<BasicGame> 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_cast<float>(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_cast<float>(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_cast<int>(msg.wParam); 53 };
- 如果我们在一个继承自BasicGame的新类NewGame，只需要将
1 std::unique_ptr<BasicGame> game(new BasicGame);
换成
1 std::unique_ptr<BasicGame> 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 <glm/glm.hpp> 3 #include <glm/gtc/matrix_transform.hpp> 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来描述一个立方体：
通常只需要这样做：
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 <cmath> 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_cast<float>(rect.right - rect.left); 17 height_ = static_cast<float>(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 < width_ && point.y < 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 < length; 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 < curMesh.verticesCount_; 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)
我们现在要做的是在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 < x1) ? 1 : -1; 11 auto sy = (y0 < y1) ? 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 < dx) { err += dx; y0 += 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 < curMesh.facesCount_; 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);
现在我们的程序看起来象下面这样：
很神奇对吗？我们只用了一个画点的函数，就画出了这么好玩的东西，Awesome！
ksco
2014.6.24
转载请注明出处。
评论（0）