Time

Level

Box sets

Tools & Techniques

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.

Previous tutorials

Step 1: Applying textures to car

Meshes are imported to Marmoset as .OBJ files as they were exported from 3ds Max in the correct position; we don't need to move the assets once in Marmoset. Once in Marmoset, the mesh has a default material applied to it. Click the material pre-set icon to create a new material template and choose Unreal 4 as the template. When we exported our textures from Substance Painter we exported as Unreal 4 format. Having the material as an U4 template, we know the textures will behave as intended. To import the textures you simply drag and drop them onto the map slots. Add the albedo and normal maps; for the metallic map change the reflectivity to metalness and drag the metallic texture into this slot. The roughness map is dragged onto the micro surface slot and Inverted. The car should now look the same as it did in substance painter.

Setting up of materials and importing textures onto the car asset

Step 2: Adding the ground assets

I followed the same process as the previous step to import the ground mesh and textures into Marmoset. As you can see both the car and the ground look exactly the same as they did in Substance Painter. This is good so we know we are getting the intended look of all the assets. Note the puddles and how well they stand out having a high reflectivity - they add a lot of detail to the final image. Now I will import the rest of the scenes meshes from 3ds Max and set up their materials.

Importing the ground asset from chapter 2

Step 3: Adding a sky

For the sky I used the pre-set 'Hedge Row' as I felt this gave me the best lighting to suit the type of environment I was creating. The sky texture not only provides a background but adds ambient lighting to the scene so the type of texture you use is very important. Under the skylight parameters you can click on parts of the texture to add directional lighting to the scene. I added two lights to the brighter parts of the texture, these lights would form the sun light and the ambient light.

Add a sky texture that best suits our environment

Step 4: Adding sunlight

You can see we now have two lights under the sky group, these are the lights we added in the previous step. Selecting one of the lights the parameters are now available for us to tweak. I will make this my main sunlight. Make sure castshadows is enabled and give it a high brightness of 2.25 with a yellow tint to it. This is the main sunlight, so it should overpower the other lights in the scene and cast nice shadows.

Adding a directional sun light to the scene

Step 5: Adding ambient fill light

Now the sunlight is set we need to create some ambient light to fill in the dark areas created by the sunlight. This is ambient light. I gave the light a bluish tint to simulate the sky colour. The power of the light was 0.5 which was so it didn't overpower the sunlight too much as we don't want to remove the dark areas completely, just enough to get some details showing. Make sure cast shadows is switched off as we don't want any conflicting shadows being cast.

Adding another directional light for the ambient fill lighting

Step 6: Adding point lights

To add more interest to the scene I wanted to add more secondary lighting to help illuminate darker areas of the environment. The traffic lights are a good source of lights. Here I chose the lights to be on green so I added a point light just in front of the lowest light, it had a brightness of 4.7 and a green colour. I also increased the width of the light as this would give me more diffuse shadows. I also reduced the attenuation of the light so it didn't affect a large area of the environment; I wanted it to be more contained around the traffic lights asset.

Adding more environmental lighting to the scene

Step 7: Fire light

Using the same technique as the traffic lights, I added an orange point light here and made the brightness 12.9. This would be a good contrast to the green traffic lighting on the other side of the wall. This would complete the secondary lighting pass, I will now rely on the sunlight and global illumination to light the rest of the scene.

Using the fire barrels to add lighting

Step 8: Emissive textures

On the material for the traffic lights I enabled the emissive properties and added a texture that was black except for the area I want to glow. In this case the green light, so with the texture added to the map slot I added a green colour to the glow and increased the intensity to 10; this will give the illusion that it is the green traffic light that is emitting the green light from the point light we placed in the previous steps. You can use this same technique for the fire in the barrel.

Using emissive textures to show the source of the lighting

Step 9: Colour grading

Now the lighting was complete it was time to colour grade the image. Colour grading is very important as it helps balance the look of the image and adds that extra layer of polish to the project. With the Main camera selected, under the post effects tab you have colour curves. Open this setting and this opens up the curves window which is similar to the curves in Photoshop. I adjusted RGB separately to get the desired look, and increased the blue level in the shadows. I increased the reds in the highlights, and also adjusted the main RGB value to give me darker shadows and brighter highlights.

Using Curves to colour grade the final image

Step 10: Adding camera limits

Camera limits are good to stop the viewer from being able to see certain parts of your scene and breaking the illusion you are trying to make. In this case I don't want the viewer to be able to get too close and too far away. I also don't want the viewer to be able to rotate the camera directly above or below the scene where there is little interest. Select the Main camera and enable 'Use Limits in Viewport'. You can now adjust the settings to limit the viewer. You can see the guidelines in the screenshot showing the limits I have set for the camera.

Camera limits to prevent viewer seeing things you don't want them to see

Step 11: Finishing touches

Under the render tab we can add some really nice properties to the scene. Under lighting switch on Local Reflections, ambient occlusion, and high res shadows. Increase the Occlusion strength to 10 to give a darker area under the assets and help them sit in the scene better. Under Global Illumination, I enabled GI and Secondary Bounces. The Voxel Resolution was set to medium with a brightness of 5. This created all the bounce lighting in the scene which will be turned off for in browser viewing but for our screenshots it's a nice addition.

Top tip 1: Adding a vignette

A vignette is a good way of focusing the viewer's eyes to the centre of the artwork. I find it also helps the artwork stand out more. I used a Strength of 0.98 and a Softness of 0.5. I found these settings to give me a subtle effect but enough to focus the viewer to the centre of the image.

A vignette is used to focus the viewers eyes to the central area

Top tip 2: Sharpen the render

I like to increase the Sharpen setting as a final tweak to my scene. I find this gives me a higher resolution look to the image and overall improved quality to the artwork. Be careful not to over sharpen as it can start to look ugly. I used a Strength of 0.85. This setting worked well for my textures but it will depend on how your textures are made as to how strong the effect will be.