Marmoset Toolbag創(chuàng)建交互式場景

本教程將引導您通過創(chuàng)建一個場景，你將能夠用您的Web瀏覽器的過程。本教程將分為三個部分，我將使用3ds Max建模，Substance Painter 2的紋理，和Marmoset Toolbag創(chuàng)建交互式場景輸出到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，網格已經應用到它的默認材料。單擊“材料預置”圖標創(chuàng)建新材料模板，選擇“虛幻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一樣。這是好事，所以我們知道我們所得到的。所有資產的意欲的神色注意水坑和他們站出來具有高反射率有多好 - 他們很多細節(jié)加入到最終的圖像現在，我將導入場景的其余部分從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步：添加天空

對于天空我用了預先設定的“對沖行”，因為我覺得這給了我最好的照明，以適應環(huán)境的我創(chuàng)建的類型。天空的質感，不僅提供了一個背景，但增加了環(huán)境照明的一幕讓類型質感的使用是非常重要的。在天窗參數，你可以在紋理的部分單擊以定向照明添加到場景中，我添加了兩個燈紋理的亮的部分，這些燈將形成太陽光和環(huán)境光。

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：添加環(huán)境補光

現在陽光設置，我們需要創(chuàng)建一些環(huán)境光來填補因陽光照射而產生的暗區(qū)。這是環(huán)境光。我給光偏藍色調來模擬天空的顏色，光的功率為0.5這是所以它并沒有壓倒陽光太多，因為我們不想徹底清除暗區(qū)，就足以讓一些細節(jié)顯示。確保投射陰影被關閉，因為我們不希望有任何沖突的陰影正投。

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步：添加點光源

為了更多的利益添加到我想添加多個輔助照明，以幫助照明環(huán)境的暗區(qū)，交通燈是燈的良好來源的情景。在這里，我選擇的燈是綠色，所以我加了點光就在最低燈前面，它有4.7亮度，色調是綠色，我還增加了光的寬度，因為這會給我更多的彌漫性陰影。我也減少了光的衰減，因此并沒有影響大環(huán)境方面，我想這是更包含周圍的交通燈的資產。

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：自發(fā)光紋理

交通燈的材料我啟用了電子發(fā)射性能，并增加了質感，這是黑色的，除了我要發(fā)光的區(qū)域。在這種情況下，綠色光，所以用質地添加到地圖插槽我增加了一個綠色的顏色輝光，增加強度，以10;.這會給錯覺，這是從我們擺在前面的步驟，您可以在桶使用相同的技術為火點發(fā)光的綠色光的綠色交通燈。

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步：收尾

在渲染選項卡中，我們可以添加一些非常不錯的性能了現場。在局部反射，環(huán)境閉塞，和高分辨率陰影照明開關。增加閉塞實力10給資產下一個較暗的區(qū)域，并幫助他們坐在舞臺上更好。在全局光照，我啟用GI和二次跳動。體素分辨率設置為培養(yǎng)基的5亮度這創(chuàng)造了一種將在瀏覽器中查看關閉該場景中的所有反彈燈光，但我們的截圖是一個很好的補充。

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的柔軟性。我發(fā)現這些設置，給我一個微妙作用，但足以給觀眾集中到圖像的中心。

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的強度。此設置工作的很好我的紋理，但是這將取決于你的紋理是如何做出的效果有多強。