Progress Update - Transpilation, Render Effects, Demos & More

For this update, we'll dive into our progress and development over the past few months and give an overview of everything we've been working on.

Behind the scenes, we've been incredibly hard at work, keeping our heads down and working towards getting PanGui ready as quickly as possible without cutting any corners.

We've made massive progress on PanGui since you last heard from us. Here are the most notable new things:

• PanGui is now fully transpiled, including C# to C#, as well as C# to C++
• A C++ variant of PanGui now compiles, runs, renders and passes all tests
• Massive text improvements such as BIDI, shaping, multiple encodings, and dozens of smaller settings and features
• Render effects and render targets, including built-in and custom effects
• Joystick, controller, touch and gesture support
• SVG support
• Rebuilt and improved debugger
• New demos

Transpilation

Every single target where we want to deploy PanGui is different in many ways both small and big. Even within the C# ecosystem itself, there are big differences between different versions of .NET, when targeting different API surfaces such as .NET Standard, and when targeting an environment such as the Unity game engine.

All of these different targets are now handled by a transpiler purpose-built for PanGui. This includes a functioning C++ source variant, although much work still remains to be done there. All patches we distribute for alpha testing are now entirely transpiled source code. Additionally, all PanGui shaders are now written in C# and transpiled to actual shader source for specific targets.

We will cover this subject more in-depth in a future blog post, so stay tuned for that!

Render effects

We've gotten many questions about effects such as blur and glass. Well, we're happy to say that PanGui now has a fully fledged render effects feature. Render effects can apply to any arbitrary thing drawn by PanGui, and include a wide array of built-in effects, such as blur, glow, drop shadow, saturation, brightness, contrast, tint, hue rotation, grayscale, inversion, pixelation, chromatic aberration, and sharpening.

Users can also create their own completely custom render effects by providing the necessary rendering logic. Do note that this feature needs dedicated support from each platform layer, and that while you can always precompile your custom effects, defining arbitrary custom effects at runtime requires the platform layer to declare the ability to compile new shaders at runtime and not just at build time.

It is also worth noting that PanGui's shape and text drawing features also by themselves support many standard effects such as glows and shadows, so common things such as making text glow does not require using a full-on render effect as a separate draw call.

Text improvements

We've greatly built out PanGui's typography capabilities. We're designing the APIs, naming, and properties from first principles, aiming to reduce reliance on historical terminology and keep the system independent of any particular reading direction or orientation. The text API is also capable of working natively with multiple different encodings, such as Ascii, Utf8, Utf16 and Utf32.

We've split the text pipeline into independently replaceable stages to create integration points for libraries such as ICU for Unicode analysis and HarfBuzz for shaping, enabling industry-standard shaping support for users willing to include such dependencies in their applications.

New typography controls cover letter and word spacing, line height, tab stops, paragraph indents, and baseline shifts for superscripts and subscripts. Spacing can use font-relative units, so it scales naturally with the text. We've also added justification, automatic case conversion, more flexible wrapping, and line limits with configurable ellipsis markers. We now have OpenType GPOS pair kerning, bidirectional text processing for mixed reading directions, and placeholders for missing glyphs.

There are far more text features than this well underway and in the works: font fallback chains, font blending, emoji support (with effects!), controllable per-char text mutations (for effects like shaky text, drawing text along lines, etc), and much more.

Joystick, controller and touch support

PanGui now has support for joysticks, controllers and touch input. PanGui can now track individual devices, button presses and holds, axes, hats, and touchpads when provided with the relevant platform events. This includes the ability to receive high level touch events directly from the host platform, and providing optional utilities to do its own raw touch input analysis to generate gesture events like swipes, pinches and rotations from scratch.

SVG support

We now have simple, built-in SVG support that turns static SVGs into meshes. It covers common styles and effects used in logos and icons, including gradients, strokes, clip paths, masks, and shadows. SVG animation, text, and images aren't yet supported. SVGs can be loaded from files or arbitrary strings.

A lot of the underlying work required to support SVGs is useful well beyond SVG rendering itself. The API used internally to compose and render them has been designed with a more general-purpose vector graphics API in mind, and we will eventually be providing that functionality directly to users as well.

New debugger

PanGui's old debugger - which we've shown you some examples of - was an amazingly useful tool and a great proof of concept, but it started as an in-house tool and was not designed for the full breadth of contexts in which PanGui must run. The new debugger has a greatly improved interface (with light and dark skins), lets the user inspect layout, rendering, input, text, storage state, memory, and more. Architecture changes means it can now offer crucial features like inspecting multiple different Gui instances (important for game engines) and docking.

New demos

Many of those of you who saw us at Gamescom might have seen some of our new demos. These are different than the smaller learning experiments we've showed you earlier, as they are meant to serve as examples, references and inspiration for end users across a variety of PanGui's target industries. This means we're putting a lot of effort into making sure they are well built and cleanly designed.

Here's a sneak peek at a few of them!

Playable card-based auto-battler

A small game about arranging cards into a formation, sending them into battle and choosing rewards afterwards. Card games are an interesting UI challenge because so much of the game happens through the interface: dragging a card needs to feel good, its information needs to stay readable, and the player needs to understand what happens when several abilities activate in quick succession. The demo combines PanGui's layout, drawing, input and effect systems with illustrated assets and animated card artwork.

Video editing application

A video editor, chosen because it brings together many interesting UI problems at once: dockable panels, media browsers, property inspectors, draggable elements and a timeline. You can import files, place and trim clips on the timeline, and scrub through frames in the monitor. FFmpeg supplies the media information and decoded images, with decoding performed in the background, so the monitor shows frames from your actual footage.

Instrument cluster of a hypothetical car

A digital automotive dashboard with animated instruments, navigation, status indicators and three driving modes. Switching between Comfort, Eco and Sport changes more than the colors: instruments move and resize, different information takes priority, and the display animates between the three arrangements. The gauges, map and dashboard surfaces are all drawn using PanGui's shapes, text, transforms and effects. Fonts and SVG icons provide some of the details, while custom shaders handle bespoke effects such as the speedometer's background distortion. Sadly, this dashboard is almost certainly not even remotely road legal.

Game telemetry analysis tool

A tool for exploring player activity across game maps using a spatial heatmap, with large filterable datasets containing region statistics and individual death records, all in a dockable workspace. The data is generated demo data, but changing filters updates the analysis, selecting a region narrows the records, and the panels provide different views of the same activity. The map's 3D appearance is simulated using 3D-projected geometry and 2D drawing. We do want to note here that PanGui isn't a dedicated 3D rendering library, but it is perfectly possible to create simple 3D visuals using a 3D matrix to project 2D geometry into 3D space.

In Closing

We've listed some big ticket items in this update, but there are far, far too many changes to list them all. Hundreds of improved APIs, bug fixes, performance improvements and design changes. These are smaller things like 3D matrices, new popup system, improved canvas/scrolling APIs, memory allocation improvements, and much, much more.

Now, some of you may be thinking, "wow, that sounds like a lot of stuff for a small, portable, zero-dependencies library!" It is! We've promised to make PanGui as small as we could, and we have - but it's important to keep in mind that the vision of PanGui is to provide all of the expected and necessary features and capabilities needed in modern application development, without compromise. This means we must properly handle text, have proper effects, pluggable styling, accessibility, and so on. We think that all of this has been packed into a remarkably small source distribution for how capable it is.

As of the time of writing, the core library sits at about 74k LOC, with a further 43k LOC of optional features, mostly debugging and helpers for platform layers. Some core features such as styling and svg support can be stripped, bringing the ultimate minimal core with the basic memory systems, layouting, shapes, text, input, etc, down to about 50k loc.

We have much more in the works as we move ever closer to a public launch. "Endgame" efforts like building the launch website, creating substantial and well-written demos, and writing extensive documentation are slowly taking up more and more of our attention.

Beyond that, we're currently preparing our final release generation and distribution pipeline. It's pretty important for us to make this process smooth and highly automated, as there will ultimately be dozens of variations and platform layers of PanGui across multiple languages which must be transpiled, tested, packaged and organized for release across a large number of distribution repositories.

Once we can serve new alpha patches through this pipeline, we will be expanding the alpha even further again, and also expanding the alpha to be testing new platform targets and eventually languages.

In the meantime, if you want to ask any questions or discuss PanGui, please join our Discord. If you're interested in evaluating PanGui, please sign up to our beta list. We read all applications as they come in, and we will be inviting new beta applicants to the alpha with increasing regularity.

Until next time!