"Display Normals" in Inspector causes multiple "Cannot read properties of undefined (reading 'ShadersStore')" errors

[AeonKnight]

Hi there,

When I try to select the “Display Normals” option in the Debug Inspector the following error gets logged to the console around 2000 times:

“Uncaught TypeError: Cannot read properties of undefined (reading ‘ShadersStore’)”.

I have searched the forums and GitHub and the only similar issue I have found is Inspectors "Show Normals" for a Mesh don't work anymore in Babylon 4.1 and 4.0.3
I have tried the solution suggested in the above with setting the version of the inspector to be 4.2.1, I have also tried setting it to 4.1.0 and it has not helped.
I have also tried adding a script link to the specific material cdn and nothing seems to be working.
My last ditch effort was to update my project to use the latest beta of 5.0.0-beta.6 and this still results in the same error.

For reference, here is a link to my project on GitHub, which is a simple one with a React.js wrapper (using the parcel bundler) that, at the moment just displays a sphere plus a simple implementation of marching cubes algorithm.

Does anyone have any ideas on how to solve this? Am I doing something wrong? Or is this a Bug somewhere?

[labris]

At least seems that this function works in Playground -

I believe it is related to how you import Babylon scripts (something is wrong with Inspector or other imports).
You can check if this utlitiy works for you - Display Vertex Normals | Babylon.js Documentation

[AeonKnight]

Thank you for the quick response. To clarify though, the “Render Vertex Normals” is working as expected; it is the “Display Normals” that is not working.

I understand that it may be related to how I’m importing the Babylon scripts, but as far as I can tell, I am doing it as per the documentation, and have tried all sorts of variations on how to import things that I know of to no avail.

[roland]

Hi!

It works in the PG, the same as in the post by @labris:

@AeonKnight

it is the “Display Normals” that is not working.

I tried it myself and it’s OK.

I’ll have a look at your project setup as well.

[roland]

Something evil is happening here I can’t shut it down and it has blocked all my VS Code windows running and I can’t even save my code… Shit! I can’t even close the VS Code which is running your project. I’ve heard that Parcel is the new Webpack. LOL! Ok, I’ll give it one more try though. Need to restart my PC.

[AeonKnight]

Huh, that’s strange; The project is running fine on my machine…

I’m terribly sorry if something in my code has caused you problems

Generally you can use Ctrl + C to cancel running terminal tasks (on a Mac anyway).

[AeonKnight]

Sorry I should have been more specific. This is only an issue when trying to use it locally. I’ve never had an issue with the Playground.

[roland]

@AeonKnight

I’m terribly sorry if something in my code has caused you problems

No worries dude VS Code had a backup and reopened the unsaved files correctly, everything is fine.

Your project is now running correctly on my PC. The strange thing was that I couldn’t even close the browser and I had to power down the PC. May be related the hot reload functionality was locked so the browser was waiting for parcel but didn’t get a response and parcel was waiting for the browser but neither it get a response. Let me have a look at your code now.

[roland]

@AeonKnight

This is only an issue when trying to use it locally

This is something I am experiencing many times and I stopped to rely on the Inspector’s debug stuff a long time ago. But maybe we will find a solution to the issue.

EDIT:
Sorry don’t have time to find the issue with the Inspector but let’s use a quick workaround here and create a ShaderMaterial for the MarchingCube meshes.

Babylon.js Playground

Switch the material using a button and you are good to go.

marchingCubes.ts

Put your shader code in separate files so it looks more professional

[AeonKnight]

Thank you for taking the time to look into it!

That’s a funky looking shader material!

The weird thing is, if I manually set the material to use the NormalMaterial from the seperate materials import in the code, it works, and shows in the Inspector that it’s “Displaying Normals”. But when I turn it off and back on again in the Inspector it errors out again.

Using the NormalMaterial from the materials import:

After toggling “Display Normals” off and attempting to turn it on again:

[roland]

Oh man sorry, I was totally off with the shader, because I made an UV shader lol. Sorry, I am working on so many things in parallel. I will fix that…

[AeonKnight]

Nah all good man. I’m not actually looking for a shader or a material for this (at least not as part of this post, that may end up coming in the future though )

I was mostly just trying to see the normals to make sure I had the winding right for the polygon creation. And was just frustrated that I couldn’t just toggle it via the Inspector like you should be able to. I was hoping this post would trigger someone on the Babylon team to fix the issues with the Babylon Inspector when trying to use it in an actual project and not just using it in the Playground.

From what I can see of the babylon.materials.js file (https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.js), it looks like they might be expecting you to be using webpack… But I’n not sure, I haven’t bothered to go down that rabbit hole.

[roland]

Yeah. I will rather focus on the Inspector issue. If you include babylonjs on your web page using a script tag it works. If you bundle it with webpack it doesn’t so let’s see what’s the problem

EDIT:

It works when you use the legacy approach:

import '@babylonjs/core/Debug/debugLayer';
import '@babylonjs/inspector';

import { ArcRotateCamera, Engine, HemisphericLight, MeshBuilder, Scene, Vector3 } from 'babylonjs';
import 'babylonjs-materials';

I don’t know whether we can get this working with the core packages.

[roland]

@AeonKnight

might be expecting you to be using webpack…

Neither working with webpack. Man, I don’t know what parcel did to my dev env yesterday. It killed my npm installation lol. I had to remove nodejs and reinstall it to get npm working. I couldn’t install anything with npm after the system froze and I had to power down my computer. Yarn was working as usual. But yeah, it’s the life of a developer

[AeonKnight]

oh yeah, the we have to deal with

[AeonKnight]

@roland

Neither working with webpack.

I don’t think parcel uses webpack, it is it’s own beast… As far as I see it, it shouldn’t matter what bundler you use, you should be able to just include it and use it… But maybe that’s just my naive “everything working nicely” mind-frame

@roland

It works when you use the legacy approach:

import '@babylonjs/core/Debug/debugLayer';
import '@babylonjs/inspector';

import { ArcRotateCamera, Engine, HemisphericLight, MeshBuilder, Scene, Vector3 } from 'babylonjs';
import 'babylonjs-materials';

Oh, that’s interesting… Well at least that might be a work-around if we can’t get it working with the core packages

[roland]

The inspector is injected at runtime to the page so IDK but I will give it some more time and try to find out how to avoid the legacy approach.

[AeonKnight]

Thank you so much for your time on this! It’s very much appreciated!

[roland]

YAW bro! As I wrote earlier this was never working for me and I never really cared about it but would be cool to get it working though

[roland]

@AeonKnight

naive “everything working nicely” mind-frame

I love this one