Creator3.x 抗锯齿地面网格Shader

没有开启抗锯齿 绘制的网格


使用抗锯齿方法绘制的网格


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

希望有大佬能给我解惑