Gltf loader in Baylon js (Blender 2.8)

Hi there

I downloaded Blender 2.8 with the new GLTF exporter. Now my babylon.js script won’t open the 3d model anymore. If i drop the new gltf model in the three.js viewer it looks fine. An old model made with blender 2.79 works fine also in babylon.js. The new GLTF (separate) file does not.

I don’t know how to share the whole script within this forum, thats how i load:

BABYLON.SceneLoader.loggingLevel = BABYLON.SceneLoader.DETAILED_LOGGING;
BABYLON.SceneLoader.Append(String(x3), String(x4), scene, function (scene) {

that’s what the browser says:

babylon.js:16 WebGL: INVALID_OPERATION: useProgram: program not valid
e.setProgram @ babylon.js:16
e.bindSamplers @ babylon.js:16
e.enableEffect @ babylon.js:16
e._preBind @ babylon.js:16
t.render @ babylon.js:16
t.render @ babylon.js:16
e.renderUnsorted @ babylon.js:16
e.render @ babylon.js:16
e.render @ babylon.js:16
t._renderForCamera @ babylon.js:16
t._processSubCameras @ babylon.js:16
t.render @ babylon.js:16
(anonymous) @ viewer.js:353
e._renderLoop @ babylon.js:16
requestAnimationFrame (async)
e.QueueNewFrame @ babylon.js:16
e.runRenderLoop @ babylon.js:16
(anonymous) @ viewer.js:352
f @ babylon.js:16
(anonymous) @ babylon.js:16
Promise.then (async)
(anonymous) @ babylon.js:16
f @ babylon.js:16
p @ babylon.js:16
XMLHttpRequest.send (async)
e.send @ babylon.js:16
s @ babylon.js:16
p @ babylon.js:16
e.LoadFile @ babylon.js:16
g @ babylon.js:16
e._loadData @ babylon.js:16
e.Append @ babylon.js:16
(anonymous) @ viewer.js:131
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2

hope somebody can help me, thanks

Pinging @bghgary
can you share your glb file?

Sorry, new users can not upload attachments… :confused:

wetransfer?

You should be able to upload now else any kind of online storage would do :slight_smile:

thanks!

the problem was solved somewhen during the night. It was a Blender 2.8 Problem. I opened a new File, appended all collections of the old file -> exported it -> and babylon.js was able to read it again… :sunny:

sadly i’m just stumbling from problem to problem. Now it worked the whole morning, but it failed again this afternoon. Now it just does not want to load the file. The File directory is correct.

babylon.js:16 BJS - [19:49:13]: Unable to load from test.gltf: Error in onSuccess callback

I wanted to do a playground with it, but i can’t load the file there because it “has been blocked by CORS policy” As it not giving me the same message on my file, i don’t think thats the problem. Ihave tried it with different files, it never works. I don’t even know what to ask you, i have no clue whats the problem…

Hi @ueli, I can agree that hosting assets externally for use in babylon.js playgrounds is a bit of a headache. You can get by by using github as your asset host in combination with jsDelivr, however :slight_smile:

https://doc.babylonjs.com/resources/external_pg_assets

Looking at your error message, it seems to suggest that the onSuccess callback function has an error, and is unable to be properly interpreted.

I’d wager that your asset is being properly loaded, but the logic that executes after the asset is loaded is causing the issue here. Perhaps try running your scene without an onSuccess callback for your LoadAsset call, and see if the error continues to occur.
If you can setup a babylon playground, that would be a huge help in diagnosing what you’re running into.

2 Likes

thanks - it was something completely irrelevant. a function that was missing the referenced button in the html. I find it hard to debug, found the error again only by delete one part after the other until it worked again…

1 Like

i have a new problem:

Unable to load from textures/stmoritz_summer.gltf: Cannot read property ‘instancedArrays’ of undefined

what does “instancedArrays” mean? In the doc it says “Defines if instancing is supported”

I checked: my browser supports webgl2

https://doc.babylonjs.com/api/classes/babylon.enginecapabilities#instancedarrays

var canvas = document.getElementById(“canvas”);
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }, true );

          var scene = new BABYLON.Scene(engine);


          scene.debugLayer.show();


          BABYLON.SceneLoader.loggingLevel = BABYLON.SceneLoader.DETAILED_LOGGING;
          alert("should be loading 1/2");
          BABYLON.SceneLoader.Append("textures/", "stmoritz_summer.gltf"), scene, function (scene) {
            alert("should be loading 2/2");

appreciate any help

Can you share the file you are trying to load?
Pinging @bghgary

It’s commicioned work, so a little problematic. i could share it by private message. But i don’t think the file is the problem - it works fine within the sandbox.

I got the feeling that the problem could actually be in the html file with the linked libraries, i will try to find out whats wrong and keep you posted if i find out.

(I changed the html file to this: you can choose your model now with a html form, this will load the corresponded csv file which will be transformed into variables with jquerry. Then babylonjs starts and loads a gltf file from the source defined by those variables. Also defined through variable are: how many cameras, cameras positions & model name)

1 Like

i’m not getting further. it acts as it would just not running the append function:

it loads the files, the loading screen appears - but the second alert never shows up and the canvas stays empty.

          BABYLON.SceneLoader.loggingLevel = BABYLON.SceneLoader.DETAILED_LOGGING;
        alert("should be loading 1/2");
        BABYLON.SceneLoader.Append("textures/", "filename.gltf"), scene, function (scene){
        alert("should be loading 2/2");

is it possible that the files get loaded but it does not “play” the function?

Can you repro the issue in the playground? It is tough to help without seeing the actual code running :slight_smile:

omg just when i was copy pasting the stuff over i realised that:

BABYLON.SceneLoader.Append(“textures/”, “filename.gltf”), scene, function (scene){

must be

BABYLON.SceneLoader.Append(“textures/”, “filename.gltf”, scene, function (scene){

now it works! sorry & thanks, sometimes it’s just helpful to ask anyway

1 Like