# Best way to recreate the star from the image **URL:** \ **Category:** Questions\ **Created:** [August 13, 2023, 6:41pm UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276 "2023-08-13T18:41:23Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![fluxus](https://avatars.discourse-cdn.com/v4/letter/f/97f17d/32.png) [@fluxus](https://forum.babylonjs.com/u/fluxus)\ **Post date:** [August 13, 2023, 6:41pm UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/1 "2023-08-13T18:41:23Z")
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 😅 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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/3/c301c144be1dc32675fb1f095a52b1038dcbdd0e.jpeg) Thx! ---
**Author:** ![musk](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/musk/32/17156_2.png) [@musk](https://forum.babylonjs.com/u/musk)\ **Post date:** [August 14, 2023, 3:00am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/2 "2023-08-14T03:00:39Z")
Maybe you can get stars based on pixel color. > [@HTMLCanvas to Thin Instances](https://forum.babylonjs.com/t/htmlcanvas-to-thin-instances/22356): > > Hi guys! So I’m playing around with thin instances and had an idea to convert 2D HTMLCanvasElement to thin instances. Is it good for something? I don’t know, but it is cool smiley EDIT: what about an animated mandelbrot? I think, I’ll give it a try😎 Have a look at the PG, link at the end. You can tinker the const \_3D\_PIXEL\_SIZE = 1 value at the beginning to have smaller/bigger 3D blocks for each 2D pixel. Honoring BabylonJS and David I have chosen two images, the BabylonJS logo and David… ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 14, 2023, 4:26am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/3 "2023-08-14T04:26:29Z")
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. ---
**Author:** ![SkyOps117](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/skyops117/32/31300_2.png) [@SkyOps117](https://forum.babylonjs.com/u/SkyOps117)\ **Post date:** [August 14, 2023, 6:09am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/4 "2023-08-14T06:09:32Z")
Using BJS volumetric lightscattering might be what you’re looking for: [https://doc.babylonjs.com/features/featuresDeepDive/lights/volumetricLightScattering](https://doc.babylonjs.com/features/featuresDeepDive/lights/volumetricLightScattering) ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 14, 2023, 7:03am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/5 "2023-08-14T07:03:48Z")
Not bad as a starting point, I believe 😃 > **[Babylon.js Playground](https://playground.babylonjs.com/#QZTX7A%233)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes EDIT: Animated: > **[Babylon.js Playground](https://playground.babylonjs.com/#QZTX7A%235)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 🖖 Yeah and welcome @fluxus to the BabylonJS community! ---
**Author:** ![musk](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/musk/32/17156_2.png) [@musk](https://forum.babylonjs.com/u/musk)\ **Post date:** [August 14, 2023, 7:33am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/6 "2023-08-14T07:33:52Z")
Looks like I misunderstood the question, but at least we got the right person 😂 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 14, 2023, 8:03am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/7 "2023-08-14T08:03:42Z")
> [@musk](#): > > I misunderstood the question Yeah, your answer was absolutely out of scope bro 🙄 🥳 🤣 ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [August 14, 2023, 9:30am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/8 "2023-08-14T09:30:02Z")
Like the Guy who absolutely wants to push his feature 😜 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 😁 Only thing, I believe the center of the star looks a bit too much like a losange. May be superpose a sphere to it? ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 14, 2023, 10:43am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/9 "2023-08-14T10:43:20Z")
> [@mawa](#): > > Like the Guy who absolutely wants to push his feature Who are you talking about? 🙈 🤣 🤣 🤣 He can draw whatever base image he likes. This is the one I used: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/e/8e54e030b977b434c7e8d07856e2f7f4dfcc779c.jpeg) It’s neither a circle 😛 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/d/ddaeba221455511bc3bf470321276c042344d9f1.png) ---
**Author:** ![fluxus](https://avatars.discourse-cdn.com/v4/letter/f/97f17d/32.png) [@fluxus](https://forum.babylonjs.com/u/fluxus)\ **Post date:** [August 14, 2023, 10:45am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/10 "2023-08-14T10:45:01Z")
No, not bad at all 😍 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 😊 And thanks for the welcome 🖖 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 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 14, 2023, 10:47am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/11 "2023-08-14T10:47:33Z")
@mawa ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/8/9829d762bab37d32a63956bb4fae86a4e5b9fc91.jpeg) Better? Changes: ```auto const points = [[ 0, -1, 0, 0, 0.2, 0, 0, 1, 0 ], [ // const widths = [ 6, 10, 22, 42, 10, 4, ] ``` > **[Babylon.js Playground](https://playground.babylonjs.com/#QZTX7A%237)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 14, 2023, 10:48am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/12 "2023-08-14T10:48:24Z")
> [@fluxus](#): > > I think that @mawa is right, center of the star looks a bit like like rhomboid/losange No no no. It’s a pussy like shape at all… ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 14, 2023, 10:48am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/13 "2023-08-14T10:48:48Z")
> [@fluxus](#): > > Looks super nice! 😻 ---
**Author:** ![fluxus](https://avatars.discourse-cdn.com/v4/letter/f/97f17d/32.png) [@fluxus](https://forum.babylonjs.com/u/fluxus)\ **Post date:** [August 14, 2023, 10:51am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/14 "2023-08-14T10:51:33Z")
Better! 🙌 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [August 14, 2023, 10:52am UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/15 "2023-08-14T10:52:04Z")
> [@mawa](#): > > Like the Guy who absolutely wants to push his feature @mawa already the Ribbon is being infected by GreasedLine… 🙈 > [@GreasedLine Disabing LookAt](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/5): > > Hello! It seems it can work. I’ve used a Ribbon to draw the mesh and applied a modified version of the GreasedLinePluginMaterial. The values are hardcoded for the given mesh for now. const myPoints = [new BABYLON.Vector3(.1, -6, 0), new BABYLON.Vector3(.1, 6, 0),] const myPoints1 = [new BABYLON.Vector3(.1, -6, 1), new BABYLON.Vector3(.1, 6, 1),] const mesh = BABYLON.MeshBuilder.CreateRibbon( … > **[Babylon.js Playground](https://playground.babylonjs.com/#H1LRZ3%23309)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [August 14, 2023, 7:19pm UTC](https://forum.babylonjs.com/t/best-way-to-recreate-the-star-from-the-image/43276/16 "2023-08-14T19:19:32Z")
Terrific 😍