Best way to recreate the star from the image


Newbie to Babylon here(and everything webGL/3d related tbh). I need to add a sprinkle of “wow” on top of an existing website and I decided to go with Babylon. For someone like me it was a no brainer, lots of goodies baked in and overall it seems more beginner friendly than threejs.

Since I’ve been browsing this forum for the past few days(along with docs/playground), I can honestly say that Babylon community is one of the nicest on the whole www. Is there a filter for bad/mean posters, haven’t seen one tbh :sweat_smile:

My question should be a fairly easy one, but since there are multiple ways of doing it I decided to ask here.

Attached is an image - I would love to know what is the best way to recreate the star from it.


Maybe you can get stars based on pixel color.

1 Like

I would use a png for the star itself and volumetric light scattering for the rays. Or use a shader. I bet you can find one doing this effect.

Glow and Bloom can be useful as well, so maybe you won’t need a png at all. Maybe you could draw the whole object by GreasedLines. It’s an interesting task, I’ll try to reproduce this star using GreasedLines today.

1 Like

Using BJS volumetric lightscattering might be what you’re looking for:

Not bad as a starting point, I believe :smiley:




Yeah and welcome @fluxus to the BabylonJS community!


Looks like I misunderstood the question, but at least we got the right person :joy:

1 Like

Yeah, your answer was absolutely out of scope bro :roll_eyes: :partying_face: :rofl:

Like the Guy who absolutely wants to push his feature :stuck_out_tongue_winking_eye: Fair enough and the result is really cool. I also would have said just a png (or two) but I have to say the greasedLines version is unexpectedly good :grin: Only thing, I believe the center of the star looks a bit too much like a losange. May be superpose a sphere to it?

Who are you talking about? :see_no_evil: :rofl: :rofl: :rofl:

He can draw whatever base image he likes. This is the one I used:

It’s neither a circle :stuck_out_tongue:

No, not bad at all :heart_eyes: Looks super nice!

I was thinking of doing something with GreasedLines when I saw your github globe demo, but didn’t know where to start lol.

I’ll play with the demo in a few hours when I get home :blush:

And thanks for the welcome :vulcan_salute:

P.S. I think that @mawa is right, center of the star looks a bit like like rhomboid/losange,but that is only a minor gripe - it really is very close to the star from the image

1 Like




    const points = [[
        0, -1, 0,
        0, 0.2, 0,
        0, 1, 0
    ], [

    const widths = [
        6, 10,
        22, 42,
        10, 4,

No no no. It’s a pussy like shape at all…


1 Like

Better! :raised_hands:

1 Like

@mawa already the Ribbon is being infected by GreasedLine… :see_no_evil:

Terrific :heart_eyes: