# Trailmesh vfx demo **URL:** \ **Category:** Demos and projects\ **Created:** [June 5, 2024, 7:21am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071 "2024-06-05T07:21:25Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\ **Post date:** [June 5, 2024, 7:21am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/1 "2024-06-05T07:21:25Z")
With the latest improvements to trailmesh class, you can now make vfx trails with shader in the PG. There are params from the shader not exposed in the gui, you get the idea. You should be able to build a similar one for sword slashes. Hope it helps, enjoy! ---
**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\ **Post date:** [June 5, 2024, 7:42am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/2 "2024-06-05T07:42:49Z")
OMG! You can do **that** with the trail mesh 😲 This is huge! ---
**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:** [June 5, 2024, 7:47am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/3 "2024-06-05T07:47:52Z")
> [@phaselock](#): > > you can now make vfx trails with shader in the PG. It would be nice to have the link to the PG πŸ™‚ ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 5, 2024, 4:32pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/4 "2024-06-05T16:32:35Z")
This is so cool !!! please doc doc doc πŸ™‚ I want to try πŸ™‚ ---
**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\ **Post date:** [June 6, 2024, 3:17am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/5 "2024-06-06T03:17:35Z")
> [@labris](#): > > It would be nice to have the link to the PG The demo is using proprietary textures, so no saved pg. Plus I just barely started. > [@sebavan](#): > > I want to try Initially I used whatever was in the texture library (a saved pg would have been best), unfortunately it looked horrible. Give me urls to CC0 trail textures + noise tex for erosion and I can update the doc. Even better if someone from core team has it, no need to bloat the repo uploading a full vfx texture set. ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [June 6, 2024, 7:12am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/6 "2024-06-06T07:12:05Z")
for the noise you can use Procedural textures: [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/proceduralTextures) Otherwise I have a perlin laying around here: [https://raw.githubusercontent.com/BarthPaleologue/CosmosJourneyer/main/src/asset/perlin.png](https://raw.githubusercontent.com/BarthPaleologue/CosmosJourneyer/main/src/asset/perlin.png) ---
**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\ **Post date:** [June 6, 2024, 8:26am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/7 "2024-06-06T08:26:11Z")
Probably not. Done some googling on vfx trails. * * * Does this work? ![someTrail](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/1/916ed0e9ada2f7251cff755ea04cb18209f5c563.png) CC0 from here: [Material Maker](https://materialmaker.org/material?id=642) ---
**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\ **Post date:** [June 6, 2024, 12:59pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/8 "2024-06-06T12:59:06Z")
> [@CrashMaster](#): > > Procedural textures Oh yeah, you are right! One texture less then, booyah! > [@Joe\_Kerr](#): > > Does this work? Heh, no. That would have worked for 2d spritesheets with particle systems. For uv trickery, vfx textures are usually manually authored as grayscale 256x256/power of 2 textures with alphas. Black and white doesn’t even cut it. Some pipelines go up to 5 layer textures just for trails, not counting the bells and whistles. The demo uses 1 texture in a 2 layer shader which I think is sufficiently entry-level. ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [June 6, 2024, 2:45pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/9 "2024-06-06T14:45:47Z")
could you provide a link to an image that fulfills all the requirements? I have a hard time visualizing this description of the texture. Maybe there is a way to make a shader to generate it procedurally as well, which would solve the CC0 issue πŸ€” ---
**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\ **Post date:** [June 8, 2024, 6:30am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/10 "2024-06-08T06:30:38Z")
You can search on yt? I got it on the first hit with [vfx trails hand painted textures](https://www.youtube.com/watch?v=RxJwSMrgGOA). Scrub thru and you can see how its done. To get the blending to work in bjs, the texture should preferably be png with alpha, not black and white. ---
**Author:** ![ertugrulcetin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ertugrulcetin/32/33011_2.png) [@ertugrulcetin](https://forum.babylonjs.com/u/ertugrulcetin)\ **Post date:** [June 10, 2024, 3:10pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/11 "2024-06-10T15:10:56Z")
That looks so cool! A simple PG would be really nice, I was looking for a solution like this. ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [June 11, 2024, 8:18am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/12 "2024-06-11T08:18:20Z")
I made this small shadertoy to generate trail vfx textures: > **[Error - Shadertoy BETA](https://www.shadertoy.com/view/43V3Rd)** > > Build shaders, share them, and learn from the best community. I will send you a sample with an alpha channel so that you can get the blending working πŸ˜‰ ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [June 11, 2024, 9:36am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/13 "2024-06-11T09:36:28Z")
There you go @phaselock ![screenshot_24-6-11_11-37](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/5/4589fd84618572bb08c5d70c2cd7716f3b1b1539.jpeg) Here is the associated playground for anyone that wants to tweaks the settings: > **[Babylon.js Playground](https://playground.babylonjs.com/#BRG2Y9%2315)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [June 11, 2024, 9:52am UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/14 "2024-06-11T09:52:09Z")
Here is an improved version without the mirorring artefact: > **[Babylon.js Playground](https://playground.babylonjs.com/#BRG2Y9%2317)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ![screenshot_24-6-11_11-52(1)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/0/f0a2ed4a05588a5ec34d1f092937ce44360bff1c.jpeg) ---
**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\ **Post date:** [June 11, 2024, 12:07pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/15 "2024-06-11T12:07:59Z")
Hey, this is how your trail will look and its good! ![trail_procedural](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/b/bb6844b81f326cf3e1241d5a939cfe3d74ae0dd7.jpeg) You can go ahead and submit a PR to add the texture to the Playground? The png is 2048, you can resize it down to 256x256 or 512x512. I’m not sure about the doc, @sebavan, which section under textures should this belong to? Opacity? Time for me to hit the sack, cheers! πŸ™‚ ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [June 11, 2024, 1:04pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/16 "2024-06-11T13:04:16Z")
Looking good! Here is the associated PR: > > > associated forum thread: https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/…15 ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [June 15, 2024, 3:48pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/17 "2024-06-15T15:48:33Z")
The texture has been added to the assets but we still can’t use it in the PG right now πŸ€” > **[Babylon.js Playground](https://playground.babylonjs.com/#UU7RQ%234094)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [June 15, 2024, 3:54pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/18 "2024-06-15T15:54:21Z")
This texture is hosted by the assets server: > **[Babylon.js Playground](https://playground.babylonjs.com/#UU7RQ%234095)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [June 16, 2024, 1:33pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/19 "2024-06-16T13:33:53Z")
@phaselock I think there is nothing blocking you from sharing your awesome playground now πŸ˜‰ I am eager to see 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:** [June 16, 2024, 1:57pm UTC](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071/20 "2024-06-16T13:57:55Z")
> [@CrashMaster](#): > > πŸ˜‰ I am eager to see it! So am I!! πŸ‘€ [Next page](https://forum.babylonjs.com/t/trailmesh-vfx-demo/51071.md?page=2)