国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Hanks10100 / 3679人閱讀

摘要：偏導數函數可以用于片元著色器中的任何變量。偏導數和用于計算紋理的一些列的子圖，每個子圖都比前一個的尺寸縮小了倍。在紋理取樣過程中使用偏導數來選擇最佳的級數。

本文適合對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/1a0...。

偏導數和mipmaps

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

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

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

normalize(  cross(dFdx(pos),  dFdy(pos))  );

關于偏導數函數的應用之一可以參考 “WebGL 單通道wireframe渲染”，更多應用將在后續介紹。

參考文檔
http://www.aclockworkberry.co...

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105342.html

相關文章

  • WebGL 單通道wireframe渲染

    摘要：那是因為，線條的光柵化過程和多邊形的光柵化過程并不是完全一致的。這將會導致一些本該被隱藏的線段，未被遮擋。原理我們知道，一般對象都是由三角形組成的。其中涉及到和的相關介紹，筆者將會在后續的文章中介紹。 如果要把一個對象的線框繪制出來，一般的方法是先繪制實體對象，然后通過gl.LINES的模式再繪制一遍模型，此時模型的線框就會被繪制出來。 gl.LINES的問題 此方法需要繪制兩遍對象...

    KoreyLee 評論0 收藏0

  • WebGL 初探

    摘要：下面是頂點及片元著色器程序，用字符串表示，它將直接運行在瀏覽器之上。最后，使用將和著色器連接。創建著色器對象創建編程對象賦值已創建的著色器對象連接編程對象檢查鏈接結果鏈接程序失敗使用可用著色器程序這一步主要使用方法告訴使用程序。 該文章于一天前發表在 github，若有問題可提至 github。 目前，我們有很多方案可以快速的接觸到 WebGL 并繪制復雜的圖形，但最后發現我們忽視了很...

    whjin 評論0 收藏0

  • WebVR開發教程——深度剖析

    摘要：片元著色器主要處理片元顏色，在這里只是將紋理坐標和紋理對象傳給片元著色器。根據公式分別計算出左右視口的模型視圖投影矩陣，傳給頂點著色器程序，與頂點緩沖區的頂點坐標相乘繪制出最終頂點。 最近WebVR API 1.1已經發布，2.0草案也在擬定中，在我看來，WebVR走向大眾瀏覽器是早晚的事情了，今天本人將對WebVR開發環境和開發流程進行深入介紹。 WebVR與WebVR API 首先...

    Cciradih 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<