Pwa or any solution for disconnected oculus

Hello, we are presenting a sample of digital art that has a virtual part here Gallery and a physical space in a room of the most important exhibition center in Buenos Aires.
The problem is that this physical room is in a second basement and has many difficulties with internet connections.
My question is, do you know of any way to install the content directly on the oculus (in place we have some oculus for people to experience this same space).
I searched a lot to see if I could install some kind of webserver in the oculus or maybe create a progressive web application and I did not find how to do it.
Everything is developed in babylon using webXR, any suggestions?
Thank you very much in advance.

Adding @RaananW who has a lot of background with occulus

1 Like

The oculus browser is a chrome is disguise, so most standard APIs (including indexeddb) are available. You can use a similar approach to the one we took with the database class or use this class directly:
loadImage for example will try loading an image from the database and if not found it will download it. So technically you only need to run it once with an internet connection, and the images will be cached. The database is integrated in the framework, so files and images will be automatically cached for you.

Regarding the db init - there is no need to actually pass a url to your scene (the first variable), it can be an empty string if you skip the manifest check (the second variable).

This is the database class - Database | Babylon.js Documentation and this is how to get started with it - Optimizing Using Cached Resources | Babylon.js Documentation.

engine.enableOfflineSupport should be set to true, and if you don’t want to work with a manifest you will also need to set engine.disableManifestCheck to true as well. You’ll need to do that before you start loading any data and the database will be initialized for you.

1 Like

Thank you very much RaananW! I’m testing right now.
I added this:

BABYLON.Database.IDBStorageEnabled = true;
engine.enableOfflineSupport = true;
engine.disableManifestCheck = true;

but I have the problem that the 3D models that I load are .glb not .babylon and it seems that they are not being saved in the local storage, I can see in my chrome browsing the Applications tab of the developer tools that all the .js, images and html are available there but I don’t see that the .glb or mp4 files have been saved.
Any ideas?

This should work. Any file requested by the framework is going through the LoadFile method of FileTools (a hidden container for file tasks). The LoadFile, in turn, is referencing the database loadFile method (if available).

How are you loading the files? using babylon’s functionality, or loading them yourself in a different way?

1 Like

Hi, apparently it works with some things yes and with others it doesn’t.
I used a very basic scene and it worked like magic, everything was loaded but when I include a couple of additional models that I load using

const sculpture = await BABYLON.SceneLoader.ImportMeshAsync ("", sceneLocation, “sculpture1.glb”, scene);

const sculpture2 = await BABYLON.SceneLoader.ImportMeshAsync ("", sceneLocation, “sculptureok.glb”, scene);

It no longer saves them in the cache, when I disconnect the wifi to test I can never load the scene since it is unable to load…

Could ImportMeshAsync be causing problems?

What is the size of those files? indexedDB has its limitations, it might be reaching its limit
Otherwise we should take a look at the importAsync function and make sure it is loading the files the same as any other load method

Thanks for the prompt response!
the size of sculpture1.glb is 77mb and sculptureok.glb is only 4mb
but I think the problem may be that… even the Oculus browser is a mobile browser, I imagine that the limits must be lower than on desktop

4mb should be fine, 77 is way beyond the limits :slight_smile:

That would require a different solution. What you can do is store those files in chunks, load, concatenate, and generate a blob to work locally. This is sadly not something babylon supports directly. We do support loading from blob, so the way till there should be custom-implemented.

Just to be sure why the 4mb file is not loaded - @bghgary , is the gltf importAsync function using a different loading mechanism?

I think I’m very far from the limits, apart from those files, video textures are loaded, about 8 in total and one of them weighs more than 100 mb.

This might be an issue with the importAsync implementation.AFAIK it should be supported. I’ll try finding time later this week to debug this.

Hello, thank you very much for the help, especially to you RaananW who always attend quickly and with great knowledge.
I tell you that I was trying in different ways and I think I had other problems.
Before I had been trying to make a progressive web application and I think that I had been registered a service worker that did not work well.
Finally change everything to a new folder and also change the service worker and everything started to be stored well in the cache and since I already had to publish the work, I preferred not to continue putting my hand.
In a week when the art show ends I will try to determine if it is working well because of the new service worker or because of the indexedDB function and I will let you know.
THANK YOU again!

1 Like

I don’t think so. We go through Tools.LoadFile like everything else.

1 Like

Just wanted to update here - this PG is an example of a cached GLB element loaded from the database. It works as expected:

glTF Loader Demo | Babylon.js Playground (babylonjs.com)

The part that might seem wrong is caching the textures, since the are generated from the glb file. They are part of the glb, they will be extracted correctly and will be shown. They are, however, stored in the indexeddb storage every time the object is loaded, which will result in the DB growing every time the model is loaded, even if loaded from cache.

@bghgary , is there a way to provide the images the same GUID, or is that the blob-mechanism that provides the id? If so, is it possible to skip storing the blobs in the database to preserve the disk space?

We used to use Blob URLs at some point, but it has been removed for quite a while now. We pass in a unique data: url that is a combination of the rootUrl, fileName, and the texture image uri/path. I’m not aware of a GUID in the loader.

1 Like

@RaananW, master of the XR universe!
Thanks for the help, I just checked the project that I wasn’t sure if it was your code or the serviceworker. Remove the serviceworker and with your code alone it works great. Now I know how to cache in the Oculus.
By the way I ask you a question, do you know if with Babylon Native you can make applications for Oculus and that they work like any other application?
I do not wait for an example, only that you tell me yes or no and then I look for the way.
Thanks again!

2 Likes

AFAIK native doesn’t compile to oculus yet, but oculus is technically android so I believe it should be technically possible. @bghgary is the master of native and can answer this question much better than me :slight_smile:

2 Likes

Unfortunately not yet, this is something we want though. Contributions will be welcome here :slight_smile:
https://github.com/BabylonJS/BabylonNative/issues?q=is%3Aissue+is%3Aopen+oculus

1 Like