https://github.com/pixelscommander/pixi-sdf-text
Signed distance field text implementation for PixiJS
https://github.com/pixelscommander/pixi-sdf-text
glsl pixijs sdf webgl
Last synced: 6 months ago
JSON representation
Signed distance field text implementation for PixiJS
- Host: GitHub
- URL: https://github.com/pixelscommander/pixi-sdf-text
- Owner: PixelsCommander
- Created: 2017-01-30T20:55:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-05-17T11:54:10.000Z (over 6 years ago)
- Last Synced: 2025-04-12T03:17:07.560Z (6 months ago)
- Topics: glsl, pixijs, sdf, webgl
- Language: JavaScript
- Size: 758 KB
- Stars: 97
- Watchers: 4
- Forks: 15
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
pixi-sdf-text
=============
Signed distance fields text implementation for [PixiJS](http://pixijs.com)
-----------------------------------------------------
SDF is the most efficient way to draw text in WebGL.
It uses special kind of raster atlases and GLSL shader to draw vector scalable text in a very performant way on GPU.
[Demo](http://pixelscommander.com/polygon/pixi-sdf-text/demo/)
Installation
------------
`npm i pixi-sdf-text --save`
Usage
-----
```javascript
var style = {
fontSize: 24,
fontWeight: 'bold',
fill: 0x39FF14,
align: 'left',
wordWrapWidth: 400,
lineHeight: 64,
fontURL: 'assets/Lato-Regular-64.fnt',
imageURL: 'assets/lato.png'
};
var sdfText = new PIXI.sdf.Text('Abc', style);
stage.addChild(sdfText);
```
How to generate font descriptors and SDF atlases?
-------------------------------------------------
[Use this manual](https://github.com/Jam3/three-bmfont-text/blob/master/docs/sdf.md)
Bugs
----
Feel free to submit issues to [GitHub tracker](https://github.com/PixelsCommander/pixi-sdf-text/issues)
License
-------
MIT: [http://mit-license.org/](http://mit-license.org/)
Copyright 2017 Denis Radin aka [PixelsCommander](http://pixelscommander.com)
