Grid line anti aliasing

Questions
, ,
1

I want to use extrudeGeometry and a custom shader to achieve the rendering effect of tiles. But how should I solve the problem of aliasing when rendering the gaps between tiles? Below is my shader code.

bool isPointOnPolygonBorder(vec2 point, vec2[MAX_POLYGON_VERTEX_COUNT] polygon, int num, float gapWidth) {
  if(gapWidth <= 0.0) {
    return false;
  }

  int minNum = min(num, MAX_POLYGON_VERTEX_COUNT);
  for (int i = 0; i < num; i++) {
    vec2 p1 = polygon[i];
    vec2 p2 = polygon[(i + 1) % num];
    vec2 v1 = p2 - p1;
    vec2 v2 = point - p1;
    float crossVal = v1.x * v2.y - v1.y * v2.x;
    float dis = abs(crossVal / length(v1));


    if (dis < gapWidth) {
      return true;
    }
  }
  return false;
}

int random(vec2 co, int num) {
  highp float a = 12.9898;
  highp float b = 78.233;
  highp float c = 43758.5453;
  highp float dt = dot(co.xy, vec2(a, b));
  highp float sn = mod(dt, 3.14);
  return int(mod(floor(sin(sn) * c), float(num)));
}

mat3 getTransformMat(vec2 position, float rotation) {
  return mat3(
    cos(rotation), sin(rotation), 0.0,
    -sin(rotation), cos(rotation), 0.0,
    position.x, position.y, 1.0
  );
}

vec4 getPavingColorByRepeatMethod(int splitTime){
  vec2[MAX_POLYGON_VERTEX_COUNT] tileWorldPolygon;

  mat3 transformMat = getTransformMat(position, rotation);

  vec2 worldPos = vOriginMapUv;

  vec2 pavingLocalPos = vec2(inverse(transformMat)* vec3(worldPos, 1.0));

  float yTimes = pavingLocalPos.y / repeatWidth;
  float row = floor(yTimes);
  float xTimes = pavingLocalPos.x / repeatLength ;
  float xOffsetTime = mod(row, float(splitTime)) / float(splitTime);
  float col = floor(xTimes - xOffsetTime);

  mat3 translateMat = mat3(
    1.0, 0.0, 0.0,
    0.0, 1.0, 0.0,
    repeatLength *(floor(xTimes) + xOffsetTime), repeatWidth * row, 1.0
  );
  mat3 finalTransformMat = transformMat * translateMat;

  for (int i = 0; i < vertexCount; i++) {
    tileWorldPolygon[i] =  vec2(finalTransformMat * vec3(polygon[i], 1.0));
  }

  float halfLineWidth = gapWidth / 2.0;
  bool isOnBorder = isPointOnPolygonBorder(worldPos, tileWorldPolygon, vertexCount, halfLineWidth);
  vec4 color = vec4(0.0, 0.0, 0.0, 0.0);
  if (isOnBorder) {
    color = texture2D(gapMap, vec2(fract(xTimes), fract(yTimes)));
  }  else{
    int index = random(vec2(col, row), min(mapCount, MAX_MAP_COUNT));
    vec2 mapUv = vec2(fract(xTimes - xOffsetTime), fract(yTimes));

    if(index == 0){
      color = texture2D(map0, mapUv);
    }else if(index == 1){
      color = texture2D(map1, mapUv);
    }else if(index == 2){
      color = texture2D(map2, mapUv);
    }else if(index == 3){
      color = texture2D(map3, mapUv);
    }
  }
  return color;
}
2

You could skip some of the complicated tiling logic and use a grid shader instead:

https://madebyevan.com/shaders/grid/

2 Likes
3

Thank you for your reply. I have integrated the logic in your link into my shader.

1 Like
4

Nice! Yeah I have gotten a lot of use of that technique. The author ( Evan Wallace ) site is a goldmine. He’s a freakin genius.

https://madebyevan.com/

3 Likes