wgpu-font-renderer

About The Project

Render glyphs by extracting their outlines from TTF files and draw them directly from GPU. No signed distance field cache of any sort. This is based on Eric Lengyel's Slug algorithm.

(back to top)

Built With

• Swash for text shaping - https://github.com/dfrg/swash
• TTF Parser to read TTF files - https://github.com/RazrFalcon/ttf-parser
• WGPU as graphic API - https://wgpu.rs/

(back to top)

Getting Started

This is an example of how you use this crate to generate paragraphs programatically and render them with WGPU.

Installation

Add dependency to you cargo.toml

[dependencies]
wgpu-font-renderer = "0.1.0"

(back to top)

Usage

First you need to load the TTF file in the FontStore by passing the file path and and preset string that will define the list of characters used by your app.

let mut font_store = FontStore::new(&device, &config);
let cache_preset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,;:!ù*^$=)àç_è-('\"é&²<>+°§/.? ";
let font_key = font_store.load(&device, &queue, "examples/Roboto-Regular.ttf", cache_preset).expect("Couldn't load the font");

Then during the runtime you can create new paragraphs to be rendered. Those can be defined with:

• Specific font name
• Position on the screen
• Font size
• Linear RGBA color
• Text content

let mut paragraphs = Vec::new();
let mut type_writer = TypeWriter::new();
if let Some(paragraph) = type_writer.shape_text(&font_store, font_key, [100., 100.], 72, [0.68, 0.5, 0.12, 1.], "Salut, c'est cool!") {
    paragraphs.push(paragraph);
}

Then you can initialize the predefined font rendering middleware:

let mut text_renderer = TextRenderer::new(&device, &config, font_store.atlas());

Call prepare to pass the paragraphs you want to render to the middleware:

text_renderer.prepare(&device, &paragraphs, &font_store);

Call render with an existing render pass to build the command buffer necessary to render your paragraphs:

text_renderer.render(&mut pass, [config.width, config.height]);

To see concrete example, please check here

(back to top)

Roadmap

• Separe glyph outlines into bands
• Sort curves per band
• Optimize data-layout
• Anti-aliasing

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Project Link: https://github.com/ValentinRio/wgpu-font-renderer

(back to top)