Create Custom Build of BJS?

Questions
21

All I did was create a custom build by going to that es6Modules folder that David pointed me to.

I used this code based off the other files in that folder:

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { Vector3 } from "@babylonjs/core/Maths/math";
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";


import "@babylonjs/core/Materials/standardMaterial";
import "@babylonjs/core/Bones/boneIKController";

import "@babylonjs/core/Materials/Textures/texture"
import "@babylonjs/core/Materials/effect";
import "@babylonjs/core/Materials/materialDefines";
import "@babylonjs/core/Misc/typeStore";

// Required side effects to populate the Create methods on the mesh class. Without this, the bundle would be smaller but the createXXX methods from mesh would not be accessible.
import "@babylonjs/core/Meshes/meshBuilder";

and ran the command:
npx webpack

It generated a file that I’ll try to attach here.

I then downloaded the default scene from the PG and swapped out my build to get that error creating the engine.

edit: it doesn’t appear that I can attach the file.

22

I’m almost at the point where I hand delete all the stuff I don’t need in babylon max.

Edit: Nope. That file is scary. LOL.

23

Don’t hand delete!! I got something running.

–8<–8<–8<–8<–8<–8<–8<–8<–:scissors:
deleted files and put in repo
–8<–8<–8<–8<–8<–8<–8<–8<–:scissors:

edit: see github repo below - easier to copy from and verify/improve.

1 Like
24

Change custom.ts to this and it’s 1.28 MB on disk:

import "@babylonjs/core/Meshes/meshBuilder";
// export { Engine, Scene, FreeCamera, MeshBuilder, HemisphericLight, Vector3 } from '@babylonjs/core';
export { Scene } from '@babylonjs/core/scene';
export { Engine } from '@babylonjs/core/Engines';
export { FreeCamera } from '@babylonjs/core/Cameras';
export {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
export { HemisphericLight} from '@babylonjs/core/Lights/hemisphericLight'
export { Vector3 } from '@babylonjs/core/Maths/math.vector';
25

If you decide to go with rollup - I put up a sample repo working with CustomMaterial as well. The bundled file size was 1.2MB with core and materials. Would be curious if you can reduce the size more - here is the repo:
brianzinn/babylon-ssg-rollup (github.com)

1 Like
26

This is a big help. Thanks Brian!

1 Like
27

After I was able to get a custom version built with Brian’s rollup version, I was able to get the webpack version working with the following files.

my custom.ts file that I place in the Babylon.js/tests/es6Modules folder

import "@babylonjs/core/Meshes/meshBuilder";
import "@babylonjs/core/Loading/Plugins/babylonFileLoader";
import '@babylonjs/core/Meshes/thinInstanceMesh';
// export { Engine, Scene, FreeCamera, MeshBuilder, HemisphericLight, Vector3 } from '@babylonjs/core';
export { Scene } from '@babylonjs/core/scene';
export { Engine } from '@babylonjs/core/Engines';
export { FreeCamera } from '@babylonjs/core/Cameras';
export {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder';
export {Mesh} from '@babylonjs/core/Meshes/mesh';
export {SubMesh} from '@babylonjs/core/Meshes/subMesh';
export {TransformNode} from '@babylonjs/core/Meshes/transformNode';
export {VertexBuffer} from '@babylonjs/core/Meshes/buffer';
export {InstancedMesh} from '@babylonjs/core/Meshes/instancedMesh';
export {GroundMesh} from '@babylonjs/core/Meshes/groundMesh';
export { HemisphericLight} from '@babylonjs/core/Lights/hemisphericLight'
export { DirectionalLight} from '@babylonjs/core/Lights/directionalLight'
export { Color3, Color4 } from '@babylonjs/core/Maths/math';
export { Quaternion, Matrix, Vector2, Vector3, Vector4 } from '@babylonjs/core/Maths/math.vector';
export { Axis, Space } from '@babylonjs/core/Maths/math.axis';
export { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
export { Texture } from '@babylonjs/core/Materials/Textures/texture';
export { Skeleton } from '@babylonjs/core/bones/skeleton';
export { Bone } from '@babylonjs/core/bones/bone';
export { BoneIKController } from '@babylonjs/core/bones/boneIKController';
export { AssetsManager } from '@babylonjs/core/misc/assetsManager';
export { Observable } from '@babylonjs/core/misc/observable';
export { PointerEventTypes } from '@babylonjs/core/events/pointerEvents';
export { StandardMaterial } from '@babylonjs/core/materials/standardMaterial';
export { MultiMaterial } from '@babylonjs/core/materials/multiMaterial';
export {FresnelParameters} from '@babylonjs/core/materials/fresnelParameters';
export {SolidParticleSystem} from '@babylonjs/core/particles/solidParticleSystem';
export {BoundingInfo} from '@babylonjs/core/culling/boundingInfo';
export {Tools} from '@babylonjs/core/misc/tools';
export { Animation } from "@babylonjs/core/Animations/animation";
export { CustomProceduralTexture } from '@babylonjs/core/materials/textures/procedurals/customProceduralTexture';
export { PickingInfo } from '@babylonjs/core/collisions/pickingInfo';

export { CustomMaterial } from '@babylonjs/materials/custom/customMaterial';

and the webpack.config.js file (basically just deleted tests from entry section added library:“BABYLON” to the output section)

const path = require("path");
const config = require("../../Tools/Config/config");

module.exports = {
    context: path.resolve(__dirname),
    entry: {
        custom: path.resolve(__dirname, 'custom.ts')
    },
    output: {
		library: "BABYLON",
        filename: '[name].js',
        path: config.computed.tempFolder + '/testsES6Modules'
    },
    devtool: 'none',
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader'
        }]
    },
    mode: "production"
};

in the Babylon.js/tests/es6Modules folder run:

npx webpack

when that is finished there should be custom.js file in Babylon.js/.temp/testsES6Modules folder.

This custom.js file is 1920KB compared to the babylon.js + babylon.customMaterial.js file I was using which is 3306KB + 49KB. The custom.js file that I created with rollup is 2056KB after running it through uglifyjs with just the --compress option.

2 Likes