【十天自制軟渲染器】DAY 01：圖形學學習建議與環境搭建

推薦直接閱讀博客原文，更新更及時，閱讀體驗更佳

若是你以爲我寫的不錯，就給我個點個贊吧🌟！謝謝你，這對我真的很重要！

「十天自制軟渲染器」這個標題我認可標題黨了.在對圖形學一無所知的狀況下想十天自制一個軟渲染器，就好似一節課沒上過卻試圖一個晚上看完《30 天精通 C++》而後次日早上八點考試得滿分同樣，我認可世界上有這種天才，但很惋惜我不是。

就像前文所說，本系列造的輪子都是站在巨人的肩膀上完成的，須要對相關知識有必定的瞭解和學習，若是你是一個圖形學大牛，這種軟渲染器確定是不屑於作的；若是你剛剛進入圖形學的大門，造一個軟渲染器的輪子，很是利於你鞏固本身的底層知識。

本文主要（90%）參考 ssloy 大神的 tinyrenderer 教程，零依賴實現一個軟渲染器，經過這個教程能夠實現一個簡易版本的 OpenGL2.0（即 rendering pipeline 只支持 Vertex Shader 和 Fragment Shader 兩種自定義 Shader 類型），瞭解 OpenGL 這類圖形學 API 在底層是如何工做的。

我本身造的輪子是 toyRenderer，在 tinyrenderer 的基礎上加入了大量的註釋並按本身的理解優化了部分代碼（不排除有反向優化），若是你們對 tinyrenderer 感興趣，能夠參考一下個人實現和我如今寫的這個教程，點個 star 🌟 就更好不過了～

本專欄的目錄結構和 tinyrenderer 保持一致，方便你們對比閱讀。

前置知識

要想看懂 tinyrenderer 的代碼，須要有必定的知識儲備，下面是我在造輪子時的一些總結，你們學習前能夠參考一下。

1.數學

對於圖形學來講，數學是一道繞不過的坎兒；對於這個軟渲染器器輪子來講，並無涉及太多的數學內容，我我的總結以下：

1.1 高中數學

造一個軟渲染器須要你還記得一些高中幾何的內容，難度都不大，好比說直線的座標公式，重心座標等。

1.2 微積分

微積分其實只有少許的涉及，原教程裏有一點點梯度的內容，我的感受對總體學習進度影響不大。

1.3 線性代數

線性代數涉及的內容比較多，從最簡單的向量，再到各類座標系變換，都須要對線性代數有比較紮實的理解。

若是你線性代數都忘的差很少了，這裏我推薦 3Blue1Brown 的教程——《線性代數的本質》，這是我見過最好的線性代數入門教程了。並且圖形學裏涉及的矩陣變換絕大部分都是三維空間的，基本上看完這門課就能夠上手圖形學的學習了。

2.圖形學

圖形學入門課程我只推薦一個，閆令琪大神的《GAMES101-現代計算機圖形學入門》。

閆令琪大神有多厲害我就很少介紹了，最關鍵的是 GAMES101 優勢太多了：

• 全中文講解，大大下降國內小夥伴的學習門檻
• 課程很是新，2020 年初纔開課，不會存在課程/教案過期的狀況
• 知識點全面，正如課程名「現代圖形學入門」，本課程不但講了經典的光柵化成像，還講了光線追蹤等相對較新較前沿的內容

學完這門課能夠收穫什麼呢？好比說 2077 的圖形設置面板你都知道是啥意思了

若是跟着這門課學下來，其實課下做業就會完成一個小的軟渲染器，但因爲我是後期才加入學習的，因此做業也沒有跟着作，通過搜索發現 tinyrenderer 這個教程推薦的人最多，因此最後參照這個教程實現了本身的軟渲染器。

閆老師的是視頻教程，你們能夠配合他的 PPT 學習。若是習慣看書，我這裏推薦兩本，一本是大名鼎鼎的虎書《Fundamentals of Computer Graphics 4th Edition》，另外一本是《Real Time Rendering 4th》，都是很是經典很是有名的書籍。

這兩本書國內都沒有引進，我這裏有英文版的 PDF，你們能夠看我我的簡介，關注「滷蛋實驗室」後回覆「圖形學」獲取下載連接。

3.C++

本渲染器是用 C++ 寫的，但用到的都是基礎語法，稍微高級點兒的知識就是模版編程和操做符重載。我的認爲只要有其餘語言基礎，看個半小時的 C++ 語法就能夠上手實踐了。

若是上面的三個知識點都掌握的差很少了，我打保票十天內確定能寫出一個軟渲染器；若是沒有掌握好（尤爲是圖形學基礎知識），十天內實現是有些夠嗆。廢話很少說，咱們先去搭環境吧！

---

本教程要作的是一個零依賴的軟渲染器，因此依賴的環境就是 C++ 的開發環境。

注：零依賴意味着這個項目不依賴任何第三方庫，軟渲染意味着全部計算都是在 CPU 側進行的，沒有 GPU 參與

C++ 環境搭建配置有多種方法，最快捷的方式就是直接用高度集成的 IDE，win 電腦能夠用 Visual Studio，Mac 用戶能夠用 Xcode。固然你也能夠用 CMake + VSCode 搭建 C++ 運行環境。

我這我的很懶，日常開發 Xcode 用的又比較多，不想多折騰了，因此直接用 Xcode 構建項目了，小夥伴們千萬不要學習我這種壞習慣。

Xcode 建立 C++ 項目

1.新建項目

1.Xcode 建立 C++ 項目很是簡單，啓動 XCode 後點擊 Create a new Xcode project，建立一個新項目

2.在跳出的彈框裏選擇 Command Line Tool，而後點擊 Next

3.在新的彈窗裏填寫好 Product Name，Language 選擇 C++，而後點擊 Next

4.在新的彈窗裏選擇項目路徑，點擊 Create 建立項目

到這裏項目就建立好了。

2.配置相對路徑

軟渲染器須要對硬盤上的一些文件作一些 IO 操做，這時候就須要配置項目的相對路徑。

首先按照 Product -> Scheme -> Edit Scheme 的次序，打開一個彈窗。

而後在彈窗裏勾選 Using custom working directory，並選擇項目文件所在路徑就可：

3.把源代碼拖進去

由於本項目是零依賴的，渲染方式是根據源代碼生成一張 tga 格式的圖片。由於咱們是來寫軟渲染器而不是寫圖片編碼器的，因此直接把源代碼裏的 tgaimage.h 和 tgaimage.cpp 拖到咱們的項目工程裏就能夠了。

加上 main.cpp，如今的工程目錄裏只有三個文件

.
├── main.cpp
├── tgaimage.cpp
└── tgaimage.h
複製代碼

而後咱們在 main.cpp 裏寫一些簡單的代碼——建立一個 100x100 的圖片，在 (52, 41) 這個座標上畫一個紅的的點（rgb(255, 0, 0)）

#include "tgaimage.h"

const TGAColor red = TGAColor(255, 0, 0, 255);

int main(int argc, char** argv) {
  TGAImage image(100, 100, TGAImage::RGB);
  image.set(52, 41, red);
  image.flip_vertically();
  image.write_tga_file("output/lesson00.tga");
  return 0;
}
複製代碼

點擊 Xcode 左上角三角形的 build 按鈕，若是編譯成功並在 output 這個文件夾下生成一張名爲 lesson00.tga 的圖片，就說明環境配置成功了！ (紅點只有一個像素大，看不清能夠點擊查看大圖)

今天在圖片上畫了一個點，明天咱們就學習一下如何高性能的畫一條直線。

---

若是你以爲我寫的不錯，就給我個點個贊吧🌟！謝謝你，這對我真的很重要！