We are building out a clone of the BMWi experience. We deliver exclusively to mobile. Our problem is that no matter what we do to reduce poly counts on our automobile models, it always takes more than 20s to load and display the model. The original model had almost 2,000,000 polys and was over 200MB. I passed it through Decimator and got the size down to about 30MB and 500k polys ( still alot of poly for some reason ). Hooray! it should load faster now right? Wrong, and the model now looks terrible as well. So with profiler off, debugger off, Device pixel ratio off, even tried unsetting a bunch of the meshes⌠still takes about 20s and even when preloading there is sometimes a 2-3s lag between the model render and the scripts being active.
Does anyone have any wisdom for what techniques or details I need to take a more critical look at to improve load times in general and specifically for Mobile? Probably obvious that a mobile experience that takes 20s is equivalent to a failing mobile experience. I saw another PC user had managed to create a flawless clone with no more than a 10s load time ( on Iphone 6+ ) for the complete and ready experience. Thats what we want!
You have not shared a link to troubling project, so it is impossible to say exactly what is your problems there.
Using Dev Tools to assess most of performance issues including: Profiling and Network tabs.
Guidelines are simple:
Keep poly count at minimum.
Size of preload download should be as low as possible, we talking here just few Mbs, if initial screen shown after downloading 2-3Mb, that is good, bellow 1Mb is holy-grail.
Number of draw calls on mobile is very critical and should be as low as possible, for car experience canât imagine it should be more than 20-30.
Texture sizes and compression, keep them small, combine in channels, use tiling, compress appropriately.
Number and complexity of materials should be kept at minimum, shader compilation - is very costly on any platforms, including mobile.
Let me know if it has any troubles for you as far as admin rights or privacy. Iâll start comparing the points you mentioned. We bought the model form a vendor so its likely its just a very bloated design. Im going to ask the vendor to provide a mobile optimized version. If I still see load issues after installing that and addressing the inspections you outlined, Iâll reach out again.
In terms of preload, The time on load was about the same when I unchecked the modelâs preload option but still had a bit of a delay before the model had rendered as a result so it still wasnt ready even though the scene had loaded.
So very quick look with Inspector in Network tab, your model is simply not viable for web platform as it is way too big - 42.9Mb, this is simply not going to work in the web.
In comparison, BMW i8 models are 3.5Mb in total, and they look good. So there is definitely loads can be done to optimize your geometry.
As non-compressed (gzip), model is 161Mb JSON, which is too much for even desktop browser to be able to parse without freezing the CPU on it for some seconds.
Other thing, your model has 367 Mesh Instances, this is way too much for mobile.
Real-time rendering requires very optimized geometry, and cannot simply consume CG / CAD models, as they are not optimized at all.
Awesome! I intuitively had the same thoughts but Im not very experienced with the modeling side to extrapolate my mobile knowledge to 3D.
Iâm going to get the optimized version of the model and see if that solves it. Very much appreciate you providing data I can use to estimate better in the future.
Im suspecting that none of these qualities has anything to do with the load times. Right now I have a pair of shoes in there that I decimated in Blender and it takes over a minute to load the model on desktop. The model is 4MB but the JSON conversion bloats it to 6. The poly and vert count are not ridiculous for desktop. I disabled all shadow settings and still the model takes forever to load.
There has to be some fundamental reason this isnt working. Where in the documentation can I find the suggested ranges for the properties listed in the Meta panel of the model? I would like to try to create a model purposefully to hit those targets regardless of the appearance and test that we can load any imported model in under 10s.
This is the current project, just a simple pair of shoes⌠I dont understand why all of our models worked fine in Goo and none of them work fine in Playcanvas. This takes over a minute to load and is smaller and less complicated than the car model that only took 25s. I get what you mean about the meshes and and file size but at this point there are as many meshes as needed to make a realistic pair of shoes, file size is small and downloads quickly, there are no fancy tricks being used, only 23 draw calls. I cant figure out what the issue is.
Interesting, next thing youâll be telling me about a magical box that can make loaves of bread crispy and browned.
Please examine this build and this project and notice that they show a discrepancy between the assets obviously chosen for a build and the resulting build:
This seems like an unnecessary amount of bloat and also handicaps the creative process. Any plans to improve this?
I understand that we could approach the problem by being sloppy in the drafting process leading up to the final draft where we create a distinct version with all the cruft removed but thats largely counter to how digital artists work, it would be much nicer if the publish were smart enough to cull assets that cant possibly be needed for a build.
Thanks again, I think everyone has a moment or two where their expectation leaves them leaping before checking if the power cord is plugged in first.
Cleaning a project - is a developers responsibility. Tools provide all UI to do so.
Assets that are marked âpreloadâ will load regardless of being in hierarchy as developer might want to add it dynamically later on.
Making âpreloadâ conditional will restrict on what can and cannot be done. Currently with very explicit control over loading flow developer has full control.
Im envisioning the same graphical gridlock in my game and possibly other projects devised in a make once and run on any platform like playcanvas⌠SO TO MY QUESTION⌠Is there any way to either preload all assets and gracefully degrade them according to the system specs⌠OR do we call upon the initialization of the program to check graphical hardware to determine the level of detail, largeness of the model detail, amount of lights that would result in improved framerate/graphical preeetyness and fetch those assets⌠Thanx!
Im making progress in my case. I am finding that although large models are difficult to load on mobile, many smaller models load fine. We have a hi detailed Maserati ( over 200 meshes ), and what Im doing which is proving successful so far, is to slice that model up into modules using Blender by taking advantage of the âSelection Onlyâ option in the FBX exporter and also the âScaleâ feature which seems to improve the file size as well. This allowed me to create 10 different, low file size, low mesh count models which I assembled back into the vehicle in Playcanvas.
As Max suggested, I used Chrome Dev tools to look at how the PC was loading the models as I optimized. After a little trial and error I was able to get good loading times without having to do any dissolving or decimating. The difference being that with several smaller models, the browser can load them in parallel where it chokes on one massive model. This solution would create new challenges in the right circumstances, but for our needs its the solution.
This probably worth own topic. But so far Iâve figured that âload minimum, and rest if neededâ approach works best in most cases.
So you would want to design your content so you can have low-res textures and some minimalistic stuff. Regarding lights and stuff that will make shaders much heavier that would be probably initial load, or even perhaps menu screen with allowing user to select quality he desires.
Loading all high-res stuff straight and then degrading will not improve loading times for low end platforms. Optimization in web should always be about two things:
Loading/waiting times (smaller - better)
Frame rate (stick to target 60 or 30)
That is better approach indeed. This is how BMW i8 demo was made too.
But I still will stress that 200 individual (not combined) meshes and too many triangles is still far from mobile friendly and will probably lead to bottleneck with GPU on low/mid mobile devices.
