# Neon shader demo **URL:** \ **Category:** Demos and projects\ **Created:** [June 16, 2020, 2:52pm UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746 "2020-06-16T14:52:58Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![LeJohn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lejohn/32/35093_2.png) [@LeJohn](https://forum.babylonjs.com/u/LeJohn)\ **Post date:** [June 16, 2020, 2:52pm UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/1 "2020-06-16T14:52:58Z")
Hello! Here is my first project, an attempt to create a neon effect with a shader. The demo is based on the work of many other people: - Videos from the amazing BabylonJs team (thank you guys !!!): [Glow effect](https://www.youtube.com/watch?v=5ZuM-WLqEPQ) [Toon shader](https://www.youtube.com/watch?v=K0PXzE1hJXg) [Step node](https://www.youtube.com/watch?v=FwtFroNMmxw) - The [Blender Guru neon tutorial](https://www.youtube.com/watch?v=eQjQfmjDXXA) - And many other resources from the babylonJs community (thank you all !!) The demo is available here (with animations and sound effect): [https://www.babylonjs-playground.com/#4ML4LJ](https://www.babylonjs-playground.com/#4ML4LJ) **Click on the switch to turn on/off the neon.** With the inspector, you can modify certain properties to change the appearance of the neon, such as the x/y/z orientation and the boundary between the rear neon part (in black) and the frond one, change the color or even the smooth effect between the inner and the outer color of the tube: The default “style”: ![neon01](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/daf92d81570bfd283f49bbad184b4c07f066fac8.jpeg) A darkest green neon: ![neon02](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/2/28aee5d07e5b1f384af4313ceb5ec4cd380c3c56.png) Front/back boundary examples: ![neon03](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/991d69d1c947e9548c4c1cc76110d32a4dc8451e.png) And a red and yellow neon: ![neon04](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/38edafeef39bb258e24f39dc6781dffa9bdf1b38.png) It’s certainly not the best neon effect (and probably not the best way to do it), but for a beginner, working on this demo was a great way to learn a lot about BabylonJs. But BabylonJs has so many features that now … I’m still a beginner! 😀 So, any comment or advice on this demo will be greatly appreciated! Thanks! ---
**Author:** ![gryff](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gryff/32/1855_2.png) [@gryff](https://forum.babylonjs.com/u/gryff)\ **Post date:** [June 16, 2020, 3:42pm UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/2 "2020-06-16T15:42:29Z")
@LeJohn : very very nice (from someone who actually has watched that lengthy Blender Guru tutorial) 😄 ---
**Author:** ![LeJohn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lejohn/32/35093_2.png) [@LeJohn](https://forum.babylonjs.com/u/LeJohn)\ **Post date:** [June 16, 2020, 6:24pm UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/3 "2020-06-16T18:24:14Z")
Thanks ! 😄 ---
**Author:** ![gryff](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gryff/32/1855_2.png) [@gryff](https://forum.babylonjs.com/u/gryff)\ **Post date:** [June 16, 2020, 6:56pm UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/4 "2020-06-16T18:56:40Z")
@LeJohn : No problem - I appreciate all of the complexity in that tutorial. And I created this a while back : [The Office](http://www.3dworlds.ca/office01/index.html) No animation or switch - unlike your great work. Stay Safe, gryff 🙂 ---
**Author:** ![LeJohn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lejohn/32/35093_2.png) [@LeJohn](https://forum.babylonjs.com/u/LeJohn)\ **Post date:** [June 16, 2020, 8:40pm UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/5 "2020-06-16T20:40:19Z")
@gryff: I really like the atmosphere, it’s very nice! Thank you for sharing it. ---
**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\ **Post date:** [December 4, 2020, 10:02am UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/6 "2020-12-04T10:02:10Z")
Very nice neon! ---
**Author:** ![LeJohn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lejohn/32/35093_2.png) [@LeJohn](https://forum.babylonjs.com/u/LeJohn)\ **Post date:** [December 4, 2020, 11:39am UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/7 "2020-12-04T11:39:33Z")
Thanks ! ---
**Author:** ![Richard](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Richard](https://forum.babylonjs.com/u/Richard)\ **Post date:** [December 4, 2020, 12:03pm UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/8 "2020-12-04T12:03:41Z")
Very cool! ---
**Author:** ![REX\_DUNGEUR](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rex_dungeur/32/17559_2.png) [@REX\_DUNGEUR](https://forum.babylonjs.com/u/REX_DUNGEUR)\ **Post date:** [December 12, 2020, 8:35am UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/9 "2020-12-12T08:35:31Z")
Amazing! ---
**Author:** ![LeJohn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lejohn/32/35093_2.png) [@LeJohn](https://forum.babylonjs.com/u/LeJohn)\ **Post date:** [December 12, 2020, 10:31am UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/10 "2020-12-12T10:31:14Z")
@Richard, @REX_DUNGEUR : thank you guys! ---
**Author:** ![REX\_DUNGEUR](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rex_dungeur/32/17559_2.png) [@REX\_DUNGEUR](https://forum.babylonjs.com/u/REX_DUNGEUR)\ **Post date:** [December 12, 2020, 10:48am UTC](https://forum.babylonjs.com/t/neon-shader-demo/11746/11 "2020-12-12T10:48:01Z")
You’re welcome!