WebUI Plugin (HTML/CSS/JS Interface Widgets)

[quaint isle]

The WebUI plugin allows developers to create web-based user interfaces with HTML, JavaScript, and CSS using blueprints. These widgets also support transparency pass-through for mouse and touch events in 2D along with virtual pointer events in 3D. It’s powered by a custom Chromium web browser on desktop, with ultra fast 4K 60FPS using accelerated paint, and the built-in WebView browsers on mobile. This plugin also includes a robust JSON library that provides integrated management of objects, arrays, and primitive data types to seamlessly interop between JavaScript and blueprints.

https://unrealengine.com/marketplace/product/web-ui
Packaged Demo: https://tracerinteractive.com/plugins/webui/demo.zip

• Create web-based user interface widgets using blueprints
• Transparency pass-through for both 2D and 3D widgets
• Ultra fast 4K 60FPS using accelerated paint
• Includes video playback and WebGL support
• Manage JSON objects, arrays, and primitive data types
• Seamlessly interop between JavaScript and blueprints
• Cross-platform support for desktop and mobile

This plugin comes with an example project that demonstrates a startup map with a volume slider and FPS counter. You can even put these widgets physically in the 3D world with a virtual laser pointer. There’s full transparency support for both 2D and 3D. This is very useful for RTS style games that require the mouse cursor to always be visible (because the user commonly clicks back and forth between the game and interface). Also VR games that implement 3D user interfaces and require them to be intuitive as the user would have a realistic expectation to be able to click through the transparent parts of the browser.

We also have support for accelerated paint which provides 4K 60FPS! This feature uses a "shared texture" where the browser renders on the GPU, then the GPU copies these pixels directly to the engine, which makes everything quick and snappy. But when there is no accelerated paint the CPU must copy the pixels from the GPU after the browser renders a frame, and then has to copy these pixels back to the GPU again to get them into the engine. This is why accelerated paint is so important for interfaces that can cover the entire screen, because the pixels never leave the GPU.

Keep in mind that other web-based interface solutions with this level of performance are usually licensed privately for many thousands of dollars. Moreover these expensive solutions usually integrate directly into the engine rendering pipeline, because they aren't actually "real browsers" that conform to HTML/CSS/JS standards. This means you cannot access websites such as YouTube or even Google without the rendering being completely broken. However we wanted to provide a solution that was much more affordable, along with a system that actually provides a full fledged web browser that conforms to HTML/CSS/JS standards.

The WebUI plugin is designed for JSON-based communication between UE5 and JavaScript. This not only provides the ability to update your interface from the engine using JSON but also for your interface to trigger events in-engine with optional JSON data.

This is the core functionality not found in the default web browser widget (that comes with the engine) which allows the WebUI plugin to be utilized for in-game interfaces. It’s also a lot cleaner and more reliable than using the integrated object converter built into the engine, as this can easily lead to all kinds of type mismatches and issues which are just not worth the hassle or bugs.

That's why the WebUI plugin combined with the JSON library is the most robust solution available today for web-based user interfaces in UE5!