Unity to WebGL

Convert the existing Unity application into a WebGL build that runs locally and can be embedded within a browser-based platform via an <iframe> using localhost.

---

🧾 Requirements

1. Build Target

• Switch the Unity build platform to WebGL
  (Unity Editor → File > Build Settings > WebGL > Switch Platform)

2. Deliverables

Please provide a self-contained WebGL build directory containing:

• index.html
• Build/ folder (.js, .wasm, .data)
• TemplateData/ (if generated)

The build should work locally via HTTP and be embeddable like:

<iframe src="http://localhost:8000/experience/index.html" width="100%" height="600" allowfullscreen></iframe>

✅ No need to host it — we’ll serve it using python -m http.server or similar.

---

🔍 WebGL Compatibility Checks

❌ Avoid These (Not Supported in WebGL)

Feature	Notes
System.IO.File, FileStream, etc.	Replace with browser-based storage (e.g. PlayerPrefs)
System.Threading, Task.Run, Thread	Use Coroutines instead
Native plugins (.dll, .so)	WebGL only supports JavaScript-based plugins (.jslib)
Device access (e.g. USB, Serial, COM ports)	Not supported
VideoPlayer with local paths	Must stream from HTTP(S) URL More information here
Forced fullscreen or screen resolution APIs	Avoid — breaks iframe sandboxing

---

✅ Safe Features (WebGL Compatible)

Feature	Notes
Unity UI, animations, shaders, scenes	Fully supported
UnityWebRequest	Works with correct CORS headers
Audio	Must be triggered by user interaction
JavaScript ↔ Unity	Use SendMessage, ExternalCall, or .jslib
PlayerPrefs	Stored in browser’s IndexedDB
Responsive scaling	Recommended if possible

---

⚙️ Build Settings Guidelines

• Compression Format: Gzip or Brotli (enable fallback if needed)
• Data Caching: Enabled
• Graphics API: WebGL 2 preferred (WebGL 1 fallback if needed)
• Decompression Fallback: Enabled
• Avoid hardcoded fullscreen or resolution
• Use default or minimal WebGL template

---

🧪 Local Testing Instructions

To test locally before delivery:

cd /path/to/WebGLBuild
python -m http.server 8000

Then:

• Open http://localhost:8000/index.html
• Or test in an iframe:

<iframe src="http://localhost:8000/index.html" width="100%" height="600" allowfullscreen></iframe>

✅ Check console for .wasm, .js, or .data errors
✅ Confirm it embeds cleanly
✅ No fullscreen prompts, browser navigation, or modal alerts

---

🧪 QA Requirements

• Test in latest Chrome, Edge, and Firefox
• Must work inside an iframe under localhost
• All assets should load via relative paths — no hardcoded URLs

✅ Optional Enhancements

• Responsive canvas sizing
• Fullscreen toggle button (user-triggered)
• JavaScript callback (e.g. window.parent.postMessage('unityReady'))

🎥 Unity WebGL VideoPlayer Limitation

Unity WebGL builds cannot play videos from local file paths (e.g., file:// or direct disk access) using the VideoPlayer component.

Why?

Browsers block local video file access due to security policies. Unity WebGL relies on the browser’s HTML5 <video> element, which:

• Requires an HTTP(S) server to serve video files
• Needs proper MIME types and streaming headers
• Cannot access file:// paths or relative OS-level file locations

✅ Workaround: Use a Local Web Server

You can run Unity WebGL offline with video as long as you serve the content over HTTP. For example:

Folder Structure

my-unity-build/
├── index.html
├── Build/
├── videos/
│   └── demo.mp4

Serve locally:

cd my-unity-build
python -m http.server 8000

Set video URL in Unity:

videoPlayer.url = "http://localhost:8000/videos/demo.mp4";

❌ Not Supported:

videoPlayer.url = Application.streamingAssetsPath + "/demo.mp4"; // ❌
videoPlayer.url = "file:///C:/Videos/demo.mp4";                 // ❌

✅ This setup works fully offline, but still requires launching a local web server.