How to reduce loading time

Help & Support
1

Hi Team,

I have created a virtual showroom project for a set of 3-wheeler vehicles. Users will click on the vehicle image to load the 3D model of the vehicle to have a 360 degree interactive experience of the vehicle. Unfortunately, when the 3D model is launched it takes longer time to load. Can you help out on how to improve the loading time?

I am using glb files in this project. My project size is around 80 MB. There are 52 glb files (total size 40 MB and the biggest files is 8.7 MB), 137 png files (total size 6 MB), 56 jpg files (total size 12 MB) and remaining js and supporting files generated by PlayCanvas.

Any help would be highly appreciated.

Thanks in advance.

2

Here are some easy things you can do to reduce the download size:

  • Use Draco compression for all your .glb files. The PlayCanvas team recently added this to the editor. Check this tutorial. Draco can reduce the .glb size by 50-80% depending on the mesh. Keep in mind Draco is lossy.

  • Try reducing the dimensions of your png files. If they’re 2048x2048, can you get away with 1024x1024?

  • Run your png files through a lossless png compressor like Tinypng. This can reduce the png sizes by 60-80% with no drop in quality.

Also check the load time optimization page in the PlayCanvas user manual. There is a ton of extra detail there.

3 Likes
3

There’s also this page with information about asset preloading and streaming: Preloading and Streaming | Learn PlayCanvas

Are your filesizes including gzip compression?

3 Likes
4

Thank you for the quick reply.
No files are not gzip compression. Already I have used Preloading proprieties for necessary models. Any other solutions?
Thanks in advance

5

Thank you for the quick reply.
I have used the fbx file format to import models the Playcanvas is converted fbx to glb. So how to do the Draco compression inside the Playcanvas?. Are I need to reimport the models in glb format?
Thanks in advance

6

I would remeasure with gzip compression values as many the files like JS, JSON etc get A LOT smaller.

Draco compression can be seen here: Asset Import Pipeline | Learn PlayCanvas

After that is ticked, you can right click on FBX source and re-import.

I would focus on preloading only what you need and streaming other assets on demand first though.

1 Like
7

Thank you for the quick reply.
I have used Draco compression it reduced 4MB in total files and also I have done other methods to reduce the fbx file size. Now the total file sizes is 65.3MB. When I use playcanvas launch (web) it’s loading time is 21.61s. In hosting site (web) it’s taken 35.12s and mobile it’s taken 1:01s.It’s there any other options to load faster?

Note:“playcanvas-1.61.3.dbg.js” is 3MB any options to reduce this?

8

When you publish either to playcanv.as or self host, it will include the minified version of the engine which is about 400KB GZIPed.

I recommend publishing to playcanv.as as that will include gzip support and remeasure.

Even after all of that, you still have to do this which Devortel posted resources for. There’s only so much you can do with filesizes of assets without reducing quality. Eg reducing the dimensions of textures.

1 Like
9

Thanks very much for the suggestions.

If I publish the output to playcanv.as, I can see the output loading faster. Will this playcanv.as link be forever active? Or should I keep on renewing our Play Canvas account continuously? Can you please clarify?

Thanks once again.

10

Yes, but they aren’t CDN’ed. We generally recommend using playcanv.as for dev/test/review builds and self host for production.

Some users use S3 with Cloudfront (that supports gzip compression) for self hosting for example.

1 Like
11

Sorry for the delay reply.
Thanks for your support. I have done the Draco compression, it’s reduced lot of size I am happy for that (Now File size is 31MB). Now much better. Is there any option to use webp format Instead of using png and jpg for reduce file size?
Thanks a lot.

12

Not out of the box. You will have to postprocess (with a script usually) the build where you convert the images to WebP and update config.json to reference the WebP files instead of PNG/JPEG.

We have WebP support as a feature request here: Added .webp upload support · Issue #991 · playcanvas/editor · GitHub

1 Like
13

The Play Canvas is the same of the Canva Apk we see in plays tore or app stores?

14

To my knowledge, there is no connection between PlayCanvas and Canva products. They are unrelated.

1 Like
15

But they are unrelated? Canvas is also referred as Canva.

16

We are unrelated.