raananw/babylonjs-webpack-es6

Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely.

Babylon.js, webpack and es6 modules

A Babylon.js sample project using typescript, latest babylon.js es6 core module, webpack 4 with webpack dev server, hot loading, eslint, vscode support and more.

Before getting started

This is a basic demo using Babylon's core module only. It is based on the Getting started guide at the documentation page. A lot of the engine's features are not covered here. I will slowly add more and more projects and more examples.

If you have any questions, you are very much invited to the Babylon.js forum where I am hanging around almost daily.

Getting started

To run the basic scene:

1. Clone / download this repository
2. run npm install to install the needed dependencies.
3. run npm start
4. A new window should open in your default browser. if it doesn't, open http://localhost:8080
5. ????
6. Profit

Running npm start will start the webpack dev server with hot-reloading turned on. Open your favorite editor (mine is VSCode, but you can use nano. we don't discriminate) and start editing.

The entry point for the entire TypeScript application is ./src/index.ts. Any other file imported in this file will be included in the build.

To debug, open the browser's dev tool. Source maps are ready to be used. In case you are using VSCode, simply run the default debugger task (Launch Chrome against localhost) while making sure npm start is still running. This will allow you to debug your application straight in your editor.

Loading different examples

The ./src/scenes directory contains a few examples of scenes that can be loaded. To load a different scene change the import in ./src/createScene.ts to the scene you want to load.

More and more scenes will be slowly added.

Note - the build process will be very slow if you keep all scenes for production. To speed up the build process, remove all scenes except for the one you want to build.

WebGPU? yes please

Open the URL in a webgpu-enabled browser and add "?engine=webgpu" to the URL. If you want to add a different scene, add it as a query parameter: http://localhost:8080/?scene=physicsWithAmmo&engine=webgpu.

Running validation tests

It is possible to run validation tests to the scenes using playwright. To run the tests, run npm run test:visuals. This will run the tests in headless mode. To configure the tests see the /tests/ directory, and the validation.spec.ts file.

To generate the snapshots after adjusting the tests you can run npm run test:visuals -- --update-snapshots. This will auto-generate the snapshots for the tests.

Unit tests

To run the unit tests, run npm run test:unit. This will run the tests in headless mode. To add new tests, add a file anywhere in the source folder, called FILENAME.unit.spec.ts. The tests will be automatically picked up by jest.

What else can I do

To lint your source code run npm run lint

To build the bundle in order to host it, run npm run build. This will bundle your code in production mode, meaning is will minify the code.

Building will take some time, as it will build each sample (and create a different module for each). If you want to speed up the process, define the scene you want to render in createScene.ts (you can see the comment there)

What is this

That's an abstract question! What is which one of those wonderful things?

Babylon.js is the world's leading WebGL engine that starts with a 'b'. You should give it a try and leave those other numbers and letters behind. To read more about it and see some amazing samples, go to the Babylon.js website, Babylon's Playground or Babylon's documentation.

The rest? You should know already, this is why you are here.

What is covered

• Latest typescript version
• Simple texture loading (using url-loader)
• dev-server will start on command (webpack-dev-server)
• A working core-only example of babylon
• Full debugging with any browser AND VS Code
• (production) bundle builder.
• eslint default typescript rules integrated

It takes too long to build

To speed up production build time remove all of the scenes except for the one you want to build. This project is meant as a way to show different ways to use Babylon.js and not as a way to efficiently build a production-ready application.

babylonjs-webpack-es6's Issues

New Feature: Add support for shader imports

Hi 👋

Apologies if this is already supported and I missed it!
Do you think it would be worth adding support for shader code imports?

I'm happy to do it with some support on getting it with the right structure.

In my project I:

Created a folder in src/glsl for the shaders.
Currently each effect is a subfolder and includes the vertex and fragment shaders if necessary (e.g. src/glsl/effect/vertex.glsl).

Added this to the webpack.common.js config:

{
  test: /\.(glsl|vs|fs)$/,
  loader: 'ts-shader-loader',
  exclude: /node_modules/,
},

Still had to add the glsl.d.ts file to the src/glsl folder, containing:

declare module '*.glsl' {
  const value: string;
  export default value;
}

---

Let me know what you think

CVE-2023-28154

just got pinged by github in my repo
https://nvd.nist.gov/vuln/detail/CVE-2023-28154

i guess it means upgrade webpack?

[Feature Request] Test structure

This repo saved me a lot of time setting a new project, thank you so much for your efforts.

I think the only step missing to have the perfect template repo is the test structure.

I added tests to my private fork but it doesn't look very good, maybe someone with more experience with typescript would be able to come with a proper solution.

Invalid Host header

When running this in a container, within docker compose, and then hitting the container endpoint from another container, I get this error:

Invalid Host header

I guess this is a webpack thing?

can we add webgpu simplex noise example?

https://github.com/stegu/psrdnoise/blob/main/src/psrdnoise3.wgsl

high file size

I have a babylon project with a webpack config which is very similar to yours but when i'm compiling files to dist, my babylonBundle.js is strangely heavier than it have to be. (4.9 Mo).
Do you have an idea of this ?

webpack.common.js :

const path = require('path');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');

// App directory
const appDirectory = fs.realpathSync(process.cwd());

module.exports = {
    entry: {
        app: path.resolve(appDirectory, "src/index.ts"),
    },
    output: {
        filename: 'js/babylonBundle.js',
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [{
                test: /\.(js|mjs|jsx|ts|tsx)$/,
                loader: 'source-map-loader',
                enforce: 'pre',
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
            },
            {
                test: /\.(png|jpg|gif|env|glb|stl|obj|mtl)$/i,
                use: [{
                    loader: 'url-loader',
                }, ],
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            inject: true,
            template: path.resolve(appDirectory, "public/index.html"),
        }),
        new CopyPlugin({
            patterns: [
                { from: 'assets', to: 'assets' },
            ],
        }),
    ],
    // Just for ammo
    node: {
        fs: 'empty'
    }
}

Cannot Compile

Here is what I get with the fresh clone:

tests

Error: A snapshot doesn't exist at /Users/johndavis/repo/dev/monorepo/root/babylonjs-webpack-es6/tests/validation.spec.ts-snapshots/Render-Default-with-WebGPU-1-chromium-darwin.png, writing actual.

65 | });
66 | // await page.waitForFunction(() => (window as any).renderCount === scene.renderCount || 1, { timeout: 5000 });

67 | await expect(page).toHaveScreenshot({
| ^
68 | timeout: 0,
69 | });
70 | expect(testInfo.stderr).toHaveLength(0);

at /Users/johndavis/repo/dev/monorepo/root/babylonjs-webpack-es6/tests/validation.spec.ts:67:7

scene.beginAnimation is not a function (with LoadModelAndEnvScene)

Adding
import "@babylonjs/core/Animations/animatable"
to scenes/loadModelAndEnv.ts
fix the error:
Uncaught runtime errors:
ERROR
scene.beginAnimation is not a function
TransitionTo@http://localhost:8080/js/babylonBundle.js:4178:33
_maintainCameraAboveGround@http://localhost:8080/js/babylonBundle.js:8816:95
./node_modules/@babylonjs/core/Behaviors/Cameras/framingBehavior.js/attach/this._onAfterCheckInputsObserver<@http://localhost:8080/js/babylonBundle.js:8641:18
notifyObservers@http://localhost:8080/js/babylonBundle.js:99182:49
_checkInputs@http://localhost:8080/js/babylonBundle.js:15652:43
_checkInputs@http://localhost:8080/js/babylonBundle.js:17520:15
_checkInputs@http://localhost:8080/js/babylonBundle.js:14730:15
update@http://localhost:8080/js/babylonBundle.js:15640:14
render@http://localhost:8080/js/babylonBundle.js:121575:35
./src/index.ts/babylonInit/<@http://localhost:8080/js/babylonBundle.js:3541:15
_renderFrame@http://localhost:8080/js/babylonBundle.js:32496:13
_renderLoop@http://localhost:8080/js/babylonBundle.js:32523:26
./node_modules/@babylonjs/core/Engines/thinEngine.js/runRenderLoop/this._boundRenderFunction@http://localhost:8080/js/babylonBundle.js:35252:52

Stopped compiling at 6.40 (I believe)

After upgrading to the latest 6.40

Can we enable discussions on this repo?

TypeError: this.bjsAMMO.btSoftBodyRigidBodyCollisionConfiguration is not a constructor

Hey there!

First of all thank you for your Babylon starter template, really appreciate that.

Everything works nice but if I got to: http://localhost:8080/?scene=physicsWithAmmo it throws an error:

It seems to have problems initialising ammo but I still don't know why.
Do you have any ideas?

Working on chrome on a mac.

Cheers,
Florentin

Lol, what am I doing wrong?

If I try to add thin instances here:

babylonjs-webpack-es6/src/scenes/defaultWithTexture.ts

Line 74 in 4fa2ea5

sphere.position.y = 1;

ie
sphere.position.y = 1;
const matrix = Matrix.Translation(-2, 2, 0);
const idx = sphere.thinInstanceAdd(matrix);

Then I get an error:
Uncaught (in promise) TypeError: sphere.thinInstanceAdd is not a function
at DefaultSceneWithTexture. (defaultWithTexture.ts:76:28)
at Generator.next ()
at src_scenes_defaultWithTexture_ts.babylonBundle.js:32:71
at new Promise ()
at __awaiter (src_scenes_defaultWithTexture_ts.babylonBundle.js:28:12)
at DefaultSceneWithTexture.createScene (defaultWithTexture.ts:24:25)
at index.ts:38:43
at Generator.next ()
at fulfilled (createScene.ts:25:3)

websocket port

when running the dev server thru a reverse proxy, can we get the refresh websocket to derive it's port by looking at the navigation object url?

add support for in browser jest tests along w/ an example test