raananw / babylonjs-webpack-es6 Goto Github PK

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

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.

Here is what I get with the fresh clone:

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

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

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

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?

After upgrading to the latest 6.40

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

If I try to add thin instances here:

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)

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'
    }
}

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

i guess it means upgrade webpack?

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?