WebGL

Browser-based deployment of your Digital Twin using WebGL

WebGL builds allow you to run your Digital Twin directly in web browsers without any installation. This enables easy sharing and access through URLs, making it ideal for demonstrations and client presentations.

Prerequisites

WebGL build needs to be done with IL2CPP, and Windows DLLs which are used in some interfaces can't be used (only way to communicate from a browser is Websocket).

Required Folder Deletions

For building WebGL, you need to delete the following folders if they are in your project:

• CADLink

• SpaceNavigator

• All Interfaces (besides MQTT and TwinCATHMI - these both are the only ones which are possible with WebGL)

• parts4cad

• RobotIK

When building to WebGL the rotation of the scene is done with the left mouse button and not the middle mouse button because web browsers have a different mouse button behavior.

Build Configuration

1. Set WebGL Platform

Set WebGL in Build Settings:

Setting WebGL in Build Settings

2. Scripting Define Symbols

Make sure that in Player Settings Scripting Define Symbols you have the same settings as for Windows (e.g., GAME4AUTOMATION and GAME4AUTOMATION_PROFESSIONAL).

3. Graphics API Configuration

Disable Auto Graphics API in Player Settings to use exclusively WebGL2 (recommended):

WebGL2 Graphics API configuration

4. Compression Settings

In Publishing Settings set Decompression Fallback - this prevents problems with some web servers.

Decompression Fallback setting

Build Process

WebGL builds take sometimes a very long time (up to 1 hour), specially for the first build.

As soon as the build is successful Unity starts automatically a temporary web server and opens your browser with your WebGL build.

For running the WebGL build you need to copy the result of the build (the content of your build folder) to a web server.

1. Open File > Build Settings

2. Select WebGL as the target platform

3. Configure Player Settings as described above

4. Click Build and choose your destination folder

5. Wait for the build to complete (this may take 30-60 minutes)

6. Unity will automatically start a local web server and open your browser

WebGL Template (realvirtual Professional)

Enhance your Unity WebGL projects with the realvirtual WebGL Template, offering a full-screen, responsive design for an improved user experience compared to the standard Unity WebGL Template.

Installation Steps

1. Locate Template Files: Find the template files in your Unity project at:

   Assets/realvirtual/Professional/WebGLTemplate/realvirtual

2. Copy Template Files: Copy these files.

3. Paste into WebGLTemplates: Paste the copied files into:

   Assets/WebGLTemplates/realvirtual

Setting the Template

1. Open Unity.

2. Go to Edit > Project Settings.

3. In Player settings, find Resolution and Presentation.

4. Choose the realvirtual template from the "Template" dropdown menu.

5. Save your changes.

realvirtual WebGL Template selection

Deployment

Web Server Requirements

To deploy your WebGL build:

1. Copy the entire build folder contents to your web server

2. Ensure your web server supports:

   • Proper MIME types for Unity files

   • Compression (gzip or Brotli)

   • HTTPS (recommended for full functionality)

Common Web Servers

• Apache: Add .htaccess with proper MIME types

• nginx: Configure mime.types for Unity file extensions

• IIS: Add MIME types in web.config

• Cloud platforms: AWS S3, Azure Static Web Apps, GitHub Pages

Interface Support

WebGL builds have limited interface support due to browser security restrictions:

Supported Interfaces:

• MQTT (Pro) - Websocket-based messaging

• TwinCAT HMI (Pro) - Websocket-based communication

Not Supported:

• OPC-UA

• S7 TCP/IP

• Modbus

• TwinCAT ADS

• Shared Memory

• Any Windows DLL-based interfaces

For full interface compatibility, use Windows builds.

Performance Considerations

• Build Time: First builds can take 30-60 minutes

• File Size: WebGL builds are typically larger than native builds

• Runtime Performance: 60-70% of native performance is typical

• Memory: Browser memory limitations apply

• Mobile: Limited support on mobile browsers

Browser Compatibility

Recommended browsers:

• Chrome/Edge (Chromium-based) - Best performance

• Firefox - Good compatibility

• Safari - Basic support (may have limitations)

Troubleshooting

Build Fails

• Ensure all incompatible folders are deleted

• Check that IL2CPP is selected as scripting backend

• Verify WebGL module is installed in Unity Hub

Build Runs Locally But Not on Server

• Check web server MIME type configuration

• Verify compression settings match build settings

• Ensure HTTPS is enabled if using certain features

Performance Issues

• Reduce scene complexity

• Use texture compression

• Optimize draw calls

• Consider quality settings for WebGL

See Also

• Windows Publishing - Full-featured native builds

• Supported Platforms - Platform compatibility matrix

• Improving Performance - Optimization techniques

© 2025 realvirtual GmbH https://realvirtual.io - All rights reserved.