Table of Contents
-
About The Project
-
Getting Started
- Usage
- Roadmap
- Contributing
- License
- Contact
## About The Project
[![Product Name Screen Shot][product-screenshot]](https://example.com)
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, ¶graphs, &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](https://github.com/ValentinRio/wgpu-font-renderer/tree/main/examples)_
(back to top)
## Roadmap
- [ ] Separe glyph outlines into bands
- [ ] Sort curves per band
- [ ] Optimize data-layout
- [ ] Anti-aliasing
See the [open issues](https://github.com/ValentinRio/wgpu-font-renderer/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](https://github.com/ValentinRio/wgpu-font-renderer)
(back to top)
[issues-url]: https://github.com/ValentinRio/wgpu-font-renderer/issues
[license-url]: https://github.com/ValentinRio/wgpu-font-renderer/blob/main/LICENSE.txt
[product-screenshot]: examples/screenshot.png