adding loading masks to the canvas

[coherit]

I am adding a loading mask that will display until after a mesh is loaded (on slow connections and big meshes, users may get discouraged when they see the beautifully rendered toolbar and a blank canvas with no loading animation -- it looks empty to them like the file is missing).

However, I'm not sure if I'm doing this in the most elegant way:
Currently, I have a div#loading that displays by default. Within my presenter class, I am overriding the _testReady support function with my own version that inserts $('#loading').hide(); just before this.repaint();

This works, but I wonder if this is not the best way to do this? I couldn't successfully target the canvas element in any other way but could be missing something very simple.

Although this isn't technically an issue, I suppose it could be filed under a feature request or something to be added to the existing documentation (which is very clear about many other UI features!). Thank you for your work on this tool!

[potenziani]

Hi @coherit,
what you propose is certainly interesting (even though this kind of feature concern mostly PLY models, since usually the raw version of the Nexus geometries is soon visualized in 3DHOP), but unfortunately, at the moment, 3DHOP does not provide this kind of feature.

The main reason is that we suggest to rely on PLY geometries just for small models (so, with short loading times), and to convert in the Nexus format the bigger ones (we discussed a lot instead, and still are discussing, about the opportunity to integrate into 3DHOP a feature enabling a visual feedback for the loading of this last kind of models, that is not an easy task, since the amount of data loaded and to load continuously change depending on the camera position).

However, this does not prevent you to add to 3DHOP a custom component (like for instance, a loading bar) for providing visual feedback on data loading.

To build your own loading bar for PLY models is not too difficult: you just need to add a few code lines to "present.js", exploiting the "onprogress" event handler related to the "XMLHttpRequest" binary request. After doing that, you can add an HTML bar element linked to the data coming from this event handler.

You can find the PLY binary request at line 2909 of "presenter.js" (3DHOP 4.2 master version).
And this is an example of the original function with the "onprogress" event handler added:

sglRequestBinary(mesh.url, {
	onSuccess : (function(m){ return function (req) { that._onPlyLoaded(req, m, gl); }; })(mesh),
	onProgress : (function(loaded,total,evt){
		console.log(evt.url+" loaded: "+loaded+" of "+total);
		if (loaded==total) console.log("Model "+ evt.url +" ready!");
	})
});

With this change, you can have feedback on the amount of data loaded in the console for browser developers.

If you want a running example of that, take a look at the FCGL 3D data repository.

Hope this can help! :)

[coherit]

This is very helpful -- thanks for such a thorough reply! I'll give the loading bar a shot, and we'll reconsider converting to Nexus format again.