In this tutorial, I will show you how to create this “photo-realistic” cutaway Saturn illustration in pure SVG. We will use the open source 3D graphics software Blender to produce a physically shaded render of the planet, which we will use as a base to reproduce the image entirely in SVG vector. You will learn how to replicate 3D shading and bounce lighting with SVG gradients in Inkscape, draw the planet’s transparent rings with colors sampled from NASA images, create an aurora effect over the planet’s north pole, and much much more.
1. Modeling Saturn in Blender
Step 1
If
you don’t already have it, download Blender from blender.org
(current version at the time of writing is 2.73a). Blender is an
incredibly powerful 3D app which we will be using to render a bitmap
image of the Saturn illustration we will be creating.
This
tutorial will assume some basic knowledge of the workings of Blender,
as well as Inkscape. If you need a refresher, check out these Blender tutorials, or these Inkscape ones.
You
will also need the Blender
SVG export script, which you can download here.
(The export script was written by a member of the Blender community
and allows us to export the 3D vector geometry in Blender to 2D SVG
vector geometry.) Copy the script into the 2.73/scripts/addons
directory in your Blender install.
Step 2
Activate
the script from within Blender in the Preferences window by
checking the box next to the script (the script will be found under
the Import-Export tab).
Step 3
Modeling
the interior layers of Saturn involves creating concentric spheres of
different sizes in Blender. Use smooth-shaded UV spheres
with a radius of 1, and a high UV resolution (128 segments × 64
rings is probably sufficient). The scaling is dictated by how big the
layers in the actual planet are. There are two ways this can be done.
If you know the actual mile radius of the layer, you can just input
that into the sphere’s scaling factor (here 0.063 corresponds to
6,300 kilometers, the radius of the Saturn core).
You
might also set the scaling of the sphere to the Saturn radius (60,268
km) and then use the Delta
Scale to set the size in terms
of planet radii, given below.
| Liquid hydrogen layer | 0.890 planet radii |
| Helium rain | 0.553 |
| Metal hydrogen | 0.483 |
| Icy core | 0.225 |
| Rocky core | 0.104 |
Step 4
Next
we parent all the inner spheres to the main Saturn sphere.
This
is important because if we squish or squash Saturn, or rotate it or
something, the insides will go along with it. We need to do exactly
this because Saturn is not actually a sphere—it’s an oval, as its
polar radius is only 54,364
km, compared to 60,268 km
for its equatorial radius. If you
set the Z Scale
of the Saturn object to 0.54364, then the rest of the planet will
conveniently scale by that amount too.
Step 5
Next
we create the cube which will outline the cutaway section in the
image. Move it so that its corner sits on the origin. You might find
it helpful to set the cube to a wire display so that you can see
Saturn inside.
Then
just go through each sphere and cut away the section inside the cube
with a Boolean modifier.
Step 6
After
color-coding each layer with the colors you want each layer to be in
the final image, you might notice a problem. The layers overlap each
other.
Fix
this by creating copies of each sphere (except for the largest
and the smallest) without the Boolean modifiers. (You might
want to move them to a different Blender layer so that they
don’t clutter your view). Then, give each original sphere a
second Boolean modifier against the next smallest copy sphere.
This creates hollow, disjoint planet layers that don’t bug out in
the viewport.
Finally
give each original sphere an Edge Split modifier to give the corners
sharp edges.
Sometimes
the Boolean modifiers will simply refuse to work properly (3D
Booleans are notoriously fussy), in which case you might just want
to perform the cutaway operation on the mesh manually (this should be
possible if you set the UV resolution of your spheres to a multiple
of four).
2.
Rendering Saturn in Blender
Step 1
The
next step is to texture Saturn. Making sure that you’re in the
Cycles Render mode, create the following node setup.
For
the image texture, use the image which can be found here,
courtesy of Björn
Jónsson.
Step 2
The
texture will show up as a homogenous yellow in the viewport (Material
mode). This is because we need to UV map Saturn so that
Blender knows which parts of the texture to apply to which parts of
the 3D sphere. Enter XZ orthogonal view (1 5 on the number
pad) in edit mode, select all the faces (A), and unwrap the
mesh under Sphere Projection mode. Set Direction to
Align to Object and Align to Polar ZY.
The
hard part is scaling the UV map (found in the UV/Image Editor)
to the rectangular region overlaying the image texture. Scale to
Bounds in the Sphere Projection panel will handle the
vertical dimension, and for the horizontal you’ll have to spend some time adjusting it until it looks right.
Once
you’ve completed the UV unwrap, you should see a textured Saturn in
the viewport.
Step 3
The
next step is drawing all the guidelines for the rings and moon
orbits. Create a bunch of Bezier Circles
and scale them according to your scale scheme to mark out important
transitions in Saturn’s rings, as well as its moons’ orbits, if
you want. The radii are listed below.
|
D–C ring border |
74,500 km |
| Colombo gap | 77,870 |
|
Maxwell gap |
87,491 |
| C–B ring border | 92,000 |
| B–Cassini | 117,580 |
| Cassini–A | 122,200 |
|
A ring border |
136,780 |
|
F ring |
140,220 |
|
Janus and Epimethius |
151,500 |
|
Mimas |
185,400 |
|
Enceladus |
237,900 |
|
Tethys |
294,600 |
|
Dione |
377,400 |
|
Rhea |
527,100 |
|
Titan |
1,221,900 |
| Hyperion |
1,481,000 |
Step 4
The
rings are simple to model, just a flat mesh formed from two circles.
Add a UV seam between two arbitrary panels in the ring object.
The
texture I used I modified from a public
domain NASA image. Just take a 1px-high cross crop of the bottom of the ring and scale it vertically to some arbitrary height so you can see the pattern.
The
rings are tricky to UV unwrap, but there are many ways to get it
right. All you need to do is make sure each face spans some vertical
part of the radial texture, in its horizontal entirety. Personally I
used the Follow Active Quads option and straightened out the sides
with S X 0, but you could also unwrap each face individually and have
them each take up the entire image space, overlaid on each other.
Take care that the texture is oriented in the right direction.
Then
scale the inner and outer circles until the features on the texture
agree with the guidelines we marked out earlier.
Step 5
Create
a material for the rings. The node setup here will make the dark
parts of the rings transparent, which will allow them to cast shadows
(we need to know where the shadows will land when we convert to SVG).
Step
6
Now
we set up our Blender scene to render Saturn. Add a sun lamp
to provide illumination (a Strength of 3 and a Size
of 0.01 is recommended).
And
position the camera to capture the scene. This is the most important
step because it will set in stone the angle that Saturn will be drawn
from in our SVG illustration. I used a Focal Length of 45
and some shift to position Saturn within the camera frame for
a more pleasing composition. Make sure Depth of Field is turned off
(Size = 0).
Step 7
You
might want to add a fresnel atmospheric effect to Saturn (this gives
the edge of the planet a blue tinge). You do this by duplicating the
Saturn object, removing any Boolean modifiers and manually deleting
the cutout sector. Give it a slight Delta Scale
to keep it from overlapping the Saturn mesh, and set it to a wire
display.
Here’s
the node setup I used. The Light Path node is there to prevent
the atmosphere from casting unsightly shadows.
This
should yield you a nice render of the planet. While we’re going to
use it as a base for an SVG drawing, you could also use the 3D model
itself in a 3D animation project if you want.
Step 8
There
are several other images we need to generate. We need to make Open
GL (viewport) renders of the various guidelines we laid down (Render > Open GL Render Image).
We
also need to generate a plain texture render of Saturn, without any
Booleans or other elements (make sure you saved the original file
though). Change the material shader to Emission (Strength
= 1.0) to make the Saturn object shadeless and render it at
the same size as the full-scene render.
Step 9
Finally
we have to create an SVG render of the interior layers. Remove all
the Booleans and other modifiers from the interior spheres, except
the first ones, which cut the spheres away from the cube object. The
layers should overlap one another again. Then select the interior
faces and delete the round exteriors (Control-I, Delete).
Then
select all the layer objects and export them to SVG geometry with the
Export SVG script we downloaded at the beginning. The plugin lives in
the 3D viewport N-panel.
3.
Texturing and Modeling Saturn in SVG
We
now exit Blender and move to another piece of open source software,
GIMP, to process the Saturn texture we rendered in Step 2.8. GIMP can
be installed in many different ways, and comes pre-installed with
some operating systems; this tutorial will not cover how to install
it.
Step
1
The
only thing we actually need GIMP for is to produce a negative of the
Saturn texture render (Colors > Invert). Save and
export the negative to a .png file.
Step
2
Next
we import the negative into Inkscape. Inkscape will probably import
the image at the wrong size, so in the SVG source code panel, set its
width and height to whatever the image was originally.
Fit
an SVG ellipse around the Saturn in the negative. This will serve as
our clipping mask.
Step
3
To
turn the negative texture into vectors, we use Inkscape’s Trace
Bitmap function. Set it to Colors; 8 scans is
probably sufficient.
Inkscape
will trace from lightest to darkest, stacking the scans. This is why
we inverted the texture, so that the black background (now white)
would become the bottommost scan.
Turn
the scans back to their true color by reinverting them: Extensions > Color > Negative.
Step
4
You
might want to optimize the scans a bit to reduce the number of
stacked objects near the edges, which can cause aliasing problems.
Many parts of the lower-level scans are covered by higher scans,
redundancy that ought to be reduced if possible.
Step
5
Next
we import the Saturn Blender render we made, in the same manner as
with the texture render. Drag and drop the SVG rendering of the
layers into your workspace, over the Saturn render. (Here, the bitmap
render is above everything except the ellipse from Step 3.2 and the
SVG planet layer render).
The
planet layers will almost certainly come in at the wrong size, so we
have to scale them to match the bitmap render.
Then
we ungroup the layers completely, and run Path > Object
to Path on all of them to make them editable in Inkscape. It
helps to run Path > Simplify
to turn the polygonal shapes into smooth wedges. Finally, turn all of
their opacities up to 100%
(they will probably come in at 90%), remove strokes, and color them.
4. Shading Saturn
We
will also be relying on the Blender render of Saturn we made to tell
us how to shade the planet in SVG.
But
wait! Isn’t that cheating?
Of
course not. It’s just like an acrylic painter laying down a
grisaille layer, or a 3D artist modeling from reference images. It
helps us achieve a much better result than we ever could free-drawing
by eye or memory. Blender’s raytracer will tell us exactly how to
shade the planet so that it makes sense when we look at it; surely
that’s easier and better than simply guessing how the light falls.
Step
1
The
highlit faces—the ones perpendicular to the sun in this image—are
more or less shaded completely flat. You can just use the eyedropper
tool to retrieve their colors from the render.
Step
2
The
shadow faces are more complexly shaded. For the very thin layers, we
can get away with just using a linear gradient, sampling colors from
the corresponding spots in the render. Avoid sampling by simply
clicking with the eyedropper. The render will likely be very grainy,
and sampling by clicking only takes color from a single pixel, so the
color you get might vary wildly. Instead, hold and drag the
eyedropper over the region you want to sample—doing this makes the
tool average out all the pixels within a certain radius.
In
the thicker faces, the color varies in two-dimensions—arc-wise and
radially. Here we shade the face radially only, sampling from the
middle of the arc in the render. Accordingly, we use a radial
gradient to accomplish this shading.
Step
3
We
will create the arc-wise shading by overlaying the base objects with
transparencies. These transparencies are a faint white at one edge,
and transparent elsewhere, lightening the shadow faces where they
meet the other two faces (bounce lighting).
Note
that the pink face gets tinted a brighter shade of pink at the edges,
not white. Try to avoid muddy
gradients—the transparent stop still needs a color too. Also
pay attention to z-ordering; all of the transparencies are
underneath the next-highest layer.
Step
4
The
tangent faces (parallel to the direction of lighting) are simpler to
shade. The thinner layers can take linear gradients, just like in the
shadow faces.
The
thicker faces are shaded conically, which we can fake with a radial
gradient, centered off the face. Because the gradient needs to be
steeper on one side than the other, we shift the gradient focus
(Shift-drag the square part of the gradient) closer to the
steep side to make an asymmetrical gradient.
Step
5
The
core is simple enough to shade—just a radial gradient.
Step
6
As
polish, add underneath each set of three faces a triangular shield of
an intermediate color (or an approximate gradient).
This
fills in the “seam” between the three faces that make up each
layer, preventing anti-aliasing artifacts from showing up in the SVG.
Step
7
Next
we shade Saturn itself. First group all the texture scans and clip
them with a copy of the bounding ellipse (Object > Clip
> Set).
Step
8
Then
we duplicate the ellipse and fill it in with a soft radial gradient
that’s a faint blue on the outside and transparent on the inside
(remember that the transparent stop still has to be blue!).
This recreates the fresnel (inverted halo) atmospheric effect around
Saturn. Make sure it’s underneath the various cutaway shapes.
Because the left side of Saturn in the render appears to be bluer than the right, we shift the transparent center of the gradient a
little to the right to reflect this.
If
you look closely at the render, you’ll notice that the planet
appears to be ringed by a sharper blue fresnel. We recreate this with
a second ellipse, this one shaded by a steeper fresnel gradient, and
centered on the planet core (we couldn’t just add stops to the
first fresnel ellipse because its gradient wasn’t centered).
Step
9
Finally,
take the last remaining ellipse and use a radial gradient to make it
into a shadow shader (black on the outside, transparent on the
inside). Play around with the stops to create a smooth falloff
similar to the one in the render.
Consider
making the radius of the shadow ellipse one or two pixels wider than
those of the underlying ellipses—this prevents the yellow edge of
the planet from peeking out from behind the shadow ellipse on the
dark side of the planet.
However,
since that still might happen at small sizes (faintly visible in the
image below), you should create a thin black collar around the disk
of the planet to cover the artifact up. The black collar will also
help prevent aliasing on the lit side.
5. Creating Saturn’s Rings
At last, we come to the most spectacular part of this tutorial—creating Saturn’s rings.
Step 1
Using the Open GL render we made earlier, fit SVG ellipses around all the visible transitions in the ring system. (Pictured below is a semi-transparent version of the Open GL render overlaid on our SVG Saturn, with one ellipse fitted.)
This step is probably the most tedious part of this tutorial, because you will have to fit probably two dozen ellipses. Consider color-coding them to distinguish different parts of Saturn’s rings.
Step 2
Next, we use the ellipses to produce filled regions. To make a filled region, select two ellipses, combine them into one object (Path > Combine) and reverse the direction of the inner path (Path > Reverse) to make a hole. Use your artist’s judgment as to whether the regions should be disjoint or stacked—areas with different hues should probably be disjoint, while a region that is a brighter part of an adjacent region should probably be stacked on that region. Most of your regions will probably be disjoint.
Step 3
Here comes the fun part—coloring Saturn’s rings.
How did I get the rings like that? I’ll show you.
First we need a good source to glean the colors of the rings from, as the ring texture we used in Part II isn’t as attractive as some other photographed-textures of the planet’s rings. I chose this NASA image as my source.
But you can’t just grab the eyedropper tool and pick from the reference image. That would only give you an opaque color and part of the beauty of Saturn’s rings is their partial transparency. So what we do instead is take the color from the ring reference, then brighten them in color while simultaneously reducing them in transparency. This yields the same color when viewed over black, but partial transparency over other backgrounds (like Saturn’s planetary disk).
Do the same thing for every ring region you carved out.
In some regions, like the heavily banded B-ring, it makes sense to use an SVG stroke outline to add additional complexity, but use stroke sparingly in the rings because it does not get thinner at the top or bottom as it should.
The rings become very faint close to Saturn, creating beautiful transparency effects over the planet.
Finally, we tune the opacity of the rings as a group by tweaking their group opacity (I used 63% opacity).
Step 4
We need to make the rings disappear behind the planet. We do this by combining the inner edge from a copy of the black collar object with a rectangle the size of the page to make a filled rectangle with a hole in it for Saturn.
Since the rings only disappear behind Saturn (not in front of it, obviously), we fill in the bottom half of the hole.
Then set it as a clipping mask for the rings.
Step 5
The black collar might exacerbate the “seam” between the lit side of the planet and the clipped rings.
Fix this by punching a “hole” in the black collar with a small transparency gradient (black around the gradient, transparent inside it).
Step 6
Saturn casts a shadow on its rings. We create this shadow by adding a circle object to the ring group, and using it as a canvas for a black–transparency radial gradient.
Step 7
The rings also provide illumination to the dark side of Saturn. As you can see in the render, the bounce lighting casts two faint bands of light on Saturn, separated by a gap (from the Cassini division, probably). First we make a single light patch with a radial gradient on a copy of one of the blue fresnel ellipses. This gradient will have a very low opacity given the faintness of the bounce lighting.
Then we make the dark gap with another gradient on an identical ellipse. This gradient is transparent on both ends, but a faint black in a narrow band in the middle (shown below on top of the cutaway sector, though it should actually be underneath). The ellipse the gradient lives on should be reduced to an segment covering the left half of the planetary disk, to prevent the dark band from showing up on the lit side of the planet.
This creates a subtle bounce lighting effect on our vector Saturn.
Step 8
Finally, just as Saturn shades its rings, the rings also shade the planet. Roughly trace the ring shadows seen in the Saturn render, and color them accordingly with transparencies of black.
Then give the shadow group a 1% gaussian blur and tuck it underneath the ring group.
6. Auroras and Moon Orbits
According
to some sources, Saturn has some lovely pink auroras, which we can
recreate in SVG.
Step
1
First
draw the surface footprints of the auroral rings.
Step
2
Then
draw vertical sheets emanating from the rings. Give them gradients
that make them red at the bottom and purple at the top. The trick to
making ray effects is overlapping these sheets.
Step
3
Then
just give the auroras a slight gaussian blur (3%).
Step
4
The
auroras might not look that great at this point. That’s because
they are not being overlaid on the image with the right blend mode.
Create a new SVG layer, and move the aurora objects into it (right
click > Move to layer…).
Then
set that layer’s Blend mode to Screen. That makes it
so that the light from the auroras gets added to the colors
underneath them, rather than replacing them.
Step
5
If
you want to include moon orbits in your drawing, you can produce
another Open GL render, this time with a wider field of view
(decrease the focal length), and fit ellipses to that.
Step
6
You
might notice that the area around the aurora is acting funny. That’s
because the Screen blend filter bugs out over transparent areas of
the image.
We
can fix that by simply adding in a black opaque background underneath
the drawing.
Awesome Work, You’re Now Done!
In
my final image, I added annotations, as well as small circles
representing the moons. You can see the finished SVG at Wikimedia Commons, where it now lives.
I
hope you’ve enjoyed this tutorial! Check out some other planets
I’ve drawn, including Jupiter,
Uranus, and Neptune,
as well as the Moon. If you have any questions or comments, please don’t hesitate to
leave a comment below!
{excerpt}
Read More