We were given a somewhat non-trivial task recently. We had to make images of a simple car with a camera looking from a 45-degree angle and orbiting with a step of 2 degrees. That means 180 images.

Doing this in Blender (I use 2.79 for this tutorial) is a no-brainer, but there was one additional condition that made things quite complicated. Each shot should be rendered as two separate images:

  • One is the body of the car, having a certain color - the hull image or color image in this tutorial. I’ll show it to you as an animation

The hull, very simple and easy to hue-rotate

  • Another is everything else, like textures, headlights and windows (it’s a very simple “cartoony” model, so these are textures as well), wheels, shadow underneath - the fillers image.

Fills. I've added a background image to show that it is an actual transparency right there, not just a white body and a white background.

And here’s what it is supposed to look like when you combine the two by overlaying Fillers onto Hull.

Combined image

It should work the way so you could take the hull image as one layer and put the fillers image as a layer on top of it and it would look fine. This was supposed to be used on a geographic map in web browser, so users would be able to change the hull color using CSS hue-rotate feature with fillers not being affected (they should remain the same).

Rendering the hull image is not a big deal. As for the fillers, we need to cut certain portions (not visible from this angle) out dynamically, leaving the others (visible from this angle) intact; additionally, we need to render the shadow under the car without the actual floor, just the shadow. Oh wow, now that’s a challenge!

Initial scene setup

Our ugly little beep-beep

So here’s what our little car looks like at first. I made it really quickly, it’s just for demonstration purposes, so don’t mind the quality.

Cute little beep-beep. Kinda

It is a simple model, it is UV-unwrapped, and there are textures on the body and wheels (they are separate objects).

You can get the starting scene here

Setting up the scene

Rendering settings

We will use Cycles renderer for this tutorial, so switch to it, if you haven’t yet.

In render settings, I set the resolution to 200x200, took 100 render samples and set the render tile size to 16x16 (this presumably makes rendering a bit faster if you render on CPU. If you use GPU, 256x256 is said to be the optimum).

Since we’re creating icons, we won’t need the 3D world background, we’ll make it trnasparent, so check the Transparent box in the Film section.

Render settings

Camera

Since we need shots from different angles, we want our camera to orbit around the car. This can be done easily with a helper object.

Create an Empty (Shift+A -> Empty -> Plain Axes); I renamed it to cam_target. That will be the object controlling position and direction of our camera.

Firstly, let’s make the camera rotate towards the target. Select the camera, go to Constraints tab in Properties context, and choose Track To in the dropdown menu. Use cam_target object as target, set “To” to -Z and “Up” to Y. Now you can try moving the camera around, it will always look at the cam target, and therefore, the car.

Settings that make camera always look at the target

Secondly, make the target the camera’s parent. Select the camera, then Shift-select the target (yes, order is important), press Ctrl+P and choose Object. Now, whenever you rotate the target around Z-axis, it makes the camera orbit around the car. Now we just need to animate the rotation of the empty along the Y-axis and it will make the camera orbit around the car.

One last thing here, which is optional, but was required for me, since it was a model that was supposed to be a marker on a geographic map: you may go to camera settings and choose Orthographic, and adjust the zoom via Orthographic Scale (keep in mind that it is the way to work with Orthographic cameras; moving it away from the car will have no effect on the image you see from the camera view). Additionally, I repositioned the camera behind the car; this is going to be our 0-degree view, and the car will rotate clockwise.

Before animating it, let’s arrange another thing:

Light

In my opinion, the Sun is the most suitable light here. It is uniform and directional. Simply switch the default light to Sun and rotate it so it would light the scene however you see fit; I light it from front-right. I set the strength to 3, because too much will flood the scene with light and make gray areas white.

Additionally, I parented the Sun to cam_target so it would rotate together with the camera.

Floor

It’s just a plane with a simple white diffuse material. It should be big enough to cover the whole camera viewport; we don’t want any background holes! Check all angles by pressing Left and Right arrows to navigate the timeline.

Animating rotation

Let’s animate the cam_target rotation, it will make the camera and the sunlight rotate.

The reason why I animate the camera and the sun and not the car is because the car consists of many objects, and we might not know exactly how many; in this tutorial there will be at least 4. Additionally, want to abstract the animation from the object, so I would be able to put a different car into this scene without having to touch the animations; it makes the scene reusable, which is a great thing if you have several different cars to render for this task (and I had many!).

First, go to render settings and set the Frame Range: the Start frame should be 0, End Frame to 359 and Frame Step to 2 (or whatever angle step you need, but it should be an integer).

Now, select the cam_target and go to frame 0. Now, open the properties menu (by hovering over 3D View and pressing N), right-click Z under Rotation and click Insert Single Keyframe. Now go to frame 360 (yes, it is located outside the animation range and that’s fine), set Z under Rotation to a number higher than the one you have by 360 (you can simply add “+360” to whatever you have in there, Blender supports math operations in parameter input), right-click and click Insert Single Keyframe again.

This is how you set camera rotation

Now the problem is that the animation starts and ends slowly, and we want it to be linear, at constant speed. Go to graph editor, select both animation nodes (by pressing A), press V and select Vector. This should fix it.

Making animation linear

And this is what we got:

Camera animation showcase

Arrangement in layers

We will use the render layers a lot in this tutorial, so we should put things in our scene into separate layers. With an object selected, press M and select the layer to move the object there. For this tutorial, there will be 4 layers:

  • The first contains the floor, the camera, the camera target, and the sunlight.

First layer, contains the floor, the camera with the target and the sun

  • The second layer contains only the car body. I called it car_body_solid.

  • The third is the same as the second, with a copy of the car body. Being in the second layer, select the car body, press Alt+D to copy the object, retaining the mesh data; move the copy to layer 3. I called it car_body_fills.

Layers 2 and 3 contains only the hull that will be colored

  • The fourth layer contains the wheels only. If your car has other parts that are separate from the body and that are not supposed to be colored (by hue-rotate), put them here as well.

Layer 4 contains the wheels and maybe other objects that will not be colored

Materials

I have already set the basic materials up. But still, we need two different materials for the two car body instances. When you copied the body, the same material was assigned to the copy. To make it separate, click the 2 near its name field. I named the materials: Solid for the body in the second layer, and Fills for the one in the third layer.

The material is just a diffuse shader with texture assigned to it, nothing fancy. Let’s make it fancy!

The “Solid” material, second layer.

It’s extremely simple. It does not use any textures, it’s just a diffuse shader with a color. I recommend light green, because it seems to transform to other colors uniformly, but you can experiment with it if you want.

There’s one thing that you might want to consider though. Cycles is physics-based. The bright-colored diffuse material is likely to cast pink reflexes onto surrounding objects. I don’t want that, because it will look weird when I start changing the color in browser. So we need to negate the diffuse effect of this material. It’s done easily with Light Path node.

Colored material. Super-simple

The “Fills” material, third layer.

This one’s a bit more complicated, but nothing difficult either. You just need to use the alpha of the texture to control the material transparency; you just mix a diffuse shader with the texture as color and a transparent shader (solid white!), using texture alpha as factor. Nice, but we cannot use that as an overlay, because the textures on the back side are still visible.

The material that will be in the render of the overlay image. Green arrows show the parts that are supposed to be there, red ones show the ones that are supposed to be hidden

You may create another mix and remove everything that is not “looking” to the camera normal-wise, using the Geometry node’s Backfacing input. It removes quite a significant part of the texture that is not visible from this angle. Some of it is still visible though (for example, a part of the wheel cavity underneath still faces the camera, but in reality it should be invisible); this will be addressed in the following sections.

Removed backfacing. Some parts, that are supposed to be hidden, are still visible

Render layers

Okay, now we need to be very attentive, because now we shall separate all the information that we will process subsequently. Go to Render layers tab in Properties menu.

1. Shadow layer

This layer will contain the shadow that is below the car. A somewhat simplified black shadow, and there will be no floor, just the shadow.

So, rename the default layer to “Shadow”. Select the first layer under Layers. Also, check Shadow in Passes.

Settings for shadow render layer

2. Hull layer

This layer will contain the colorable body of the car. Settings are simple, but make sure the Z pass is enabled, we’ll need it!

Settings for hull render layer

3. Fills layer

This layer will contain the uncolorable parts on the body. Settings are simple, but, again, make sure the Z pass is enabled, we’ll need it!

Settings for fillers render layer

4. Wheels layer

This layer will contain the separate parts that are not supposed to be colored, like wheels. Again, we need that depth pass (the Z).

Settings for wheels render layer

One important remark here

When you are ready to render, you should shift-select all the layers so they would all be visible.

Don't forget to select all the layers!

Compositor

Alright, we have our layers now. Let’s move to semi-Flatland now! This is where the magic begins. Pretty convoluted wizardry, rather.

Firstly, render an image. No need to render the whole animation, one frame will suffice. We just need it so it would appear in render layers and we would be able to play around with it. You will notice that it renders 4 images, these are the separate layers we’ve specified.

Now, go to Node Editor, switch to Compositing and check Use Nodes and Backdrop. You may also create the Viewer node (from Output category) to see the image on Node Editor’s background.

Initial setup for the Compositor

If you want to create that little splitter node you see here, hold Shift and Left-drag the mouse over a connection, “cutting” through it. The node will be created there.

Shadow setup

First, let’s set up the shadow. It’s conna be a very simple black shadow. I don’t want any effects from reflections from the hull, because they are pink and the hull will change color. So it will be simply black.

There is a good answer here on how you can make a shadow separate (to some extent)from the floor, we’ll use some tricks from there.

Create a Dilate/Erode node and connect it to Shadow output of the Shadow render layer, and pick Feather Mode. You can now play around with Distance and Falloff, I set it to 12 and Root. The image we’re creating here will not be the shadow itself, but rather the alpha channel. So, we want it to be white where the shadow is. Add an Invert node to make it so.

Next, I have added a Mix node and connected the Invert output to the second color input, and the first color input is simply a solid black color. You will be able to use the Fac value to control the shadow’s opacity this way.

That’s it. The output of the Mix node will be the alpha. So create a Set Alpha node, connect the Mix node’s output to Alpha value and use solid black for Image input. We have our simple shadow now!

Final setup for the shadow component

Adding wheels

Now this is really simple. We just overlay the Wheel layer over the shadow using Alpha over node.

Wheels with shadow

Addind car textures

Same thing, we’ll just overlay them.

Added car texture

We are getting there, but we still need to “cut out” some parts.

Fillers depth combined

Depth channel is just the data showing how close a certain pixel is to the camera in the 3D scene. It’s just a grayscale image with darker being closer to the camera and lighter being farther.

We have combined the color data (the looks) of the Fills, but now we need to combine their depths as well. Even though we cannot just overlay them (because this channel has no transparency), combining them is actually even easier. Since darker (or, in math terms, lower values) means closer to the camera, we just need to take the minimums of the depth channels of the three render layers. This can be accomplished with a couple of Math nodes and Minimum operation.

Combining filler depths, see the top frame

The output of this pink node will soon be used as the depth of the Fills combined.

Using the depths to cut out unneeded filler parts

We’re about to reach the finish line. Now it’s time to combine the depths and colors to make the cut-out fillers. Create a Z Combine node. In my case I had to enable Anti-Alias Z and disable Use Alpha, or else it didn’t work. The first color input should contain a black and fully transparent image (all RGBA values set to 0). The Depth channel of the Hull layer should be connected to the first Z input. The combined Fillers color image goes to the second color input, and the combined depths from the previous step go to the second Z input.

Performing a final Z-combine

That’s it! The output of this is the complete Fills image! Sweet!

Setting up the file output

Finally, let’s make Blender write the files to separate folders. This is accomplished easily using File Output nodes, where you can specify folders. You can even specify filenames, but it’s hidden in the Properties menu (press N to open it).

Setting outputs. You can specify filename as well

Now all you have to do is press Animation in Render tab and wait while your files are being delivered. Job well done! Phew!

A quick in-browser test

You can test how it looks inside the browser. I have created the following HTML file and put it into /tmp folder so it could read the images.

<!DOCTYPE html>
<html>
<head>
	<title>Car</title>
	<meta charset="UTF-8">

	<style type="text/css">

		.car-image {
			position:absolute;
			left:0px;
			top:0px;
		}

		#hull-img {
			filter: hue-rotate(0deg);
		}

		.image-container {
			position: relative;
			height: 200px; /* Change this to the height of your images */
		}

	</style>
</head>
<body>
	<div class="image-container">
		<img src="hull/hull0000.png" class="car-image" id="hull-img">
		<img src="fills/fills0000.png" class="car-image" id="fills-img">
	</div>

	<br>
	Car rotation
	<br>

	<div class="slide-container">
		<input type="range" min="0" max="179" value="0" class="slider" id="car-rotation-range">
	</div>

	<span id="car-rotation-display">0 degrees</span>

	<br>
	<br>
	Rotate hue:
	<br>

	<div class="slide-container">
		<input type="range" min="0" max="360" value="0" class="slider" id="hue-rotation-range">
	</div>
	<span id="hue-rotation-display">0 degrees</span>

	<br>
	Hull: <input type="checkbox" id="hull-checkbox" onclick="toggleHullVisibility()" checked="true">
	<br>
	Fills: <input type="checkbox" id="fills-checkbox" onclick="toggleFillsVisibility()" checked="true">
	<br>

	<script type="text/javascript">
		var car_slider = document.getElementById("car-rotation-range");
		var hue_slider = document.getElementById("hue-rotation-range");
		var hull_img = document.getElementById("hull-img");
		var fills_img = document.getElementById("fills-img");
		var car_rotation_display = document.getElementById("car-rotation-display");
		var hue_rotation_display = document.getElementById("hue-rotation-display");
		var hull_checkbox = document.getElementById("hull-checkbox");
		var fills_checkbox = document.getElementById("fills-checkbox");

		car_slider.oninput = function() {
			var index = this.value*2;
			car_rotation_display.innerHTML = index + " degrees";
			var index_str = index.toString().padStart(4, '0');
			hull_img.src = "hull/hull" + index_str + ".png"; /* if you have a different folder path and filename, set it here*/
			fills_img.src = "fills/fills" + index_str + ".png"; /* if you have a different folder path and filename, set it here*/
		}

		hue_slider.oninput = function() {
			var index = this.value;
			hue_rotation_display.innerHTML = index + " degrees";
			hull_img.style.filter = 'hue-rotate(' + index + 'deg)';

		}

		function toggleHullVisibility() {
			if (hull_checkbox.checked) {
				hull_img.style.visibility = "visible";
			} else {
				hull_img.style.visibility = "hidden";
			}
		}

		function toggleFillsVisibility() {
			if (fills_checkbox.checked) {
				fills_img.style.visibility = "visible";
			} else {
				fills_img.style.visibility = "hidden";
			}
		}

	</script>

</body>
</html>

It is a webpage containing your car and basic controls that allow you to change the rotation, the visibility of either image, and the color (via hue rotation).

Demonstration webpage

Another example

Here’s another task. We have a truck like this. Its cargo hold sholud be colored, and it has no textures on it. Other parts are not going to be colored (the cockpit will remain blue). Can we import it into our scene and render it the same way? Sure thing!

A cute little truck

Here’s what the distribution should look like. The Cargo hold goes to the second layer. Everything else goes to the fourth layer. And the third layer? It remains empty. Also, apply the Solid material to the Cargo hold.

And that’s it, you may render now!

Truck rendered!

Even the shadow is cast onto the cargo hold when the rest of the car is hidden! Nice!

In conclusion

Here’s the final scene with the car and with the truck.

This tutorial uses a number of various techniques that could be used in a variety of tasks. It is not an ideal approach, far from it. For example, if your texture has semi-transparent parts of the texture, they may look wierd in the final image.

Thanks for dropping by! See you eventually!