Unity 6 WebGL & WebGPU Development

When to Use

Activate this skill when:

• Building Unity WebGL/WebGPU projects
• Integrating Unity with React (react-unity-webgl)
• Optimizing Unity Web builds (memory, size, performance)
• Debugging Unity WebGL issues
• Setting up JavaScript ↔ Unity communication
• Configuring server deployment for Unity builds
• Working with compute shaders or WebGPU features

Reference Documentation

Primary Reference: docs/unity-6-webgl-webgpu-reference.md

Read this file for comprehensive coverage of:

• WebGL vs WebGPU comparison
• Build settings & optimization
• Memory management (GC constraints, NativeArray patterns)
• JavaScript interop (JSLib, SendMessage, DllImport)
• React Unity WebGL integration
• Audio, input, networking limitations
• Browser compatibility
• Deployment configuration
• Common issues & solutions

Quick Reference

WebGPU Enable Steps

1. Edit → Project Settings → Player → Web
2. Other Settings → disable Auto Graphics API
3. Add WebGPU, drag to top
4. Keep WebGL2 as fallback

React → Unity Communication

const { sendMessage } = useUnityContext({
  /* config */
});
sendMessage('GameObjectName', 'MethodName', parameter);

Unity → React Communication

JSLib: Assets/Plugins/WebGL/Bridge.jslib

mergeInto(LibraryManager.library, {
  SendToReact: function (dataPtr) {
    var data = UTF8ToString(dataPtr);
    window.dispatchReactUnityEvent('EventName', data);
  },
});

C#:

[DllImport("__Internal")]
private static extern void SendToReact(string data);

#if UNITY_WEBGL && !UNITY_EDITOR
SendToReact(jsonData);
#endif

Memory Optimization

// Use NativeArray to bypass GC
using (var data = new NativeArray<byte>(size, Allocator.Temp)) {
    // Operations
} // Disposed immediately

// Never do this - quadratic memory growth
string result = "";
for (int i = 0; i < 10000; i++) {
    result += i.ToString(); // BAD - GC can't run mid-loop
}

Build Settings Checklist

• Brotli compression (HTTPS)
• Code stripping: High
• Strip Engine Code: enabled
• Exception support: None (release)
• Name Files As Hashes: enabled
• Data Caching: enabled

Server Headers (Brotli)

Content-Encoding: br
Content-Type: application/wasm  (for .wasm.br)

Key Limitations to Remember

Always:

• Require user interaction before audio
• Use coroutines (never blocking calls)
• Configure CORS headers for cross-origin requests
• Test on multiple browsers

Never:

• Use synchronous GPU readback (WebGPU)
• Use RWBuffer in compute shaders (use RWStructuredBuffer)
• Block on WWW/WebRequest downloads
• Use System.Net classes

File Locations

Common Issues Quick Fix

Related Skills

• theone-unity-standards - C# coding patterns
• frontend-development - React/TypeScript patterns
• backend-development - Server configuration