簡單的圖形學（一）

看到葉大的文章用JavaScript玩轉計算機圖形學(一)光線追蹤入門 - Milo Yip - 博客園，裏面有幾個小例子，因此把這些效果用C++再實現一遍。

bajdcc/GameFramework，這一系列停更很久了，只是沒想到比較有趣的點子，拿它來練習再好不過，緣由有：Direct2D渲染、支持lua腳本、C++編寫。因爲是光線追蹤，因此實際上能夠說不依賴任何庫，只要有一個CPU就能完成計算。

目前只作了兩個效果，具體的講述移步博客，我再也不贅述。

代碼：

• https://github.com/bajdcc/GameFramework/blob/master/CCGameFramework/base/pe2d/RenderSphere.cpp（光線追蹤）
• https://github.com/bajdcc/GameFramework/blob/master/CCGameFramework/base/pe2d/PhysicsEngine2D.cpp#L73（色彩圖）

色彩圖

色彩圖

這只是一個基本的例子，講述如何經過像素操做來改變色彩。

咱們一張圖就如同一個二階矩陣，每一個顏色是一個int，就這麼簡單。

具體實現的過程：

1. 窗口收到WM_PAINT消息，開始啓用Direct2D繪製
2. 咱們的窗口裏面是樹狀關係的窗口/控件組，因此遞歸執行繪製操做
3. 展現控件執行繪製操做
4. 建立一個顏色數組，修改之
5. 根據數組建立一個位圖，將它保存供重用
6. 利用Direct2D的渲染操做將該位圖渲染

簡單的光線追蹤

光線追蹤(左) 以及 法向量圖(右)

左邊的光線追蹤我一開始也沒有搞明白，等到實現以後才明白。

實現原理很簡單：

1. 一個眼睛，一個球，沒有光
2. 最終的結果要投影到一塊屏幕上，屏幕和眼睛是有一個距離的，就像拍照時手要比個相框同樣
3. 眼睛、屏幕、球，萬事俱備（詳見用JavaScript玩轉計算機圖形學(一)光線追蹤入門 - Milo Yip - 博客園 第一張圖）

最主要操做：

1. 屏幕上給每一個像素標記一個點
2. 眼睛與那些點造成一個射線（光線）
3. 射線無限延長（追蹤），你把它當作激光
4. 激光有可能就照在了球上，也有可能不在球上
5. 對於照在球上的激光，我只要算一下激光出發點（眼睛）到激光結束點（激光與球交點）的距離便可。
6. 將二者距離（正數）最終映射到0-255，即RGB，根據RGB值肯定像素顏色
7. 若是激光沒有打中球，對應像素表現爲黑色

理一下映射關係：3D空間-->2D屏幕，距離-->像素顏色。

右邊是一個法向量圖，不一樣的是：並不是由距離肯定像素顏色，而是由該點法向量肯定顏色。

激光打中球時，咱們計算出交點的座標，同時也計算出激光到該點的直線，其實就是法向量。

法向量方程有四個參數，可是這裏場景很簡單——球的法向量（單位向量）通過球心，因此其實只有三個參數，咱們將三個參數（-1~1）映射到RGB。

後面要完成的：

1. 用JavaScript玩轉計算機圖形學(二)基本光源 - Milo Yip - 博客園
2. 用 C 語言畫光（一）：基礎
3. 用 C 語言畫光（二）：構造實體幾何

由https://zhuanlan.zhihu.com/p/30864679備份。