Best way to recreate the star from the image

Questions
1

Hola!

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.

supernova
supernova1800×1098 111 KB

Thx!

2

Maybe you can get stars based on pixel color.

1 Like
3

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
4

Using BJS volumetric lightscattering might be what you’re looking for:
https://doc.babylonjs.com/features/featuresDeepDive/lights/volumetricLightScattering

5

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

EDIT:

Animated:

:vulcan_salute:

Yeah and welcome @fluxus to the BabylonJS community!

5 Likes
6

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

1 Like
7

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

8

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?

9

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:

image
image1388×684 47.8 KB

It’s neither a circle :stuck_out_tongue:
image

10

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
11

@mawa

image
image1402×896 68.9 KB

Better?

Changes:

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

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

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

13

:heart_eyes_cat:

1 Like
14

Better! :raised_hands:

1 Like
15

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

16

Terrific :heart_eyes: