Ammo.js webpack issues

Questions
1

Hi folks,

I’ve been following the ES6 docs for setting up a physics plugin with Babylon, However the AmmoJSPlugin keeps giving me an error

TypeError: Ammo.btCompoundShape is not a constructor

Heres my webpack config. At the bottom I’m using the ProvidePlugin like in the docs to point Ammo to ammo.js in the npm modules folder, but it wont work with any combination of configuration I can think of.

const webpack = require('webpack')
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, "src/index.js"),
    output: {
        filename: "build.js",
        path: path.join(__dirname, "dist"),
    },
    module: {
        rules:[{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        },
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"},
            ]
        },
        {
            test: /\.png$/,
            exclude: /assets/,
            loader: "url-loader"
        },
        {
            test: /\.(gltf|png|bin|glb)$/,
            loader: "file-loader",
            options: {
                name: 'assets/[name].[hash:7].[ext]'
            }
        },
        {
            test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            use: [{
              loader: 'file-loader',
            }]
        },
        {
            test: /\.wasm$/,
            loader: 'wasm-loader'
        }]
    },
    optimization: {
        minimizer: [new UglifyJsPlugin({
            test: /\.js(\?.*)?$/i}
        )]
    },
    externals: [
        "fs"
    ],
    plugins: [
        new HtmlWebPackPlugin({
            template: path.join(__dirname, "src/index.html")
        }),
        new webpack.ProvidePlugin({
            Ammo: 'ammo.js'
        })
    ]
}
2

The issue is that webpack-stream has no ProvidePlugin method. Here’s an example of this issue a and a solution I found on GitHub.

Galen

3

Thanks for the suggestion but that doesn’t appear to be the solution. The issue you found is with webpack-stream which intergrates webpack with gulp, and I’m not using gulp.

Just to test that ProvidePlugin is working correctly I used it to add babylon itself to all my modules and its working fine for importing babylon but ammo is still saying everything is not a constructor

new webpack.ProvidePlugin({
    BABYLON: '@babylonjs/core',
    Ammo: 'ammo.js'
})

I noticed webpack is giving a warning about type errors with asm.js which might give us another clue as to what is going wrong.

TypeError: asm.js type error: 'undefined' not found in local or asm.js module scope

4

Pinging @sebavan and @trevordev

5

Unfortunately Ammo does not seem to be as Webpack friendly as I thought :frowning:

So here you can :
npm install kripken/ammo.js

This will install ammo as an npm dependency from github as there is no up to date package.

Then in your webpack config, do not rely on providePlugin as it would push the wrapper and not the actual Ammo.

You can instead first disable fs to prevent webpack to fail due to fs dependencies. In your webpack config add the following:

    node: {
        fs: 'empty'
    }

Then in your code using Babylon, you can inject your ammo dependency relying on this:

import * as ammo from "ammo.js";
scene.enablePhysics(new Vector3(0,-10,0), new AmmoJSPlugin(undefined, ammo));

I will reflect this in the doc as I agree it is not obvious :slight_smile:

2 Likes
6

That seems to have done the trick. Adding this to the docs would be a great idea! That way the next poor soul doesn’t have to muck about trying to get this working.

Thanks a million @sebavan!

1 Like
7

I installed from npm i --save-dev kripken/ammo.js, added that node: { fs: 'empty' } and used the import statement described here. No luck, I get this in the import statement:

image
image1094×110 12.8 KB

Naturally, it suggest that I try to install type definitions though the obvious choice for types here doesn’t exist in npm.

8

There is not much we can do if they do not provide the typings, Could you not cast as any for this one ? I know it is not ideal but without typings, it does not leave a lot of options.

9

I turned off noImplicitAny but then received advice on casting to any which I wasn’t aware of. Thanks!

1 Like
10

i did exactly what you said and end up now with an error after using my webpacked app:

Uncaught TypeError: b.asm is undefined
_emscripten_bind_btSoftBodyRigidBodyCollisionConfiguration_btSoftBodyRigidBodyCollisionConfiguration_0 ammo.js:533
uC ammo.js:917
e babylon.js:16
Game game.js:39
App app.js:16
js index.js:3
Webpack 5
webpack_require
0
webpack_require


ammo.js:533:11
_emscripten_bind_btSoftBodyRigidBodyCollisionConfiguration_btSoftBodyRigidBodyCollisionConfiguration_0 ammo.js:533
uC ammo.js:917
e babylon.js:16
Game game.js:39
App app.js:16
js index.js:3
Webpack 5

If one wants to try it out:
https://github.com/to5ta/js_zero
the physics_controller branch…

Anyone has an idea or integrated the ammo engine sucessfully using webpack recently? :slight_smile:

11

i hard-copied the ammo.js from the dist/ in babylonjs-4.2 repo locally to my sources, bundling takes now very long but its kinda working for me currently…

If i understand this post right, its an issue caused by the most recent build of ammo?..

12

Yup, exactly, i ll try to have a way to integrate asap

1 Like
13

Did you try the latest ammo.js build from kripken/ammojs GitHub account ?

14

Yeah, i installed it through: npm i --save-dev kripken/ammo.js

15

Actually i forgot to update, babylonjs and babylonjs-loaders were on version 4.1.0, also file-loader and css-loader outdated. Updating them didnt change anything, see / try out this branch for reproduction.

Cannon package integration /injection works as described. (thanks for updating the documentation btw!)

Ammo still fails with the error described earlier, using the local copy of ammo still works.

Does anyone want to invest the time to clone the repo and run

npm install
npm run dev

and tell if the same error occurs?

btw. i wont be using physics now as i had a hard time building up a reasonable character controller that interacts with pyhsics…

16

@to5ta this is expected at the moment and will be fixed by the changes from the other thread

1 Like
17

allright then, happy coding :slight_smile:

1 Like
18

What problems are you having ?

I am currently using using the bullet kinematic character controller as the underlying backbone to the BABYLON.CharacterController script component. I works great :slight_smile:

2 Likes
19

thanks for mentioning, ill give it a try :slight_smile:

@MackeyK24 which one do you mean exactly? ^^

20

Do you mean this controller?

I kind of did the same approach, but it does not use an physics engine afaik, only basic raycasting and intersection stuff… but i think this topic is maybe worth starting a new thread eventually.

1 Like