I am trying to create smoke particles. I am using a texture that is a Light Gray using BLENDMODE_STANDARD. But it seems too dark… Does NOT look like the color from the texture. Its to dark. If i use other blend modes… its really white… Like the texture has no effect at all.
Is this a bug ???
Here is an example playground showing the problem:
@MackeyK24, The reason you are seeing darker colors in your particles is that they are present in your texture. I extracted the alpha in your texture and what I found is that the RGB channels contain the same information as your alpha:
In the layer stack above, your original was Layer 1 which has the RGB channels in the thumbnail on the left and the alpha channel in the thumbnail on the right. Since there are dark pixels in the RGB, even if you have alpha on them, when you stack up several partially transparent dark pixels with alpha blend, you will return a dark pixel. To avoid this, you can see what I did above was to add a flat color (any color will do, whatever value you wish for your smoke) and then add your alpha to it. When you do that, you will get a central cloud that is a single color with falloff at the end.
I also wanted to add some more texture back into your smoke, so I made a few changes to your particle system properties to create more color ramp and a velocity gradient. I dropped comments in the code to tell you what my thoughts are when setting these parameters rather than read it here. https://www.babylonjs-playground.com/#NHREL6#4
Hope this helps and please let me know if you have more questions!
@MackeyK24, I wasn’t clear enough when I said that. When I say extract the alpha, that means in Photoshop the process of converting a layer with transparent pixels into a standard layer by extracting the alpha information into a layer mask. That’s why in the image above that you see two thumbnails, the left is the composite RGB channels and the right is the layer mask that was extracted from the alpha in the original file. That way you can disable the layer mask and see exactly what data is in the RGB channels without the alpha interfering.
What the original contains is the exact same data in R, G, B, and A meaning that any pixel that was highly transparent due to a lower value in alpha was also a low value in R, G, and B as well. When these pixels would stack up with others at the set emission rate of 1000, you would end up stacking dark, semi transparent pixels over each other and they would add up to an opaque pixel with a dark value.
What I did to combat that was to use a single color for every pixel in the R, G, and B channels with your original alpha data retained in A. That way you control the opacity of the texture with alpha, and rely on your color over lifetime gradient to add some variation in the particles. At this point, fewer particles are more advantageous so that you don’t have stacks of particles creating opaque shapes. Using a lower emit rate and a fast velocity at the start that quickly ramps down will spread out the particles and give you more texture in the system which gives more interest in the final look.
I hope this makes more sense, but if you still have questions, I can create a quick tutorial video so you can see all of my steps and why I use this technique.
Awesome work, @MackeyK24! I agree that this feels good. Now I see why you were emitting 1000 particles a frame. Since you are tying the emitter to motion, the higher emission rate will feel much better with burnouts. I also dig the tire marks you are generating.
With the higher rate (or a higher opacity on the particles) I think you could really get a good look with extended drifting where you would expect the smoke from the burning rubber to get thick! Nice work!
Thanks guys… all this comes from the power of the BABYLON.ScriptComponent from my SceneManager Extension.
Everything about the car… the physics, wheel colliders, vehicle raycaster and the StandardCarController with all the driving mechanics was setup in Unity with my new Pro Toolkit.
But as you see in the playground… you can use all that functionality anywhere in any project (must have babylon.manager.js on the page) simply by getting a reference to your desired components and calling its member functions… like standardCarController.drive()
That gives you that Unity Like Game Development workflow for your native Babylon Javascript/TypeScript development
FYI… I went the other way around… I used GIMP to colorize the original non-corrected smoke texture to WHITE
Then use the coloring and alpha with the standard blend mode on the particle system to darken/colorize the particle to the desired final colors.
DARKEN the white texture turns out to look a little better than trying to WHITEN the gray texture… And you can more easy apply what ever smoke color you want that is multiplied against the source white smoke particle texture… Thanks @PatrickRyan again for pointing out the texture image issue