利用smoothstep画出抗锯齿圈圈
- 背景
- 函数解释
- 分析
背景
这是源自JC大佬的shader
这里主要用来做啥，2D这种绘制利用smoothstep可以绘制一个纯色抗锯齿的图形
函数解释
smoothstep函数原型
https://thebookofshaders.com/glossary/?search=smoothstep fwitdh函数
https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/fwidth.xhtml
分析
abs(l-0.45)这个计算的是到distance=0.45圆线为中心线往两边扩散 范围左边0.05中心0右边0.05
-0.05 值就反转 两头是0 中心是-0.05 这里负数 所以edge1变为负数
那么smoothstep(delta,-delta, value); 超过边缘的地方会突变到0 但不截断 所以可以无锯齿
delta虽然可以写个啥0.01，这里屏幕缩放的话影响会比较明显0.01可能从1个像素跨度到10个像素啥的
但w的值直接代表一个像素间L的变化，更好一些，于是就用w作为Edge0 Edge1 delta=w;
你学废了吗？
threejs交流群511163089