
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@pixi/graphics-smooth
Advanced tools
PixiJS v7 plugin for making smooth shapes using HHAA shader.
This is very early version of the plugin.
Here's how it looks, compared to pixi graphics (antialias=false)
You can find examples in examples
folder, you have to start the local webserver in repo folder to view them.
This is drop-in replacement of PIXI.Graphics
, API is compatible.
import { SmoothGraphics as Graphics } from '@pixi/graphics-smooth';
const graphics = new Graphics();
graphics.moveTo(100, 100);
graphics.lineTo(200, 200);
For lines, native
mode is renamed to scaleMode
, you can ignore scale of element or even set default value for it!
import { SmoothGraphics, LINE_SCALE_MODE, settings } from '@pixi/graphics-smooth';
graphics.lineStyle({ width: 2.0, scaleMode: LINE_SCALE_MODE.NONE }); // now its always 2 independent from scale
//alternatively
settings.LINE_SCALE_MODE = LINE_SCALE_MODE.NONE;
const graphics2 = new SmoothGraphics();
graphics.lineStyle(2.0, 0xffffff, 1.0); //the usual, but scaleMode works by default
settings.LINE_SCALE_MODE = LINE_SCALE_MODE.NORMAL;
graphics.lineStyle(2.0, 0xffffff, 1.0); //its normal again
Note: NONE
was the only option for graphics-smooth <= 0.0.6
. Please update your code if you used early versions!
Fills have a bit of a problem - smoothing works good only on concave objects. It works only on circles and polygons. It is not implemented for rects and rounded rects yet.
graphics.beginFill(0xffffff, 1.0, true); //third param for beginFill
HHAA doesn't work with texture fill yet.
That's what you have to do if you need functions from graphics-extras package:
import { SmoothGraphics } from '@pixi/graphics-smooth';
import { Graphics } from '@pixi/graphics';
import '@pixi/graphics-extras';
Object.assign(SmoothGraphics.prototype, {
drawTorus: Graphics.prototype.drawTorus,
drawChamferRect: Graphics.prototype.drawChamferRect,
drawFilletRect: Graphics.prototype.drawFilletRect,
drawRegularPolygon: Graphics.prototype.drawRegularPolygon,
drawRoundedPolygon: Graphics.prototype.drawRoundedPolygon,
drawStar: Graphics.prototype.drawStar,
});
For UMD:
PIXI.smooth.SmoothGraphics.prototype.drawStar = PIXI.Graphics.prototype.drawStar;
You might notice that for diagonal lines, coverage differs from canvas2d a lot, especially if you do line animations. Solution is easy:
import { settings } from '@pixi/graphics-smooth';
settings.PIXEL_LINE = 1;
It has to be done before first GraphicsSmooth is created.
This setting is disabled by default because it adds extra computations in coverage calculation. It is not researched yet how it will affect performance.
Currently graphics geometry uses 11 floats per vertex, when original graphics used only 8. Number of vertices also differ, it might use up to 2x of original.
Uniforms are used to store styles depends on (lineWidth * scaleMode, lineAlignment, texture, matrix).
If style buffer is too big (for now its max 24), one more drawcall will spawn.
npm install
npm start
FAQs
PixiJS v7 plugin for smooth HHAA rendering of shapes
We found that @pixi/graphics-smooth demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.