Using GridMaterial fails with ES6

Using GridMaterial works in the playground:

However when trying to implement the same example using ES6 an error occurs in which it stars a network call and tries to load two shaders from the following path:

  • src/Shaders/grid.fragment.fx
  • src/Shaders/vertex.fragment.fx

The bug probably originates on these lines of the source code.
The build process uses tsc but perhaps it is not configured to import shader files with fx extension. There seems to be a build tool that builds the shaders but it seems something in the build process replaces “./grid.fragment” to “./grid.fragment.fx” instead of “./grid.fragment.ts”.

When I tried to manually add the missing files to their respected paths in my own project I got the following error:

useScene.empty.ts?t=1706421686148:14 BJS - [08:01:26]: Unable to compile effect:

To be sure, I tried using an example from the docs to no avail.

Code:

import { Scene as BabylonScene, Engine, MeshBuilder } from '@babylonjs/core';
import { GridMaterial } from '@babylonjs/materials';
import { useEffect } from 'react';

export function useScene(canvasRef: any) {
  useEffect(() => {
    const engine = new Engine(canvasRef.current, true);
    const scene = new BabylonScene(engine);

    scene.useRightHandedSystem = true;
    scene.createDefaultCameraOrLight(true, true, true);

    const box = MeshBuilder.CreateBox('box', { size: 0.1 }, scene);
    const material = new GridMaterial('grid', scene);
    box.material = material; // <=== issue originates here

    // Start the engine
    engine.runRenderLoop(() => {
      scene.render();
    });

    return () => {
      engine.stopRenderLoop();
      scene.dispose();
      engine.dispose();
    };
  }, []);
}

I am using the following ES6 packages:

{
    ...
    "@babylonjs/core": "^6.40.0",
    "@babylonjs/inspector": "^6.40.0",
    "@babylonjs/loaders": "^6.40.0",
    "@babylonjs/materials": "^6.40.0",
}

I tested with the fresh install (Vite+React+Typescript) and it works with no hassle.

Seems the problem is not with the Grid material itself but either with your imports (which are correct but probably you need to delete node modules and install again, sometimes it helps) or with React things.

1 Like

Yes, deleting and re-installing the node_modules worked.
I recently upgraded from 5.x so it might have been a case of version mismatch.

Thank you for the quick reply,
Guy.

1 Like