PBRMaterial and missing shaders

My bundler is Vite and I’m importing individual modules. I’m using the PBRMaterial class and have imported it with:

import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';

but in the console I’m getting the following JavaScript errors:

GET http://localhost:8080/src/Shaders/pbr.vertex.fx 404 (Not Found)
GET http://localhost:8080/src/Shaders/pbr.fragment.fx 404 (Not Found)

I tried copying the fx files from the Github repo to my public folder but I end up with shader compilation issues. What is the best way of using PBRMaterial without having to copy a huge amount of shader files?

It is hard to say not seeing your imports, but - probably - if you import only PBRMaterial, in some conditions you need to import also Standard material. See here - StandardMaterial needs to be imported - #5 by RaananW
Also, make sure that all imports have the same version. In some error cases one needs to deleted node_modules folder and perform npm i once more.

Sounds like the problem i encountered yesterday when i tried to update from 7.20.1 to 7.22.5
I’m using Webpack and got errors about missing SSAO2 fx files. I can see that webpack created the JS-chunks for the missing files but somehow at runtime it loads them as “.fx”. For the time beeing i reverted back to 7.20.1. With that version the shader chunks are loaded correctly.

1 Like

@labris @Kesshi Thanks for the tips.

It turns out I had 2 shader stores and it couldn’t find the shader in the 2nd one and so tried to load a fx file. My problem was that my code is spread across an app and a library each with their own package.json. The library’s package.json should have included Babylon.js as a peer dependency rather than a dependency so they use only one Babylon.js.

There was the related solution here, probably you’ll find some clues there - Vite shadowOnly shaders - #22 by RaananW

I just tried again to update to 7.22.5 after deleting the node_modules folder and the package-lock.json.
I still get 404 for “http://localhost/wbk/src/Shaders/ssao2.fragment.fx”.
If i disable SSAO2 in my app everything works. All shader-chunks are loaded correctly (FXAA, PBR, Shadows …). I have no idea what is special for SSAO2 compared to FXAA. I use both of them in the same file. There should be no code splitting or something like that. Could there be a bug in BabylonJS for SSAO2?

@Kesshi can you share a github repro to help @RaananW ?

@RaananW I debugged the issue. I think the problem is the “_createBlurFilter” function: Babylon.js/packages/dev/core/src/PostProcesses/RenderPipeline/Pipelines/ssao2RenderingPipeline.ts at master · BabylonJS/Babylon.js · GitHub

If i compare it for example with the “_createSSAOPostProcess” function then i think the Import-statements (e.g. line 577) are missing in the “_createBlurFilter” function.

1 Like

i have that on my radar and will debug this tomorrow. But it does feel like you are right - the import should be available on each function that needs the shader available.

1 Like

This should fix it Fix ssao shader compilation bug by sebavan · Pull Request #15500 · BabylonJS/Babylon.js · GitHub

2 Likes