Could you give me some advice on text rendering? about perfect-antialiasing HOT 7 CLOSED

import "../index.scss";
import { canvasResize, loadShader } from "../utils";
import shaderSource from "../assets/shaders/font";
import { addDragListener } from "../mouse";
import opentype from "opentype.js";
import { pathToPoints } from "../geometry/pathToPoints";
import { pointsToPolygons } from "../geometry/pointsToPolygons";

const canvas = document.querySelector("#app") as HTMLCanvasElement;
const transform = addDragListener(canvas);
canvasResize(canvas, document.body);

const gl = canvas.getContext("webgl2", {
  antialias: false,
}) as WebGL2RenderingContext;

const shaderProgram = gl.createProgram()!;
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, shaderSource.vs);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, shaderSource.fs);
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

const vao = gl.createVertexArray();
const currPosBuffer = gl.createBuffer();
const nextPosBuffer = gl.createBuffer();
const prevPosBuffer = gl.createBuffer();
const indexBuffer = gl.createBuffer();
const aCurrPos = gl.getAttribLocation(shaderProgram, "aCurrPos");
const aNextPos = gl.getAttribLocation(shaderProgram, "aNextPos");
const aPrevPos = gl.getAttribLocation(shaderProgram, "aPrevPos");
const aIndex = gl.getAttribLocation(shaderProgram, "aIndex");
let size = 0;

const uMatrix = gl.getUniformLocation(shaderProgram, "uMatrix");
const uScreen = gl.getUniformLocation(shaderProgram, "uScreen");
const uColor = gl.getUniformLocation(shaderProgram, "uColor");
const uScale = gl.getUniformLocation(shaderProgram, "uScale");

gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE);
gl.clearColor(0.0, 0.0, 0.0, 0.0);

const tick = () => {
  const { width, height } = canvas;
  const dpr = window.devicePixelRatio;

  gl.viewport(0, 0, width, height);
  gl.clear(gl.COLOR_BUFFER_BIT);

  const w = (2 * dpr) / width;
  const h = (2 * dpr) / height;

  // prettier-ignore
  const matrix = [
  	w * transform.z, 0, 0, 0,
  	0, -h * transform.z, 0, 0,
  	0, 0, 1, 0,
  	-1 + transform.x * w, 1 - transform.y * h, 0, 1
  ];

  gl.uniformMatrix4fv(uMatrix, false, matrix);
  gl.uniform2fv(uScreen, [width, height]);
  gl.uniform3fv(uColor, [1.0, 0.0, 0.0]);
  gl.uniform1f(uScale, transform.z);
  gl.bindVertexArray(vao);
  gl.drawArrays(gl.TRIANGLES, 0, size);

  console.log(transform.z);

  requestAnimationFrame(tick);
};

const start = async () => {
  const font = await opentype.load("assets/fonts/PingFang.ttf");
  const lines = ["Hello World!", "你好，世界！"];
  const fontSize = 128;
  const splitThreshold = 0.999;

  const currVertices: Array<number> = [];
  const nextVertices: Array<number> = [];
  const prevVertices: Array<number> = [];
  const indices: Array<number> = [];

  let topOffset = 0;
  lines.forEach((line) => {
    const glyphs = font.stringToGlyphs(line);

    let leftOffset = 0;
    let lineHeight = 0;
    glyphs.forEach((glyph) => {
      const path = glyph.getPath(leftOffset, topOffset, fontSize);
      const pointsGroups = pathToPoints(path.toPathData(3), splitThreshold);
      const polygons = pointsToPolygons(pointsGroups);

      leftOffset += (glyph.advanceWidth / 1000) * fontSize;
      lineHeight = Math.max(lineHeight, fontSize * 1.4); // TODO

      polygons.forEach((polygon) => {
        polygon.forEach(({ p1, p2, p3 }) => {
          currVertices.push(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
          nextVertices.push(p2.x, p2.y, p3.x, p3.y, p1.x, p1.y);
          prevVertices.push(p3.x, p3.y, p1.x, p1.y, p2.x, p2.y);
          indices.push(0, 1, 2);
        });
      });
    });
    topOffset += lineHeight;
  });

  gl.bindVertexArray(vao);

  gl.bindBuffer(gl.ARRAY_BUFFER, currPosBuffer);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(currVertices),
    gl.STATIC_DRAW
  );
  gl.vertexAttribPointer(aCurrPos, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aCurrPos);

  gl.bindBuffer(gl.ARRAY_BUFFER, nextPosBuffer);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(nextVertices),
    gl.STATIC_DRAW
  );
  gl.vertexAttribPointer(aNextPos, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aNextPos);

  gl.bindBuffer(gl.ARRAY_BUFFER, prevPosBuffer);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(prevVertices),
    gl.STATIC_DRAW
  );
  gl.vertexAttribPointer(aPrevPos, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aPrevPos);

  gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices), gl.STATIC_DRAW);
  gl.vertexAttribPointer(aIndex, 1, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(aIndex);

  gl.bindVertexArray(null);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  size = indices.length;

  requestAnimationFrame(tick);
};

start();