OpenGL Shader抗锯齿如何实现
这篇文章主要为大家展示了“OpenGLShader抗锯齿如何实现”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“OpenGLShader抗锯齿如何实现”这篇文章吧。
绘制圆形锯齿问题普通绘制圆形形状时可以看到图形边缘会有明显锯齿现象并不像真实圆形形状一样圆润边缘平滑。在glsl
中这种情况是常见情况,这里是可以借助glsl
内置函数来消除锯齿现象。
vec3sdfCircle(vec2uv,floatr,vec3value){floatd=length(uv)-r;returnd>0.?vec3(0.3294,0.3294,0.9333):value;//大于0超出画圆范围,小于0在画圆范围内}voidmain(){vec2uv=gl_FragCoord.xy/iResolution.xy;uv-=0.5;//x:<-0.5,0.5>,y:<-0.5,0.5>uv.x*=iResolution.x/iResolution.y;//x:<-0.5,0.5>*aspectratio,y:<-0.5,0.5>vec3circle=sdfCircle(uv,0.4,vec3(1.));circle=mix(circle,sdfCircle(uv,0.3,vec3(1.)),0.5);circle=mix(circle,sdfCircle(uv,0.2,vec3(1.)),0.7);gl_FragColor=vec4(circle,.9);}
smoothstep函数介绍smoothstep(a, b, x)
函数结果范围:
内置函数smoothstep
就能实现绘制圆形图形的抗锯齿效果。可能之前有使用过内置函数step
同样都是步进式
功能函数,不同于step
函数可以理解为if-else
而smoothstep
函数是平滑过渡的。
使用smoothstep
实现抗锯齿功能需要修改一下原先的画圆公式。原来只需要使用到length(uv) - r
来判断是否选择绘制圆的颜色,而现在需要修改成通过smoothstep(m-0.002,m+0.002,length(uv) - 0.2)
计算值作为mix
函数混合系数值来实现平滑过渡到画圆色值,这样就能实现抗锯齿了。
vec2uv=gl_FragCoord.xy/iResolution.xy;uv-=0.5;//x:<-0.5,0.5>,y:<-0.5,0.5>uv.x*=iResolution.x/iResolution.y;//x:<-0.5,0.5>*aspectratio,y:<-0.5,0.5>floatm=0.2;m=smoothstep(m-0.002,m+0.002,length(uv)-0.2);vec3pixel=mix(vec3(1.),vec3(0.3294,0.3294,0.9333),m);gl_FragColor=vec4(pixel,1.0);
如果把脚本其中m-0.002,m+0.002
把0.002
范围进行修改。例如修改成0.02
,运行结果可以发现圆形变模糊了。这就是区间过大导致平滑区间渐变范围在肉眼可见范围了,因此设置一个适当过渡区间才能实现较好的抗锯齿效果。
清楚实现抗锯齿原理之后,可以根据需要自行实现一个平滑过渡函数来实现抗锯齿功能。类似像以下两个自制平滑过渡函数最终实现效果几乎看不出太大区别。
自制smoothstep函数抗锯齿floatsmootherstep(floatedge0,floatedge1,floatx){floatt=(x-edge0)/(edge1-edge0);floatt1=t*t*t*(t*(t*6.-15.)+10.);returnclamp(t1,0.0,1.0);}voidmain(){vec2uv=gl_FragCoord.xy/iResolution.xy;uv-=0.5;//x:<-0.5,0.5>,y:<-0.5,0.5>uv.x*=iResolution.x/iResolution.y;//x:<-0.5,0.5>*aspectratio,y:<-0.5,0.5>floatm=0.2;m=smootherstep(m-0.002,m+0.002,length(uv)-0.2);vec3pixel=mix(vec3(1.),vec3(0.3294,0.3294,0.9333),m);gl_FragColor=vec4(pixel,1.0);}自制linearstep函数抗锯齿
floatlinearstep(floatedge0,floatedge1,floatx){floatt=(x-edge0)/(edge1-edge0);returnclamp(t,0.0,1.0);}voidmain(){vec2uv=gl_FragCoord.xy/iResolution.xy;uv-=0.5;//x:<-0.5,0.5>,y:<-0.5,0.5>uv.x*=iResolution.x/iResolution.y;//x:<-0.5,0.5>*aspectratio,y:<-0.5,0.5>floatm=0.2;m=linearstep(m-0.002,m+0.002,length(uv)-0.2);vec3pixel=mix(vec3(1.),vec3(0.3294,0.3294,0.9333),m);gl_FragColor=vec4(pixel,1.0);}
smoothstep
linearstep
以上是“OpenGLShader抗锯齿如何实现”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。