Loading meshes fails when using Core

Questions
1

I’m trying to package my application using Webpack but face two errors I find somewhat hard to debug.

When not applying any form of tree shaking the distributable file becomes over 6,5mb large at the hands of the Babylon files. When I attempt to download the core package and include only the functionality I desire the loading of meshes fails. When reverting back to including the entire Babylon file it works as should be (parameters simplified for readability):

SceneLoader.ImportMesh('', `./path/`, "scene.gltf", this.scene, function(newMeshes){
				const root = newMeshes[0]; //Get root element				
					root.getChildMeshes().forEach(function(child){
						child.material = w;
					}.bind(this))
					root.scaling = new Vector3(0.05, 0.05, 0.05);
					root.setAbsolutePosition(new Vector3(
						v * Math.cos(x),
					-1,
					y);
				}.bind(this));

When using

import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders'

BABYLON.SceneLoader.ImportMesh()

this works fine. However, when using

import { SceneLoader } from "@babylonjs/core/"
import 'babylonjs-loaders'

BABYLON.SceneLoader.ImportMesh()

it fails. The set up of instantiating the engine and scene already work - it is merely the ImportMesh that doesn’t want to work. It gives me the error:

 Unable to import meshes from ./meshes/Table/scene.gltf: importMesh of unknown

My intuition would be that perhaps it is missing other files I need to import, but even when importing everything from the Meshes directory, which go unused may I add, this still fails.

Since I’m here whining anyway; I’m also facing the problem of tree shaking doing absolutely nothing for the overall size of the produced distributable (by Webpack); I was told tree shaking should prevent the entire Babylonjs library from being included, but that doesn’t appear to be happening.

2

If you move to the es6 (@babylonjs/core) package, you will also need to use the same version of @babylonjs/loaders instead of babylonjs-loaders

1 Like
3

That’s one incredibly swift reply. Yes, that was indeed my error here. Thank you kindly.

Could you be any chance also shed some light on why Webpack appears to still be including so much of the Babylon library? I am using the following core segments:

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { Vector3 } from "@babylonjs/core/Maths/math";
import { ShaderMaterial } from "@babylonjs/core/Materials/shaderMaterial";
import { SceneLoader, Color3 } from "@babylonjs/core/";
import "@babylonjs/loaders/glTF";

The distributable is still well over 6,5MB large and takes 40 seconds to package. Should I be worried or is that a consequence I should be expecting?

4

This is the result of the tree shaking support we have implemented. It will be improved in the future, but at the moment make sure to load all files from their corresponding file and not from @babylonjs/core alone (as you load SceneLoader and Color3), as this will result in loading the entire lib.

1 Like
5

Good point. The distributable reduces to around 5,4MB after having changed that. Still very large, but I suspect that’s the smallest it’ll get then.

6

that’s probably unminified and not zipped, right?

1 Like
7

Not zipped, but it is minified. Looking through the file almost all of it is Babylon related code.

Edit: turned out I had another component which did include the entire library. I’m really on an idiot-streak today. Now the file has been reduced to a single MB, which builds in less than 5 seconds.

1 Like
8

I am very happy to read :slight_smile: