CustomMaterial error due to missing shader code

Bugs
1

Note: I can’t reproduce it in PG because shader code is not being asynchronously loaded there.

If application includes Babylon.js modules with ES6 imports, then using CustomMaterial like this:

someMesh.material = new CustomMaterial("custom_mat", scene);

triggers an error of Cannot read properties of undefined (reading 'replace') at line Babylon.js/packages/dev/materials/src/custom/customMaterial.ts at 865f503e7ed1bcba3bec008733e76f21aa30b8a7 · BabylonJS/Babylon.js · GitHub

Same thing concerns PBRCustomMaterial as well.

Effect.ShadersStore["defaultVertexShader"] seems to be undefined at this point, because default.vertex.js hasn’t been loaded and run yet (same for fragment/pixel shader).

Does CustomMaterial support asynchronous shader code yet, or maybe I’m doing something wrong?..

Thank you.

2

cc @Deltakosh in case this is related to recent changes where shader code is loaded on demand.

3

Yes this is expected if you are not using ESM.
The way to fix it is to preimport the shaders
If you add these lines to your code, it should work:

import from "core/Shaders/default.vertex";
import from "core/Shaders/default.fragment";

cc @RaananW to keep me honest :slight_smile:

4

Should be:

import “@babylonjs/core/Shaders/default.vertex”;
import “@babylonjs/core/Shaders/default.fragment”;

Might make sense to add that to the custom material if it requires it to work correctly

5

Totally ! I’ll do a PR for this one and the PBRCustomMaterial

1 Like
6

wait, but wouldn’t it make CustomMaterial unusable with WGSL shaders?

7

CustomMaterial is forcing the shaders to used glsl even in webgpu (I introduced a toggle for that)

1 Like
8

oh, the forceGLSL. Sorry, missed that one :bowing_man:

1 Like