BabylonJs Editor: Importing Meshes, working lifecycle

@julien-moreau

When working with meshes in the BabylonJS editor, there are some issues when you load, save and reload projects. This is a forum thread mean to capture the behavior for the different mesh types. I’ve spent a lot of time with them today and I wanted to capture my experience here. Some formats (like .babylon) behave better than others, but they are all a bit quirky. I will break this into a post-per-format-test with a summary at the end of all three formats I am testing.

Test Meshes:


Methodology

Importing: Assume I am clearing the scene with Project > New Project each time I do an import action.
Reloading: I select what I think is the most stable import and close and reopen the editor.
Web Project. I use the web project template and scaffold the project that way. You can see the results in the GitHub repo I post with each mesh-type and run it yourself.

Minor Related Bug:

BEcause I used the New Project option quite a lot, and that also does throw

```
BJS - [20:02:22]: Unable to load from file:scenee8353b9d-43b0-4b5d-97b0-3372b41483f0.babylon: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse
```

Which causes the debugger to pause, but doesn’t otherwise negatively affect the editor.


Test 1: Babylon File

Expected Dude.babylon:
image

(clearing/ new scene in between each action)

Importing

1. Frist action: Drag .babylon file right in:

It’s not immediately obvious that the textures needed to be added separately. Some other filetypes don’t require this. You can drag the textures in later, and clicking the refresh on the Materials Viewer will update the materials, but the scene will be out of sync. there’s not really a way to ‘refresh’ the scene here, so it looks wrong unless you know what is happening.

2. Second Action: Drag all files in simultaneously:



This mostly works, with exceptions:

  1. The materials view didn’t update quite right:

    Clicking Refresh doesn’t fix this, but clicking the individual material does, thankfully seem to help.
  2. There is an error thrown in the console.
    Uncaught (in promise) TypeError: Cannot read property 'name' of null at preview.html:101 is thrown in the console.
  3. Textures get mysteriously duplicated. (see the 3.jpg). This also happens when reloading a saved file too (see below)
  4. Something strange is happening with the cameras. I think there’s one in the Dude.babylon file, but somehow it is always there, and there’s always extra cameras. At the time of importation there were 3 cameras. I tried deleting some to get back down to one camera, now it seems like there’s always many cameras, and I am fighting them.

3. Third Action: Drag textures and THEN model in that order:

Reloading Editor Project

I chose the final state to save and reload.

  1. save project
  2. close editor.
  3. doubleclick the scene.editorproject

    Mostly Success. The mesh loads completely correctly, and even the materials viewer is in the right state now.
    image

What goes wrong:

  1. A seemingly non-crashing error is in the console:
    Uncaught (in promise) TypeError: Cannot read property 'name' of null at preview.html:101
    This is the same error from before in steps 2 and 3 of importing.

  2. Sometimes the textures get mysteriously duplicated when you save and reload.


    In this screenshot I drug in the .babylon file once. and there was one space.dds. The 3.jpg showed up immediately, and the space.dds after I saved and reloaded.

  3. those crazy temp files are getting written when you save them

    This happens when you save/reload/save.

In a Web Project

Loads, no errors (awesome!)

Here is the repo with all of the test results:

Test 2: Solar System GLBFile

Expected:
image

Importing

Dragging it right in basically works, the animation seems to be working in the preview.
solar-system

Here’s what didn’t work:

  • the materials are mostly all black for some reason. This isn’t the same as the broken-image thing. They are just black.
  • animation does not run at all in the ‘editor preview’ after clicking Play

Reloading Editor Project

This unfortunately doesn’t work at all, here are the steps and logs:

  1. I save the scene. I notice that none of the textures are output into the scene folder. I assume that should be right?
  2. close the editor
  3. Double click the just-saved project
  4. there is a critical failure

Here is the log:

Uncaught (in promise) TypeError: Cannot set property 'invertY' of null
    at RawTexture../Materials/Textures/texture.ts.Texture.serialize (node_modules/babylonjs/babylon.max.js:66978)
    at eval (build/src/editor/scene/scene-manager.js:66)
    at Array.forEach (<anonymous>)
    at Function.SceneManager.SaveOriginalObjects (build/src/editor/scene/scene-manager.js:66)
    at Function.eval (build/src/editor/scene/scene-loader.js:220)
    at step (build/src/editor/scene/scene-loader.js:32)
    at Object.eval [as next] (build/src/editor/scene/scene-loader.js:13)
    at fulfilled (build/src/editor/scene/scene-loader.js:4)

Failure in `babylon.max.js

In a Web Project

Since I cannot reload my saved project, I will attempt to make the web project in the same gesture as importation, so I will start over with a new scene and re-import.

this…kinda works.

  1. open editor
  2. Project > New Project...
  3. Drag in the solar_system.glb file
  4. Export Project Template
  5. yarn install && yarn build && yarn run webserver

  • No textures
  • No animations
  • Interestingly no breaks otherwise, the camera works.

Here is the repo with all of the test results:

Test 3: Alien GLTF File

Expected:
expected-alien

Importing

  1. Drag it into the editor
    image
glTFLoader.ts:1392 Uncaught (in promise) Error: /bufferViews/67: Invalid typed array length: 804
    at eval (glTFLoader.ts:1392)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 1)
    at async Promise.all (index 0)

Trace:

	(anonymous)	@	glTFLoader.ts:1392
Promise.then (async)		
(anonymous)	@	glTFLoader.ts:312
Promise.then (async)		
./glTF/2.0/glTFLoader.ts.GLTFLoader._loadAsync	@	glTFLoader.ts:259
(anonymous)	@	glTFLoader.ts:254
Promise.then (async)		
./glTF/2.0/glTFLoader.ts.GLTFLoader.loadAsync	@	glTFLoader.ts:248
(anonymous)	@	glTFFileLoader.ts:487
Promise.then (async)		
./glTF/glTFFileLoader.ts.GLTFFileLoader.loadAsync	@	glTFFileLoader.ts:484
(anonymous)	@	sceneLoader.ts:780
dataCallback	@	sceneLoader.ts:388
reader.onload	@	tools.ts:1113
load (async)		
./Misc/tools.ts.Tools.ReadFile	@	tools.ts:1111
./Loading/sceneLoader.ts.SceneLoader._loadData	@	sceneLoader.ts:453
./Loading/sceneLoader.ts.SceneLoader.Append	@	sceneLoader.ts:769
(anonymous)	@	scene-loader.ts:134
step	@	scene-loader.js:32
(anonymous)	@	scene-loader.js:13
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
fulfilled	@	scene-loader.js:4
Promise.then (async)		
step	@	scene-loader.js:6
(anonymous)	@	scene-loader.js:7
__awaiter	@	scene-loader.js:3
SceneLoader._Prepare	@	scene-loader.ts:80
(anonymous)	@	scene-loader.ts:66
(anonymous)	@	dialog.ts:28
(anonymous)	@	w2ui.js:8623
dispatch	@	jquery.js:5237
elemData.handle	@	jquery.js:5044

image

Reloading Editor Project

N/A

In a Web Project
–N/A

I didn’t bother to make a repo for this because I can’t load it in the first place.

Summary

  • an import Mesh button might be useful, so the editor ‘tells you’ it can import meshes. I had to poke around to figure that out the Drag n’ Drop as a new user. There is also not yet docs on this ( but I am earnestly working on that myself! )

  • The most reliable format is the .babylon format, but there’s still some unclarity to a new user and the materials are doing some weird stuff

  • The GLB format is the most dangerous because it ‘seems’ to work up front, but the saved project is basically corrupt, and can’t be worked on any further.

  • more feedback related to the import would be great. Some broad ideas would be an import summary/import progress. These main are the questions I had using this:

    • which textures succeeded and which failed ?
    • did sounds also import (they did with the UFO.glb) ?
    • animations? (what should I expect to see in the preview and scene.)
    • Am I actually frozen or is it still going?
  • You need to have the ability to exclude some things you import. If I want a mesh, I may not want the attached animations or cameras. My thinking is that when you import, there needs to be an intermediate screen that can do some validation/verification as well as trim out unneeded things at the user’s discretion. Its far to easy to drag in the wrong thing and insta-corrupt the scene. I understand the desire for a quick workflow, but the pit of failure here is way too deep.

@the-simian now focusing on it :slight_smile:

1 Like

I expect this to take some time, honestly just writing all this up also took some time. I expect this is a hard job, and probably one of the more complex parts of the editor.

I am happy to retest anything or other formats as well if you want, @julien-moreau