Fontrendering

Cargo.toml

@@ -13,6 +13,8 @@ members = [
     "web",
 
     "benchmarks",
+
+    "experiments/wgpu_for_fontrendering"
 ]
 
 [profile.release]

experiments/wgpu_for_fontrendering/.gitignore

@@ -0,0 +1 @@
+/target

experiments/wgpu_for_fontrendering/.vscode/launch.json

@@ -0,0 +1,27 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "lldb",
+            "request": "launch",
+            "name": "wgpu_for_fontrendering",
+            "cargo": {
+                "args": [
+                    "build",
+                    "--target=aarch64-apple-darwin",
+                    "--bin=wgpu_for_fontrendering",
+                    "--package=wgpu_for_fontrendering"
+                ],
+                "filter": {
+                    "name": "wgpu_for_fontrendering",
+                    "kind": "bin"
+                }
+            },
+            "args": [],
+            "cwd": "${workspaceFolder}"
+        },
+    ]
+}

experiments/wgpu_for_fontrendering/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "wgpu_for_fontrendering"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[lib]
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[dependencies]
+winit = "0.27.2"
+env_logger = "0.9"
+log = "0.4"
+wgpu = { git = "https://github.com/gfx-rs/wgpu", rev = "94ce763" }
+pollster = "0.2.5"
+bytemuck = { version = "1.4", features = [ "derive" ] }
+cgmath = "0.18"
+ttf-parser = "0.15.0"
+rustybuzz = "0.5"
+rand = "0.8"

experiments/wgpu_for_fontrendering/README.md

@@ -0,0 +1,51 @@
+# GPU-based font rendering experiment
+
+This is a standalone wgpu/winit application which serves as an experimentation platform for font rendering on the GPU.
+
+> The goal is not (yet) to provide a fully fleshed out gpu-based font rendering library but rather see w
+
+
+## Current Approach:
+We can render arbitrary text with a .ttf font under arbitrary 3-d transformations on the GPU:
+![](./doc/perspective_transform.png)
+
+
+### Algorithm
+[Lightweight bezier curve rendering](https://medium.com/@evanwallace/easy-scalable-text-rendering-on-the-gpu-c3f4d782c5ac) was reimplemented:
+
+* Convert ttf outlines into triangle meshes (cpu side, once)
+* Use winding order trick to produce correct glyph shape
+    - First pass: overdraw pixels into a texture
+    - Second pass: render texture but only the pixels that were drawn an uneven number of times
+![](./doc/animation.gif)
+Animation taken from [here](https://medium.com/@evanwallace/easy-scalable-text-rendering-on-the-gpu-c3f4d782c5ac).
+* Quadratic curve segments get two triangles, one with special uv coordinates to enable [simple curve evaluation in the fragment shader](https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-25-rendering-vector-art-gpu)
+
+A rough overview of the setup and render routine:
+![](./doc/overview.png)
+
+### Performance
+* Parsing/tesselation of glyphs is done with the help of `ttfparser` -> currently unoptimized. With glyph caching this should be ok
+* Rendering times degrade massively with number of glyphs, but is independent of screen resolution
+![](./doc/benchmark_2022-04-24.png)
+
+### Issues
+
+The main issue with this approach (besides performance) is that the trick with using overdrawing of pixels to decide whether to fill them or not produces artifacts when two separate glyphs overlap in screen space:
+![](./doc/overlapping_problem.png)
+
+However, this should not be a serious problem for our use case (labels on maps) due to two reasons:
+1. Text on a map should never overlap because it would be detrimental to readability. Looking at e.g. Google Maps one can see that they have a system in place to detect overlaps and hide text following some sort of importance rating.
+2. If we actually want to allow overlapping text, we should get away with a simple painter's algorithm:
+    * Sort text entities (i.e., entire labels) by their distance to the camera
+    * Draw sorted from closest to farthest
+    * Use a depth buffer -> this way all overlapping fragments between texts further back than the closest one are discarded and won't mess with the winding order
+
+### TODOs
+* Cache glyph meshes, so they are not recreated whenever they appear in a word and render them as instances
+* Anti-aliasing!
+
+## Build setup
+This is a separate project from the maplibre-rs, therefore it is excluded from the maplibre-rs workspace and defines its own workspace.
+
+> Running on Mac did not work with a simple `cargo run` (linker error) but with `cargo run --target aarch64-apple-darwin` (on a M1) it worked fine.

experiments/wgpu_for_fontrendering/src/lib.rs

@@ -0,0 +1,133 @@
+mod rendering;
+mod text_system;
+
+use cgmath::Quaternion;
+use rand::Rng;
+use std::time::Instant;
+
+use text_system::{FontID, SceneTextSystem};
+
+use winit::{
+    event::*,
+    event_loop::{ControlFlow, EventLoop},
+    window::WindowBuilder,
+};
+
+pub async fn run() {
+    env_logger::init();
+    let event_loop = EventLoop::new();
+    let size: winit::dpi::PhysicalSize<u32> = winit::dpi::PhysicalSize::new(4000, 2000);
+    let window = WindowBuilder::new()
+        .with_inner_size(size)
+        .build(&event_loop)
+        .unwrap();
+
+    {
+        let mut state: rendering::State = rendering::State::new(&window).await;
+        let mut text_system: SceneTextSystem = SceneTextSystem::new(&state).unwrap();
+
+        let font_id: FontID = String::from("Aparaj");
+        if let Err(_e) = text_system.load_font(&font_id, "tests/fonts/aparaj.ttf") {
+            panic!("Couldn't add font!");
+        }
+
+        let step_x = 0.42;
+        let step_y = 0.15;
+        let z_jitter: f32 = 1.0;
+
+        let limit = 30;
+
+        let mut rng = rand::thread_rng();
+
+        let title = format!("{} individual glyphs", (2 * limit) * (2 * limit) * 4);
+
+        if let Err(_) = text_system.add_text_to_scene(
+            &state,
+            &title,
+            (-0.8, (limit + 2) as f32 * step_y, 0.0).into(),
+            Quaternion::new(0.0, 0.0, 0.0, 0.0),
+            (1.0, 0.0, 0.0).into(),
+            0.00015,
+            &font_id,
+        ) {
+            panic!("Problem!");
+        }
+
+        for i in -limit..limit {
+            for j in -limit..limit {
+                let letter_1: char = rng.gen_range(b'A'..b'Z') as char;
+                let letter_2: char = rng.gen_range(b'A'..b'Z') as char;
+                let number: u32 = rng.gen_range(0..99);
+                let text = format!("{}{}{:2}", letter_1, letter_2, number);
+
+                let r: f32 = rng.gen_range(0.0..1.0);
+                let g: f32 = rng.gen_range(0.0..1.0);
+                let b: f32 = rng.gen_range(0.0..1.0);
+
+                let z = rng.gen_range(-z_jitter..z_jitter);
+
+                if let Err(_) = text_system.add_text_to_scene(
+                    &state,
+                    &text,
+                    (i as f32 * step_x, j as f32 * step_y, z).into(),
+                    Quaternion::new(0.0, 0.0, 0.0, 0.0),
+                    (r, g, b).into(),
+                    0.0001,
+                    &font_id,
+                ) {
+                    panic!("Problem!");
+                }
+            }
+        }
+
+        event_loop.run(move |event, _, control_flow| {
+            match event {
+                Event::WindowEvent {
+                    ref event,
+                    window_id,
+                } if window_id == window.id() => {
+                    if !state.input(event) {
+                        match event {
+                            WindowEvent::CloseRequested
+                            | WindowEvent::KeyboardInput {
+                                input:
+                                    KeyboardInput {
+                                        state: ElementState::Pressed,
+                                        virtual_keycode: Some(VirtualKeyCode::Escape),
+                                        ..
+                                    },
+                                ..
+                            } => *control_flow = ControlFlow::Exit,
+                            WindowEvent::Resized(physical_size) => state.resize(*physical_size),
+                            WindowEvent::ScaleFactorChanged { new_inner_size, .. } => {
+                                // new_inner_size is &&mut so we have to dereference it twice
+                                state.resize(**new_inner_size);
+                            }
+                            _ => {}
+                        }
+                    }
+                }
+                Event::RedrawRequested(window_id) if window_id == window.id() => {
+                    state.update();
+                    let now = Instant::now();
+                    match state.render(&mut text_system) {
+                        Ok(_) => {}
+                        // Reconfigure the surface if lost
+                        Err(wgpu::SurfaceError::Lost) => state.resize(state.size),
+                        // The system is out of memory, we should probably quit
+                        Err(wgpu::SurfaceError::OutOfMemory) => *control_flow = ControlFlow::Exit,
+                        // All other errors (Outdated, Timeout) should be resolved by the next frame
+                        Err(e) => eprintln!("{:?}", e),
+                    }
+                    println!("Frame: {}ms", now.elapsed().as_millis());
+                }
+                Event::MainEventsCleared => {
+                    // RedrawRequested will only trigger once, unless we manually
+                    // request it.
+                    window.request_redraw();
+                }
+                _ => {}
+            }
+        });
+    }
+}

experiments/wgpu_for_fontrendering/src/main.rs

@@ -0,0 +1,9 @@
+use wgpu_for_fontrendering::run;
+
+fn run_gui() {
+    pollster::block_on(run());
+}
+
+fn main() {
+    run_gui();
+}