All Projects → PixelsCommander → pixi-sdf-text

PixelsCommander / pixi-sdf-text

Licence: other
Signed distance field text implementation for PixiJS

Programming Languages

javascript
184084 projects - #8 most used programming language
GLSL
2045 projects

Projects that are alternatives of or similar to pixi-sdf-text

WebGL-Distance-Fields
⭐ Realtime Euclidean distance field generation and rendering
Stars: ✭ 50 (-43.82%)
Mutual labels:  glsl, sdf
SdfFontDesigner
Offline font tuning/bitmap generation via shaders
Stars: ✭ 56 (-37.08%)
Mutual labels:  glsl, sdf
Pixi.js
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Stars: ✭ 34,982 (+39205.62%)
Mutual labels:  glsl, pixijs
ModularMusicVisualizer
Project in Hiatus, unmaintained, being rewritten privately. Will Open Source when stuff is ready. Project will be Renamed.
Stars: ✭ 81 (-8.99%)
Mutual labels:  glsl
qml-glsl-coder
live editor of GLSL fragment shaders based on Qt / QML
Stars: ✭ 19 (-78.65%)
Mutual labels:  glsl
sparksl-noise
minimum proof of concept about procedural noise generation in SparkAR's shader language (SparkSL).
Stars: ✭ 16 (-82.02%)
Mutual labels:  glsl
sdf-2d
A graphics library to enable the real-time rendering of 2D signed distance fields on the web.
Stars: ✭ 70 (-21.35%)
Mutual labels:  glsl
pixi-shim
PIXI.js Back-End "shim". For mocking Canvas in Node.js with ❤️
Stars: ✭ 45 (-49.44%)
Mutual labels:  pixijs
PyGraphicsGui
A "CookieCutter" for a Pythonic GUI with custom graphics - clone this to jump-start your project and learn how to integrate between ModernGL and Tkinter on Python3.6.
Stars: ✭ 30 (-66.29%)
Mutual labels:  glsl
neurecon
Multi-view 3D reconstruction using neural rendering. Unofficial implementation of UNISURF, VolSDF, NeuS and more.
Stars: ✭ 697 (+683.15%)
Mutual labels:  sdf
raymarching
Code for my raymarching in GLSL workshop series
Stars: ✭ 17 (-80.9%)
Mutual labels:  glsl
honkai-starrail-scene
【崩坏:星穹铁道】预约页场景提取
Stars: ✭ 33 (-62.92%)
Mutual labels:  glsl
ray-marching-distance-fields
Haskell and GLSL program containing my distance field / ray marching related experiments
Stars: ✭ 32 (-64.04%)
Mutual labels:  glsl
FNode
Tool based in nodes to build GLSL shaders without any programming knowledge written in C using OpenGL and GLFW.
Stars: ✭ 81 (-8.99%)
Mutual labels:  glsl
ShaderBoy
Simple text editor that lets you write Shadertoy shaders more comfortably, anytime, anywhere.
Stars: ✭ 133 (+49.44%)
Mutual labels:  glsl
haxe-shaderfun
lyapunov fat fractals haxe prodecure
Stars: ✭ 14 (-84.27%)
Mutual labels:  glsl
MTTransitions
iOS Transitions ports from GL-Transitions.
Stars: ✭ 178 (+100%)
Mutual labels:  glsl
Signed
Signed is a 3D modeling and construction language based on Lua and SDFs. Signed will be available for macOS and iOS and is heavily optimized for Metal.
Stars: ✭ 90 (+1.12%)
Mutual labels:  sdf
Unity3D-Plane-Clipping
Plane clipping shaders for Unity3D 5. Extends the Standard shader!
Stars: ✭ 84 (-5.62%)
Mutual labels:  glsl
nuance
A tool to run your shaders on the gpu. Also a good demo application for wgpu-rs.
Stars: ✭ 26 (-70.79%)
Mutual labels:  glsl

pixi-sdf-text

Signed distance fields text implementation for PixiJS

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

Installation

npm i pixi-sdf-text --save

Usage

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

Bugs

Feel free to submit issues to GitHub tracker

License

MIT: http://mit-license.org/

Copyright 2017 Denis Radin aka PixelsCommander

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].