WebGL build in Unity - Mini Project: Build & Apply

Create a Simple Unity WebGL Build

📖 Scenario: You want to share a small 3D scene you made in Unity on a website. To do this, you need to create a WebGL build that can run in web browsers.

🎯 Goal: Build a Unity WebGL project step-by-step and prepare it for deployment on a website.

📋 What You'll Learn

Create a new Unity project with a simple 3D scene

Set the build target to WebGL

Configure WebGL build settings

Build the project to generate WebGL files

💡 Why This Matters

🌍 Real World

WebGL builds let you share interactive 3D content on websites without requiring users to install software.

💼 Career

Many game studios and interactive media companies use Unity WebGL builds to deliver browser-based experiences.

1

Create a new Unity project with a simple 3D scene

Open Unity Hub and create a new 3D project named WebGLDemo. In the new project, add a Cube GameObject to the scene and save the scene as MainScene.

Unity

# Create a new 3D project named WebGLDemo
# Add a Cube GameObject to the scene
# Save the scene as MainScene
# Your code here

Hint

Use Unity Hub to create the project. Use the Hierarchy window to add a Cube. Use File > Save As to save the scene.

2

Set the build target to WebGL

In Unity Editor, open File > Build Settings. Select WebGL as the platform and click Switch Platform to set WebGL as the build target.

Unity

// This step is done inside Unity Editor:
// Open File > Build Settings
// Select WebGL platform
// Click Switch Platform
# Your code here

Hint

Build Settings window lets you choose the platform. Switching to WebGL prepares Unity to build for browsers.

3

Configure WebGL build settings

In the Build Settings window, add the MainScene to the Scenes In Build list by clicking Add Open Scenes. Then click Player Settings, go to the Resolution and Presentation section, and set Default Canvas Width to 960 and Default Canvas Height to 540.

Unity

// In Build Settings, add MainScene to Scenes In Build
// Open Player Settings
// Set Default Canvas Width to 960
// Set Default Canvas Height to 540
# Your code here

Hint

Adding the scene ensures it is included in the build. Adjusting canvas size controls the WebGL display size.

4

Build the project to generate WebGL files

In the Build Settings window, click Build. Choose a folder named WebGLBuild inside your project directory to save the build files. Wait for Unity to finish building the WebGL project.

Unity

// In Build Settings, click Build
// Select or create folder named WebGLBuild
// Wait for build to complete
# Your code here

Hint

The Build button starts the WebGL build process. Choose a clear folder name to keep files organized.

Practice

1. What is the main purpose of creating a WebGL build in Unity?

easy

A. To export games as console packages

B. To create mobile apps for Android and iOS

C. To run Unity games directly in web browsers without installation

D. To build desktop applications for Windows and Mac

Solution

1. Step 1: Understand WebGL build purpose

   WebGL build allows Unity games to run inside web browsers without needing users to install anything.

2. Step 2: Compare with other build targets

   Other build targets like Android or desktop require installation, unlike WebGL.

3. Final Answer:

   To run Unity games directly in web browsers without installation -> Option C

4. Quick Check:

   WebGL build = run in browser [OK]

Hint: WebGL = play games in browser, no install needed [OK]

Common Mistakes:

• Confusing WebGL with mobile or desktop builds
• Thinking WebGL requires app installation
• Assuming WebGL builds are for consoles

2. Which Unity menu option do you use to switch your project to WebGL build target?

easy

A. Window > Package Manager

B. Edit > Preferences

C. File > New Project

D. File > Build Settings

Solution

1. Step 1: Locate build target settings

   Unity uses the Build Settings window to select and switch build targets like WebGL.

2. Step 2: Confirm correct menu path

   The Build Settings window is accessed via File > Build Settings, not other menus.

3. Final Answer:

   File > Build Settings -> Option D

4. Quick Check:

   Switch build target = Build Settings [OK]

Hint: Build Settings is where you pick WebGL target [OK]

Common Mistakes:

• Choosing Edit > Preferences which is for editor settings
• Selecting Window > Package Manager which manages packages
• Confusing File > New Project with build settings

3. After building a Unity WebGL project, which file do you open in a browser to start the game?

medium

A. game.exe

B. index.html

C. main.unity

D. build.json

Solution

1. Step 1: Identify WebGL build output files

   Unity WebGL build creates an index.html file to launch the game in browsers.

2. Step 2: Understand file roles

   Other files like .exe or .unity are not used for WebGL browser launch.

3. Final Answer:

   index.html -> Option B

4. Quick Check:

   Open index.html to run WebGL game [OK]

Hint: Open index.html to play WebGL game in browser [OK]

Common Mistakes:

• Trying to open .exe files which are for desktop
• Confusing build.json as launch file
• Attempting to open .unity files directly

4. You built your Unity project for WebGL but the game does not load in the browser. What is a common cause?

medium

A. Not running a local or remote web server to serve the files

B. Using the wrong Unity version for WebGL

C. Forgetting to save the scene before building

D. Not installing the WebGL module in Unity Hub

Solution

1. Step 1: Understand WebGL file loading requirements

   WebGL builds require serving files via a web server; opening index.html directly from file system often fails due to browser security.

2. Step 2: Check other options

   While Unity version and modules matter, the most common cause is missing a web server.

3. Final Answer:

   Not running a local or remote web server to serve the files -> Option A

4. Quick Check:

   WebGL needs web server to load files [OK]

Hint: Always use a web server to test WebGL builds [OK]

Common Mistakes:

• Opening index.html directly without server
• Ignoring Unity Hub WebGL module installation
• Assuming saving scene fixes loading issues

5. You want to optimize your Unity WebGL build to reduce loading time. Which approach helps achieve this?

hard

A. Enable Compression Format (e.g., gzip or Brotli) in Player Settings

B. Increase texture resolution for better quality

C. Add more scenes to the build to preload content

D. Disable WebGL memory size limit in Player Settings

Solution

1. Step 1: Identify optimization methods for WebGL loading

   Compression formats like gzip or Brotli reduce file sizes, speeding up downloads and load times.

2. Step 2: Evaluate other options

   Increasing texture resolution or adding more scenes increases load size; disabling memory limits can cause crashes.

3. Final Answer:

   Enable Compression Format (e.g., gzip or Brotli) in Player Settings -> Option A

4. Quick Check:

   Compression reduces WebGL load time [OK]

Hint: Use compression to shrink WebGL build files [OK]

Common Mistakes:

• Increasing texture size which slows loading
• Adding many scenes unnecessarily
• Disabling memory limits causing instability