Running on server throws no-plugin error

[slin]

@RaananW Did you also fix indededDB?

[DOEHOONLEE]

Babylon.js v5.17.1 - WebGL1
Plugin Availability For GLTF ====> true
-=-on server error-=- ReferenceError: indexedDB is not defined
    at new Database (webpack-internal:///./node_modules/@babylonjs/core/Offline/database.js:39:41)

For this error, I followed the file database.js in node_modules then added

import { indexedDB } from 'fake-indexeddb';

and it still throws the same error

[RaananW]

I did now - fix missing indexedDB reference in nodejs by RaananW · Pull Request #12814 · BabylonJS/Babylon.js (github.com)

I missed the last indexedDB reference in the line I changed. Should be fine after this merges.

[DOEHOONLEE]

@RaananW oh, wow! That was super fast!

Thank you for the great work.

But would including the

import { indexedDB } from 'fake-indexeddb';

have worked? If I were to add this, should I include it in core/offline/database.js file?

One last thing, is the indexedDB fixed version going to be released soon?

Thank you always for the fast and wonderful work. I really appreciate it

[slin]

Usually it is fast for the fix to be released. But if you want to test with fake-indexeddb, can you read the last line in this reply: Running on server throws no-plugin error - #14 by slin

[RaananW]

We have weekly minor versions released on thursday morning. So 5.18.0 (if I am not mistaken) will be released in 2 days.

@DOEHOONLEE

But would including the

import { indexedDB } from 'fake-indexeddb';

have worked?

Yes and no! Yes, it would have worked, no, not out of the box
You will need to set the global namespace’s indexedDB variable to be the imported fake db. Since node’s global object is not called window but global, you would need to set global.indexedDB = indexedDB . If you do that after the import it would have worked.

[DOEHOONLEE]

Oh, YES!!

I added to global for Babylon to use. No more indexedDB error~! Yay~!

I tried adding URL to global like I did for indexedDB, but it didn’t work.

import URL from 'node:url';
// perhaps
global.URL = URL

Am I on a really wrong track?

Is the Deno only way to solve this problem?

[RaananW]

Deno is one way, yes
I am not sure what node:url is, so it might be an implementation issue with this version of URL.

You could also try GitHub - lukeed/url-shim: A 1.5kB browser polyfill for the Node.js `URL` and `URLSearchParams` classes. or GitHub - lifaon74/url-polyfill: Polyfill URL and URLSearchParams to match last ES7 specifications

[DOEHOONLEE]

This is how URL is used in LoadImage() in fileTool.js.

  if (typeof Blob !== "undefined") {
      url = URL.createObjectURL(new Blob([input], { type: mimeType }));
      usingObjectURL = true;
  }

So I assume I would have to add the URL to global before this?

Also, URL is introduced as a constructor here, but what is the input in new URL(${here}) for this line to use?

URL.createObjectURL(new Blob([input], { type: mimeType }));

[RaananW]

URL is a function with static members (for example the createObjectURL function).

The project is also 3 years old, so I am not sure how good the implementation is. these are just 2 packages I found searching online, I am not affiliated with them or wtoe any of them

BTW - what node version are you using? Why won’t you just upgrade the node version? According to MDN URL is available since node 10, but even if you are using 12, it is a version that is 4 years old and is in End-Of-Life status. 14 and 16 would be better, no?

[DOEHOONLEE]

Hmm…

I’m on Babylon.js v5.17.1,
added below to where Babylon is using URL.createObjectURL

import { URL } from 'url-shim'

but still getting the same error with an extra one

Babylon.js v5.17.1 - WebGL1
BJS - [11:18:35]: MSAA failed to enable, MSAA is only supported in browsers that support webGL >= 2.0
URL.createObjectURL is not a function

I upgraded the node version to 14 like you said

As an additional note,

• .babylon model is successfully imported, BUT the textures that the model uses is mapped incorrectly with different size ratio

• .gltf import keeps throwing URL.createObjectURL is not a function error + MSAA failed to enable, MSAA is only supported in browsers that support webGL >= 2.0

Even getting errors with Babylon is still fun, but a little bit confusing.

I had translated some Babylon documentation web pages before. I should start working on it again haha

[RaananW]

@DOEHOONLEE

createObjectURL

Hmm… according to MDN, node has this function starting with node 16.7 (URL: createObjectURL() static method - Web APIs | MDN). If possible, can you try with node > 16.7? We will need to document this. it will take a lot of unneeded code to add feature detection in that case, as this is a node-only issue those other browsers don’t really need.

[DOEHOONLEE]

Oh~ when you said this

URL is a member of the window object in the browser. Your node version has nothing to do with the browser babylon is running on

I thought, the node version didn’t really matter.

Alright, let me try node v.16 above~!

[RaananW]

Yes, and in most cases it is true, but i only later realized you are running your Babylon code in node and not in the browser. In that case the browser doesn’t matter - it’s node that runs the code

[DOEHOONLEE]

hmm haha

I am over with the URL.createObjectURL error, but I’m still failing.

I am trying a new way of importing a model like this

    var mymodel = {...};

    var json = JSON.stringify(mymodel);
    var blob = new Blob([json]);
    var url = URL.createObjectURL(blob);

    BABYLON.SceneLoader.Append(url, "", scene, function(scene) {
        scene.createDefaultCameraOrLight(true, true, true),
        scene.createDefaultEnvironment();
    }, null, null, ".gltf");

but getting

BJS - [14:11:13]: Unable to load from blob:nodedata:a3230f34-804b-41f4-b7b7-1197d08e9aec: LoadFileError: Unexpected end of JSON input error message

Is SceneLoader not able to read from blob:nodedata?? Is that why this is happening?

with original method that I used,

  SceneLoader.ImportMesh('', rootURL, fileName, this.scene, null)

I get The "obj" argument must be an instance of Blob. Received an instance of Blob error message along with BJS - [15:33:24]: MSAA failed to enable, MSAA is only supported in browsers that support webGL >= 2.0

could using the WebGL1.0 be the problem??

---

---

I am checking the file SceneLoader.js in Babylon Module and I don’t see anywhere using Blob except in the function LoadImage() in fileTools.js file.

---

---

I just tried with a basic model without any texture mapping. Just tried to load a box.
It now only shows

BJS - [15:36:05]: MSAA failed to enable, MSAA is only supported in browsers that support webGL >= 2.0

and does not stop or throw another error message, but then I don’t see any model loaded haha

[RaananW]

Do you have the loaders package included?

@DOEHOONLEE

LoadFileError: Unexpected end of JSON input

might indicate that the gltf loader was not loaded correctly.

Further looking at what you write - it seems like it might be a different issue. the above question is just for me to be sure.

@DOEHOONLEE

Is SceneLoader not able to read from blob:nodedata?? Is that why this is happening?

the scene loader can load from a blob URL, but the browser schema is different. we might need to change the behavior in the loader to force loading the node’s schema as a URL

[DOEHOONLEE]

Do you have the loaders package included?

For the above question, yes I included glTF loader like this and I’m also checking the glTF loader plug-in like this.

import "@babylonjs/loaders/glTF";
...
const isPlugInAvailable = SceneLoader.IsPluginForExtensionAvailable(".gltf")
console.log('Plugin Availability For GLTF ====>', isPlugInAvailable);

and getting true from this.

Could this still return true even when the loader is not correctly imported??

[slin]

Hi @DOEHOONLEE

@DOEHOONLEE

BJS - [14:11:13]: Unable to load from blob:nodedata:a3230f34-804b-41f4-b7b7-1197d08e9aec: LoadFileError: Unexpected end of JSON input error message

This blob:nodedata: looks weird. Like @RaananW said, your code for generating object url might not be correct.

Can you try the following approach to avoid generating object url?

// Read raw binary content from your model file
const glbRawContent = fs.readFileSync('<YOUR_FILE_PATH>');
// Generate base64 string of your model 
const base64Content = Buffer.from(glbRawContent).toString('base64');
const base64ModelString = `data:base64,${base64Content}`;

// Import Mesh from base64 string instead from url
BABYLON.SceneLoader.ImportMesh('', '', base64ModelString, scene);

[DOEHOONLEE]

Hi @slin ~!

for the blob:nodedata part, I think it’s because I’m running Babylon on the server side.

Oh~!! my god! Importing a model from base64. Alright. Let me try that

But just one question, fs.readFileSync only works when my project is actually holding the asset. It doesn’t work with remote asset, right?

Can I use it for remote asset like

const { data } = await axios.get(`${rootURL}${fileName}`)
const string = JSON.stringify(data)
const encodedString = btoa(string)

and use your method from here with the base64 that I have?

Anyway, let me try your way. I’ll be back!

[DOEHOONLEE]

Hmm… tried both ways (reading from local file && from remote) and they both failed

returning the same error: Unable to load from data:base64,eyJwcm9kdWNlci....

I don’t know why it keeps console.log+ing while I don’t have any console.log

I also got this importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse message at the end of a very very long base64 log