Hello everyone,
This seemingly random issue started popping up for me recently. Whenever I ran the following code (or any GLTF2Export function):
GLTF2Export.GLBAsync(scene, filename, {}).then((gltf) => {
gltf.downloadFiles();
resolve(gltf);
}).catch(e => reject);
I would start getting the following errors:
BJS - [08:58:06]: Error compiling effect
BJS - [08:58:06]: Unable to compile effect:
BJS - [08:58:06]: Uniforms: scale, textureSampler
BJS - [08:58:06]: Attributes:
BJS - [08:58:06]: Defines:
BJS - [08:58:06]: Error: FRAGMENT SHADER ERROR: 0:5: '<' : syntax error
I tracked the issue down to the browser trying to download “pass.fragment.fx” in “[domain]/Shaders/pass.fragment.fx”. Which would return HTML code, which would also show up in the error.
It seemed weird to me that it would try downloading a .fx file, I also saw some other threads on the forum where similar things happened with other functions.
My setup uses rollup:
output: {
dir: 'dist',
format: 'esm',
entryFileNames: 'bundle.js',
chunkFileNames: '[name]-chunk.js',
assetFileNames: '[name].[ext]',
},
Having no custom manual chunking, so babylon.js should treeshake itself. I also haven’t changed anything to this in recent time, and it worked before.
I’m importing GLTF2Export like so:
import { GLTF2Export, GLTFData } from "@babylonjs/serializers";
I also generally import all Babylonjs modules like this (specifiying the specific file and not simply “@babylonjs/core” for example, to make sure treeshaking happens correctly.
I ended up fixing this issue by implicitly importing the shader as so:
import "@babylonjs/core/Shaders/pass.fragment";
I wish I could provide a repro but I don’t think I’ll be able to, but I figured I should report this issue regardless.