How to create a simple progress bar NME shader?

Hi,
I’m trying to create a simple NME shader for a progress bar. I’ve found some tutorials for Unity and tried to adapt this to Babylonjs.
Here is what I came up with:

As you can see at 0 there is still something visibile on the bottom progress bar.
A value of 0.5 seems to be displayed correctly.
At 1 the progress bar should be filled completely, which it is not.
But if you look at the NME Editor, you can see that the plane behaves as intended.
So there is probably something still wrong with my nme shader, or how I set it in Babylonjs.

I hope someone can help me with this.
Thank you!

Hey there, one way to fix it is to scale your threshold by the width of the mesh, which I added a new input block for. I also changed the unscaled threshold’s range from -1…1 to -0.5…0.5 since a centered mesh of width 1 will have min vertex x of -0.5 and max of 0.5. And added some more test meshes. :slight_smile:

3 Likes

Nice progress bar, by the way :slight_smile:

2 Likes

Thanks, that fixed it :slight_smile:

1 Like

Your welcome. :slight_smile: By the way another way to fix it without the width block is to create the meshes with width 1 and then use scaling.x to set their width. That way the range of x vertices will still be -0.5…0.5. And I gotta bookmark for later too, looks nice. :beers: :+1:

1 Like

LOL :slight_smile: https://playground.babylonjs.com/#4W5EG8#7

2 Likes

Well it seems to work well for the plane and box at least, IDK why not for the sphere though.

Oh it’s just because you made the sphere’s diameter 2 but it should be 1 because that 2nd version of the NME is based on the mesh’s width always being 1 and using scaling to set the desired width. Like below. :slight_smile:

Would be nice if we could mix two textures while progressing…

1 Like

Here we go, I just grabbed some random textures for now LOL. :beers:

4 Likes

Really cool!!

2 Likes