How to use Watermaterial in the typescript

Questions
1

Hi,
I would like to create a water material in my project. For that, I just use the below code

import * as BABYLONMATERIAL from 'babylonjs-materials';

var water = new BABYLONMATERIAL.WaterMaterial("water", scene, new BABYLON.Vector2(512, 512));
          water.backFaceCulling = true;
          water.bumpTexture = new BABYLON.Texture("assets/textures/waterbump.png", scene);
          water.windForce = -10;
          water.waveHeight = 1.5;
          water.bumpHeight = 0.5;
          water.windDirection = new BABYLON.Vector2(1, 1);
          water.waterColor = new BABYLON.Color3(0, 0, 221 / 255);
          water.colorBlendFactor = 0.0;
          scene_objects.forEach((obj)=>{
            water.addToRenderList(obj);
          })
          mesh.material = water;

In this, I got an error like below.

cell.fragment.ts:126 Uncaught TypeError: Cannot read properties of undefined (reading 'ShaderStore')
    at cell.fragment.ts:126:1
    at babylonjs.materials.min.js:1:195684
    at babylonjs.materials.min.js:1:195698
    at universalModuleDefinition:9:23
    at universalModuleDefinition:1:1

 http://localhost:4200/src/Shaders/water.vertex.fx 404 (Not Found)

Help me on this.

2

Hi,

might I ask what version of babylon are you using? that was a known issue that should have been fixed by now.

3

4.2.1

4

would you be able to use the latest 5.X version?

5

of course for both core and materials

6

I am familiar with this version. Last time I tried to update the version in a project. at that time material.freeze() was not working. and some other things also got changed. Thats why I just would like to go with this Awesome version 4.2.1

7

I find it odd it doesn’t work in 4.2.1 to be honest. and I find it odd that material.freeze doesn’t work in 5.X.

Are you sure both versions of core and materials are 4.2.1? could you reproduce the lack of material freeze in the 5.X branch? maybe in the playground?

8

“@angular/animations”: “~11.0.6”,
“@angular/common”: “~11.0.6”,
“@angular/compiler”: “~11.0.6”,
“@angular/core”: “~11.0.6”,
“@angular/forms”: “~11.0.6”,
“@angular/platform-browser”: “~11.0.6”,
“@angular/platform-browser-dynamic”: “~11.0.6”,
“@angular/router”: “~11.0.6”,
“babylonjs”: “^4.2.1”,
“babylonjs-loaders”: “^4.2.1”,
“babylonjs-materials”: “^4.2.1”,
“rxjs”: “~6.6.0”,
“tslib”: “^2.0.0”,
“zone.js”: “~0.10.2”

9

we won’t fix bug for the older 4.X branch.
Checking the playground with those 2 versions it does seem to work in both 4.2.1 and the latest 5.21.0. material.freeze() seems to run without an issue as well.

Not sure what’s wrong with the project. Can you try using @babylonjs/core and @babylonjs/materials instead of the UMD version? will you be able to share your project and show when it fails?

10

Thanks for your immediate response. I try to update the project to the latest version. What is UMD Version. and how should I change this.

11

instead of using "babylonjs"and “babylonjs-materials” (which are the UMD versions), use “@babylonjs/core” and @babylonjs/materials:

1 Like
12

Okay. If I use it, should I update the version to 5.X
or I can use as it is like 4.X

13

that’s up to you. the packages exist in both versions. I would use the latest, but it’s not a must

1 Like
14

@RaananW still I got this error

Uncaught TypeError: Cannot read properties of undefined (reading 'ShaderStore')
    at cell.fragment.ts:126:1
    at babylonjs.materials.min.js:1:195684
    at babylonjs.materials.min.js:1:195698
    at universalModuleDefinition:9:23
    at universalModuleDefinition:1:1

and another one has been solved right now.

15

that is because you are still importing from “babylonjs-materials”. you should import from @babylonjs/materials

16

No @RaananW . I just use the below code only.

import * as BABYLONMATERIAL from '@babylonjs/materials';
17

you can import the water material directly. However, seeing your code - if you load from babylonjs.materials.min.js you are loading from the UMD version and not @babylonjs/materials

18

Sorry @RaananW . I couldn’t understand this. I am not importing like import * as BABYLONMATERIAL from 'babylonjs-materials' . I am importing like import * as BABYLONMATERIAL from '@babylonjs/materials'. You said, ‘babylonjs-materials’ is the UMD and ‘@babylonjs/materials’ is not. But now you are saying, that too UMD. I am confused now.

19

Have you tried “rm -rf nodeModules”, “rm -rf package-lock.json” and "retry npm install "?
And did save pakege.json “@babylonjs/core”: “^5.20.0” too?
(delete → “babylonjs-materials”: ​​“^ 4.2.1”, “babylonjs-materials”: ​​“^ 4.2.1”,)

20

Yes, I deleted the nodeModules folder and package-lock.json then, I removed the babylonjs , babylonjs-materials, babylonjs-loaders Then I executed the npm install. And my current Package.json is

"dependencies": {
    "@angular/animations": "~11.0.6",
    "@angular/common": "~11.0.6",
    "@angular/compiler": "~11.0.6",
    "@angular/core": "~11.0.6",
    "@angular/forms": "~11.0.6",
    "@angular/platform-browser": "~11.0.6",
    "@angular/platform-browser-dynamic": "~11.0.6",
    "@angular/router": "~11.0.6",
    "@babylonjs/core": "^4.2.1",
    "@babylonjs/loaders": "^4.2.1",
    "@babylonjs/materials": "^4.2.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.6",
    "@angular/cli": "~11.0.6",
    "@angular/compiler-cli": "~11.0.6",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }