{"id":23415240,"url":"https://github.com/pixijs-userland/graphics-smooth","last_synced_at":"2025-04-08T08:12:27.585Z","repository":{"id":45364502,"uuid":"377506249","full_name":"pixijs-userland/graphics-smooth","owner":"pixijs-userland","description":"Drop-in replacement for Graphics but with anti-aliasing","archived":false,"fork":false,"pushed_at":"2024-12-20T19:16:26.000Z","size":2446,"stargazers_count":163,"open_issues_count":13,"forks_count":18,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-03-29T06:29:55.827Z","etag":null,"topics":["antialiasing","graphics","webgl"],"latest_commit_sha":null,"homepage":"https://userland.pixijs.io/graphics-smooth/docs/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixijs-userland.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-16T13:30:31.000Z","updated_at":"2025-03-18T13:22:31.000Z","dependencies_parsed_at":"2024-12-20T19:50:56.951Z","dependency_job_id":null,"html_url":"https://github.com/pixijs-userland/graphics-smooth","commit_stats":{"total_commits":124,"total_committers":5,"mean_commits":24.8,"dds":0.5241935483870968,"last_synced_commit":"a47c75700697305359627e1f229e26e906bb3a22"},"previous_names":["pixijs-userland/graphics-smooth","pixijs/graphics-smooth"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixijs-userland%2Fgraphics-smooth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixijs-userland%2Fgraphics-smooth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixijs-userland%2Fgraphics-smooth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixijs-userland%2Fgraphics-smooth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixijs-userland","download_url":"https://codeload.github.com/pixijs-userland/graphics-smooth/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246591760,"owners_count":20801984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antialiasing","graphics","webgl"],"created_at":"2024-12-22T21:07:17.779Z","updated_at":"2025-04-01T05:33:30.503Z","avatar_url":"https://github.com/pixijs-userland.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PixiJS Smooth Graphics\nPixiJS v7 plugin for making smooth shapes using HHAA shader.\n\n[![Automation](https://github.com/pixijs-userland/graphics-smooth/actions/workflows/main.yml/badge.svg)](https://github.com/pixijs-userland/graphics-smooth/actions/workflows/main.yml) [![npm version](https://badge.fury.io/js/%40pixi%2Fgraphics-smooth.svg)](https://badge.fury.io/js/%40pixi%2Fgraphics-smooth)\n\n### :link: Links\n\n* [Examples](https://userland.pixijs.io/graphics-smooth/examples/index.html)\n* [API Docs](https://userland.pixijs.io/graphics-smooth/docs/index.html)\n\n## Features\n\nThis is very early version of the plugin.\n\nHere's how it looks, compared to pixi graphics (antialias=false)\n\n![img_1.png](examples/img_1.png)\n\nYou can find examples in `examples` folder, you have to start the local webserver in repo folder to view them. \n\n### How to draw lines\n\nThis is drop-in replacement of `PIXI.Graphics`, API is compatible.\n\n```js\nimport { SmoothGraphics as Graphics } from '@pixi/graphics-smooth';\n\nconst graphics = new Graphics();\n\ngraphics.moveTo(100, 100);\ngraphics.lineTo(200, 200);\n```\n\n### LineScaleMode\n\nFor lines, `native` mode is renamed to `scaleMode`, you can ignore scale of element or even set default value for it!\n\n```js\nimport { SmoothGraphics, LINE_SCALE_MODE, settings } from '@pixi/graphics-smooth';\n\ngraphics.lineStyle({ width: 2.0, scaleMode: LINE_SCALE_MODE.NONE }); // now its always 2 independent from scale\n\n//alternatively\nsettings.LINE_SCALE_MODE = LINE_SCALE_MODE.NONE;\n\nconst graphics2 = new SmoothGraphics();\ngraphics.lineStyle(2.0, 0xffffff, 1.0); //the usual, but scaleMode works by default\n\nsettings.LINE_SCALE_MODE = LINE_SCALE_MODE.NORMAL;\ngraphics.lineStyle(2.0, 0xffffff, 1.0); //its normal again\n```\n\nNote: `NONE` was the only option for `graphics-smooth \u003c= 0.0.6`. Please update your code if you used early versions!\n\n### How to draw fills\n\nFills have a bit of a problem - smoothing works good only on concave objects.\nIt works only on circles and polygons. It is not implemented for rects and rounded rects yet.  \n\n```js\ngraphics.beginFill(0xffffff, 1.0, true); //third param for beginFill\n```\n\nHHAA doesn't work with texture fill yet.\n\n### drawStar and other graphics-extras\n\nThat's what you have to do if you need functions from graphics-extras package: \n\n```js\nimport { SmoothGraphics } from '@pixi/graphics-smooth';\nimport { Graphics } from '@pixi/graphics';\nimport '@pixi/graphics-extras';\n\nObject.assign(SmoothGraphics.prototype, {\n    drawTorus: Graphics.prototype.drawTorus,\n    drawChamferRect: Graphics.prototype.drawChamferRect,\n    drawFilletRect: Graphics.prototype.drawFilletRect,\n    drawRegularPolygon: Graphics.prototype.drawRegularPolygon,\n    drawRoundedPolygon: Graphics.prototype.drawRoundedPolygon,\n    drawStar: Graphics.prototype.drawStar,\n});\n```\n\nFor UMD:\n\n```js\nPIXI.smooth.SmoothGraphics.prototype.drawStar = PIXI.Graphics.prototype.drawStar;\n```\n\n### Pixel Perfect\n\nYou might notice that for diagonal lines, coverage differs from canvas2d a lot, especially if you do line animations. Solution is easy:\n\n```js\nimport { settings } from '@pixi/graphics-smooth';\nsettings.PIXEL_LINE = 1;\n```\n\nIt has to be done before first GraphicsSmooth is created.\n\nThis setting is disabled by default because it adds extra computations in coverage calculation. It is not researched yet how it will affect performance.\n\n### What are we working on\n\n* better AA on fills\n* support for line textures\n* rope mode for line textures\n\n## Performance\n\nCurrently 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.\n\nUniforms are used to store styles depends on (lineWidth * scaleMode, lineAlignment, texture, matrix).\n\nIf style buffer is too big (for now its max 24), one more drawcall will spawn.\n\n### What are we working on\n\n* support [instancing](https://wwwtyro.net/2019/11/18/instanced-lines.html)\n* support Uniform Buffer Objects\n* support batching of multiple graphics elements\n\n## Build \u0026 Test\n\n```bash\nnpm install\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixijs-userland%2Fgraphics-smooth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixijs-userland%2Fgraphics-smooth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixijs-userland%2Fgraphics-smooth/lists"}