BabylonJs Editor: Importing Meshes, working lifecycle

the-simian · June 9, 2019, 2:07am

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:

1. A Babylon File | (Post 1)
  | Dude.babylon
  | Taken From: https://www.babylonjs-playground.com/scenes/Dude/Dude.babylon
  | Asset: https://www.babylonjs-playground.com/scenes/Dude/0.jpg
  | Asset: https://www.babylonjs-playground.com/scenes/Dude/1.jpg
  | Asset: https://www.babylonjs-playground.com/scenes/Dude/2.jpg
  | Asset: https://www.babylonjs-playground.com/scenes/Dude/3.jpg
  | Expected: Babylon.js Playground
  | Reference Repo: GitHub - simiancraft/BabylonJs-Editor-Mesh-Test-Babylon: A repo to capture the work done from testing the importation of a .babylon file into the editor
1. a GLB File | (Post 2)
  | Solar System.glb
  | Taken From: https://www.babylonjs-playground.com/scenes/solar_system.glb
1. A GLTF File | (Post 3)
  | Alien.gtlf
  | Taken from: https://www.babylonjs-playground.com/scenes/Alien/Alien.gltf
  | Expected: https://www.babylonjs-playground.com/#WLDCUC#2
1. Summary | (Post 4)

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.

the-simian · June 9, 2019, 2:16am

Test 1: Babylon File

Expected Dude.babylon:

(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:

The materials view didn’t update quite right:

image.png817×349 35.6 KB

Clicking Refresh doesn’t fix this, but clicking the individual material does, thankfully seem to help.
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.

image.png1016×138 8.39 KB
Textures get mysteriously duplicated. (see the 3.jpg). This also happens when reloading a saved file too (see below)
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:

Literally, Identical results to Action #2, even the duplicated texture.

image.png1405×721 171 KB

Reloading Editor Project

I chose the final state to save and reload.

save project

image.png1046×429 101 KB
close editor.
doubleclick the scene.editorproject

image.jpg1704×752 164 KB

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

What goes wrong:

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.
Sometimes the textures get mysteriously duplicated when you save and reload.

image.png824×416 77.6 KB

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.
those crazy temp files are getting written when you save them

59163957-c8e62c00-8acc-11e9-85e4-61b67329192f.png971×185 57.7 KB
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:

the-simian · June 9, 2019, 3:23am

Test 2: Solar System GLBFile

Expected:

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

image.png1247×688 70.7 KB

Reloading Editor Project

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

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

image.png1138×416 35.4 KB

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.

open editor
Project > New Project...
Drag in the solar_system.glb file
Export Project Template
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:

the-simian · June 9, 2019, 4:33am

Test 3: Alien GLTF File

Expected:
expected-alien

Importing

Drag it into the editor

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

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.

the-simian · June 9, 2019, 4:43am

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.

julien-moreau · June 12, 2019, 7:36pm

@the-simian now focusing on it

the-simian · June 12, 2019, 9:45pm

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

julien-moreau · June 27, 2019, 5:55pm

@the-simian began and fixed some issues. I’m continuing

julien-moreau · January 15, 2020, 10:17am

@the-simian fixed all!!

Topic		Replies	Views
Working with the editor and importing mesh Questions	2	790	January 21, 2020
I'm having trouble importing mesh and animations from Blender into BabylonJS Questions	9	571	January 4, 2021
Load glTF/glb in Playground broken for BabylonJS v4.1.0, v4.0.3, v3.3 Bugs	14	1186	November 6, 2020
HEEEELP! Need help importing a .babylon mesh Questions	5	636	February 18, 2020
Scene Serializer (.babylonjs) with skeletons no longer works Bugs	11	665	March 25, 2022

BabylonJs Editor: Importing Meshes, working lifecycle

Test Meshes:

Methodology

Minor Related Bug:

Test 1: Babylon File

Importing

Reloading Editor Project

In a Web Project

Test 2: Solar System GLBFile

Importing

Reloading Editor Project

In a Web Project

Test 3: Alien GLTF File

Importing

Reloading Editor Project

Related Topics