Optimized Web Browser Plugin

Comprehensive documentation for the optimized web browser in Unreal Engine

Created by Anshul Patalbansi

Table of Contents

Introduction

The Optimized Web Browser Plugin provides an enhanced version of the standard WebBrowserWidget for Unreal Engine. It focuses on improving performance without removing any functionality, making it ideal for projects that require web content integration with better performance characteristics.

A key feature of this plugin is the ability to control the browser frame rate (up to 120fps), enabling developers to create smoother web experiences while maintaining control over performance. The plugin also provides hardware acceleration management and background tab throttling for optimal resource usage.

Installation

To install the Optimized Web Browser Plugin in your Unreal Engine project:

  1. Copy the OptimizedWebBrowser folder to your project's Plugins directory
  2. If your project doesn't have a Plugins directory, create one in your project's root folder
  3. Restart the Unreal Engine editor
  4. Enable the plugin by going to Edit → Plugins, find the Optimized Web Browser plugin under the UI category, and check the Enabled checkbox
  5. Restart the editor when prompted

The plugin is now installed and ready to use in your project.

Features

Improved Performance

Optimized rendering and reduced CPU usage compared to the standard web browser widget.

Configurable Frame Rate (Up to 120fps)

Set the browser frame rate to balance between smoothness and performance. The plugin now supports up to 120fps for high refresh rate displays.

// In C++
Browser->SetBrowserFrameRate(60);

// In Blueprints
// Use the "Set Browser Frame Rate" node

Hardware Acceleration Control

Enable or disable hardware acceleration to optimize performance based on your target hardware.

// In C++
Browser->SetHardwareAccelerationEnabled(true);

// In Blueprints
// Use the "Set Hardware Acceleration Enabled" node

Background Tab Throttling

Reduce CPU usage when the browser is not visible to improve overall application performance.

// In C++
Browser->SetBackgroundTabThrottlingEnabled(true);

// In Blueprints
// Use the "Set Background Tab Throttling Enabled" node

JavaScript Console Logging

Send messages from Unreal Engine to the browser's JavaScript console for debugging or communication.

// In C++
Browser->LogToConsole("Hello from Unreal Engine!");

// In Blueprints
// Use the "Log To Console" node

Additional Optimizations

Usage

In Blueprints

To use the Optimized Web Browser in your Unreal Engine project with Blueprints:

  1. Add the "Optimized Web Browser" widget to your UI
  2. Configure the performance settings:
  3. Use the "Log To Console" function to send messages from Blueprint to the browser's JavaScript console

In C++

To use the Optimized Web Browser in your C++ code:

#include "OptimizedWebBrowser.h"

// Create an optimized web browser
UOptimizedWebBrowser* Browser = CreateWidget<UOptimizedWebBrowser>(GetWorld(), UOptimizedWebBrowser::StaticClass());

// Configure performance settings
Browser->SetBrowserFrameRate(60); // Can now set up to 120 fps
Browser->SetHardwareAccelerationEnabled(true);
Browser->SetBackgroundColor(FColor(255, 255, 255, 255));
Browser->SetBackgroundTabThrottlingEnabled(true);

// Load a URL
Browser->LoadURL("https://www.example.com");

// Log a message to the browser's JavaScript console
Browser->LogToConsole("Hello from Unreal Engine!");

Available Functions

The Optimized Web Browser Plugin provides a variety of functions to control browser behavior and performance. All functions are accessible through the Blueprint system and C++ code.

Browser Functions

LoadURL

Load the specified URL.

Parameters: FString NewURL - The URL to load

// Example usage in Blueprint
Browser->LoadURL("https://www.example.com");

LoadString

Load a string as data to create a web page.

Parameters:

// Example usage in Blueprint
Browser->LoadString("
Hello World
", "about:blank");

ExecuteJavascript

Executes a JavaScript string in the context of the web page.

Parameters: const FString& ScriptText - JavaScript code to execute

// Example usage in Blueprint
Browser->ExecuteJavascript("document.body.style.backgroundColor = 'red';");

GetTitleText

Get the current title of the web page.

Returns: FText - The page title

// Example usage in Blueprint
FText Title = Browser->GetTitleText();

GetUrl

Gets the currently loaded URL.

Returns: FString - The current URL

// Example usage in Blueprint
FString CurrentURL = Browser->GetUrl();

LogToConsole

Logs a message to the browser's JavaScript console.

Parameters: const FString& Message - The message to log

// Example usage in Blueprint
Browser->LogToConsole("Hello from Unreal Engine!");

Performance Functions

SetBrowserFrameRate

Set the browser frame rate (15-120 fps).

Parameters: int32 FrameRate - The frame rate to set

// Example usage in Blueprint
Browser->SetBrowserFrameRate(60);

SetHardwareAccelerationEnabled

Enable or disable hardware acceleration.

Parameters: bool bEnabled - Whether to enable hardware acceleration

// Example usage in Blueprint
Browser->SetHardwareAccelerationEnabled(true);

SetBackgroundColor

Set the background color of the browser.

Parameters: FColor Color - The background color

// Example usage in Blueprint
Browser->SetBackgroundColor(FColor(255, 255, 255, 255));

SetBackgroundTabThrottlingEnabled

Enable or disable throttling of background tabs.

Parameters: bool bEnabled - Whether to enable background tab throttling

// Example usage in Blueprint
Browser->SetBackgroundTabThrottlingEnabled(true);

Events

OnUrlChanged

Called when the URL changes.

Parameters: const FText& Text - The new URL

// Example usage in Blueprint
Browser->OnUrlChanged.AddDynamic(this, &YourClass::HandleUrlChanged);

OnBeforePopup

Called when a popup is about to spawn.

Parameters:

// Example usage in Blueprint
Browser->OnBeforePopup.AddDynamic(this, &YourClass::HandleBeforePopup);

OnConsoleMessage

Called when the browser has console messages to print.

Parameters:

// Example usage in Blueprint
Browser->OnConsoleMessage.AddDynamic(this, &YourClass::HandleConsoleMessage);

Performance Tips

To get the best performance from the Optimized Web Browser Plugin, consider the following tips:

  1. Use Opaque Background Colors: Transparent backgrounds require more processing power. Set an opaque background color for better performance.
  2. Choose Appropriate Frame Rate:
  3. Optimize HTML Content:
  4. Avoid Autoplay Media: Autoplay videos and animations can cause performance issues
  5. Use Simple Layouts: Complex layouts with many elements can slow down rendering
  6. Enable Hardware Acceleration: For most systems, hardware acceleration will improve performance
  7. Enable Background Tab Throttling: This will reduce CPU usage when the browser is not visible

Technical Details

The Optimized Web Browser Plugin applies several techniques to improve performance:

  1. Frame Rate Limiting: Controls the browser's internal rendering frame rate to balance between smoothness and performance
  2. Hardware Acceleration Management: Properly configures GPU acceleration for optimal rendering
  3. Background Tab Throttling: Reduces CPU usage when the browser is not visible
  4. JavaScript Optimizations: Applies performance best practices via JavaScript
  5. Rendering Optimizations: Configures the browser for optimal rendering performance
  6. CSS Optimizations: Applies performance-enhancing CSS properties
  7. Animation Frame Control: Limits animation frame rate for better performance

Compatibility

The Optimized Web Browser Plugin is compatible with all platforms supported by the standard WebBrowserWidget:

Some features may have platform-specific limitations. For best results, test your application on all target platforms.

Support

If you encounter any issues or have questions about the Optimized Web Browser Plugin, please contact the author: