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的计算过程。


微信图片_20220423133347.jpg

偏导数计算


偏导数函数可以用于片元着色器中的任何变量。对于向量和矩阵类型的变量,该函数会计算变量的每一个元素的偏导数。


偏导数函数是纹理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

相关文章
|
26天前
|
算法
有哪些数学函数的曲线视觉上像花朵
有哪些数学函数的曲线视觉上像花朵
16 1
|
前端开发 数据可视化 图形学
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
114 0
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
|
图形学
Unity【Lerp & Slerp】- 线性插值与球形插值的区别
Unity【Lerp & Slerp】- 线性插值与球形插值的区别
421 1
Unity【Lerp & Slerp】- 线性插值与球形插值的区别
|
算法 前端开发 异构计算
webgl径向模糊实现体积光
webgl径向模糊实现体积光
webgl径向模糊实现体积光
|
前端开发 算法 图形学
webgl实现径向模糊
webgl实现径向模糊
webgl实现径向模糊
【OpenGL】二十、OpenGL 矩阵变换 ( 矩阵缩放变换 | 矩阵旋转变换 | 矩阵平移变换 )(一)
【OpenGL】二十、OpenGL 矩阵变换 ( 矩阵缩放变换 | 矩阵旋转变换 | 矩阵平移变换 )(一)
123 0
【OpenGL】二十、OpenGL 矩阵变换 ( 矩阵缩放变换 | 矩阵旋转变换 | 矩阵平移变换 )(一)
|
Windows
【OpenGL】二十、OpenGL 矩阵变换 ( 矩阵缩放变换 | 矩阵旋转变换 | 矩阵平移变换 )(二)
【OpenGL】二十、OpenGL 矩阵变换 ( 矩阵缩放变换 | 矩阵旋转变换 | 矩阵平移变换 )(二)
118 0
【OpenGL】二十、OpenGL 矩阵变换 ( 矩阵缩放变换 | 矩阵旋转变换 | 矩阵平移变换 )(二)
|
图形学
Shader的函数公式以及使用的场景
Shader 是干什么的? 它的作用可以先简单理解为对屏幕上的物体,进行颜色处理。 而大家都知道,所有计算机,处理颜色的当然是显卡,也就是 GPU 。
1259 0
|
JavaScript 前端开发 索引
WEBGL学习【九】立方体贴不同的纹理
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/78503759 ...
1100 0
|
前端开发 JavaScript 索引
WEBGL学习【四】模型视图矩阵
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/78352411 ...
949 0