Issue importing shader during GLTF Export

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.

1 Like

cc @alexchuber to be sure the pass side effects run if needed :slight_smile:

1 Like
2 Likes

To confirm, this solved my issue :+1:

1 Like