看到葉大的文章用JavaScript玩轉計算機圖形學（一）光線追蹤入門 - Milo Yip - 部落格園，裡面有幾個小例子，所以把這些效果用C++再實現一遍。

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

目前只做了兩個效果，具體的講述移步部落格，我不再贅述。

程式碼：

https：//

github。com/bajdcc/GameF

ramework/blob/master/CCGameFramework/base/pe2d/RenderSphere。cpp

（光線追蹤）

https：//

github。com/bajdcc/GameF

ramework/blob/master/CCGameFramework/base/pe2d/PhysicsEngine2D。cpp#L73

（色彩圖）

色彩圖

色彩圖

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

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

具體實現的過程：

視窗收到WM_PAINT訊息，開始啟用Direct2D繪製

我們的窗口裡面是樹狀關係的視窗/控制元件組，所以遞迴執行繪製操作

展示控制元件執行繪製操作

建立一個顏色陣列，修改之

根據陣列建立一個位圖，將它儲存供重用

利用Direct2D的渲染操作將該點陣圖渲染

簡單的光線追蹤

光線追蹤（左） 以及 法向量圖（右）

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

實現原理很簡單：

一個眼睛，一個球，沒有光

最終的結果要投影到一塊螢幕上，螢幕和眼睛是有一個距離的，就像拍照時手要比個相框一樣

眼睛、螢幕、球，萬事俱備（詳見用JavaScript玩轉計算機圖形學（一）光線追蹤入門 - Milo Yip - 部落格園 第一張圖）

最主要操作：

螢幕上給每個畫素標記一個點

眼睛與那些點形成一個射線（光線）

射線無限延長（追蹤），你把它看成鐳射

鐳射有可能就照在了球上，也有可能不在球上

對於照在球上的鐳射，我只要算一下

鐳射出發點（眼睛）到鐳射結束點（鐳射與球交點）的距離

即可。

將兩者距離（正數）最終對映到0-255，即RGB，根據RGB值確定畫素顏色

如果鐳射沒有打中球，對應畫素表現為黑色

理一下對映關係：

3D空間-->2D螢幕，距離-->畫素顏色

。

右邊是一個法向量圖，不同的是：並非由距離確定畫素顏色，而是由

該點法向量

確定顏色。

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

法向量方程有四個引數，但是這裡場景很簡單——球的法向量（單位向量）

經過球心

，所以其實只有三個引數，我們將三個引數（-1~1）對映到RGB。

後面要完成的：

用JavaScript玩轉計算機圖形學（二）基本光源 - Milo Yip - 部落格園

用 C 語言畫光（一）：基礎

用 C 語言畫光（二）：構造實體幾何