motion-canvas icon indicating copy to clipboard operation
motion-canvas copied to clipboard

Option to _disable_ Anti-Aliasing

Open Wunkolo opened this issue 2 years ago • 1 comments

Description I like to make short "explainer gifs" when making a big write-up and have great interest in motion-canvas. I come from utilizing Adobe After Effects to make gifs such as this: AVX2 SAD

The problem and biggest challenge I had with making these gifs though is that their file-size is very correlated by the characteristics of the motion and the amount of colors that are to be animated. One way that helps, in my experience, is to disable anti-aliasing to reduce the amount of colors in exchange for "quality". This also helps when exporting a gif with transparency and there is no support for partial-transparency. This might also aid in viewport performance.

Proposed solution An option to disable anti-aliasing for the viewport and for rendering to turn off Anti-Aliasing on shapes, lines, text, and images.

Additional context For SVGs, I believe the shape-rendering option may be utilized which accomplishes what I am looking for: image Though, ideally this is a systematic option and not something that has to be configured per-shape.

For images, there is CanvasRenderingContext2D.imageSmoothingEnabled which would maintain aliasing on images. image

There is also CanvasRenderingContext2D.textRendering

The feature, as displayed in After Effects AfterFX_lfTZ0Q2C33

Wunkolo avatar Feb 07 '23 18:02 Wunkolo

Images already have the smoothing property which controls the value of CanvasRenderingContext2D.imageSmoothingEnabled. I don't think there's a way to disable antialiasing for shapes, though. We don't use SVGs, we use the CanvasRenderingContext2D to do the drawing.

aarthificial avatar Feb 07 '23 21:02 aarthificial