andrewlowndes / perfect-antialiasing Goto Github PK

View Code? Open in Web Editor NEW

16.0 2.0 0.0 2.6 MB

Antialiasing via conservative rasterisation and analytical area computation

TypeScript 83.77% GLSL 13.55% JavaScript 2.68%

rasterisation rasterization antialiasing gpu vector-graphics webgl graphics rendering font tesselation

perfect-antialiasing's Introduction

perfect-antialiasing's People

Contributors

Stargazers

Watchers

perfect-antialiasing's Issues

Could you give me some advice on text rendering?

Hi, I'm back with questions again😂.

I have been building a text tool for an UI design project recently, the current solution is the built-in Text of pixi.js. It looks like this:

We need zoom to scale lots of texts smoothly, but PIXI.Text use canvas to draw textures to render texts on update, It cost a lot of time, and text polygons needs to be editable like vectors in addition, so I try to find a solution.

First found is triangulation to render texts like this repo's approach, but the curve will produce many triangles, not sure if the performance can meet the requirements.

After that I found an approach was mentioned in this article https://medium.com/@evanwallace/easy-scalable-text-rendering-on-the-gpu-c3f4d782c5ac, I achieved according to it now, but it also has some problems like as follow:

There will be impacts between overlaps, I'm be solving it just now.

As a front-end programmer, text rendering and layout makes me feel very distressed, could you give me some suggestions?

cubicBezierToPoints does not consider the symmetry of control points

Current Behavior

when cubic bezier like this:

const p1 = { x: 0.0, y: 200.0 };
const p2 = { x: 100.0, y: 0.0 };
const p3 = { x: 200.0, y: 400.0 };
const p4 = { x: 300.0, y: 200.0 };

render as follow:

Expected Behavior

Possible Solution

Add flag first to force recursion for the first time

export const cubicBezierToPoints = (
  bezier: CubicBezier,
  splitThreshold: number
): Array<Point> => {
  const points = [
    { x: bezier.p1.x, y: bezier.p1.y },
    { x: bezier.p4.x, y: bezier.p4.y },
  ];

  const cubicBezierSplit = (
    bezier: CubicBezier,
    min: number,
    max: number,
    insertIndex: number,
    first = false
  ) => {
    const time = lerp(min, max, 0.5);
    const midLerp = lerp2(bezier.p2, bezier.p3, time);

    const pointOnCurve = lerp2(
      lerp2(lerp2(bezier.p1, bezier.p2, time), midLerp, time),
      lerp2(midLerp, lerp2(bezier.p3, bezier.p4, time), time),
      time
    );

    const prevPoint = points[insertIndex - 1];
    const nextPoint = points[insertIndex];

    points.splice(insertIndex, 0, pointOnCurve);

    if (
      dot(
        normalize(sub(prevPoint, pointOnCurve)),
        normalize(sub(nextPoint, pointOnCurve))
      ) > splitThreshold ||
      first
    ) {
      cubicBezierSplit(bezier, time, max, insertIndex + 1);
      cubicBezierSplit(bezier, min, time, insertIndex);
    }
  };

  cubicBezierSplit(bezier, 0, 1, 1, true);

  return points;
};

Can't understand DDA algorithm implementation

First of all, thank you very much for creating this project, I learned a lot from it 👍👍👍.
Several demo codes are easy to understand, but when I saw the dda algorithm, I was very confused.
I searched the implementation of the dda algorithm, it seems very simple, the code is as follows:

Why are the algorithms in the project so different, what are the differences between them, and how to understand this code

export const dda = (p1: Point, p2: Point, opts: DdaOptions, cb: (cellPos: Point) => boolean | void) => {
    const dir = normalize(sub(p2, p1));
    const relativePos = sub(p1, opts.pos);
    const cellPos = floor(divide(relativePos, opts.cellSize));
    const tDelta = abs(divide(opts.cellSize, dir));
    const step = sign(dir);
    const distToClosestCell = multiply(opts.cellSize, add(cellPos, sign(adds(step, 1))));
    const tMax = divide(sub(distToClosestCell, relativePos), dir);
    const stopCell = floor(divide(sub(p2, opts.pos), opts.cellSize));
    
    for (let i = 0; i < opts.maxSteps; i++) {
        if (opts.min && opts.max && !inRange(cellPos, opts.min, opts.max)) {
            return true;
        }
        if (cb(cellPos) === false) {
            return false;
        }
        if (equal(stopCell, cellPos)) {
            return true;
        }
        if (tMax.x < tMax.y) {
            tMax.x += tDelta.x;
            cellPos.x += step.x;
        }
        else {
            tMax.y += tDelta.y;
            cellPos.y += step.y;
        }
    }
    return true;
};

Any help would be greatly appreciated!

andrewlowndes / perfect-antialiasing Goto Github PK

perfect-antialiasing's Introduction

Antialiasing via conservative rasterisation and analytical area computation

Process

Preview

Demos

Run

Roadmap

Usages

Development

References