Manual: Build your WebGL application (2024)

  • Platform development
  • WebGL
  • Build and distribute a WebGL application
  • Build your WebGL application

To create a build for WebGL, go to File > Build Settings from Unity’s main menu. In the Platform list, select WebGL and then click Switch Platform.

For Build Settings, refer to WebGL Build Settings.

When you have configured the Build Settings, choose from one the following options:

  • Build: Builds your application into a Player.
  • Build and Run: Builds your application in a Player, and opens that Player on your target platform.
Manual: Build your WebGL application (1)

Build folder structure

The Build folder has the following files, where [ExampleBuild] represents the name of the target build folder.

File nameContains
[ExampleBuild].loader.jsThe JavaScript code that the web page needs to load the Unity content.
[ExampleBuild].framework.jsJavaScript runtime and plugins.
[ExampleBuild].wasmWebAssembly binary.
[ExampleBuild].memA binary image to initialize the heap memory for your Player. Unity generates this file for multi-threaded WebAssembly builds only.
[ExampleBuild].dataAsset data and ScenesA Scene contains the environments and menus of your game. Think of each unique Scene file as a unique level. In each Scene, you place your environments, obstacles, and decorations, essentially designing and building your game in pieces. More info
See in Glossary
.
[ExampleBuild].symbols.jsonDebug symbol names necessary to demangle an error stack trace. This file is only generated for Release builds when you enable the Debug Symbols option (File > Build Settings > Player Settings.)
[ExampleBuild].jpgA background image, which displays while the build is loading. This file is only generated when a Background Image is available in the Player Settings (File > Build Settings > Player Settings > Splash Image). For more information, see Splash Screen.

If you enable a CompressionA method of storing data that reduces the amount of storage space it requires. See Texture Compression, Animation Compression, Audio Compression, Build Compression.
See in Glossary
Method
for your build, Unity identifies the extension that corresponds with the compression method and adds this extension to the names of the files inside the Build sub folder. If you enable Decompression Fallback, Unity appends the extension .unityweb to the build file names. Otherwise, Unity appends the extension .gz for the Gzip compression method, or .br for the Brotli compression method.For more information, refer to Compressed builds and server configuration.

If you enable Name Files As Hashes in the Player SettingsSettings that let you set various player-specific options for the final game built by Unity. More info
See in Glossary
, Unity uses the hash of the file content instead of the default file name. This applies to each file in the build folder. This option allows you to upload updated versions of the game builds into the same folder on the server, and only upload the files which have changed between build iterations.

Note: Opening a Player directly from the file system might not work in some browsers. This is due to security restrictions applied to local file URLs.

Enable exceptions

Use Enable Exceptions to specify how unexpected code behavior (also known as errors) is handled at runtime. To access Enable Exceptions, go to the Publishing Settings section in WebGLA JavaScript API that renders 2D and 3D graphics in a web browser. The Unity WebGL build option allows Unity to publish content as JavaScript programs which use HTML5 technologies and the WebGL rendering API to run Unity content in a web browser. More info
See in Glossary
Player Settings.

It has the following options:

  • None: Select this if you don’t need any exception support. This gives the best performance and smallest builds. With this option, any exception thrown causes your content to stop with an error in that setting.
  • Explicitly Thrown Exceptions Only (default): Select this to capture exceptions which are explicitly specified from a throw statement in your scriptsA piece of code that allows you to create your own Components, trigger game events, modify Component properties over time and respond to user input in any way you like. More info
    See in Glossary
    and to also ensure finally blocks are called. Note that selecting this option makes the generated JavaScript code from your scripts longer and slower; This might only be an issue if scripts are the main bottleneck in your project.
  • Full Without Stacktrace: Select this option to capture: * Exceptions which are explicitly specified from throw statements in your scripts (the same as in the Explicitly Thrown Exceptions Only option)
    • Null References
    • Out of Bounds Array accesses
  • Full With Stacktrace: This option is similar to the option above but it also captures Stack traces. Unity generates these exceptions by embedding checks for them in the code, so this option decreases performance and increases browser memory usage. Only use this for debugging, and always test in a 64-bit browser.

Additional resources

  • Web Build Settings
  • Build and distribute a Web application
  • Deploy a Web application

WebGL Build Settings

Optimize your WebGL build

Copyright © 2024 Unity Technologies. Publication Date: 2024-05-30.

TutorialsCommunity AnswersKnowledge BaseForumsAsset StoreTerms of useLegalPrivacy PolicyCookiesDo Not Sell or Share My Personal Information

Your Privacy Choices (Cookie Settings)

Manual: Build your WebGL application (2024)

FAQs

How do I create a WebGL build? ›

To create a build for WebGL, go to File > Build Settings from Unity's main menu. In the Platform list, select WebGL and then click Switch Platform. For Build Settings, refer to WebGL Build Settings.

How do I publish a WebGL project? ›

Using WebGL Publisher

Click on Publish > WebGL Project to open the WebGL Publisher, and follow the on-screen instructions in order to build and publish your game. Please note that if you are not logged in with your Unity account, you will be instructed to do so.

How to run WebGL locally? ›

The best way to view the WebGL Player locally is to use Unity's Build And Run option (menu: File > Build And Run). Unity uses a local web server to host your build, and opens it from a localhost URL. Alternatively, you can use a custom local web server with properly configured response headers.

What coding language is WebGL? ›

WebGL programs consist of control code written in JavaScript, and shader code written in OpenGL ES Shading Language (GLSL ES), a language similar to C or C++. WebGL code is executed on a computer's GPU.

What is WebGL built on? ›

WebGL is a graphics application programming interface (API) created for use in web applications. It is based off the open graphics language (OpenGL) embedded standard (ES). WebGL is used by developers to provide a platform-independent means of creating interactive graphical applications on the web.

How do I become a WebGL developer? ›

You start development with a simple working program and use a simple cycle of implement/test, implement/test, implement/test, ... until you reach your goal. Rarely, if ever, should you program a complex WebGL program “from scratch.” Always start with a working program and add complexity slowly.

How do I make my browser support WebGL? ›

Android
  1. Go to this URL: About:debug.
  2. Go to Options > Settings > Debug. ◊ TIP: What do these Settings do.
  3. Select, Enable OpenGL Rendering.

Is WebGL still supported? ›

WebGL 1.0 is supported in the stable releases of most major browsers on both desktop and mobile platforms. Chrome, Firefox, Internet Explorer, Opera, and Safari are all known to have good WebGL support on both desktop and mobile browsers.

Is WebGL free to use? ›

WebGL™ is a cross-platform, royalty-free open web standard for a low-level 3D graphics API based on OpenGL ES, exposed to ECMAScript via the HTML5 Canvas element.

Does WebGL use CPU? ›

WebGL's inner workings involve a collaborative effort between the CPU, GPU, and shaders. The CPU handles high-level JavaScript code and data preparation, while the GPU specializes in parallel processing to render complex graphics.

Does Chrome run WebGL? ›

WebGL should be enabled in recent versions of Chrome. If you aren't able to run WebGL in Chrome, make sure that you update to the most recent version of Chrome. If you are using the most recent version of Chrome and can't access WebGL content, make sure that hardware acceleration is enabled in your Chrome settings.

How do I share a WebGL build? ›

As shown below, once the package is installed into your project, you will find Share WebGL Game menu item from the Window menu. Click the Share WebGL Game menu item to initiate the upload and share process. The following screens will appear acording to your login and build status.

How to initialize WebGL? ›

Go to about:config in your address bar. Search for webgl. force-enabled and make sure this preference is set to true. If it is currently set to false, click the toggle icon on the far right to change the value to true.

References

Top Articles
Latest Posts
Article information

Author: Ray Christiansen

Last Updated:

Views: 6367

Rating: 4.9 / 5 (49 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Ray Christiansen

Birthday: 1998-05-04

Address: Apt. 814 34339 Sauer Islands, Hirtheville, GA 02446-8771

Phone: +337636892828

Job: Lead Hospitality Designer

Hobby: Urban exploration, Tai chi, Lockpicking, Fashion, Gunsmithing, Pottery, Geocaching

Introduction: My name is Ray Christiansen, I am a fair, good, cute, gentle, vast, glamorous, excited person who loves writing and wants to share my knowledge and understanding with you.