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

Need a 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

Need a 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

Need a 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

Need a hint?

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