Texture on imported mesh mapped incorrectly

Hi~!

I am using the Dude.babylon sample model provided in the Babylon Mesh Library page.

When dragging these assets to

Sandbox, it shows all the colors correctly like this.

However, when running codes on my server-side project,

import * as BBJS from 'babylonjs'

export class ModelSceneBuilder {
    protected canvas: any;
    protected engine: any;
    protected scene: any;
    protected camera: any;

    constructor(canvas:any) {
        this.canvas = canvas
    }

    async init() {
        this.engine = new BBJS.Engine(this.canvas, true, { preserveDrawingBuffer: true, stencil: true })
        this.scene = new BBJS.Scene(this.engine)
        this.camera = new BBJS.FreeCamera('cam1', new BBJS.Vector3(50, 180, 150), this.scene)
        this.camera.setTarget(BBJS.Vector3.Zero())
        this.camera.attachControl(this.canvas, false)
        const light = new BBJS.HemisphericLight('light1', new BBJS.Vector3(0, 1, 0), this.scene)
        light.intensity = 0.4

        this.engine.runRenderLoop(() => {
            this.scene.render()
        })
    }

    async loadModel(rootURL:string, fileName:string, textureSrc:string) {
        const isPlugInAvailable = BBJS.SceneLoader.IsPluginForExtensionAvailable(".gltf")
        console.log('Plugin Availability For GLTF ====>', isPlugInAvailable);

        return new Promise((resolve, reject) => {
            BBJS.SceneLoader.ImportMesh('', rootURL, fileName, this.scene, (meshes:any) => {

                setTimeout(() => {
                    resolve(meshes)
                }, 1000)

            })
        })
    }
}

Screen Shot 2022-08-03 at 6.05.46 PM

textures are mapped totally incorrectly.

As far as I know, even when the size of the texture is wrong, it should still be mapped on the mesh, but with different ratio. This one though, is mapped totally off :frowning:

Anybody has experienced anything like this?

Hello! I see in your project you’re checking the GLTF plugin, but the Dude file is a .babylon… did you convert it to GLTF for your local project? :slight_smile:

Oh~ I’m sorry. Were you referring to

  const isPlugInAvailable = BBJS.SceneLoader.IsPluginForExtensionAvailable(".gltf")
  console.log('Plugin Availability For GLTF ====>', isPlugInAvailable);

this part?

I used it for testing GLTF import and forgot to remove it, but I only used it for testing if GLTF plugin is correctly implemented.

So I’m trying to import a .babylon based model and it was imported as expected, but the textures coming with it are mapped incorrectly :frowning:

Got it! Can you share the entire project with us?

Oh, hmm… Unfortunately, I am not the owner of the project and it is on private so I cannot share the whole codes with you :frowning:

But hmm… it’s weird that it works on Playground, but just not on the server side project of that I am working on

Yep pretty weird, that’s why I wanted to check the project if possible :frowning: Do you think you could create another project and have just the code that imports the babylon there? Having a simpler project is even more efficient for debugging :slight_smile:

Oh, right right. Why didn’t I think of that. I shall try it for debugging anyway. Let me recreate a problem within a smaller sized project then share :smiley:

1 Like

Here! Sorry I am late. I was struggling with importing .gltf discussing on the other page on the forum T_T

running on node version 16.16.0

npm install

npm run dev

// go to

http://localhost:3000/api/Dude

oh, oops um loading from https://github.com/DOEHOONLEE/babylonTester/blob/main/asset/ as a rootURL is causing cross origin error… Do you mind uploading it online and use it as a remote asset somehow?

I don’t know how else I can share it with you other than uploading on github :frowning:

I’m trying to run your project but I’m getting this error :sweat_smile:
image

oh, I removed the file data, but forgot to remove the import. I aplogize for the confusion.

The working URL would be http://localhost:3000/api/Dude

and then, what you would have to is to

  • add some working remote url to the .babylon or .gltf(.gltf is currently not loadable… I am discussing this issue on here)

speaking of working example of babylon model, well, I could have used it from Babylon lol

  • comment out .loadModelFromBase64() (I tried different methods hoping that one would work…)

  • use Babylon.loadModel(rootURL, gltfModel) instead

so after these, it should look like

const rootURL = 'https://playground.babylonjs.com/scenes/Dude/'
// filename should be the 'Dude' from the url query 
const babylonModel = `${fileName}.babylon`
...
await Babylon.loadModel(rootURL, babylonModel)

and hit http://localhost:3000/api/Dude

I just fixed the code on github. git pull may do the job too

I tried pulling but I’m still getting the same error…

image

I’m sorry. Could you try removing import { people } from '../data' and start with npm run dev

Did it work without errors?

It builds but nothing shows up. Any chance you can make a simpler project instead? Or we’ll take a long time just trying to get the page :sweat_smile:

Oh, yeah~ T_T That’s what I experienced too. It did not show anything hmm

Uh… I wanted to reproduce as similar environment as possible, but alright, let me make it a simpler node project and share with you.

I’ll try to make one and share on this discussion by the end of the weekend.

Thank you for your help!

No worries! I’m glad to help.

I am not sure if this topic is somewhat related to the problem I was having in this discussion, but just in case.

What I did was

  • git clone clone https://github.com/akira-cn/node-canvas-webgl.git

  • modify test/babylonjs.js like below

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)

I don’t know what changed, but since I upgraded babylon version to 5.22.1, the whole model fails to load not just the textures :frowning:

Let’s wait for a repro so we can understand your setup better :slight_smile:

Thanks for waiting! Here’s the repo!

DOEHOONLEE/babylonNodeJS (github.com)

Let me know if it works fine.

Closing to keep the conversation in Running on server throws no-plugin error - #72 by DOEHOONLEE without dupplicate.