Jump to content

Debugging and using Babylon.js with npm/webpack


Recommended Posts

Hi, just started working on my first Bablyon project. I'm planning a client/server model that will share some code between Node and the browser.

I've encountered a couple of pain points, and noticed there is no issues section on GitHub, so I'm guessing this is the proper place to discuss with devs?

The first is pretty major, the npm module uses a minified version of the source as its entry point, which is excruciating to debug! It's impossible to set breakpoints or sometimes to even work out which function is failing. Ideally the project would be distributed as unminified JavaScript that includes source maps. There is no reason to minify code for npm since it will ultimately be handled by the user's build tool (in production only!).

The other problem is that I'd like to use the `Vector3` class (and perhaps others) in my server code. To do so I must "pretend" that `window` and `navigator` exist in the global scope.

global.window = {};
global.navigator = {};
import { Vector3 } from 'babylonjs';

Ideally I'd like to do something like this:

import { Vector3 } from 'babylonjs/Math';

That is not possible since the unminified source is not supplied in the package, and if I understand correctly, does not use the node module system anyway. Since the file `babylon/src/Math` actually doesn't require access to `window` etc. this should be fine. It could potentially make sense to split `Vector3` into its own repo and have it as a dependency of babylon?

Is there any interest or discussion in this area? How do other people debug the minified code?

Link to comment
Share on other sites


we provide unminified version to debug: https://github.com/BabylonJS/Babylon.js/blob/master/dist/babylon.2.2.max.js

To get the best debugging experience, you can also reference manually all files:



Regarding math.js, why not just referencing it directly?



Link to comment
Share on other sites

Hi Dalkatosh, thanks for the response. My post above is really regarding the npm module structure, perhaps I should have posted it to bugs?


Great, thanks. I can access the unminified code via:

var BABYLON = require('babylonjs/babylon.max');
// or with ES import semantics
import BABYLON from 'babylonjs/babylon.max';

However, minifcation breaks convention for npm distributions, and provides no benefits to the library consumer. Normally `babylon.js` would be unminified and unconcatenated, with the entry point named as `main` in `package.json`. Babylon does not use module syntax internally. Each file just assigns its code to `window.BABYLON`. So currently it's not possible to maintain the file structure in the package. However simply providing the unminified code as the `main` file would be an improvement.


Regarding math.js, why not just referencing it directly?

`math.js` is not included in the npm module, and could not be imported in isolation due to lack of modules.

It is possible to use npm modules in TypeScript. There is an example  here.

I understand NPM support wouldn't be a high priority as a front end library, but build tools such as WebKit and and Browserify are quite popular these days.

Link to comment
Share on other sites

Delkatosh, great. sorry for the slow replies, it seems this website doesn't send email alerts for responses? I'm putting the project on hold for a few weeks, but it's definitely going to be using Babylon.js, so I'll look into it when I get back into it. I've been meaning to check out TypeScript for a while so I look forward to it.

Link to comment
Share on other sites

  • 2 weeks later...

Hello! Long time lurker, first time poster!

I wanted to jump in and say that I'm also interested in the outcome of this, and have read post from several other people asking for somewhat the same thing. The general idea seems to be a "nodejs" version of babylonjs that has the same objects and functionality as babylonjs, but without the rendering code. 

For example, one could run babylon code in nodejs, using the vector3, CreateScene, meshes, rotations, raytracers, moveWithCollisions, but without any of the visual rendering (no window, light sources, shadows, camera, textures, mapping, etc). Clients would have active replication using the same babylonjs framework, but with the visual appeal that the full babylonjs offers.

Does this make sense, or is even possible? 


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...