WebGL 着色器偏導數dFdx和dFdy介紹

本文適合對webgl、計算機圖形學、前端可視化感興趣的讀者。

偏導數函數（HLSL中的ddx和ddy，GLSL中的dFdx和dFdy）是片元着色器中的一個用於計算任何變量基於屏幕空間座標的變化率的指令（函數）。在WebGL中，使用的是dFdx和dFdy，還有另一個函數fwidth = dFdx + dFdy。

偏導數計算

在三角形柵格化期間，GPU會同時跑片元着色器的多個實例，但並非一個pixel一個pixel去執行的，而是將其組織在2x2的一組pixels塊中並行執行。偏導數就是經過像素塊中的變量的差值（變化率）而計算出來的。dFdx表示的是像素塊中右邊像素的值減去素塊中左邊像素的值，而dFdy表示的是下面像素的值減去上面像素的值。以下圖所示，圖中顯示的是渲染的屏幕像素，圖中紅色區域是一個像素塊，p(x,y)表示在屏幕空間座標系中座標（x，y）的片元（像素）上的某一個變量，圖中顯示了dFdx和dFdy的計算過程。

偏導數計算

偏導數函數能夠用於片元着色器中的任何變量。對於向量和矩陣類型的變量，該函數會計算變量的每個元素的偏導數。

偏導數函數是紋理mipmaps實現的基礎，也能實現一系列算法和效果，特別是哪些依賴於屏幕空間座標的(好比渲染統一線寬的線框參考個人另一篇文章：https://www.jianshu.com/p/1a0979a2d972)。

偏導數和mipmaps

Mipmaps用於計算紋理的一些列的子圖，每一個子圖都比前一個的尺寸縮小了2倍。 他們用於在紋理縮小（紋理映射到比自身尺寸小的表面）的時候的去鋸齒。
Mipmaps 對於紋理緩存的一致性也很重要，在遍歷一個三角形（的片元）的時候，它會強制獲取一個最近的像素比例：這個比例保證三角形上的一個像素儘可能對應紋理上的一個像素。 Mipmaps是能夠同時可視化效果和性能的少數技術之一。
在紋理取樣過程當中使用偏導數來選擇最佳的 mipmap 級數。紋理座標在屏幕空間中的變化率做爲選擇mimmap級數的依據，變化率越大，mimap級數越大，反之越小。

面的法線向量計算(flat shader)

偏導數函數能夠用來在片元着色器中計算當前面（三角形）的法線向量。當前片元的世界座標系的水平偏導數和垂直偏導數是兩個三角形表面上的兩個向量，它們的叉乘結果是一個垂直於表面的向量，該向量的歸一化結果就是面的法線向量。須要特別注意的是兩個向量的叉乘的順序。下面是GLSL中經過鏡頭座標系中座標計算面法線向量的代碼：

normalize(  cross(dFdx(pos),  dFdy(pos))  );複製代碼

關於偏導數函數的應用之一能夠參考 「WebGL 單通道wireframe渲染」，更多應用將在後續介紹。

參考文檔
http://www.aclockworkberry.com/shader-derivative-functions/#footnote_3_1104

歡迎關注公衆號「ITman彪叔」。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript。在計算機圖形學、WebGL、前端可視化方面有深刻研究。對程序員思惟能力訓練和培訓、程序員職業規劃和程序員理財投資有濃厚興趣。

ITman彪叔公衆號