brianzinn / react-babylonjs

React for Babylon 3D engine
https://brianzinn.github.io/react-babylonjs/
812 stars 102 forks source link

Caching GLB Model Files #229

Closed DenysAshikhin closed 1 year ago

DenysAshikhin commented 2 years ago

Hi,

I am trying to get caching working for basic .glbmodels -> Currently they are being loaded in as such:

<Model
        rootUrl={`./`}
        sceneFilename={`person_model.glb?id=${id}`}
        scaling={new Vector3(toScale, toScale, toScale)}
        position={
          display ? currentCoord : new Vector3(9999999, 9999999, 99999999)
        }

        visibility={display ? 1 : 0}
      >
</Model>

I have found the following guide: https://doc.babylonjs.com/divingDeeper/scene/optimizeCached

However, it's not clear to me how I set the following: BABYLON.Database.IDBStorageEnabled = true; And what to call the manifest file -> is it person_model.glb.babylon.manifest or person_model.babylon.manifest?

brianzinn commented 2 years ago

hi @DenysAshikhin good question - and it's a useful optimization. Anything with BABYLON.*... would be designed around the non-ES6 NPM modules (although there is a legacy import on the es6 module @babylonjs/* NPMs).

import { Database } from '@babylonjs/core/Offline/database';
import { useEngine } from 'react-babylonjs';

const engine = useEngine();

Database.IDBStorageEnabled = true;
engine.enableOfflineSupport = true;  // Enabled by default.
engine.disableManifestCheck = true; // if you don't want to create the manifest files

Let me know how that works - suspect you may run into issues reloading models - there are some other recipes, but they don't cache that way (or look at PWA offline caching).

DenysAshikhin commented 2 years ago

That seems to have done the trick, however, if I do want to use the manifest files for version control, do I need to make the file per asset or per scene? And what exactly should the manifest file be titled?

Thanks!

brianzinn commented 2 years ago

I have never used the manifests - would be best to ask that in the main forum or read the docs/code. You can do a scene one - I found this doc: https://doc.babylonjs.com/divingDeeper/scene/optimizeCached

The other way is to make a PWA in React and then they are available offline.

brianzinn commented 1 year ago

closing from inactvity - please re-open if you have more questions. cheers.