Apocalyptic diorama - Part 1 - Scene layout and asset modeling
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.