Marmoset Toolbag创建交互式场景

本教程将引导您通过创建一个场景，你将能够用您的Web浏览器的过程。本教程将分为三个部分，我将使用3ds Max建模，Substance Painter 2的纹理，和Marmoset Toolbag创建交互式场景输出到Web浏览器。

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.

本系列的其他图文教程

3ds Max的场景布局及场景建模

Substance Painter2纹理立体模型

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.

步骤1：将纹理应用到汽车上

网格导入到Marmoset作为.obj文件作为他们的出口，从3ds Max在正确的位置上；我们不需要移动资产一旦Marmoset。一旦在Marmoset，网格已经应用到它的默认材料。单击“材料预置”图标创建新材料模板，选择“虚幻4”作为模板。当我们从Substance Painter导出我们的纹理，我们作为虚幻4格式导出。有材料作为U4的模板，我们知道，纹理会行为为目的。导入纹理，你只需拖放到地图槽。添加的反照率和正常的地图；对于金属地图改变反射率metalness拖动到这个插槽的金属质感。粗糙度图被拖到微表面槽和倒。这辆车现在应该看起来像它在Substance Painter一样。

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.

第2步：添加地上资产

我遵循同样的过程，前面的步骤导入地面网和纹理到Marmoset。正如你可以看到这两款车与地面看起来一模一样，因为他们在Substance Painter一样。这是好事，所以我们知道我们所得到的。所有资产的意欲的神色注意水坑和他们站出来具有高反射率有多好 - 他们很多细节加入到最终的图像现在，我将导入场景的其余部分从3ds Max中网格，并建立自己的材料。

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.

第3步：添加天空

对于天空我用了预先设定的“对冲行”，因为我觉得这给了我最好的照明，以适应环境的我创建的类型。天空的质感，不仅提供了一个背景，但增加了环境照明的一幕让类型质感的使用是非常重要的。在天窗参数，你可以在纹理的部分单击以定向照明添加到场景中，我添加了两个灯纹理的亮的部分，这些灯将形成太阳光和环境光。

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.

第4步：添加阳光

你可以看到我们现在有天空集团下的两个灯，这些都是我们在上一步中添加的灯光。选择灯光的一个参数是现在可供我们去调整，我这样会令我的主要的阳光。确保castshadows启用，并给它的2.25高亮度与黄色调来了。这是主要的太阳光，所以应该压倒在场景中的其他灯和投射漂亮的阴影。

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.

步骤5：添加环境补光

现在阳光设置，我们需要创建一些环境光来填补因阳光照射而产生的暗区。这是环境光。我给光偏蓝色调来模拟天空的颜色，光的功率为0.5这是所以它并没有压倒阳光太多，因为我们不想彻底清除暗区，就足以让一些细节显示。确保投射阴影被关闭，因为我们不希望有任何冲突的阴影正投。

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.

第6步：添加点光源

为了更多的利益添加到我想添加多个辅助照明，以帮助照明环境的暗区，交通灯是灯的良好来源的情景。在这里，我选择的灯是绿色，所以我加了点光就在最低灯前面，它有4.7亮度，色调是绿色，我还增加了光的宽度，因为这会给我更多的弥漫性阴影。我也减少了光的衰减，因此并没有影响大环境方面，我想这是更包含周围的交通灯的资产。

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.

步骤7：火光

使用相同的技术作为交通信号灯，我在这里加入橙色点光源和取得的亮度12.9。这将是一个良好的对比度，以在所述壁的另一侧上的绿色交通照明，这将完成次级照明通，我现在将依托阳光和全局照明照亮场景的其余部分。

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.

步骤8：自发光纹理

交通灯的材料我启用了电子发射性能，并增加了质感，这是黑色的，除了我要发光的区域。在这种情况下，绿色光，所以用质地添加到地图插槽我增加了一个绿色的颜色辉光，增加强度，以10;.这会给错觉，这是从我们摆在前面的步骤，您可以在桶使用相同的技术为火点发光的绿色光的绿色交通灯。

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.

第9步：颜色分级

现在的照明完成，是时候颜色等级的图像。颜色分级是非常重要的，因为它有助于平衡图像的外观，并增加了抛光的额外层到项目。随着主摄像头选择后的效果标签下你有颜色的曲线。打开这个设置，这将打开曲线窗口，类似于Photoshop中的曲线。我调整RGB分别获得所需的外观，并且在阴影中增加了蓝色的水平。我的亮点增加了红色，并且还调整了主RGB值给我黑暗的阴影和明亮的高光。

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.

步骤10：添加相机限制

相机限制是为了停止从能够看到您的场景的某些部分，打破你正试图使幻想观众。在这种情况下，我不希望观众能够靠得太近，也太远了。我也不想观众能够旋转的摄像头正上方或有兴趣不大的情景之下，选择主摄像头，并启用“在视口中使用限制”。现在，您可以调整设置来限制观众你可以看到在屏幕截图显示我已经设置了摄像头的限制的指导原则。

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.

第11步：收尾

在渲染选项卡中，我们可以添加一些非常不错的性能了现场。在局部反射，环境闭塞，和高分辨率阴影照明开关。增加闭塞实力10给资产下一个较暗的区域，并帮助他们坐在舞台上更好。在全局光照，我启用GI和二次跳动。体素分辨率设置为培养基的5亮度这创造了一种将在浏览器中查看关闭该场景中的所有反弹灯光，但我们的截图是一个很好的补充。

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.

小贴士1：添加一个小插曲

一个小插曲是观众的目光聚焦到艺术品中心的一个好办法。我觉得这也有利于艺术品更加突出。我用0.98的强度和0.5的柔软性。我发现这些设置，给我一个微妙作用，但足以给观众集中到图像的中心。

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.

小贴士2：锐化渲染

我想，以增加锐化设置作为最后的调整，以我的场景，我觉得这给了我一个更高分辨率的外观形象和整体质量提高到艺术品。要小心，不要过度锐化，因为它可以开始寻找难看。我使用0.85的强度。此设置工作的很好我的纹理，但是这将取决于你的纹理是如何做出的效果有多强。