In this tutorial, we'll be creating an atmosphere diagram of Saturn's moon Titan, like the diagrams you see in textbooks. We will be going through how to precisely draw things to scale, color transparencies, create cool haze effects, draw clouds, and much more!
Before We Start
Before we start, some background on the structure of Titan's atmosphere. Like the Earth, Titan has atmospheric layers: a troposphere, stratosphere, mesosphere, and thermosphere (and an exosphere, but we're not going to include it). And just like on Earth, these layers are separated on Titan by the:
- Tropopause (40–44 km up),
- Stratopause(300–310 km),
- Mesopause (490–600 km),
- Exobase or the homopause or thermopause (about 1200 km).
Titan also has two haze layers: a main brownish-red one that occupies the space at about 100–210 km above the surface (depending on who you ask), and a second, ultraviolet-reflecting/transmitting one that's attached to the main one at the winter pole (its altitude is disputed and varies possibly due to the seasons. Some even think that it might be two separate layers, one that exists around 300 km, and another at around 520 km).
1. Render the Framework
Step 1
So those are the numbers. How do you draw a to-scale diagram with those? Such 3D modeling and projection is beyond the capabilities of Inkscape, so we're going to enlist another piece of free software called Blender to help us with that. You can download it at Blender.org.
Step 2
Most open source software (and a lot of commercial software) is a pain to get installed and working, but Blender is special in that it literally works right out of the box. Just download the .zip file (skip the install wizard versions, .zip is easier), extract it, and double-click the executable and it's up and running.
Step 3
When Blender launches, you should see this:
Step 4
Blender is an enormously complicated and powerful piece of software, but to use its 3D vector tools, you don't really have to leave the foyer. The two panels on the right are called the Outline panel and the Properties panel. The left sidebar is part of the 3D view panel, and is called the T-panel (Tool panel). The bottom panel is the animation time line, which you don't need to worry about right now.
What we want to model is an equilateral triangle (to use as a base for our triangular atmosphere prism). Blender doesn't have a polygon tool, but its circle tool doubles as a perfect geometric polygon generator. You add a circle by going to Add > Mesh > Circle.
Step 5
You create regular polygons by specifying the number of sides. For a triangle, it's of course, 3. Other than that, you can leave everything at the default.
Step 6
Right now, it's an outline. If you didn't specify an n-gon fill on the Circle subpanel, you can do it by entering Edit mode (Tab), selecting all three vertices, and hitting F (for Fill).
Step 7
Next, we want to turn on snapping, which will restrict our transformations to integers. The snap button is found on the bottom toolbar of the 3D view.
Step 8
To turn the equilateral triangle into an equilateral triangular prism, we'll use the Extrude tool (E). Since we turned on snapping, the new face should hop right to an integer value of 1 blender unit when you move the mouse up. Click to set the extrusion. This triangular prism, with a height of 1, will be used to build the rest of the atmosphere diagram.
Step 9
You can now set the height of the prism in the Object panel (a tab in the Properties panel). Setting the Z-scale to 0.385 for example will make the prism 0.385 blender units high. Perfect for building our atmosphere diagram. We're going to start by creating the ground. We'll give it a negative height value of –0.100.
Step 10
Next is the Troposphere. The value we're going to use for the Tropopause is 44 km. If we use a scale of 1 blender unit = 100 km, that comes out to a height of +0.44 blender units.
Step 11
To aid our display, we can play with some settings in the Materials panel (also a tab in the Properties panel). You want to set it to a matte blue color with a low opacity, like 0.5. You also want to give it a name, like "Troposphere".
Step 12
You can then enable Transparency back in the Object panel, so you can see through the troposphere layer.
Step 13
Next up is the stratosphere. Duplicate the troposphere with Shift-D. The stratosphere starts where the troposphere ends (the tropopause), so you want to copy the Z-scale and paste it in the Z-Location field, lifting the stratosphere in the Z direction. Here, I split the stratosphere in its subdivisions (the lower and upper stratosphere), but I wound up combining then back together later, so you can just model one big stratosphere. The stratopause is located at 300 km. 300 – 44 = 256 km = 2.56 blender units, so the stratosphere should be 2.56 units thick. Use this as the Z-scale value for the stratosphere.
Step 14
If you want to change its opacity to something different, go ahead, but make sure you hit the plus sign in the materials panel or you'll wind up changing the troposphere's material too.
Step 15
Here I'm modeling the stratosphere as two subdivided pieces.
Step 16
Continue doing this until you've built up the mesosphere and thermosphere. Titan's mesopause is at 600 km (3.0 blender units from the ground, 3.0 blender units thick), the thermopause is at 1,200 km (6.0 blender units from the ground, 6.0 blender units thick).
Step 17
If you hit 1 and 5 to go into orthogonal side view, you can see the precise layers quite nicely.
Step 18
That column is a bit too tall though. We want to scale it down by 50%. This calls for a precision scale operation. For that, you need to set a center of transformation right at the coordinates 0, 0, 0 (median coordinates of selected isn't going to cut it). You do this by setting the 3D cursor (the red and white circle with the cross-hairs). If you're lucky, the 3D cursor will not have moved from 0, 0, 0, where it started and you don't need to do anything. But if you accidentally clicked with the left mouse button, you need to reset it. You do this by going into the N-panel (it's hidden by default; you unhide it by hitting the N key, which is where it gets its name). There's a subpanel called 3D cursor where you can reset its coordinates.
Step 19
You then set the transformation center to the 3D cursor (the button is located in the bottom panel of the 3D view). Hit A to select everything and hit S (scale) Z (z dimension) 0.5 to scale everything by 50% in the Z dimension.
2. Prepare For Export
Step 1
So now we have the basic atmosphere column built. All we have to do is position the camera in 3D space. Since the column is taller than it is wide, I changed the display resolution to 1024 × 2048 (I like to stick to multiples of 2).
Step 2
The way most people position cameras in Blender is by enabling the Lock Camera to View function and hitting 0 to go into camera view mode. You can now navigate in 3D space and the camera will follow you.
Step 3
Sometimes I think the perspective is a bit overblown, so I increase the focal length to something like 50.
Step 4
Now we've got our scene set up. Blender is essentially a 3D vector tool, so the vector data exists within it. But how to you convert it to 2D SVG? For that you need a free SVG output script. Download it and copy it into the /2.68/scripts/add-ons folder inside your Blender install directory.
Step 5
Exit and restart Blender. If you go to File > User Preferences and switch to the Add-ons tab, you should now see a script called Viewport to SVG. Enable it.
Step 6
In the N panel you should see a new subpanel.
The defaults are fine, all you have to do is disable Facing Only (this will force the projector to draw all the occluded faces, not just the faces we can see). Select all the objects in the viewport (C select is good for this). Set your export file name/location and hit Export SVG.
And it will magically convert your 3D blender scene into a 2D SVG (Things might be a bit off-center though).
Step 7
I wound up adding some other stuff to my scene: the haze layers, cloud layers, and the height of the Cassini orbiters closest approach to Titan.
Here are some numbers I picked (which are probably gross simplifications of the scientific reality though):
- Methane cirrus layer 20–30 km (0.1 blender units based, 0.05 blender units thick)
- Ethane cloud layer 40–48 km (0.2 blender units based, 0.04 blender units thick)
- Main haze layer 100–220 km (0.5 blender units based, 0.55 blender units thick)
- Detached haze layer 450–500 km (2.25 blender units based, 0.25 blender units thick)
- Cassini's closest approach 880 km (4.4 blender units, single triangle)
Exported it looks like this:
Now we're ready to load this into Inkscape and begin the 2D phase of our atmosphere diagram!
3. Clean the File
Step 1
I'm sure you know how to load a document into Inkscape (otherwise, this may not be the right level tutorial for you). But before you touch anything, we just need to do a couple things to clean up this document to avoid editing bugs.
For some reason, Inkscape doesn't like XML comments in its files (the layering order freaks out), so you want to open up the Inkscape XML editor to find and delete all the XML comments in the file.
Step 2
The export script we used also outputs its vectors with the <polygon> tag, which Inkscape doesn't recognize for editing. Luckily this is easy to fix by selecting everything and running the Object to Path command.
4. Paint the Air
Step 1
After that's done, we're ready to start vectoring. First, I select everything again and remove the strokes that the export script put in there.
Step 2
Let's start with the basic atmosphere layers. Move all the cloud/haze layers off to the side (use a nice round number for the translation factor so it's easy to put them back).
Step 3
For the ground I'm going to move it to the top to work on it. We don't need all the rear-facing faces (because the ground is opaque) so you can delete them.
Step 4
For the side, I'm going to use the color #a6a6a6. The color of the top doesn't matter that much because we're going to change it later, but you can pick another shade of gray to use as a placeholder. Don't forget to set all the opacities to 100% (the script will have exported them with 90% opacity).
Step 5
We have a problem though. There's a big, ugly seam in between the two pieces of the ground. We can fix that by dragging out one of the edges behind the other.
Step 6
We're done with that for now, and we can group it and move it below the other objects where it belongs.
Next, we're going to be coloring the air layers. I selected each layer and staggered them at intervals of 100px so they're easier to work with (I deleted the lower stratosphere layer, we'll fill the gap later with one big stratosphere). I also ungrouped all the layers (you have to run two ungroup operations on each).
Step 7
Delete the bottom faces of each layer (they're extra, we can rely on the top faces to separate each layer).
Step 8
Make a copy of the troposphere layer and explode it a bit so you can see all the faces. Turn up the opacity of each face to 100%. Some hex colors you can use are included in the following image.
Step 9
Use the dropper tool to copy those colors to each of the corresponding faces in the air layers (you may need to do some temporary moving or relayering to access the back-facing faces).
Step 10
Now set the opacities. Box-select the troposphere faces (separately, not as a group, or else things we'll add inside the layers later will also inherit the transparency) and give them an opacity of 40%. Make the stratosphere faces 20% opaque, and the mesosphere faces 15%. The thermosphere faces will be dealt with individually, so we'll leave them alone for now.
Step 11
Now regroup all the air layers except for the thermosphere and move them back into place (using the same nice round integer values you used to move them out of place).
Step 12
Next, draw a black background that follows the contours of the air column. This makes it look better and makes the objects within the column more realistic. I also used the snapping tools to fix the stratosphere layer and close the gap where the lower stratosphere was.
Step 13
Now let's color up the thermosphere faces. I made the forward facing face 12% opaque, the two back faces 7%, and the top face 20%. I also changed the top face's color to #9ed9ff. Why you may ask? Because if you just use our normal color progression, you'll start to see a strange optical effect where, if you don't look hard enough, the column will appear to twist and the top face will seem to invert (like in a heavily perspective drawing). Tweaking the colors helps prevent this optical illusion (as illustrated in the following picture. The left is adjusted, the right is not).
5. Draw the Haze
Step 1
We're done with the air layers now. Let's draw some haze! Move the main haze layer back into position. Delete the side faces, we don't actually need them.
Step 2
Give them the color #ac4428, and make the top one 80% opaque and the bottom one 50% opaque.
Step 3
Next, take the two faces and add them to the stratosphere air layer group. There are several ways you can do this including Cut and Alt-Paste and ungroup-regroup. Move both of them under the top and front faces of the air layer but above the back faces. Then select the front air face and duplicate it (it should be located above everything). Make it the same color as the haze faces and give it a linear opacity gradient. Try to align the gradient nodes so that they create a band that fits the space between the top and bottom haze faces.
Step 4
Do the same thing for the two back haze faces, except they go behind everything except the back air faces they're derived from.
Step 5
Repeat for the upper haze layer, except we're going to use a different color because this haze layer primarily reflects/transmits ultraviolet light.
Step 6
On Titan, it's actually believed that the two haze layers are attached at the winter pole. We're going to show that by drawing a bridge between the two layers (use the snapping tools to help). Give it a gradient: at the top it's going to have the same color as the ultraviolet haze, and at the bottom the same color as the main haze. The object should have an opacity of 20%.
Step 7
Then add in another shape with another gradient to fill in the opacity hole. Use an extra stop between the extremes to avoid muddy colors in the gradient. Give the shape an overall opacity of 60%.
Step 8
Draw in the other face, using the snap to cusp and snap to path tools to make the edges line up.
Step 9
Then use the front face as a boolean cutter to make the front edges match.
Step 10
Give it a gradient with stops colored #5822ee 0%, #5822ee 75%, #5822ee 85%, and #ac4428 100%.
Step 11
Since this face crosses through air layers, we need to partition it. Use the snap to intersection tool in Inkscape to draw a dividing boundary, then extend it around to close it.
Step 12
Now duplicate it and move some nodes around to surround the other side.
Step 13
Use boolean intersections to cut the haze face in two (we use the Intersection tool instead of the division tool because the division tool is highly imprecise.)
Step 14
However, the Intersection operation is still imprecise (if you zoom in enough you'll see). This is unacceptable, so I select both halves of the haze face and use the snap to intersection tool to move them into place. It's probably still imprecise, but the boolean operations needed to fix it will introduce more imprecision than they'll correct, so I'll leave it be.
Step 15
The next step is to move the pieces into the layers where they belong. The top piece goes into the mesosphere group (where it goes under the front air face) and the bottom piece goes into the stratosphere group (where it goes under the front and top air faces).
6. Add Cloud Effects
Step 1
Next, we're going to add in the ethane cloud layer. Translate it back over onto the air column and degroup it. Colors and opacities are given in the following picture:
Step 2
Notice how the inside-facing face (the right side one) is tinted slightly orange (#d0bcad) in order to simulate the bounce lighting from the orange haze above it. For the same reason, we add a radial gradient with an orange-ish center to the top-facing face (the gradient is radial because the farther away something gets from the center of the orange haze, the less orange bounce lighting it receives).
Then just send each piece to its correct layer order. It should be pretty straightforward except that the front face goes on top of everything. Remember that it's a cross section, so the side faces will ride on top of the air its in.
Step 3
Just like how we added bounce lighting shading to the ethane mist layer, we're going to tint the ground. Give it a radial gradient with a center color of #b55b32 and an outer color of #dcad97. Here's a picture of the ground isolated:
Step 4
Within the air column, it should look like this:
Step 5
Now for the fun part—cirrus clouds! The way I drew them is, I made a simple squiggle with the Pencil tool.
Step 6
Then I used a tool called Power stroke, which allows you to adjust the stroke width across the length of the path. (Powerstroke is only available in the newest development version of Inkscape—0.49).
You activate it by going to Path > Path effects and then adding a new path effect through the new Path effects panel that will appear. Choose Power stroke. Also, make sure you turn off stroke color and give the path a white fill color (Powerstroke uses the fill color, not the stroke color).
Step 7
When you add power stroke to a path, a new set of purple handles will appear (If you're already in path editing mode, at the time of writing, you may have to exit and reenter edit mode for the purple handles to appear). These allow you to edit the path weight. Make the path wide at the right end and taper it off toward the left end. In the Path effects panel, change the interpolator type to Spiro, as it gives the smoothest curve.
Step 8
Keep drawing more of these cloud precursors until you have enough to blanket the whole triangular ground. A good strategy is to draw five or six unique cloud shapes and then use copy and paste to fill in the empty space. It's fine if the cloud precursors overrun the edges of the ground triangle. Don't group them just yet.
Step 9
Next select all the cloud precursors and give them a linear gradient. Because we didn't apply the gradient to the clouds as a group, the linear gradient will apply separately to each cloud shape. However, there is a problem: by default the gradient will have opaque white at the left end and transparent at the right. We want it the other way around.
Step 10
The easiest way to fix this is to select any random cloud and edit the gradient to switch the color values of the left and right stops. Make sure you have Link gradients enabled so that the change will propagate to all the other cloud precursors.
Step 11
Your cirrus clouds should now look like this:
Group them and give the group a little Gaussian blur (2.0) to soften them up.
Step 12
The cirrus clouds look a little sparse, so we're going to duplicate them and shift the copy slightly to give the impression of more clouds.
Step 13
You may remember that we rendered a precise cirrus cloud layer back in the Blender phase of this tutorial. We didn't use it to draw the clouds themselves, but we need it to position them correctly, so select it now and move it into superposition. As you can see, the clouds are a little low, so we're going to move them up slightly. (Again, overflow is still fine).
Step 14
Then just group the two cloud copies and move them into layering position. They belong in the troposphere, under the front and top faces.
Step 15
Now we're going to draw some methane cumulus clouds. First just draw some basic cloud outlines and shade them with radial gradients.
Step 16
To add some detail, draw some rough shapes to block out some bulges and crevasses in the clouds. It's fine and even good if they overflow out the boundaries of the cloud outlines.
Step 17
Then simply group them and Gaussian blur them.
Step 18
Use copies of the cloud outlines as Clipping masks for the shading blurs.
Step 19
And add some radial gradient shadows to give the appearance that they're hovering above the ground. Make the gradients black, with a core opacity of 40% and a peripheral opacity of 0%.
Step 20
The next part is a cool effect and it may be helpful to add a temporary dark background to help you work. Basically, we're going to simulate methane rain under the clouds. The way we do that is by drawing several blobby shapes under the clouds. They should look like dripping milk. A white color and 15% opacity is appropriate.
Step 21
Then blur them so that it looks like there's fine rain falling from under the clouds.
Step 22
Position them inside the troposphere layer (they should go under the front and top air faces and under the cirrus clouds.
Step 23
Similarly to how we drew the rain under the cumulus clouds, we're going to add in the condensate particle rain that falls out of the haze layer of Titan. Draw the same types of blob shapes, each with the color #be5224 with an opacity of 50%.
Step 24
Give it a Gaussian blur of say 9.0.
Step 25
Now we need a clipping path. Draw it by using the Snap to cusp node tool to outline the box that is between the ground and the haze layer.
Step 26
Group the condensate rain and clip it with the new clipping path you've just drawn.
Step 27
Finally, move it below the mesosphere and troposphere layers, so that its z-ordering is only in front of the ground.
Step 28
There's just one step left: use the same snapping procedure to outline the entire air column and set that outline as a clipping path for the entire column. This does a bit to mitigate any aliasing that might result from having so many elements stacked up on top of each other as well as clipping those overflowing cirrus clouds we drew earlier.
Awesome Work, You're Done!
In my final product, I added a simple outline that indicated the height of the Cassini orbiter's closest approach as well as text labels.
I hope you've enjoyed this science-filled vector tutorial. Why not try combining Blender with your next vector project?
