Anti-aliasing / MSAA

Smoothing the staircase edges of polygons by measuring more than one coverage point inside each screen pixel.

smooth the jagged edgesget rid of stair-step lineswhy do diagonal edges look pixelatedmake the polygons less crunchyjaggiesthe 2x 4x 8x setting in game optionsantialiasinganti alaising

See it

Live demo coming soon

What it is

A diagonal polygon edge crosses square pixels in partial amounts, but a single sample can only call each pixel covered or uncovered. That makes the familiar staircase. Anti-aliasing estimates partial coverage and mixes edge pixels with the background. MSAA does it by testing several sample positions inside each pixel, then resolving those samples into one smoother image.

The 2x, 4x, and 8x options in a game's graphics menu are this setting: samples per pixel. Use MSAA when hard geometry edges are the problem and the extra GPU memory and sample work fit the budget. Post-process methods such as FXAA work on the finished image and are cheaper to bolt onto a render pipeline, but can soften text and texture detail because they infer edges from colors rather than true triangle coverage.

Gotcha: MSAA mainly fixes polygon silhouettes. It does not cure shimmer inside a detailed texture, jagged alpha-tested leaves, or noisy shader patterns. A post-processing chain can also bypass the browser's antialiased default framebuffer, so render into a multisampled target or apply a post-process anti-aliasing pass before the final image.

Ask AI for it

Enable MSAA in this three.js WebGL2 scene with new WebGLRenderer({ antialias: true }) for direct rendering. If the scene uses EffectComposer, render through a WebGLRenderTarget with samples set to 4, resolve it before post-processing, and add an FXAA fallback for devices where multisampling is unavailable. Include a split-screen toggle that magnifies one diagonal edge.

You might have meant

post processing render passoverdrawdepth buffer z buffertone mapping