没有开启抗锯齿 绘制的网格
使用抗锯齿方法绘制的网格
CCEffect %{
techniques:
- name: opaque
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
properties: &props
mainTexture: { value: white }
mainColor: { value: [1, 1, 1, 1], editor: { type: color } }
scale: { value: 1024.0 }
- name: transparent
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
blendSrcAlpha: src_alpha
blendDstAlpha: one_minus_src_alpha
properties: *props
}%
CCProgram unlit-fs %{
#extension GL_OES_standard_derivatives : enable
precision highp float;
#include <output>
#include <cc-fog-fs>
in vec2 v_uv;
in vec3 v_position;
uniform sampler2D mainTexture;
uniform Constant {
vec4 mainColor;
float scale;
};
vec3 drawGird(vec2 p,vec2 scale_uv){
// p的坐标范围是0-1
//这样画了格子的顶部一条线 和右侧一条线
vec3 col = vec3(0.7);
// // 方式一
// vec2 uv2 = v_uv - 0.5;// uv2 在 -0.5到 0.5之间
// // 绘制格子
// col = vec3(smoothstep(2.*fwidth(scale_uv.x),1.9*fwidth(scale_uv.x),p.x));
// col += vec3(smoothstep(2.*fwidth(scale_uv.y),1.9*fwidth(scale_uv.y),p.y));
// // 绘制坐标轴
// col.rb *= smoothstep(1.99 * fwidth(uv2.x),2.0 * fwidth(uv2.x),abs(uv2.x));
// col.gb *= smoothstep(1.99 * fwidth(uv2.y),2.0 * fwidth(uv2.y),abs(uv2.y));
//方式二 抗锯齿绘制网格
const float N = 256.;
vec2 w = fwidth(scale_uv) + 0.01;
vec2 a = scale_uv + 0.5*w;
vec2 b = scale_uv - 0.5*w;
vec2 i = (floor(a)+min(fract(a)*N,1.0)-floor(b)-min(fract(b)*N,1.0))/(N*w);
// 滤波
float anti = (i.x + i.y - i.x*i.y);
col *= anti;
return col;
}
vec3 drawLayer(float scale,vec2 uv)
{
// 注释设 scale为10的情况
// 输出值
vec3 co = vec3(0.);
// 拷贝一份uv用,不修改原uv
vec2 uv1 = uv;
// uv值范围从 0-1变为 0-scale scale值为10就是0-10范围
uv1 *= scale;
// fr是 fract对数字取小数部分, 0.2345,0.2345 -> uv1 2.345,2.345 -> 0.345,0.345
// 如 0.2 <= uv < 0.3 处理后就是一个范围 0-1的范围
vec2 fr = fract(uv1);
co+=drawGird(fr,uv1);
return co;
}
vec4 frag () {
vec4 col = mainColor * texture(mainTexture, v_uv);
col.xyz += drawLayer(scale,v_uv);
col.a =1.0;
CC_APPLY_FOG(col, v_position);
return CCFragOutput(col);
}
}%
参考了shadertoy 上的效果,但是实现原理文档看好久都没看明白,
参考shadertoy上的效果:
https://www.shadertoy.com/view/XtBfzz
https://www.shadertoy.com/view/Xt2cDt
https://iquilezles.org/articles/filterableprocedurals/
实现原理:
https://iquilezles.org/articles/checkerfiltering/
上面文章参考的文章 Basic Antialiasing in RSL
希望有大佬能给我解惑