Apocalyptic diorama - Part 1 - Scene layout and asset modeling

Download tutorial assets here

This tutorial will guide you through the process of creating a diorama that you will be able to interact with in your web browser. The tutorial will be split into three parts. I will use 3ds Max for modeling, Substance Painter 2 for texturing, and Marmoset Toolbag for creating the interactive scene and exporting to a web browser.

Other tutorials in the series

Texturing assets for an apocalyptic diorama in Substance Painter
Importing assets in Marmoset and creating portfolio renders and interactive media

Step 1: Base terrain simple modeling

Here are four separate meshes that make up the floor of the environment. We have what will be a dirt terrain under the road tarmac, a curb, a pavement and an overgrown patch of grass land. I used simple box modeling techniques to create these meshes, they are quite low res as I wanted the materials, textures and lighting to do most of the work for me. The meshes didn't need to be too high detailed.

Using simple box modeling methods to model out the floor pieces

Using simple box modeling methods to model out the floor pieces

Step 2: Tarmac road geometry

Again very simple modeling was used to create the tarmac mesh for the road surface. I started off with simple plane primitives, and extruded edges and manipulated verts to get the desired shape. Once I was happy with the shapes of the tarmac, I then selected the boarders of the planes and extruded down to give them depth.

Merged assets to form the tarmac of the road

Merged assets to form the tarmac of the road

Step 3: Underground meshes

I decided to add some underground dirt and sewer pipes, this would give the diorama more depth and more interest for the viewer. To model the more organic shape of the dirt mound I subdivided a box and used the editable poly tool 'Paint Deform' to naturally push and pull the mesh to form an interesting shape. To break the dirt up a little I added sewer pipes. This would allow me to add other interest like litter and water flowing from the pipe.

Underground meshes to give more interest and depth to the diorama

Underground meshes to give more interest and depth to the diorama

Step 4: Wall and railing

I created a modular wall piece to allow me to duplicate the mesh seamlessly in the environment. For the walls, I extruded faces of a simple box to form the column. The lower wall was modeled separately and then attached to the main column. For the railings, I used cylinders and boxes. Really simple modeling, but should be good enough for what we need.

A modular wall piece that can be duplicated seamlessly

A modular wall piece that can be duplicated seamlessly

Step 5: Traffic lights model

The traffic lights are an important part of the diorama as not only will they add some vertical interest to the composition, but also allow me to bring in some synthetic lighting. This should add a lot of visual interest. The mesh was made the same way as the other meshes, but I used spline modeling for the wires, which allowed me to use the spline handles to create a natural drop for the wires. Make the spline tenderable in the viewport and then convert to editable mesh.

Traffic lights will not only add interest but bring light to the scene

Traffic lights will not only add interest but bring light to the scene

Step 6: Grass clump asset

I started by creating singular blades of grass using plane primitives. Once I had the basic blade shape I then duplicated the blade of grass multiple times to create different variants of the grass. I scaled each blade and used the bend modifier to curl the grass by different amounts. This helped keep the grass looking random. Once I had enough blades of grass I created a clump of grass.

A simple grass clump will be duplicated many times

A simple grass clump will be duplicated many times

Step 7: Duplicating grass clumps

I would then use this grass clump asset to populate the scene and create the overgrown environment. I placed the grass clumps in the cracks of the road and near where the water would be by the sewer. Around the back of the wall I wanted this area to be dense with foliage so the grass really helped bulk out this area.

Creating the overgrown environment

Creating the overgrown environment

Step 8: Rusty old car

I modeled a very simple rusty old car. This took a little more time than the other assets as it had more detail in it, but it was still very simple. I wanted the car to look partly burned out and rusting away, and so the textures would be important.

A rusty old car to create the feeling of an abandoned environment

A rusty old car to create the feeling of an abandoned environment

Step 9: Scattering rubbish

To further show the environment was abandoned I placed rubbish around. I used bin bags, bottles and rusty cans. I placed them in interesting areas where they would be visible and up against places like the wall. This would help ground the wall to the terrain beneath, and break up the straight lines. I also added some rubbish in the sewer pipes to add some interest.

Rubbish scattered around would help give an abandoned feeling

Rubbish scattered around would help give an abandoned feeling

Step 10: A large tree

I wanted to have one large tree in the scene which would add more verticality and organic details to the environment. The trunk was modeled using a cylinder primitive and editable poly tools to create the shape. For the leaves, I used planes that would be textured to have leaves and small branches on. These planes were attached to the main limbs of the tree trunk.

A large tree to add vertical interest and more organic details

A large tree to add vertical interest and more organic details

Step 11: The finished scene

Here is the finished scene. I have added tree roots to the dirt mound to help to break up the repetitive dirt. I also modeled a fire barrel, which will be a good source of lighting for the scene and provide an area of interest. I modeled a fire hydrant that was placed in front of the car to give the impression of the car hitting it and bursting the water pipe, giving a reason for the excess water in this area. To finish off the scene I added some running water flowing out of the sewer pipes. This completed the modeling phase of this project; it's very simple modeling but I will be relying on the materials and lighting to making this piece impressive.

The finished scene ready for texturing and exporting to Marmoset

The finished scene ready for texturing and exporting to Marmoset

Top tip: 2D texture planes

For the fire barrel, I wanted this area to have some interesting lighting coming from the fire, so I will have to create some hot glowing fire to go inside. To do this I used 2D texture planes. These will be fine for this project as I don't want them animated. I created two planes that crossed each other and the fire texture will use an alpha channel to cut out the flames. Marmoset can then glow this texture to give the impression it is red hot. 2D planes are good for creating all sorts of effects for your scene.

Adding fire visual effects using 2D texture planes

Adding fire visual effects using 2D texture planes

Related links

Check out more from Andrew Finch
Grab a copy of 3ds Max Projects

Fetching comments...

Post a comment