High-quality vector text rendering in HYPE

HYPE Platform is still in development under stealth mode, so I can’t disclose all the details just yet. However, I can share that we’re tackling a significant challenge in the video marketing and advertising industry, leveraging the power of Unreal Engine (UE) to do so. Unreal Engine is widely used by AAA video game developers and other industries to create stunning, high-fidelity, interactive graphics experiences.

You might wonder why anyone would want to customize an already state-of-the-art and feature-rich game engine like Unreal. The truth is, no game engine is perfect. Unique use cases often require very specific features that aren’t typically considered standard in the game development industry.

The HYPE Platform targets the video advertising sector, where the graphic quality of text is paramount. Unfortunately, the text rendering component in UE4 (not the GUI, but the one you can drop into the map) is a basic implementation of signed distance field (SDF) text, originally pioneered by Valve. This method comes with several drawbacks, including quality degradation during zoom-ins and rounded glyph corners, making it unsuitable for professional-grade advertising content. To address this, we integrated a third-party solution—Eric Lengyel’s SlugLibrary.

Slug is a state-of-the-art, self-contained, high-performance text rendering library compatible with all industry-standard low-level graphics APIs. It also includes a built-in text shaping engine, essential for laying out glyphs and lines of text according to calligraphic rules, along with full Unicode support. Normally, a separate complex solution like HarfBuzz would be needed just for this part. Additionally, Slug enables rendering of SVG graphics, per-glyph transforms, range styling (similar to HTML text style tags), and more, making it a Swiss-army knife solution for text rendering in virtually any scenario.

The Challenges

One of our primary challenges was determining whether we could leverage the existing mesh setup infrastructure without making unnecessary modifications to the engine’s code. Slug‘s vertex layout interleaves several vertex attributes into a single data stream. It also requires specific uniforms to be passed into the vertex shader, along with a couple of data texture samplers bound to the fragment shader. Upon reviewing FLocalVertexFactory, which utilizes FDynamicMeshVertex, I discovered that it didn’t align with Slug‘s data layout.

On the vertex shader side, we were able to use the existing vertex structure by adding a Slug-related macro definition and placing all Slug-specific attributes within it. However, the .cpp interface of FLocalVertexFactory posed a problem since it couldn’t accommodate an arbitrary vertex buffer layout. Adjusting the existing interface to fit our needs would have required substantial modifications to the engine’s source code, particularly in areas like FLocalVertexFactory, DynamicMeshBuilder, and potentially other regions that are sensitive to changes and poorly documented. Consequently, we decided to implement our own vertex factory (VF). The good news was that a custom VF didn’t require altering the engine’s source code. The API was designed to be extensible, allowing the entire implementation to be done within a UE4 plugin.

The Learning Resources

There is no official documentation on how to extend vertex factories (VFs). The only information I found on Epic’s documentation pages was a list of classes and properties, with no guidance on how to use them. Fortunately, I came across two blog posts—one by Matt Hoffman and another by Khammassi Ayoub. Both provide an extensive amount of information about UE’s rendering system and vertex factories. However, Hoffman’s article is outdated for version 4.27, as many APIs have undergone significant changes since it was written. Moreover, both articles primarily focus on partial customization of VFs, such as adding a custom shading model and inserting custom code into the built-in vertex and pixel shaders. Despite reading both posts, I was still unsure how to approach the task technically, as the information was overwhelming.

To better understand the process, I began examining UE4’s source code for examples of custom vertex factories, such as LocalVertexFactory and TextRenderComponent. Additionally, I received some guidance on adding a custom shading model from Epic’s technical support staff on UDN.

The result

This feature was developed in parallel with other critical tasks. The first iteration involved integrating Slug as a post-process 2D overlay.

Since this approach didn’t require modifying VFs or UE’s built-in shaders, it provided a relatively easy starting point. In total, it took me about six months to fully integrate the Slug Library into Unreal, fix bugs, and bring the plugin to a production-ready state. If I had been working on this task full-time, it likely would have taken about a month and a half.

It’s no exaggeration to say that 70% of that time was spent learning Unreal Engine’s internal APIs and figuring out how to make them work as needed in this context. The actual process of porting the Slug Library to Unreal was the easier part since the code is rendering API agnostic. Slug shaders are HLSL compatible, so the main task was simply replacing the input uniforms with those used in UE’s base vertex and pixel pass shaders.