⚙️Limitations and Performance

This section covers the limitations for webgl on mobile and desktop. It will also include a short description on how to test the performance.

There are a few differences between mobile and desktop applications that we need to cover. The setup of the scene and the material and texture used will be almost the same since we are targeting a small build size to get the best texture quality. The main issue we have on mobile devices is the "out of memory" error we are getting on iOS devices.

This is happening because IOS has a limitation on "cache memory usage" and is stopping the application, which ends up crashing the experience.

• KNOW ISSUE: IOS DEVICES CAN EXPERIENCE GLITCHES OVER THE SCREEN WHICH MAKES IT HARD TO SEE THE SCEEN CLEARLY!

• SOLUTION: TO FIX THE GLICHES YOU NEED TO CHANGE THE DEPTH PRIMING MODE INSIDE UNIVERSAL RENDERER DATA FROM AUTO TO DISABLED.

General limitations about the target boundaries

• 150.000 vertices per scene

• Use as less differet shader as possible

• Texture atlas for assets to reduce the size of the project

• Combine Textures inside RGB channel (Ambient Occlusion, Roughness, Metalness)

• Max texture size depending of the target device and the build size to not get the "out of memory" error:

  • Mobile 512 x 512 or 256 x 256 pixel

  • Desktop 2048 x 2048

  (textures can be reduced already in the import settings if possible)

• Avoid transparent material overlapping on each other as possible

• No tesselation

• No overlapping geometry

• LODs, if needed, need to be done in a 3D program (no native LODs inside Unity)

• Mesh colliders need to be assinged inside unity

• Max target build size:

  • Mobile 90 mb

  • Desktop 250 mb

Lighting

Lighting in WebGL is a very specific topic because we are only able to support three dynamic lights per scene, which are heavy on performance. To avoid this, we only use baked lights. This needs to be changed inside the inspector.

• Meshes that need to be affected by the light bake need to be set to static inside the inspector.

• To get dynamic object effects from the light bake, you need to use reflection probes in the scene. To get more information on this topic, you can enter this link:

• To enable reflection inside the scene, you need to create a reflection probe. To see how this affects the scene, you can set it to reflect inside the inspector and change the shape to match the scene. Real-time reflectors are very expensive, which means that to use them, they need to be set back to bake inside the inspector before the lightbake will be started.

Profiling Tools

• To get the CPU and GPU usage, you can use the Unity build-in profiler. It shows exactly in which areas of the scene you need to focus. To get more information about this topic, you can read more at the following link:

Unity - Manual: Profiler overview

• To get a quick look at the stats, you can also enable the stats window inside the game window. Here you have a few informations like drawcalls, fps, and the tri-count per frame from your current frame.