After seeing this engine “flare” (the fire that comes out of the engine) in the Bad Batch (animated TV show), I thought it would be cool to add this to a model. Does anyone have any idea how to do something like this using Babylon or Blender?
Here is my spaceship engine/drive system via ParticleSystem:
Just play around with the values to your needs. Hope it helps 
3 Likes
I’ve gotten to https://playground.babylonjs.com/#X0MWAT#1, but individual particles are still too obvious…
As far as rendering goes, the “flare” is emitted from only specific faces on a mesh, and all of the emissive faces share a material. Maybe there is a way using ShaderMaterial?
@PatrickRyan did some similar effects in BabylonJS/SpacePirates: The Space Pirates game is a demo made to celebrate the Babylon.js 5.0 Release. (github.com) so you may want to take a look 
3 Likes
@PatrickRyan I’m not familiar with the source for your game. Where/how did you define the engine effect?
I did some digging… and actually found it!
First I took a look at Ship.ts, which lead to Trail.ts and finally to thrusterFlame.json.
At first, I was confused but loaded it into the Node Material Editor which worked.
Using the exported NME code gives this, which works but is bloated for production code.
The NME also gives some shader code, which I can’t get to work (see this PG). It gives an error relating to the texture.
Any suggestions on how to get the shader code working?
Nme shader code is not that simple to reuse or meant to be reused directly. Why not loading it from JSON or the snippet server instead ?
1 Like
A few reasons:
- The game I’m using it for must run offline (e.g. all resources must be self-contained)
- I would prefer to have it run on the GPU to better optimize the game (since most stuff runs on the CPU)
- To keep it organized and uncluttered – The export NME JS and JSON are both well over 1000 lines. The shader is only around 350. In addition, I already use some shader code so I can use the existing folder structure.
@Vortex, here are all the ship assets exported into a static scene. Pressing the V key toggles between ships and the spacebar toggles between the engine settings. You can see how I am building and managing the shaders there.
The method I am using for displacement is just a texture channel with directional noise multiplying by a value for displacement along Z. The amount of displacement is also modified by the V gradient of the UV coordinates of the mesh. This is the original mesh:
This is how the mesh is laid out in UV space. I oriented the mesh in UV space to take advantage of the UV coordinates so I could control the amount of displacement along the length of the flame. The vertices close to the engine get little to no displacement in Z and only a little wobble. The ones toward the end of the flame get the most displacement to make them appear to dance along Z.
You can see the displacement falloff in the wireframe below:
The texture itself is just a channel packed noise texture to mix color and displacement. There is a second mesh in the engine effect that has a swirling vortex shader on it just to add some extra dimension. Hopefully with everything isolated out like this you can better follow what I did.
5 Likes
Yes, thank you so much. I love the whole project… Maybe I’ll be able to get my game to the same level of quality one day. For now it’s more of a hobby so I don’t work on it as much as I’d like to.
Edit:
@PatrickRyan As I mentioned in my earlier post, do you know what is wrong with this PG? I have the exported NME shader code and I’m pretty sure all the values are being set correctly.
1 Like
You need to use the exact uniform names (a number of them have a u_ prefix) and defines VMAINOUTPUT14 to avoid the shader error:
3 Likes
Thanks! I wish I could mark multiple solutions… The community has been so helpful!
3 Likes
I cleaned up the shader code some (it’s now about 150 lines): https://playground.babylonjs.com/#FIATLD#9
Is there a way to make the part of the thrust mesh that is black transparent? I’ve tried changing the shader alpha values but they don’t change anything.
You have to enable alpha blending and use the additive mode:
5 Likes
Thanks again!
1 Like