Running on server throws no-plugin error

Yes, node is missing XHRHttpRequest, so it fails

Do this:

const XMLHttpRequest = require("xhr2");
global.XMLHttpRequest = XMLHttpRequest;

of course after installing xhr2 using npm.

The snapshot will not work they way you do it, because you are not waiting for the model to be loaded. However, it is loaded correctly now without any issues.

OMG. I’m sorry I forgot to include it.

I’m not sure if you remember what happend to loading .babylon model early in the discussion.

Yes, .babylon model can be loaded, but the texture mapping is quite off. I have no idea :frowning:
and .gltf cannot be loaded…

const fs = require('fs');
const BABYLON = require('babylonjs');
const { createCanvas } = require('../lib');
const XMLHttpRequest = require("xhr2");

global.XMLHttpRequest = XMLHttpRequest;

global.HTMLElement = function () {};
global.window = {
  setTimeout,
  addEventListener() {},
};
global.navigator = {};
global.document = {
  createElement() {
    return createCanvas(300, 150);
  },
  addEventListener() {},
};

const canvas = createCanvas(512, 512);

const engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
const scene = new BABYLON.Scene(engine);

const createScene = async function () {
  scene.clearColor = new BABYLON.Color4(0.5, 0.4, 0.4, 1);
  const camera = new BABYLON.FreeCamera('cam1', new BABYLON.Vector3(-6.8, 9.8, -9.3), scene)
  camera.setTarget(new BABYLON.Vector3(-1.8, 0, 0))
  const rootURL = 'https://playground.babylonjs.com/scenes/'
  const fileName = 'candle.babylon'
  
  const { meshes } = await BABYLON.SceneLoader.ImportMeshAsync('', rootURL, fileName, scene, null, '.babylon')
  
  const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
  
  scene.render();
};

createScene();


setTimeout(() => {
  fs.writeFileSync('./snapshot/snap-babylon.png', canvas.toBuffer());
}, 3000)

with this, I can load .babylon models like these



but only the ones without textures.

Earlier in this discussion, I asked and mentioned the problem where .babylon model can be loaded, but textures were kinda off.

Now with babylonjs 5.22.1 version, I cannot load with above code at all :frowning:

What node version are you running? 5.22 introduced es2021, which is supported by node 16, but will probably need transpilation with older versions of node

@bghgary - was anything changed in the way we load base64-based models in the gtlf loader?
(please be patient, he is away until the beginning of next week).
I will anyhow try finding time to debug this, but not sure when it’ll happen. sorry…

Ah, I forgot this message after I came back from a long weekend lol…

I am using node -v 16.16.0

I’ll share a repo in a few hours to be clear :slight_smile:

1 Like

Here’s the link to the repo! DOEHOONLEE/babylonNodeJS (github.com)

Even though the texture mapping was off, I could load a .babylon model before, but not anymore. I felt so close to making it work :frowning:

My ultimate goal would be to make it work with .gltf model though.

What exactly happens? Your code seems to be working as you expect it to work:

  1. The example pictures I shared are all from models without texture references.

So for example, if you replace the rootURL and the fileName with https://playground.babylonjs.com/scenes/Dude/Dude.babylon which has textures
Screen Shot 2022-09-13 at 10.59.03 PM

it wouldn’t work.

In @slin 's example as well, it seems to be working, but it also uses a model without texture mapping.

  1. .gltf models cannot be loaded with the codes that I am using right now. It just console logs infinite lines of codes :frowning:

I am really confused. You mentionned the code was working before without textures and that it is now not working at all.

@RaananW tried your code and it is still not working with texture (same as before as I understand)

@DOEHOONLEE what is now not working which was ok prior to 5.22.1 ?

We really need to make the distinction between a regression and a none supported feature.

It doesn’t work because we are trying to use the Image object, which doesn’t exist in node. If image doesn’t exist, we are trying to load the URL, but blobs can’t be “loaded”.

I am trying to debug this. But the code is running without an issue, so I am not sure what you mean when you say it doesn’t work in 5.22.1.

I am sorry I should have mentioned the whole history.

I originally tried loading a model with Babylon.js v4.2.0 then it was possible to

  1. successfully load a .babylon model, but textures were mapped wrong
  2. .gltf model could not be loaded

With 5.22.1 version,

  1. .babylon model is still loadable, but only when it does not have texture references
  2. loading .gltf is still not working

The above code can load https://playground.babylonjs.com/scenes/Dude/Dude.babylon ? :open_mouth:

No, but that’s because of a different reason (which I just found). To render images we are using createImageBitmap which is not available in node. There is an open issue for that - Support `ImageBitmap` and `createImageBitmap` · Issue #876 · Automattic/node-canvas · GitHub

@sebavan - think we can somehow polyfill this function? maybe use ImageData instead of ImageBitmap when bitmap is not available?

*** EDIT

to be more exact - when the Image html element is missing (as in Node.js), we are using createImageBitmap to generate a bitmap and use this data to create the texture. but since the function doesn’t exist it fails. This is a node-only issue, which we will need to see how we can address.

1 Like

Yup this has always been the case. We never supported loading images on node.

The only unexpected part for me is:

  • 4.2 → load models but without textures
  • 5.22 → load fully fails if texture not loaded

I guess it is actually an improvment overall as we are catching and surfacing image load issues :slight_smile:

I do not think we should polyfill too much loading images and such as anyway rendering is not expected to work without extra dependencies.

3 Likes

My apology.

The part where I could load the model, but without textures was on v.5.17.1 with Next.js based project
GitHub - DOEHOONLEE/babylonTester

On both v.5.17.x && v.5.22.x → still failing in Node.js project that I shared earlier :frowning:

Thanks for the thorough explanation! I now get what’s going on.
Would there still be some sort of a workaround to load a model with textures ?

Yup this has always been the case. We never supported loading images on node.

@sebavan , Does this mean that it is, for now, impossible to load a model with textures until further notice?

There are a lot of other parts which won t be compatible unfortunately. In your case you might try to find a createImageBitmap polyfill for node ?

or rely on Rendering Scenes On A Remote Server | Babylon.js Documentation or BabylonNative

2 Likes

@sebavan

There are a lot of other parts which won t be compatible unfortunately

which means… even if I solve this current problem, there will be more coming up? :frowning:

I thought Babylon Native is for mobile. Is there something unique about it that it can be used for server side rendering? If so, is there an example of it?