摘要：偏导数函数可以用于片元着色器中的任何变量。偏导数和用于计算纹理的一些列的子图，每个子图都比前一个的尺寸缩小了倍。在纹理取样过程中使用偏导数来选择最佳的级数。
本文适合对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...。
偏导数和mipmapsMipmaps用于计算纹理的一些列的子图，每个子图都比前一个的尺寸缩小了2倍。 他们用于在纹理缩小（纹理映射到比自身尺寸小的表面）的时候的去锯齿。
Mipmaps 对于纹理缓存的一致性也很重要，在遍历一个三角形（的片元）的时候，它会强制获取一个最近的像素比例：这个比例保证三角形上的一个像素尽量对应纹理上的一个像素。 Mipmaps是可以同时可视化效果和性能的少数技术之一。
在纹理取样过程中使用偏导数来选择最佳的 mipmap 级数。纹理坐标在屏幕空间中的变化率作为选择mimmap级数的依据，变化率越大，mimap级数越大，反之越小。
偏导数函数可以用来在片元着色器中计算当前面（三角形）的法线向量。当前片元的世界坐标系的水平偏导数和垂直偏导数是两个三角形表面上的两个向量，它们的叉乘结果是一个垂直于表面的向量，该向量的归一化结果就是面的法线向量。需要特别注意的是两个向量的叉乘的顺序。下面是GLSL中通过镜头坐标系中坐标计算面法线向量的代码：
normalize( cross(dFdx(pos), dFdy(pos)) );
关于偏导数函数的应用之一可以参考 “WebGL 单通道wireframe渲染”，更多应用将在后续介绍。
参考文档
http://www.aclockworkberry.co...
欢迎关注公众号“ITman彪叔”。彪叔，拥有10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划和程序员理财投资有浓厚兴趣。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105342.html
摘要：那是因为，线条的光栅化过程和多边形的光栅化过程并不是完全一致的。这将会导致一些本该被隐藏的线段，未被遮挡。原理我们知道，一般对象都是由三角形组成的。其中涉及到和的相关介绍，笔者将会在后续的文章中介绍。 如果要把一个对象的线框绘制出来，一般的方法是先绘制实体对象，然后通过gl.LINES的模式再绘制一遍模型，此时模型的线框就会被绘制出来。 gl.LINES的问题 此方法需要绘制两遍对象...
摘要：比如顶点数组对象，在中，是一个扩展对象，而在直接使用。在中，使用代码如下告诉用户没有此扩展或者使用其他方式而在中，代码如下有关的相关功能，将会在以后的章节中介绍。后面的章节，会陆续介绍相关的特性。 WebGL2几乎100%兼容WebGL1，需要注意的是，这里说的几乎，也就是说，也是存在一些细微的差别的，因此原本WebGL1的代码迁移到WebGL2，应该不会有遇到太多的困难；不过WebG...
摘要：顶点着色器顶点缓冲区对象中存储的唯一信息就是每个点的位置。当执行函数的时候顶点就会经过我们编写的着色器处理。片元着色器上文讲述了顶点，由顶点构成了图元。片元着色器通过的内置变量为每个片元指定一个思维的颜色。 本章介绍一些三维图形学中的基本概念为后文的绘图做个科普本文重点参考了《交互式计算机图形学-第七版》第2章的内容。想要更深入学习的同学可以自己去翻一翻 坐标系 在我们现实世界中，每个...
摘要：片元着色器主要处理片元颜色，在这里只是将纹理坐标和纹理对象传给片元着色器。根据公式分别计算出左右视口的模型视图投影矩阵，传给顶点着色器程序，与顶点缓冲区的顶点坐标相乘绘制出最终顶点。 最近WebVR API 1.1已经发布，2.0草案也在拟定中，在我看来，WebVR走向大众浏览器是早晚的事情了，今天本人将对WebVR开发环境和开发流程进行深入介绍。 WebVR与WebVR API 首先...
阅读 1282·2021-11-12 10:35
阅读 668·2021-10-13 09:39
阅读 1232·2021-10-11 10:57
阅读 2395·2019-08-26 13:53
阅读 2437·2019-08-26 12:23
阅读 3541·2019-08-23 18:30
阅读 3610·2019-08-23 18:08
阅读 2401·2019-08-23 18:04
