Here is a product presenter I’ve developed for a fair.
It will take some time for loading cause we had to load all assets on startup.
It’s pretty neat! Was this made with PlayCanvas?
1 Like
Hi @Patrick_Munster,
Nice, thanks for sharing! Very clean implementation of dynamic models and sizing.
Indeed it takes a long time to load, maybe you should make use of the preload flag to load only the necessary assets initially the rest gradually during play time.
2 Likes
Thanks for that hint. Overlapping can happen but the hotspot should be always on top. I’ll try to fix this by z-index. Cool would be to track the collisions of the USPs (red boxes) and collapse them. But I haven’t tried/searched for it. Maybe an idea for the next update.
The preloading was “necessary” for the offline version which is also integrated into an app. I’ve had some trouble to make this work and switch between the online and offline application. But this is really a point where we have to think about cause it feels bad with the loading time and there is a lot of traffic which might be a problem. However, right now it’s okay for the client as it.
1 Like
Thanks. The 3D content and everything that is directly connected with the models (red boxes, color selector) is made with PlayCanvas. The UI around, which is controlling the application, is an ordinary web UI based on Bootstrap with jQuery magic.
1 Like
It’s super-important you read this page:
https://developer.playcanvas.com/en/user-manual/optimization/load-time/
In particular, the last point would make a huge difference for your app’s load time:
If you self-host your PlayCanvas app, be sure to configure your web server to serve files with GZIP compression. In particular, JSON and JS files.
3 Likes
Thank you for that very good advise!
I’ve asked the server administrator to activate the gzip compression on the server cause it’s not available at the moment.
I’m looking forward to the result. 
1 Like
Cool. Let’s us know when it’s enabled! 
Very nice!
Something I noticed:
- Some hints appear on top of each other, making them hard to read.
- The model loses mouse control, if the mouse goes over the UI element, e.g. when you try to rotate the model.
2 Likes
Thanks for that! Detecting the collision of the boxes to avoid overlapping isn’t so easy I think. If you have a hint for me I would appreciate it.
But deactivating the pointer events with pointer-events: none; should fix the issue of stopping the model from rotating. I will add this to my ToDo list. 
There are a few options here, probably. Considering you are using HTML for UI, one option could be to detect the DIV collision (example) and then hide the ones that are further away on z-index. That way only the closest to the viewer is shown, unless they don’t overlap. Another option could be to not allow them to go through each other’s boundaries (example), but that could be a bit tricky to implement and could potentially clutter the view if many hints available.
1 Like
As mentioned before, will add here: users who browse internet, do not necessarily know what it behind the link. They expect “another web page”, if they see loading bar without progress - that is not common. If it takes even time - they will assume page is broken, and will walk away.
If website loads way longer than usual loading times of websites, users tend to bounce, with more wait - more bounce.
Analytics can show you this: add analytics event, when user first time interacts with page after it is loaded. And see how many never do, either they switch tabs, or they just navigate away.
For any commercial application, loading times and good UX - is essential for success of the app. If WebGL makes experience worse for user, they might simply not appreciate it is in 3D, and walk away before they even experience it.
It is essential to make things load fast, work fast, and be a smooth experience.
From a UX point of view I fully agree with you and really appreciate the advice. As an excuse, just to say that many decisions are out of my hands like the decision to use points instead of a progress bar.
However, the application is obviously not intended for the end user, but purely for distribution. I therefore think that the requirement was different from that of a consumer product.
I am currently working on a configurator for the end user in another project and would be happy to receive feedback there as well, as soon as it is online
Btw: @will The administration doesn’t seem to see any need to enable gzip compression for the server, but I’ve forwarded it. If there is a change, I will write it here.
1 Like
Yes, I’d be more than happy to provide some feedback on your latest project. Please do share it as soon as you have published a build.
1 Like