📌推薦直接閱讀博客原文，更新更及時，閱讀體驗更佳
「十天自制軟渲染器」這個標題我承認標題黨了.在對圖形學一無所知的情況下想十天自制一個軟渲染器，就好似一節課沒上過卻試圖一個晚上看完《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 的圖形設置面板你都知道是啥意思了
.jpeg)
如果跟着這門課學下來，其實課下作業就會完成一個小的軟渲染器，但由於我是後期才加入學習的，所以作業也沒有跟着做，經過搜索發現 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 的圖片，就說明環境配置成功了！
(紅點只有一個像素大，看不清可以點擊查看大圖)
今天在圖片上畫了一個點，明天我們就學習一下如何高性能的畫一條直線。
歡迎大家關注我的微信公衆號：滷蛋實驗室，目前專注前端技術，對圖形學也有一些微小研究。
也可以加我的微信 egg_labs，歡迎大家來撩。
