Running on server throws no-plugin error

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.

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

@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?

Babylon native works differently. it doesn’t run on node and has everything needed implemented for you.
Not sure if it is usable on server, maybe @bghgary can answer that. But in general it was meant for native applications (android, ios, windows)

Babylon Native is, err, for native C++ applications (i.e., Win32, UWP, Linux, Android, iOS) as @RaananW points out. We have an internal project using Babylon Native for a server scenario, but it’s still early. There are some changes needed on the JS side to support rendering to a render target texture.

Can you explain your scenario? That might help with the discussion.

Just one question to clarify the below.

So far, to conclude, we know that

  1. .gltf model cannot be loaded in both node.js and next.js projects

  2. in node.js project, only .babylon model can be loaded

  • ONLY WHEN the model does not have external textures with references
  1. in next.js project, .babylon model can be loaded
  • EVEN WHEN the model has externl textures, but they are not mapped correctly

Problem 1 is related to how I am importing .gltf loader on the server-side.

Problem 2 is because Babylon uses createImageBitmap where it is not provided on the server-side.

QUESTION 1.

Is the Problem 3 same as Problem 2 ? I am a little confused how it is handled because in #2, it could not even load a model, but it did in #3. I just felt so close..!! :frowning:

QUESTION 2.

In order for me to load a .gltf model, I have to solve the createImageBitmap problem AND Problem 1 right?

Thank you all for the great help!!

@DOEHOONLEE the only support we have for node.js is null engine that we use for tests for instance.

The normal engine will fail in a lot of ways due to objectUrl/images and sometimes shader usage during load. Node.js does not support rendering or the dom by default limiting a lot the default capabilities of rendering server side.

I would advise to either adapt and polyfiill all you need on node which might help others in the community or rely on Babylon Native which requires a different set of skills but has been proven to work to render server side at some extend.

I am using puppeteer for loading meshes and taking screenshots of them for now.

Just to share with the community,

EDITED => The below content is for [server side rendering question on current discussion page + this discussion]

  • Loading .babylon mesh is successful.

  • However, when the model has a texture URL reference, the mapping goes wrong and it does not really work like below (textures become all stripes)

[Newly Found]

  • THOUGH, if url is updated with base64 with updateURL(path), it does load the texture and maps around the mesh, but just in the wrong vertices(?)

  • face is not correctly mapped below (ex. lips are not red)

  • To make sure, I marked the face on the texture image with hotpink area and still get the same

HERE comes the funny part

  • When I map with this area marked texture on Dude.babylon

  • I get this…!!

Screen Shot 2022-10-14 at 5.06.21 PM

I tested with other meshes and it seems like, what it does is that, it does not map with the whole original image area, but it uses like 1/5 or 1/6? ish proportional area of its original image to map on the mesh.

Whatever the size is, however big the texture image is, it uses like 1/6 ish of its original image area.

So if I take the “yellow” area of the image I just showed above and make it a new image with the size of 290x253 (taken approximately here), it actually maps on the mesh like above.

290_253
Screen Shot 2022-10-14 at 5.11.14 PM

Does this give us some hints on where it should be fixed…?

We are using puppeteer to render samples in 3 different places in our framework - visualization tests, assets library and the docs repo (to generate the thumbnails). They all work asexpected.
Is the behavior you are describing puppeteer-only? or does it happen in a regular browser session as well?

Oh, no no no.

I am working with puppeteer fine. The new message I just posted is for the “server side rendering” I tried to work before.

Got it, sorry - i misread

I am sorry for the confusion. I edited the message to clarify.

It’s funny how the mapping does work, but uses different size!

Are there any changes to the uv scales of the texture? any change to anything related to the uv coordinates?

UV scales were same as original. I did not modify any UV Coordinates when loading meshes.

I still couldn’t work loading .gltf model, just working on loading .babylon. So no fancy stuff yet.

Just loading a model and updating texture URL only.

I posted a discussion with a sample project here with Next.js basis, but the behavior is the same in Node.js only project.

there shouldn’t be a discrapency if you just change the texture. This is an interesting behavior of node TBH. but it does seem like it is providing you with a solution :slight_smile: You can actually try changing the u and v scale to see if it fixes the mapping.

Thanks for pointing out! Let me try that :slight_smile:

I wanted to find out specific part/area that it is being mapped so I created an image with randomly colored tiles like this.

When put on a cylinder (I’m sorry. I only have a cylinder made in .babylon for now. I’ll try to share a plane next week if I could. That way, it will be easier to see the difference here), it looks like this.

image

I first, tried manipulating the scales and offsets on Babylon Sandbox and made it look like the one that I got from the server side rendering (just to see if modifying the values work).

Anyway, so now I have to change the values on the server side, but when I do, I get something like this

image

I am not sure if you remember the message I posted a few days ago. I mentioned that it looks like it only uses SOME specific size (width/height) of an image regardless of its size.

It looks like even whatever the offsets/scales are, it only uses the squared area…

Any idea what might be wrong…?