2010-03-02

Nothin' like a good smoke...

Today I'm gonna show you something. That's right, it's tutorial time (insert crowd cheers here)!
I'm going to show you how to put a simple smoke (or any particle) in 3ds Max together. I'm using this technique for a specified 3d engine, but I'm sure you can find a way to use some parts of this tutorial, if not the whole thing.

1st step: we need an effect! As the title suggests, let's make a smoke. In a new 3ds Max project, make a new SphereGizmo (Create tab > Helpers > Atmospheric Apparatus > SphereGizmo)! Now open the Environment and Effects window (Rendering > Environment... or the 8 key by default) and roll down to the Atmosphere rollout. Click Add... and select Fire Effect! If selected, there should be a Fire Effect Parameters rollout, there click on Pick Gizmo and pick on the SphereGizmo we made earlier. This is how your scene should look like at the moment:


2nd step: let's make a smoke! It's nice and good that we have a fireball at the moment, but it's quite useless by this point. If you make a quick render (F9 by default) you see what I mean. Yes, you have a point. We shall make it grey and it's a smoke, so let's do so!
First, go to the top in the Environment and Effects window for a second. In the Common Parameters rollout you see a Background setup, and the color is black by default. Click there and set it to white (RGB 255,255,255)! I explain later.
Now go back down to the Fire Effect Parameters, and set the colors to be black (RGB 0,0,0)!

Make a quick render! It almost looks like as a smoke, but we won't use this as a texture just yet! The reason why I told you to set the background color to white, is because it's easier to see how strong our smoke will be in the final process. Also, it will serve as a negative alpha texture for our final texture, so we're heading somewhere. Don't forget: since we use black as inner color, the more black it is, the more you can't see through it! Now I'd advise you to play with the values and settings, until you're satisfied with the result.
With a SphereGizmo with a radius of 45 units, I used:
Strech: 1,0
Regularity: 0,15
Flame Size: 16,0
Flame Detail: 4,0
Density: 10,0
Samples: 6



3rd step: let's animate it! You might ask yourself: why? We have a nice smoke texture, don't we? Well, not exactly. If you look at a real smoke, you see it doesn't stay in the same form all the time as it flies higher in the air. It moves, it grows in size, thus becomes blurred etc. Why don't we animate that whole thing and use it that as a texture? Wouldn't it be AWESOME? Yes it would, so let's start.
Normally, we don't want our smoke to just "pop up" in the middle of nothing, and just vanish instantly, so as the frames go (like on a film of an animation) first we want it to appear as a normal smoke would, then slowly become less visible, and disappearing by the last frame. Also, we don't want any frames to be pure empty, because making our smoke disappear as the animation finishes would do just the same.
Okay, enough of this confusion, let's do it so you'll see what I mean.

Set the animation bar to the first frame, which is 0. Set the Density of the smoke to 1. Now click the Auto Key button (on the right side of the animation settings) and move your animation bar to frame 3. Now set the Density back to 10,0. This will make our smoke slowly appear in 3 frames. Now, we want it to disappear. Go to frame 15, and set the Density back to 1. As you move your animation bar from start to end, you see the Density is always changing - going up till frame 3, and back down till 15. While on frame 15, set the Drift to 15. This will make the smoke look like it's being blown by wind. You also can try to rotate your SphereGizmo a bit, so it's actually moving.

Note: if you wan't a smoother animation, you can use more frames for your animation, just keep the framecount to be power of 2. So the next step after 16 should be 32, then 64, etc.

4th step: render time! Let's set up our render. Get the Render Setup window (Rendering > Render Setup or F10 key by default). Here set the Output Size to have a same width and height, with the power of 2. For our example, it will be 256. Now set the Time Output to be Range 0 to 15. Now go down to the Render Output, and click Files... By default it will save your files in the renderoutput folder, but here you can set it to save it somewhere else if you want. Choose BMP as type, and type in "smoke" as filename. Click save, then it should ask you what type of BMP you want to save it in. Just leave it to RGB 24 bit. Now if you hit Render, you should see your animation being rendered into different files.

That's all we needed 3DS Max for now. Next up, open your image editing software, I'm going to use Photoshop.

5th step: putting our texture together. In your renderoutput folder you should see 16 bmp files, open these. Now a little math. Since we made a 16 frame animation we take it's square root, which equals 4. The size of our bmp-s are 256×256, so the size of our texture will be 4×256=1024. So, we want to make a new project with the size of 1024×1024. (If you're smart enough, you already figured out why I told you to use numbers with the power of 2.) Now you should copy your opened smokes, then paste it into your empty canvas, snapping them together in the order left to right, from top to bottom. Here's an example:



and this is how it should look like:



Now with that all set, go ahead and Merge your layers together. Just in case make a copy of it. Now make a mask of your copied layer by clicking on the third button on the botton of the layers panel. (It should be a gray rectangle with a white sphere in it.) Now in the same window go to the Channels tab. You notice that under the red, green, and blue channels, there should be Layer name Mask. Click on the empty box next to it, so you can see it, then copy your smoke texture in it. Now our layer has transparency using the alpha channel. But since in an alpha channel black means transparent and white not, we need to invert its colors. Invert colors by going into Image > Adjustments > Invert, or press Ctrl + I keys by default.

Finally our smoke needs color. Select your layer, and go into Image > Adjustments > Gradient Map...
Click on the gradient color to change it. Notice that the black color in the original layer will be changed for the color on the left side, and the white color will be changed for the color on the right side. So if we want a smoke with a darker center and a lighter edge, this is how it should look like:




Press Ok. Before you save your result, you should clean up your project, and the only layer existing should be the one we just made. The background should be checkered by this time. If you're not satisfied, you can add changes either to your layer, or the layer mask - for example: Brightness and Contrast, Levels, Hue and Saturation, etc.
Go to File > Save as...
You should choose a file format which uses alpha channels. This could be a .png format, or a 24 bit .tga. I'll save it as a .png.



Congratulations! You just made an animated smoke texture!

In the next bonus stage, I'm going to show you it's usage in 3DS Max. Note, this might not work in all engines if you export it, however if you're familiar with scripting then you should be able to use it in any editors.

In a new max file, make a square plane (Create > Geometry > Standard Primitives > Plane). Now add your smoke texture to it - or to actually understand what we are going to do, download the image with the numbers above and use that one. In fact, I'm going to do so. :)



In the modifiers list, select UVW Xform. Let's do some math again!
Since our texture has 4×4 frames, U tile and V tile should be 1 / 4 = 0,25. Now you see only one frame fills our whole plane, but it's the 13rd frame. We need to offset it. Set V offset to 0,75.

Here is when it gets tricky: next to the Set Key button there is a small icon with a graph on it. This tells the animation editor what kind of a keyframe it should place when a new is created. Hold click on it, and select the third one, which looks like a piece of a staircase. Now whenever a new keyframe is made, it doesn't "fade" into it's new position, but it rather "jumps" there.

Click Auto key. Move your animation bar to 1, and set the U Offset to 0,25. You see the plane now shows 2. Move on to keyframe 2, and set U Offset to 0,5. Noticing a pattern? At every frame the U Offset changes by 0,25 units. We still have one more in this row, so go on and add U Offset 0,75 at frame 3. Now, we need to jump to the next row, and go back to the beginning, since that's where the next frame will be.
Set U Offset back to 0 and V Offset to 0,5. Now, repeat the process, until you get to the last frame, which should be on frame 15, and the plane should show 16.

Great, our plane has an animation going on. You can put the smoke texture on our plane now, it should work.

If you want to see how it looks like, you can do this:
Select your plane, make an animation starting at frame 0 and ending at frame 15. For example make it move upwards. (Don't forget to change your keyframe back to linear or smooth!) Now, go to Graph Editors > Track View - Curve Editor. Select all the keyframes, and click the Parameter Curve Out-of-Range Types button. Select Cycle. (This might act weird, but that's because you might have not forced the V Offset to 0 in the UVW Xform at frame 15, so do it!) Now make a copy of your plane, and move it's keyframes forward by 1 frame.
Repeat this 13 more times (so you should have a total of 15 planes).

Using the Track View - Curve Editor, you can change the speed, the size, and the lenght of your smoke by scaling the keyframes in different ways. Last, but not least, rotate all your planes in different angles, so they don't look exactly the same. This is how mine turned out:


Well, that's all for today. I hope you liked this tutorial, and remember: these are just the basics! Keep experimenting with new things, like:
- with a Line and a Path constraint you can make a trail of smoke
- use more frames
- make other effects, like fire, or liquid splatter

Have fun! I'm gonna eat something now and get some sleep, because this took me a while to actually make a tutorial out of it, and made me pretty tired. Otherwise making such effects after some time won't take so long after some time. :)

Cheers!

1 comment: