Hi,
I’m working on my first WebGL project using Unity 6. Since the application will eventually include large 3D models and will run on different devices, both mobile and desktop, I’m wondering what build settings I should configure to ensure it runs smoothly on both platforms. And what is the best lighting approach to have the model looking good on the browser? I’m using URP (Universal Render Pipeline) for rendering textures.
Read these pages end to end. The hour it takes to go through all this will spare you a lot of trouble and a lot of wasted hours.
Then do more research on WebGL best practices and common issues to save yourself even more trouble. This is my WebGL development summary.
What is “large”? By volume?
Please consider that WebGL technology is at least a decade behind the next most limited platforms, which is mobile. Now consider that WebGL on a mobile device throws you back another decade. So you’re essentially making an app as if it were to run on a mid-2000’s computer.
For instance, on iOS the application needs to load within mere seconds (have an empty scene up front THEN load content) and should not consume more than 500 MiB at least in a “reduced” version on iOS devices with merely 2-3 GiB of memory. Otherwise it will keep crashing or not even start. Be sure to test on iOS early and frequently!
Memory is of utmost importance. Add Graphy to your scene so you can always keep an eye on memory usage and fps.
For mobile, the most important setting is to allocate as much memory up front as your app will likely need to avoid runtime allocations which commonly fail, and thus crash your app. So you may want to set your memory target to 400 MiB and completely turn off or minimize runtime memory allocations.
Note that the model isn’t going to add much to memory. It’s the textures and the texture settings that will. However, you will need to use different texture compression settings because what works on mobile browsers doesn’t work on desktop browsers. Therefore you may have to make two builds or load from two different sets of Addressables.
There’s so many of them.
Definitely use the URP “mobile” renderer asset and make that the default for the editor too (see quality and graphics settings). This is to make sure you get to see the end result in the editor. Ideally you will want to tune everything way down to a level that’s still acceptable, and leave a few options unchecked that you may want to turn back on before release if it turns out that there’s enough headroom. Much better than being forced to do the opposite.
Don’t use any post-processing, respectively leave that only to desktop browsers. But consider that users may play web games on a cheap, used $500 notebook with integrated graphics.
Make sure Player Settings have managed stripping level set to High. Remove any “Built-In” package that you won’t use, such as Cloth, Vehicles, Physics 2D, Terrain, and others - as far as dependencies allow you to. There’s threads about this here and here.
That said, the smoothest way to develop WebGL applications is in fact to consider you will be spending 2-3 times as much time on anything because you will need to make frequent builds and test them frequently on iOS specifically as Apple devices will give you the most headaches. If you don’t have access to at least 2, better 3 iOS devices during development you’re going to develop in the dark and only run into issues when you have little means of figuring out what the hell is going on. Don’t move yourself in that position by making practically daily builds and iOS device tests!