My first project with playcanvas is now online, and has been used this weekend in a french show/exposition, called Made In France.
So far everything seems to work, so I’m satisfied
Here you can try it : Knife Configurator for Knife Maker “Deglon”
Basically you can choose a blade/handle/wood type , and add a decor or some text on it.
It’s linked with Prestashop and the configuration is stored in the cart of the visitor.
Still some work to do on this V1 of course, but I learned a lot (thanks everyone who helped in this forum!) and I’m going to stick with Playcanvas for my next projects (2 more configurators incoming ).
Don’t hesitate to share your thoughts, I’m alone in this so it’s not easy to see everything when you have your nose on the same things all day haha.
Of this, 214MB is PNG data. You have several 4096x4096 PNG textures reaching up to 18.9MB each.
This means that the page is taking a very long time to load.
To improve things, I would suggest the following:
Can any of the textures be downsampled without compromising visual quality too much? e.g. 4096x4096 to 2048x2048.
Can you compress any of the textures with Basis? Basis can lower texture quality a bit, but for some textures, it’s reasonable. The savings are massive though. Currently, I suspect this configurator will not work on some mobile devices because the browser tab will run out of memory loading the huge PNGs. Basis fixes that.
Almost all textures are PNG but JPG will compress better (despite being a lossy format). For textures that look bad when Basis compressed, I would recommend JPG over PNG (providing you don’t need to store an alpha channel, which JPG doesn’t support of course).
I believe you are loading everything ‘up-front’. In other words, all assets are preloaded. I suggest disabling preload for any asset that isn’t required for the initial view and then asynchronously loading everything else after that. So, preload the palissandre texture, but do not preload ebene, genevrier, bouleau and olivier. Read more about preloading and streaming here.
Verify that all assets being loaded are actually used by the app. Scan the Network tab for resources you don’t actually need and delete them from your project.
I would estimate that this app could go from loading 256MB of resources to under 10MB if the recommendations above were adopted.
Wow, thanks a lot for the advice!
Yep I’m still going to work on it, this is a first version and I admit that I haven’t optimized anything yet, I only focused on having something that works .
These textures are indeed huuuuge, didn’t realize that ! On the expo they used it on an ipad with a good internet connection, but some visitors might indeed have trouble with this.
I’m definitely going to look at your tips, thanks again
(I’ll update this post updated to show the change when its done)
Haha, indeed, no reason to keep those big files !
This particular texture has been disabled for the expo but will be used again soon. (So another reason to not preload everything )
edit: Ah yes, that anisotropy change is nice too. Even cooler on a big decor like this one :
Good question - yes, there is a cost to the GPU and this increases as you increase the value of anisotropy. However, I suspect that it won’t cause you to start dropping frames. That said, I always recommend having a few old Android/Apple phones around to test on.
For applications where there is little visual change over a period such as product configurators, there is a specialist property to reduce CPU and GPU usage. pc.Application#autoRender can be set to false so that frames are rendered on demand via pc.Application#renderNextFrame when there is a visual change such as the user moving the camera or adding a part to the product.
Hi everyone
I’ve reduced the handle textures to 2048x2048 a converted them as JPG, that did indeed make a huge change at load time, and no impact on the quality
Also pushed the anisotropy to 4 on all the decors, it makes a nice change (even if I’m the only one noticing it haha)
the Basis compression made things a bit too blurry, and now that the textures aren’t so big anymore it’s not really usefull I think.
Also, I tried too play around with the autorender property but finally I won’t use it in this configurator, I had to add renderNextFrame in too many places in my code haha, it’s too dangerous for this project. (my code quality isn’t really top notch, yet )
But I will definitely keep this in mind for my next configurators!
Hello, new to playcanvas and frontend development but I’m looking to build a configurator for simple jewelry products. Ideally beginning with simple choices like material/hue swapping. Do you know any good resources to get started with configurator building? How quickly were you able to make the knife configurator for that site? I think you did a fantastic job, I love the UI