Skip to content

WIP: Render glyphs using canvas#1

Draft
juancampa wants to merge 35 commits into
membranefrom
juan/render-glyphs-using-canvas
Draft

WIP: Render glyphs using canvas#1
juancampa wants to merge 35 commits into
membranefrom
juan/render-glyphs-using-canvas

Conversation

@juancampa
Copy link
Copy Markdown
Collaborator

@juancampa juancampa commented Aug 27, 2024

Uses an OffscreenCanvas to render glyphs instead of the ab_glyph rasterizer.

Benefits:

  • We can use OS native fonts that look nicer (i.e. system-ui, SF Mono). We can't embed these due to licensing issues.
  • Text shold look sharper since the OS rasterizer should use hints and/or better align outlines to the pixel grid
  • Smaller wasm files.

Future work:

  • Use OffscreenCanvasRenderingContext2D.measureText to measure text. Consider implementing the ab_glyph::Font trait in a struct that uses wasm_bindgen calls behind the scenes.
  • Test with system fonts

Limitations:

  • Generally speaking, the texture atlas approach of rendering text is limited by the fact that there's only one version of each glyph (one bitmap), but looking at how the browser renders text, each instance of e.g. the glyph "a", can rasterize to a slightly different bitmap, when they land on different non-integer coordinates. Egui does align each glyph to the pixel boundary in text_layout.rs

Status of this PR:

It works but glyphs look unaligned, I think it's because we don't use the canvas to measure the glyphs and the metrics determined by ab_glyph don't match the metrics used by the canvas (canvas bounding boxes tend to be smaller, probably because grid alignment?)

juancampa added 30 commits July 30, 2024 18:26
…rper strokes

Clippy pass

Default to middle stroke to not break normal paths

Add `round_to_pixel_center`

Fix `Stroke` preview

Fix indent lines

Fix side/topbottom panels

Fix window

Fix separator

Add rendering test

Increase size of top bar and adjust a couple of margins

Undo no-op change. Fix typo.

Make  crate-pub for now
This was causing gaze to show the text cursor when hovering the
invisible text agent input box
The TitleBar was updated upstream but the issue is still there. I'll
have to push a PR later. Changed here:

emilk@8dc2ba2?w=1
Uses an OffscreenCanvas to render glyphs instead of the `ab_glyph`
rasterizer. It works but glyphs look unaligned, I think it's because we
don't use the canvas to _measure_ the glyphs and the metrics determined by
`ab_glyph` don't match the metrics used by the canvas (canvas bounding
boxes tend to be smaller, probably because grid alignment?)

Benefits:

 - We can use OS native fonts that look nicer (i.e. `system-ui`, `SF
   Mono`). We can't embed these due to licensing issues.
 - Text shold look sharper since the OS rasterizer should use hints
   and/or better align outlines to the pixel grid
 - Smaller wasm files.

Future work:

  - Use `OffscreenCanvasRenderingContext2D.measureText` to measure text.
    Consider implementing the `ab_glyph::Font` trait in a struct that
    uses wasm_bindgen calls behind the scenes.
  - Test with system fonts

Limitations:

  - Generally speaking, the texture atlas approach of rendering text is
    limited by the fact that there's only one version of each glyph (one
    bitmap), but looking at how the browser renders text, each instance
    of e.g. the glyph "a", can rasterize to a slightly different bitmap,
    when they land on different non-integer coordinates. Egui does align
    each glyph to the pixel boundary in `text_layout.rs`
@height
Copy link
Copy Markdown

height Bot commented Aug 27, 2024

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

@juancampa juancampa force-pushed the membrane branch 2 times, most recently from d045d8b to 8411e70 Compare September 4, 2024 01:01
@juancampa juancampa force-pushed the membrane branch 2 times, most recently from bd72681 to f07ec28 Compare September 14, 2024 16:04
@juancampa juancampa force-pushed the membrane branch 2 times, most recently from 73461b7 to 38199c8 Compare December 1, 2024 00:39
@juancampa juancampa force-pushed the membrane branch 3 times, most recently from a0b5855 to 3b6a09b Compare May 26, 2025 22:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant