CG新手們，你們的福音來了~

為了讓初學者更好地學習計算機圖形學基礎知識，一位哈佛小哥建立了

graphics-workshop

，一週左右的時間，已經在GitHub上獲得

1K

星。

其中包含5個子專案：被子塊圖案、過程紋理生成、柵格化和著色、風格化渲染，以及光線追蹤。

使用者需要用

npm

進行安裝，透過執行下面的程式碼，安裝依賴項和啟動開發伺服器。

$ npm

install

。。。

added

16

packages

from

57

contributors

and

audited

16

packages

in

1。459

s

3

packages

are

looking

for

funding

run

`npm fund`

for

details

found

0

vulnerabilities

$ npm run dev

vite v2

。1

。5

dev

server

running

at

：

>

Local

：

http

：//localhost：

3000

/

> Network：

http

：//

10。250

。14

。217

：

3000

/

ready

in

555

ms。

具體怎麼用？一起來看。

被子塊圖案

首先，可以將製作被子塊圖案作為

入門專案

，它展示了在

2D網格

中渲染的過程。

作者在「shaders/quilt。frag。glsl」中給出了相應的程式碼，片段著色器遍歷每一個畫素，將畫素編號傳入gl_FragCoord。xy中，繪製2D網格。

新手們可以透過

取消註釋

，來改變圖形，包括繪製、翻轉形狀和改變顏色等。

比如，修改

if

語句，就可以改變圖案的幾何形狀；

如果想生成更豐富的RGB顏色，可以透過修改變數c實現：

最後，利用gl_FragColor輸出畫素的顏色。

過程紋理生成

除了製作被子塊圖案，還可以建立類似「我的世界」中的場景：

為生成自然的外觀，開發者使用了一種常見的圖形基元，稱為單純形噪聲。函式float snoise（vec2）用來接收向量，並在該位置輸出一個平滑的標量噪聲值。

由於不同位置的噪聲值大致獨立，改變螢幕右上方的seed ，就能夠看到渲染後輸出的新形狀。

依次取消第一個程式碼塊的註釋，學習組合不同音高的噪聲，用於改變紋理；取消第二個程式碼塊的註釋，學習使用閾值（特別是mix和smoothstep函式）來調整顏色。

此外，還可以新增引數，比如：利用temperature，從噪聲圖中獨立取樣來改變陰影等。

柵格化和著色

與大多數影片遊戲所用的演算法相同，採用柵格化方法渲染

3D三角形網格

，呈現更逼真的效果：

將3D表面分解為三角形，然後在螢幕上獨立繪製每個三角形，並在它們之間插入變數。

影象被儲存為三角形網格，片段著色器將對三角形的每個片段評估一次，而不是針對每個畫素。

使用者可以單擊拖動來檢視圖形的不同角度，透過mesh檢視除茶壺之外的其他形狀，以及用kd改變物件的顏色。

利用illuminate（）函式，可以表示光源的位置，以及光源對當前畫素顏色的作用。

程式碼目前僅支援漫反射，使用者也可以更新程式碼，新增Phong

鏡面反射

元件。

風格化渲染

這一專案的程式碼和上面的專案非常相似。

但是在進行照明計算之後，不會立刻輸出顏色，而是

根據亮度強度閾值

，進行離散化和不同風格的處理。

光線追蹤

光線追蹤是照片級真實感渲染中的

黃金

標準。

透過為每個畫素拍攝射線，來用片段著色器進行幾何計算，用trace（）函式返回與給定射線相對應的顏色，來進行建模。

用intersect（） 函式來計算空間中任何射線的第一個交點；illuminate（）用於將兩個點光源的作用相加，來計算給定點的光照。

在進行照明計算之前，新增條件語句以檢查從點到光源的射線是否被遮擋。如果被遮擋，則應立即返回vec3（0。0）模擬陰影。

透過修改程式碼，還可以選擇強度，在不同的位置新增第三個點光源。

作者簡介

開發者

Eric Zhang

，目前是哈佛大學的碩士研究生，主要研究方向是機器學習和程式語言，曾在

英偉達

實習。

他獲得過兩屆IOI金牌，還為高中學生寫了一本

物理書

，並且提供免費的電子版。

不僅如此，小哥還擅長音樂，憑藉中提琴演奏獲得過不少獎項。

他經常在個人網站分享文章，也在Github中釋出過多個專案，都有著不錯的反響。

參考連結：

［1］https：//github。com/ekzhang/graphics-workshop

［2］https：//www。ekzhang。com/

［3］https：//www。aapt。org/physicsteam/2020/pastexams。cfm

TAG: 畫素程式碼渲染顏色網格