Performance Issues in Unity WebGL Build: Seeking Optimization Advice

Unity Engine
, , , ,
1

Hello everyone,

we’ve been developing a complex application in Unity that involves extensive rendering and numerous objects. On the PC build, the application performs well with smooth rendering and good response times. However, when we export the project to Unity WebGL and run it in a browser, we experience significant performance issues including:

The graphics quality appears lower, and the application runs at a noticeably slower frame rate. There are frequent delays in response times, which affects the user experience and the application sometimes crashes, especially when handling complex scenes or during semi-heavy processing tasks.

Most of the processing in our application are client-side, which I suspect may be contributing to these issues. we am looking for advice or best practices to optimize performance specifically for WebGL builds.

Are there specific settings or techniques to improve rendering performance and quality in WebGL?
What are common causes of crashes in WebGL builds, and how can they be mitigated?
Are there alternative methods or technologies that can help achieve smoother performance and better stability in a browser environment?

Any insights, resources, or experiences you can share would be greatly appreciated. Thank you in advance for your help!

2

Just to get this straight: was your expectation that WebGL will run the project at the same quality and framerate, or only slightly below that?

If so, some head-straightsetting is in order. :wink:

WebGL rendering is simply put on the same level as mobile tech from 10 years ago. WebGL v2 is effectively OpenGL ES 3.0 from a rendering features perspective. If you’re not using at least Unity 2022 the renderer will even default to WebGL v1 which is effectively OpenGL ES 2.0 so you can expect the fidelity of the first iPhone or iPhone 3G.

The graphics API has multiple layers which makes it run far less efficiently than a native app (WebGPU aims to resolve this but won’t be production ready for a couple more years).

And you only get singlethreading on WebGL for the time being. C++ native multithreading is available as an experimental package though not recommended at this point.

Depends on what you do but yes, if you instantiate objects with MeshColliders on them, I would not be surprised if this dips the framerate quite a bit for a short period. MeshColliders are pretty expensive to initialize on the Web, probably due to singlethreading. Try enabling baking of colliders in Player Settings / Other / Optimization (pretty close to the bottom).

Or approximate MeshColliders with primitive colliders. Primarily the MeshColliders get created and never thought of because meshes default to adding these - and you rarely see them being a problem on desktop systems because they’re fast enough for most uses. Not so on the Web or mobile.

Most likely memory related. Monitor memory usage with Memory Profiler and the free asset Graphy. The Firefox debugging tools are also quite helpful.

You have a total limit of 2GB for the entire browser tab which shares the memory with HTML, Javascript and so on - not just your app. It’s best to stay quite a bit below that limit. For mobile the limit is typically less than 500 MB on iOS and a bit more on Android.

If a crash occurs in “heavy processing” then check that very process. It may be generating too much temporary garbage, possibly upwards of hundreds of megabytes which might be avoidable either by forcing a frequent GC.Collect() run or by optimizing the code to produce less garbage (ie excessive string concat).

To cut down on memory most effectively and most easily you’d have to reduce the texture size. In Build setting you can force a max size, you can also set the mipmap limit (not sure, i think quality or player settings) to force the web build to only include mip levels 1 or lower.

That said: Profile! :wink:
Use Unity and Firefox Profilers.

4 Likes
3

From my experience things like transparency especially will reduce framerates. If you need some sort of effect, use additive blending, not alpha transparency.

There’s also a pretty nasty bug that causes a single frame of lag any time you press the screen, and various input methods lag behind regardless of high framerates.

The web build is getting there and improving, but has a some major issues to overcome.

4

Looks like you got basically the same responses here as you did on StackOverflow. Webgl can and never will give you desktop level stuff, however, you can use the profiler and so on to determine what specifically is not performing - you mentioned quality - well those are down to the settings you pick, but as you dont get full gpu options, ultra on webgl is gonna suck considerably at slower fps, than a desktop app would

5

Just to expand upon this a little bit and drive home the age of WebGL 2.0: OpenGL ES 3.0 was released August 2008 which is one month before the first release of Android in September 2008.

Everything running in a browser is sandboxed through abstraction and security layers including the graphics APIs. Your PC build runs natively with almost nothing standing in the way of your performance. WebGPU will help with performance once it’s fully available and supported but it’s still sandboxed at the end of the day so you will always have performance problems like this.

6

The Unity Documentation now has this page with a list of recommendations to optimize the performance of Web builds which might help you: