About Funky Pixi Text
A GPU-accelerated MSDF text rendering library that brings crisp, scalable text with advanced visual effects to PIXI.js applications.
What is Funky Pixi Text?
Traditional bitmap text in PIXI.js becomes blurry when scaled or zoomed. Funky Pixi Text solves this by using MSDF (Multi-channel Signed Distance Field) rendering — a technique that stores glyph outlines as distance fields in a texture atlas, enabling crisp rendering at any zoom level.
Beyond sharp text, the library provides a rich set of visual effects: solid or gradient fills, drop shadows with blur, stroke outlines, 3D extrusion, and texture fills with blend modes — all composited in a single shader pass per text instance.
How It Works
Single Mesh
All glyphs are batched into one PIXI.Mesh, yielding a single draw call per text instance.
Shader Assembler
Composable passes (Base, Stroke, Gradient, Texture, Extrude, Shadow) are assembled into a single optimized shader tuned by the PerformanceConfig.
Layout Engine
A pure layout engine handles multi-line text, word wrap, kerning, letter spacing, alignment, and auto-scale to fit.
┌──────────────────────────┐
│ Text │ PIXI.Container facade
└────────────┬─────────────┘
│
┌──────────────┼─────────────────────────┐
▼ ▼ ▼
getLayout() ShaderAssembler PerformanceConfig
(layout/) (renderer/multipass (renderer/)
+ passes + shaders)
│ │
▼ ▼
LayoutData PIXI.Shader + uniforms
└───────────┬──┘
▼
PIXI.Mesh (one draw call)Tech Stack
PIXI.js v7
Built on the leading 2D WebGL renderer. v8 support is in development.
MSDF
Multi-channel Signed Distance Field rendering for resolution-independent text.
WebGL Shaders
Custom fragment shaders for each effect, assembled per PerformanceConfig.
Actively Developed
Regular updates, new features, and PIXI.js v8 support coming soon.