Unity shader 中ddx/ddy偏导数的原理和简单应用

桃扇骨 2022-05-26 13:22 519阅读 0赞

转自 [https://blog.csdn.net/wylionheart/article/details/78026707][https_blog.csdn.net_wylionheart_article_details_78026707]  
转自 [https://blog.csdn.net/pizi0475/article/details/53931954][https_blog.csdn.net_pizi0475_article_details_53931954]

最近发现一篇对shader中ddx，ddy讲解的比较清楚的一篇文章，这里对其做个简单的翻译和总结。  
连接：[http://www.aclockworkberry.com/shader-derivative-functions/\#footnote\_3\_1104][http_www.aclockworkberry.com_shader-derivative-functions_footnote_3_1104]

偏导函数，分为 HLSL : ddx 和 ddy , GLSL : dFdx 和 dFdy，分别对应 x, y 轴上，在屏幕空间中，像素块中各种变量的变化率。

# 偏导数的计算： #

在数学上：导数就是函数的变化率。几何意义是固定面上一点的斜率。  
对X求导，就意味着把X看做一个数，Y是一个函数，求导的时候，X的导数等于1，Y的导数为Y’，通常用这样的办法求出Y’。

看了下面的图就可以更加清晰是怎么一回事了：  
![这里写图片描述][Shader-Derivatives-1-615x397.png]

我们知道在光栅化的时刻，GPUs会在同一时刻并行运行很多Fragment Shader，但是并不是一个pixel一个pixel去执行的，而是将其组织在2x2的一组pixels分块中，去并行执行。而偏导数就正好是计算的这一块像素中的变化率。从上图可以看出来ddx 就是右边的像素块的值减去左边像素块的值，而ddy就是下面像素块的值减去上面像素块的值。其中的x，y代表的是屏幕坐标。

注意：偏导数ddx/y可以计算我们FragmentShader中任意的变量。向量，矩阵等等。

# 看看几个偏导数的应用： #

## 1. Mipmap：（对UV求偏导的应用） ##

![这里写图片描述][mipmap-300x200.png]

大家应该都知道mipmap 的用处，但是可能并不知道mipmap的核心在选择到底用那一块mipmap的level时，靠的就是偏导数。屏幕空间的贴图UV偏导数过大的时候代表贴图离我们过远，就会选择低等级的mipmap。

## 2. Flat Shader（对顶点做偏导的应用） ##

通过对顶点的偏导数，就可以实现简单的顶点作色效果。

而且不用顶点传入法线，也能求出模型的法线，原理如下：

*  VertexShader，将顶点的Pos传入到FragmentShader中；
 *  在FragShader中，我们如果调用ddx(Pos),和ddy(Pos)这个代表求出相邻的2个像素块之间坐标的差值，即下面图中的红色和绿色2个矢量，而这2个矢量都在这个三角形的平面上，那么执行 normalize( cross(ddx(pos),ddy(pos)) ) 就求出的面的法线，但是这里要注意，在HlSL上面，或者Unity上面要写成normalize( cross(ddy(pos),ddx(pos)) ),不然法线是反向的。这个是由于左右手坐标系引起的。

![这里写图片描述][20180503105920343]

![这里写图片描述][20180503105929546]  
(demo made by webgl using three.js)

Unity里面显示法线如下效果：

void surf (Input IN, inout SurfaceOutput o) {
        o.Albedo = normalize(cross(ddy(IN.worldPos),ddx(IN.worldPos)));
    }

![这里写图片描述][20180503110131939]

## 3. 贴图勾边锐化（对贴图颜色求偏导的例子） ##

在Unity里面测试

void surf (Input IN, inout SurfaceOutput o) {
        half4 c = tex2D(_MainTex, IN.uv_MainTex);
        //c += ddx(c)*2 + ddy(c)*2; //这行代码开启和关闭的效果
        o.Albedo = c.rgb;
        o.Alpha = c.a;
    }

![这里写图片描述][20180503110142693]![这里写图片描述][20180503110151139]

左边是直接显示图片，右边是在图片上面加上x和y的偏导数。

不知道这个有没有那个大侠做个这方面的应用哈，可以留言，大家一起学习学习：）

在原贴中，还讲解了偏导数在GPU 处理条件语句的情况下的一些情况和2x2分块的一些细节，大家可以原贴去看下哈。

## 4. ddx/ddy重建法线出现的edge artifacts问题 ##

其中，artifacts 可以翻译成矫饰、伪色、瑕疵，指图像里正常情况下不该出现的信息。

经验证，原来ddx/ddy这两个操作，在forward rendering与deferred rendering中存在着微妙的应用区别。

在forward rendering中，GPU shader会自动地判断其2x2像素区域是否仅有部分落在当前绘制的三角面所覆盖的光栅化interpolate范围内。

而在dr中，当将ddx/ddy操作应用于一个render target(即NDC quad)时，GPU shader这一免费的“合法性校验”操作便失效了。用于计算ddx/ddy的2x2像素区域有可能一部分位于模型的三角面A、而另一部分则位于模型的三角面B。也就是说：参与ddx/ddy运算的像素，有可能超出了模型中同一三角面的插值范围，从而导致ddx/ddy得到错误的结果，进而导致模型edge上的artifacts。这一问题在dr中使用像素world(或view)坐标重建几何法线时(normalize(cross(ddx(posW), ddy(posW))))，尤为突出。

总结：ddx/ddy 与 forward rendering的兼容性更佳。使用ddx/ddy，切记一定要确保其2x2区域位于同一三角面的光栅化范围内，不能跨三角面。在deferred rendering中，GPU shader不会自动地保障上述前提成立，所以没有引入其他额外机制的前提下，宜避免使用ddx/ddy计算几何法线。

*  forward rendering，使用ddx/ddy计算法线，注意到不存在edge artifacts  
    ![这里写图片描述][20180503112856144]
 *  deferred rendering，使用ddx/ddy重建法线，注意到edge上存在artifacts  
    ![这里写图片描述][20180503112903772]

[https_blog.csdn.net_wylionheart_article_details_78026707]: https://blog.csdn.net/wylionheart/article/details/78026707
[https_blog.csdn.net_pizi0475_article_details_53931954]: https://blog.csdn.net/pizi0475/article/details/53931954
[http_www.aclockworkberry.com_shader-derivative-functions_footnote_3_1104]: http://www.aclockworkberry.com/shader-derivative-functions/#footnote_3_1104
[Shader-Derivatives-1-615x397.png]: /images/20220526/2861cacffd824e658647556d960a496b.png
[mipmap-300x200.png]: /images/20220526/89eef609fcc14cb3aa7c8a7b3d359956.png
[20180503105920343]: /images/20220526/9aa2f457d30c4e5e95da1d91b6a00f0c.png
[20180503105929546]: /images/20220526/c1ce6e5df3794cfe823ed0b158b6dfdf.png
[20180503110131939]: /images/20220526/1c67180eda814327a309670a98c32f36.png
[20180503110142693]: https://img-blog.csdn.net/20180503110142693
[20180503110151139]: /images/20220526/afe4df6c075f447480accdf08fba7662.png
[20180503112856144]: /images/20220526/d05a7589f88b4397a18ccb1213cf8ff9.png
[20180503112903772]: /images/20220526/40dbf860d8734e5a9c4f9cefa242944e.png