本文適合對(duì)webgl膛虫、計(jì)算機(jī)圖形學(xué)、前端可視化感興趣的讀者钓猬。
偏導(dǎo)數(shù)函數(shù)（HLSL中的ddx和ddy稍刀，GLSL中的dFdx和dFdy）是片元著色器中的一個(gè)用于計(jì)算任何變量基于屏幕空間坐標(biāo)的變化率的指令（函數(shù)）。在WebGL中敞曹，使用的是dFdx和dFdy账月，還有另外一個(gè)函數(shù)fwidth = dFdx + dFdy。
偏導(dǎo)數(shù)計(jì)算
在三角形柵格化期間澳迫，GPU會(huì)同時(shí)跑片元著色器的多個(gè)實(shí)例局齿，但并不是一個(gè)pixel一個(gè)pixel去執(zhí)行的，而是將其組織在2x2的一組pixels塊中并行執(zhí)行橄登。偏導(dǎo)數(shù)就是通過(guò)像素塊中的變量的差值（變化率）而計(jì)算出來(lái)的抓歼。dFdx表示的是像素塊中右邊像素的值減去素塊中左邊像素的值，而dFdy表示的是下面像素的值減去上面像素的值拢锹。如下圖所示谣妻，圖中顯示的是渲染的屏幕像素，圖中紅色區(qū)域是一個(gè)像素塊卒稳，p(x,y)表示在屏幕空間坐標(biāo)系中坐標(biāo)（x蹋半，y）的片元（像素）上的某一個(gè)變量，圖中顯示了dFdx和dFdy的計(jì)算過(guò)程充坑。
偏導(dǎo)數(shù)函數(shù)可以用于片元著色器中的任何變量湃窍。對(duì)于向量和矩陣類型的變量，該函數(shù)會(huì)計(jì)算變量的每一個(gè)元素的偏導(dǎo)數(shù)匪傍。
偏導(dǎo)數(shù)函數(shù)是紋理mipmaps實(shí)現(xiàn)的基礎(chǔ)您市，也能實(shí)現(xiàn)一系列算法和效果，特別是哪些依賴于屏幕空間坐標(biāo)的(比如渲染統(tǒng)一線寬的線框參考我的另外一篇文章：http://www.reibang.com/p/1a0979a2d972)役衡。
偏導(dǎo)數(shù)和mipmaps
Mipmaps用于計(jì)算紋理的一些列的子圖茵休，每個(gè)子圖都比前一個(gè)的尺寸縮小了2倍。 他們用于在紋理縮小（紋理映射到比自身尺寸小的表面）的時(shí)候的去鋸齒榕莺。
Mipmaps 對(duì)于紋理緩存的一致性也很重要俐芯，在遍歷一個(gè)三角形（的片元）的時(shí)候，它會(huì)強(qiáng)制獲取一個(gè)最近的像素比例：這個(gè)比例保證三角形上的一個(gè)像素盡量對(duì)應(yīng)紋理上的一個(gè)像素钉鸯。 Mipmaps是可以同時(shí)可視化效果和性能的少數(shù)技術(shù)之一吧史。
在紋理取樣過(guò)程中使用偏導(dǎo)數(shù)來(lái)選擇最佳的 mipmap 級(jí)數(shù)。紋理坐標(biāo)在屏幕空間中的變化率作為選擇mimmap級(jí)數(shù)的依據(jù)唠雕，變化率越大贸营，mimap級(jí)數(shù)越大，反之越小岩睁。
面的法線向量計(jì)算(flat shader)
偏導(dǎo)數(shù)函數(shù)可以用來(lái)在片元著色器中計(jì)算當(dāng)前面（三角形）的法線向量钞脂。當(dāng)前片元的世界坐標(biāo)系的水平偏導(dǎo)數(shù)和垂直偏導(dǎo)數(shù)是兩個(gè)三角形表面上的兩個(gè)向量，它們的叉乘結(jié)果是一個(gè)垂直于表面的向量捕儒，該向量的歸一化結(jié)果就是面的法線向量冰啃。需要特別注意的是兩個(gè)向量的叉乘的順序。下面是GLSL中通過(guò)鏡頭坐標(biāo)系中坐標(biāo)計(jì)算面法線向量的代碼：
normalize( cross(dFdx(pos), dFdy(pos)) );
關(guān)于偏導(dǎo)數(shù)函數(shù)的應(yīng)用之一可以參考 “WebGL 單通道wireframe渲染”刘莹，更多應(yīng)用將在后續(xù)介紹阎毅。
參考文檔
http://www.aclockworkberry.com/shader-derivative-functions/#footnote_3_1104
歡迎關(guān)注公眾號(hào)“ITman彪叔”。彪叔点弯，擁有10多年開(kāi)發(fā)經(jīng)驗(yàn)净薛，現(xiàn)任公司系統(tǒng)架構(gòu)師、技術(shù)總監(jiān)蒲拉、技術(shù)培訓(xùn)師肃拜、職業(yè)規(guī)劃師。熟悉Java雌团、JavaScript燃领。在計(jì)算機(jī)圖形學(xué)、WebGL锦援、前端可視化方面有深入研究猛蔽。對(duì)程序員思維能力訓(xùn)練和培訓(xùn)、程序員職業(yè)規(guī)劃和程序員理財(cái)投資有濃厚興趣灵寺。
