Hi, i’m pretty new with playcanvas and webgl, I’m an unreal engine developer but right now I’m testing playcanvas.
I’ve made this project: https://playcanvas.com/project/676258/overview/the-charlotte
I now it’s not the best optimization yet, but we’ve made lot of work and we are currently testing in different devices.
On android it works pretty fluently, only a little bit of long load times. 1-2 minutes the longest.
On iphone it’s a different topic, in smartphones lowers than iphone x there are some problems:
1- Pretty long loading times, at 8 minutes the longest.
2- Browsers crash and reload several times
3- Some geometry doesn’t load ( furniture in the terrace )
Can someone help me checking the scene and the play profiler? As I said before I’m pretty new with this and can’t found what is the problem, Could it be safari or ios compatibility with webgl? Sounds weird to me that lower android devices run it perfectly but an Iphone 8 doesn’t.
I think the start of your problems is the large size of your assets, totaling around ~250MB of files that get downloaded before your app launches. This is going to take a long time to load, especially in slower connections.
This isn’t an issue specific to Playcanvas but inherent in how websites work. You should consider using the preload flag available on assets, that will avoid loading those assets on load time, making your initial boot time shorter. The assets will automatically start to get downloaded on the background as they are requested by your app.
After that, models and textures have to be uploaded to the GPU (video memory) to get rendered but on mobile and especially older devices that memory can be limited. If your assets require more memory than the amount available, then the browser will crash.
You can check the profiler on how much memory your app requires, and adjust accordingly the quality/size of your assets. If you are assembling a complex scene you may have to dig deeper on this and write a resource manager that handles loading/unloading of assets depending if they are required by the current camera view or now.
Have you checked the following manual pages? They provide a lot of optimizations tips and tricks and strategies to help your app perform better:
All of this informations is very usefull to me, I’m used to work with pc and big graphics cards so this level of optimizations is kinda new.
The will look for the preload that you metions and test it again.
I’ve seen the manual for optimization, I have batching groups for vegetations for example
I think the problems came with the building geometry and the textures. I’ve optimized quiet a lot the geometry ( it was 11 millons verts and now its 1 millon ) but can’t optimize a lot more because we want to see the details of the building, windows, ventilations, etc. so is a limitation for that.
The other problem I think is with textures. We use all baked textures with light information diffuse+lightmap, and every single mesh has a different material 'cause the light work different in each other. We have made bigs groups with differents geometry for unwrapeing but still having more than 200 materials.
Do you think is better to watch over the verts and polycount or the textures ? I’m right now testing the profiler hiding some geometry and textures to see what has more impact.
You said that 250mb is a lot, do you have any idea of how much would be a good weight ?
That’s the filesize of the assets, when they are uploaded to the GPU they get decompressed and especially for textures their size can skyrocket (you may use 1GB or more of video memory). You should definitely take a look at using compressed textures (at the end):
To calculate your final usage in game, check the last list on the profiler when running your scene:
That is the amount of free video memory (VRAM) your device should have to able to run the app, without crashing.
Now to your question, what’s the ideal size? It fully depends on the device:
Desktop computers usually have from 1.5GB to 8GB of VRAM.
On mobile the situation is more complex, usually the device doesn’t have dedicated video memory but it allocates dynamically part of the RAM.
That is completely up to the OS, it’s not easy to estimate how much is enough, but I can say 100-150MB can be a limit on older devices (iPhone 5-6s). If you allocate more than that, even though the system may have more free RAM the OS usually will kill your tab.
Now, the above is only the requirement of being able to run the app without crashing the browser. Performance is a different manner, there you have to balance:
Polycount (1 million polygons maybe too much for mobile devices).
Draw calls (100-150 can be a nice max limit for mobile)
Materials/shaders used, too many complex materials on screen can slow down your FPS.
I’m really thanksfull for the time you dedicated to your answers.
That’s a lot of usefull information that I’m taking to optimize my project.
I was thinking about a way to minimize the preload assets. As you have seen my scene is only a building that you can pivot and watch around so almost every asset must be load at the same time, I was thinking that could be a good strategy to make a Main menu at the start of the game with some kind of information, name of project, actions etc. and it will work as an information menu as an excuse to keep loading the assets meanwhile the project is already running, so the game will load with some preload asset that are not showing 'cause the Main menu is the first thing to show up and the rest of the assets keep loading in the background ? This will not be an optimization but could be a good way to reduce loading times, not really reducing it but starting it earlier, don’t you think?
WebGL is basically OpenGL ES, with sandboxing behind browsers, for security or even getting emulated on different GAPI.
So best way to treat WebGL (not PlayCanvas related), as mobile platform. Especially if you run WebGL on mobile, then expect best practices of mobile graphics optimisation to apply here too.
As mentioned by @Leonidas, you have too complex scene for mobile devices.
Number of draw calls on mobile, best to keep as low as possible, like 40-60.
If you are making app for public, they will expect it to load as usual website for them. So if your app is loading too long because of too many requests and too large files - users will simple churn.
VRAM - keep it low, optimise assets, textures, make atlases, compress, use multiple channels.
Thank you very much for the answered, I’m taking all of this into account!
Changing the preload and lowering the drawcalls have make the load quiet faster, still huge assets, still optimizing it.
Gonna try with a loading screen with instruction or a menu in the beggining of the project to keep the rest of the assets loading in the background meanwhile the user is already into the game.
I will keep you inform if i got nice results hehehe
