Babylon.js project using typescript, webpack, es6 modules and other goodies

Announcements
1

Hi gang,

We had quite a lot of questions about babylon.js project issues, mainly regarding modules and webpack. How to build, how do debug, how to get started.

So I made a small getting-started project that can be forked and can be used as the base to your new es6 project. It is available on github:

It is basically everything you need to get started - debug environment, typescript hot-loading, full module support, production build and more.

For now it is a very simple project - a plane, a sphere, and a single texture. I will continue adding features with time - model loading, custom materials, physics, XR, with focus on how to use them in an es6 project.

If you find a bug or have any questions or issues you can write me here or write an issue on github.

11 Likes
2

Very good idea!

3

I also have a BJS + TS + webpack + PUG + SCSS with hot reloading etc starter repo that I’ve shared before. Maybe we can combine best of both?

4

One thing I found with just using a pure TS project was that hot reloading gets quite slow as project size increases. So I added in babel and have separate script for checking types with tsc, relying on IDE type checks during iterative dev and that works better for me.

Maybe there’s a way to ensure TS only isn’t too slow with hot reloading on larger projects, but I haven’t found it yet.

5

I accept PRs!

Having said that, I don’t see why PUG and SCSS are needed in this project. I am trying to show how to use babylon’s es6 modules, and less how to create a website. Keep it as simple as possible, and focus on the babylon side of things :slight_smile:

This is just part 1 of others to come. some of them will probably be integration with other frameworks (react, angular, etc’), but as I said, this will take time.

4 Likes
6

We need to link it from the doc as well :wink:

1 Like
7

Thank you so much @RaananW for the great starter project. I’m new to Babylon.js, but not TypeScript. This isn’t really a question, just a problem I hit, in case anyone else hits it.

So, I encountered a problem when I tried to use Babylon’s Grid Material. First I added this line to one of your existing scenes:

ground.material = new GridMaterial("mat", scene as any) as any;

But that failed, since I could not import “GridMaterial”. So after reading a bit, I ran this command to install the materials package:

npm install --save @babylonjs/materials

And then I added an import:

import {GridMaterial} from "@babylonjs/materials/grid";

And got a really cryptic message, one that I could not really find on the Internet anywhere:

404 Not found: GET http://localhost:8080/src/Shaders/grid.vertex.fx

That had me stumped for quite a while. Eventually, I noticed that the “package.json” file was referencing “preview” versions of babylon.js, but my “npm install” command had installed the 4.x version of “@babylonjs/materials”. And sure enough, once I changed my “package.json” to:

"dependencies": {
    "@babylonjs/core": "preview",
    "@babylonjs/loaders": "preview",
    "@babylonjs/materials": "preview",
    "ammo.js": "github:kripken/ammo.js"
},

And then ran “npm install”, it worked!

Cheers,
Christian

1 Like
8

Are you sure you are using at least 4.2 versions of GridMaterial and Babylon core ???

9

Scratch that :slight_smile: I have seen the end of your message :slight_smile: thanks for helping others with it

1 Like
10

Thanks for sharing this!

I used “preview” there to be sure to always get the latest version of babylon. You can, of course, set a fixed version there, you just need to make sure it is the same version on all dependencies.

2 Likes