The Perception Guide to FUI: Creating Topographic Map Geometry

Photo of Perception

Instructor Perception

Share this video
  • Duration: 10:03
  • Views: 5852
  • Made with Release: 18
  • Works with Release: 18 and greater

Russ Gautier (Art Director at Perception) discusses making geometry-based topographic maps in Cinema 4D.

Topographic geometry can be created in Cinema 4D using texture maps or even Sketch & Toon's Contour mode, but Russ Gautier from Perception outlines a simple and effective technique for generating actual geometry based on the topographic contours of an object. Combining the Cloner, Connect and Boolean Objects provides a foundation for the geometry, which can be rendered with ambient occlusion or extruded to create eye-catching topographic visual effects.



Hello, my name is Russ Gautier, I'm the art director at Perception in New York City. And today we're going to talk about enhancing your UI and FUI designs using a topographic map technique in Cinema 4D. Now, there is a bunch of different ways to achieve a topographic map in Cinema 4D. You could project a texture onto your geometry, you could use the quite powerful Contours setting in Sketch and Toon. But today we're going to discuss the benefits of actually generating physical geometry and splines that represent those topographic lines on the surface of your object. Now before we continue, let's just briefly discuss what a topographic map is so we know how better to build it in Cinema 4D. So the topographic map is actually just an elevation map and every line you see on the topographic map represents an evenly spaced elevation. So to create something like that in Cinema 4D, we're actually going to use a combination of a base object which is going to represent our landscape and we're going to use a slicing object that's actually going to represent our elevation data. And then we're going use a Boolean object in order to actually generate edges at each of those slice points. All right. Let's get started. First thing we're going to do is drop down a landscape object just so we have something that we can actually turn into a topographic map. We're going to make it just a little taller so we have a little extra visual interest in there. And the next thing we're going to need is a plane object and that plane is actually going to be our slicing object. And what we want to do is make sure that it's just a little bit larger than our landscape object just to make sure it covers the whole thing. And then we want to move it almost all the way down to the bottom and that's going to represent our bottom most slice. Now, we want to do about 10 slices so I'm going to put that plane into a cloner object and I'm going to adjust the spacing on that cloner object so that the top most slice, it's just below the tip of the landscape object. Now to keep things live, we're going to drop this entire thing into a connect object and then drop the connect object into a Boole and then drop our landscape object into the very first slot and this is what we get. And it's a little funny looking but we're going to make it look really cool here in a second. So, we're going to duplicate our Boole and we're going to make the new Boole editable. We're going to go in and delete the objects that we don't really need like the knoll and the empty object there. And we're going to rename our result just to keep things nice and clean and organized in our file. And now we get to actually turn this into a topographic map. So we select our Edge Mode, we select all the edges. We go select, shrink selection. So we deselect the outlines of all the geometry and we go back to select and invert that selection. And now what we're left with is just the outlines of the geometry. We go to Mesh commands, Edge to Spline and then we're going to drag that out. We're going to hide our geometry and now what we're left with is a topographic map of our landscape object. Now, the really cool thing about this is because we generated it from geometry, it actually fits perfectly right around the original source geometry. So here we've got our landscape object and our topographic map outlines and they fit super tight. Now doing planes is one thing but we can actually apply this technique to more than just a flat plane. So here I'm going to take a landscape object and I'm actually going to turn on Spherical Mode and again we're going to increase the height a little bit just to add some extra visual interest and we're going to do the exact same thing but this time we're going to do it with a sphere just to see how that looks. So, we're going to drop in our spherical slicing object instead of a plane this time. And here we're going to do the exact same thing we did the plane where we established the very first level by increasing the size of that sphere so it sits just at the very bottom level just so it peaks out a little bit. And that's going to represent our very first slice and again we're going to do the exact same thing we do at the plane where we drop that sphere into a cloner object except this time we don't want to clone it in Y. We actually want to scale it out for each clone. So we're going to remove the Y offset and we're actually going to scale it up by just a little bit. So each clone gets scaled ever so slightly Now, I just want to increase the number of clones so that we encompass most of our landscape object here. So now we can see that just the peaks are visible and that's going to make sure we can slice the entire object. We're going to increase the segments on the spheres so we have a little bit more accurate slice. We're going to drop that cloner again into a connect object and drop the connect into a Boole and put our landscape object as the very first object under the Boole. So fast forwarding just a little bit here, we are now done processing our Boole. We're going to take this and just like we did before, just duplicate the Boole object and we're going to turn off the original Boole and we're going to make the new one editable. Now once that gets done processing, what we're left with is this and it looks kind of crazy. We aren't going to delete the other object this time, we're actually just going to hide it. We're going to do something with that later and I'm going to take the positive out of the Boolean object. We're just going to rename these things and then we're going to do the exact same thing we did with the plane where we select edge mode. We select all the edges, we go into select, shrink selection, select invert and we're left with just the edges. We're going to go to Mesh commands, Edge to Spline and now we have a spline that is the topographic map of our spherical landscape object which is really, really cool. And again because it's based on that original geometry, it fits exactly around the original geometry which is awesome. Now, let's do something a little more interesting with that second component that came out of the Boole. We get this thing and if you can kind of see what's going on here, what we have is a series of concentric slices. This is actually what's left over of our slicing objects. Now what we're going to do is create a new material and we're going to drop that material onto our slices here and we're going to turn off our Color and reflecting channel and we're just going to use Luminance. And we're going to drop in a gradient and we're going to use a gradient mode that I don't use very often but is particularly handy in this case which is 3D Spherical Gradient. And what that's going to do is it's actually going to create a gradient from the inner layers to the outer layers based on parameters that we set here. So I'm just going to select a color, we're going to set it center to 000 since that's the center of our slicing object. And we're just going to change a couple of things in here to make that gradient look kind of extra juicy on our concentric slices here. We're going to create some pretty interesting effects here. Now if I this a render you can see we've got dark to light slices without having to break this stuff up. And when we turn on Ambient Occlusion and we get some even greater effects out of that. So now you can really see where those slices fall, you can really see the difference between those levels which is pretty cool. Oh right, now we're going to do something completely different. We're going to select this guy, we're going to actually select all the Poly faces. Now, the first thing you'll notice is all our Polygon Normals are reversed so we're going to have to flip those so that our polygons are facing the right direction. And now what we're going to do is go up under and grab our extrude tool and we're going to create caps. And we're actually going to extrude all of those polygons so that they all move towards the center and what that's going to give us is this really interesting stepped looking piece of geometry. Which is similar to what we saw in the last step with the concentric slices in the spherical gradient except now we have extruded edges between all of our concentric slices, which is pretty cool. Now, of course because all of this is generated from the same object, we can actually turn back on our original topographic map of this object and it fits perfectly around the edges. We can even take that, drop in a circle and a Sweep Nurb and we can even generate geometry from all of those edges that fits perfectly around our piece of steped geometry here. And if we drop in a luminance material on top of that Sweep Nurbs, you can really see exactly how tight that spline fits right around our geometry. And there you have a topographic map not only in a plane with planar slices but also as a sphere with spherical slices Now, you can actually do this with a cylinder as well using the same exact technique we just used for the sphere where you use the cloner to make each slicing cylinder ever so slightly larger than the previous one and turn that into your slicing object as well. So this is a quick frame that I whipped up using the same exact technique and a couple of composing tricks in Photoshop and aftereffects. I hope you guys enjoyed learning about how to make topographic maps in Cinema 4D, and we'll see you on the next one.
Resume Auto-Scroll?