Ribbon with colors option

Hello, just trying to make a ribbon using its colors option but can’t make it right.

I followed the documentation: Babylon.js Documentation
And looked for any playground using it but there isn’t any.

Here is my test : https://www.babylonjs-playground.com/#FJNR5#291

Can someone show me how to make it work, please? :pray:t2:

Hiya P! Good to see you again.


Look better? I needed to add a sideOrientation in line 47.

I also added a hemiLight.groundColor in line 12, but I’m not sure why. :slight_smile:

map.convertToFlatShadedMesh(); is interesting. Really only noticeable when camera is near terrain.

Dithered (gentle change across space) per-vertex colors… look out-of-focus, eh? Interesting.

Hello Wingnut,

Good to see you too in this brand new forum :heart_eyes:

Indeed this is better with the sideOrientation.
Made some changes in the colors to make it even better: https://www.babylonjs-playground.com/#FJNR5#293
I love flat shaded meshes. It always creates really cool low poly effects!
Like these red pikes which are becoming dangerous :smiling_imp: : https://www.babylonjs-playground.com/#FJNR5#294


1 Like

Ooh, yeah… those look nice!

Did you see my browser crasher?

https://www.babylonjs-playground.com/#FJNR5#295 (erf - I get 7 fps with this written-by-another particles-per-vertex beast. CPU fan whirring like a tornado.) :slight_smile:

Not sure why the colors got “brighter”. Probably because its only 20 x 20.

Yeah… flat-shaded is nice. The conversion adds more vertices to the mesh, though. Lots more.


Some verts get 2 extras, some get 3 extras. (You probably know all this already.)


and just add a point light set at the camera position to get some gem effect : https://www.babylonjs-playground.com/#FJNR5#296



Hey @Wingnut ,

Wooo on my computer, I only get a 1 fps hihi!

I actually thought a flatshaded mesh was easier to render. Because as you can clearly see the vertices, I assumed you didn’t have to “smooth” them and that this “smoothing” will mean more vertices.
Seems like this is quite the opposite. I you can explain me why exactly, I would love to read it! :wink:

1 Like

Hi P. Perhaps we have a tutorial about shading… Babylon.js Documentation

https://www.babylonjs-playground.com/#CG2MJ#39 Fun!

We need to add lighting normals (and re-aim the old smooth-shaded normals)… to get flat-shaded. Unfortunately, only one normal per vertex is allowed, so we must add more vertices… in order to get more normals.

Those added flat-shaded vertices… are ALWAYS added in the same positions as previous smooth-shaded vertices. Some/many vertices get “doubled-up” and “tripled-up”, etc.

“Flatties are Fatties” :slight_smile: Fascinating, huh? All invented by famous rendering couple… Phil Phong and Betty Blinn. (not)


Impressive how fast the number of vertices can grow just for a flat shaded cube!
It’s been almost three years now that I start using babylonjs for the first time. It was for a strategic game I didn’t know where it would go (and I still don’t know). And since I continue to use Babylonjs in my daily life for a new project I will soon share with you all.
But this is awesome to realise that when you think you know the library/technology/algorythm,… Well indeed you don’t! So many things to learn again, this is exciting!

1 Like

Yeah, I agree. What is cool about JS and BJS… and maybe all things in life… is that simple things can be beautiful, fascinating, and fun. Nice scenes don’t always require being knowledgeable. More times, great scenes require being creative.

I remember one playground from long-ago… mostly stolen code… but it was one of my first “holy crap… I DID THAT?” self-esteem-boosting moments.


I love that puppy. Not because it is a work of art or tech… but because of the feelings it brings me. I sort of re-live that “holy crap, BJS IS SO COOL!” -moment… every time I see it. The scene becomes… not a “show’n’tell” scene (even though I just did a show’n’tell for you), but… a best friend and confidant.

It is like a trinket that hangs on my key chain, and if I had a 3D printer, it might become a REAL key-chain trinket. heh. [shrug]

I don’t know how old you are, P… but… did you do any “time” with VRML? It was a coal-powered steam-driven 3D library… from the 1940’s. Still precious to me and some of us old geezers.

My point is… simple is sometimes wonderful. Being a noob… is a time to be cherished and not rushed-to-exit. A different “flavor” of creativity happens… when the scene programmer is mostly lost. :slight_smile: I will ALWAYS be a “noob” because… I like it. Love it. Possibly addicted to it. Likely unrecoverable / incurable. :smiley:

Old old projects… yeah, maybe they never impressed others or made big money, but they can have TONS of self-meaning and self-warmth. Pretty cool phenomenon. Visual stimuli… mixed with reminiscing. It is as-delicious as ANY ice cream treat. :slight_smile:

1 Like