BabylonJs Editor: Selecting a Water Texture causes the templated web-application to break

Bugs
, ,
1

Steps to reproduce

  1. Add Water Effect

    image
    image.jpg887×559 128 KB

  2. Export this to the web app
    image

You will get a problem loading the scene:

  1. Run and build the webapp
    yarn install && yarn build && yarn run webserver

  2. Here is the error:
    BABYLON.WaterMaterial not found you may have missed an import.

2

pinging @julien-moreau

3

@the-simian found the problem. The project template must import the « babylonjs-materials » package.

The editor can’t detect that (except the first time you export the web project) so I think it must be documented.

It is the same issue as instantiating a « smoke » particle system set from BabylonJS. It uses the noise procedural texture and will never work if the developer don’t import himself the « babylonjs-procedural-textures » package.

Do you agree with that?

Thanks again for reporting!

4

Yeah that makes sense. Of course you could detect such a thing the first time you export, but not subsequent exports.

I am thinking of including some sort of example like this in the documentation I am writing, in order to demonstrate this.

5

Just to follow up, I am working on some documentation now. I believe that’s the ‘real’ fix to this.

I had an idea, and that is the default scene in the editor could maybe include some smoke and also water effect, that way the very first export has those things, and it is up to the dev to optimize and remove them if they decide to not use them. It may be true that you’re importing a bit too much after editing some things, but that’s preferable to experiencing a break early on with the editor.

@julien-moreau do you think this is a good idea?

1 Like
6

@the-simian Yes I think it’s a good idea. My other idea is to import all in the game.ts file with some comments to precise that it can be removed to optimization. Like:

import {
Engine,
Scene,
SceneLoader,
Tools,
} from "babylonjs";

// In case you are using materials from the materials library. Import the library.
import 'babylonjs-materials';

// In case you are using procedural textures. Import the library.
import 'babylonjs-procedural-textures';

// In case you have exported your scene in a format different form .babylon. Import the library.
import 'babylonjs-loaders';

// In case you want to use the BabylonJS GUI. Import the library.
import 'babylonjs-gui';

import { Extensions } from "babylonjs-editor";

export default class Game {

This solution allows to avoid problems like “you create an empty scene and then save. So the editor will not detect any material from the materials library” etc.
What do you think about this solution?

7

This is good. I can make a PR for this today.

@julien-moreau
Update: I am close to done I am just testing. I also updated the package.json dependencies and added a .gitignore to the templated project.

Sometime I’d like to see us go from SystemJs to webpack, or something similar. I would be happy to work that out.

8

@julien-moreau PR is ready for review now. I had to use an old version of SystemJs and http-server, but otherwise this updates the dependencies and also includes the imports. I also added a .gitignore.

i would be happy to do a webpack upgrade on the templated project in the future sometime.

9

@the-simian thanks! Has been merged :slight_smile: