Text rendering and effects using GPU-computed distances

GPU accelerated text shimmer

A code demo by Devon Govett created on CodePen

Fast calculation of the distance to cubic Bezier curves on the GPU

Bézier curves are a core building block of text and 2D shapes rendering. There are several approaches to rendering them, but one especially challenging problem, both mathematically and technically, is computing the distance to a Bézier curve. For quadratic curves (one control point), this is fairly accessible, but for cubic (two control points) we're going to see why it is so hard.

Text Rendering Hates You - Faultlore

Rendering text, how hard could it be? As it turns out, incredibly hard! To my knowledge, literally no system renders text “perfectly”. It’s all best-effort, although some efforts are more important than others.

Tenobrus/graphglyph

Encode text as reversible unit-distance graph images

The Future of Text

We are a community dedicated to working on how we can better develop text to augment our capabilities and we invite you to join us. We believe that the potential of richly interactive text to truly augment how we think & communicate is massive. Text after all, is externalized symbols we can interact with to extend our mind’s reach. Therefore text is not just a medium, it is also a tool for thought, and we are looking Beyond Visual Range.

Generating 3D Meshes From Text

I recently had a desire to convert text to 3D meshes that I could render and manipulate as part of my Geotoy project and Geoscript language. I did some research into tools and libraries that could solve different pieces of this, and I put together a pipeline that implements the whole thing - yielding nice, 2-manifold 3D meshes with arbitrary fonts, text styles, and more.

Thousands of Styled Rectangles in 120FPS on GPU

Secrets of rendering extremely fast UIs in WebGPU by minimizing overhead on the GPU.

ASCII characters are not pixels: a deep dive into ASCII rendering

A look at how I used shape vectors to achieve sharp, high-quality ASCII rendering.

Fontastic Space

Compare Google Fonts with anatomy overlays, metrics & pairing scores. Free.

Revealing Text With CSS letter-spacing | CSS-Tricks

Until we get something like ::nth-letter, there are still some really cool text effects we can make from existing CSS features, like letter-spacing, ::first-word and ::first-line.

Rendering Particles with Compute Shaders

Overview I developed a technique to render single-pixel particles (using additive blending) with compute shaders rather than the usual fixed-function rasterization with vertex and fragment shaders. My approach runs 31–350% faster than rasterization on the cases I tested and is particularly faster for some “pathological” cases (which for my application are not actually that uncommon). I observed these speedups on both NVIDIA and AMD GPUs. Using this technique allowed me to ship an app that runs on minimum-spec hardware without sacrificing visual fidelity.

Texture-less Text Rendering

How to draw text to a Vulkan renderpass without binding a single texture

Signed Distance Fields – Render Diagrams

Introducing Glyph Protocol for Terminals - Raphael Amorim

There’s one thing about terminals that has always bothered me: to get your favorite editor, prompt, or TUI to render nicely, you are almost always forced to install a patched font. You know the drill. You open a fresh terminal, pull up your editor, and half of the UI is replaced by little rectangles — the infamous tofu. The fix is to go download a Nerd Font, or Powerline, or some other patched set, and switch your terminal font to it. A font that is often well above 10MB in size1. All of that — just so you can render...

Wiretext — Unicode Wireframe Design Tool

A spatial design tool where everything renders as Unicode box-drawing characters. Share as text.