Vertex Color and Interactive Shading

Interactive and immersive environments such as those required in interactive games require that the scene artists employ variety of techniques to make the modeling and texturing as realistic as possible, while making sure it is “lightweight” enough to update efficiently in the display system. Minimizing polygon counts in models are discussed elsewhere, but these tutorials focus on how to “bake” textures, shading and lighting effects directly into the geometry of your scene. 

Games professionals will want to familiarize themselves with the options 3ds Max gives them to manipulate vertex color and interactive shading.

Files for This Section

All the files necessary for this tutorial are provided on the program disc in the \tutorials\vertex_color directory. Before starting the tutorials, copy the \tutorials folder from the disc to your local program installation.

Tutorials In This Section

Painting Vertex Color
Rendering to Texture


Painting Vertex Color

In this tutorial, you will load in a scene of a garage, a typical games environment. You will take the lighting information in the form of a radiosity solution and learn to “bake” the radiosity into Vertex Paint modifier layers. You'll also get a chance to explore painting on multiple layers and animating the layer opacity to create the illusion of flickering fluorescent tubes in the scene.
Skill Level: Intermediate
Time to complete: 20 minutes

Features Covered in This Tutorial

  • Generating radiosity solutions using Advance Lighting Override Materials
  • Adding radiosity into Vertex Color
  • Using Blur selected to correct lighting problems
  • Painting vertex color on layers
  • Animating layer opacity to create flickering lights

Tutorial Files

All the files necessary for this tutorial are provided on the program disc in the \tutorials\vertex_color directory. Before starting the tutorials, copy the \tutorials folder from the disc to your local program installation.

In This Tutorial

Adding Radiosity to Vertex Color
Painting the Garage with VertexPaint
Animating Vertex Paint Layer Opacity

Adding Radiosity to Vertex Color

You can take the lighting information from your file and add it to the vertex color information. In this exercise, you will open a scene of a garage, a typical game environment. The skylights and fluorescent tubes in the garage have advanced lighting override materials applied to them. You will calculate a radiosity solution and then “bake” it in the vertex color channels using the Assign Vertex Colors Utility.

Radiosity with advanced lighting override materials

Setup the tutorial:
  • Open tut_vertexpaint_garage_start.max.
    All the files necessary for this tutorial are provided on the program disc in the \tutorials\vertex_color directory. Before starting the tutorials, copy the \tutorials folder from the disc to your local program installation.
This file has been prepared so that it has advanced lighting override materials placed on the fluorescent tubes, the overhead skylights, the hanging lamp, and the rear red skylight in the back of the garage. First, you will adjust the luminance scale on these materials.
Adjust the Advanced Lighting Materials:
  1. Open the Material Editor.
    If you only see 6 material slots, do the next step.
  2. Choose Material Options and set Slots to 5 x 3.
    Now you should be able to see 15 material slots.
  3. Find and highlight the Skylight Material.
  4. Increase the Luminance Scale from 500 to 12000.
  5. Select the Cone_Light material and increase the Luminance Scale from 5000 to 10000.
  6. Select the Fluorescent_Light material and increase the Luminance Scale to 10000.
    The Advanced Lighting Override Material will give the illusion that the objects are casting lighting in the scene. By increasing these Luminance Scale values the garage will become more brightly lit, once the radiosity is solved.
    Note: This tutorial does not use Exposure Control. Generally, when working with radiosity, you can turn on Logarithmic Exposure Control for best results.
    Next, you will calculate the radiosity solution.
Calculate the radiosity solution:
  1. On the Rendering menu, choose Render.
  2. On the Render Scene dialog, click the Advanced Lighting tab.
  3. Make sure Display Radiosity In Viewport is turned on, and that Initial Quality is set to 70 % Then click Start.
    The Radiosity solution is created, and the viewport displays the shadowing created using the advanced lighting.

    Radiosity displayed in viewport

    You'll repeat the technique you just used one more time.
  4. In the Material editor, select the material named Red_Light.
  5. In the Special Effects group, increase the Luminance Scale to 40000.
  6. Close the Material editor.
    On the Render Scene dialog, there is a message saying the Solution is invalid at the current time frame.
  7. On the Render Scene dialog in the Radiosity Processing Parameters, click Reset. Click Yes on the dialog that asks if you are sure.
    The viewport updates to reflect the reset Radiosity.
  8. Click Start again.
    The radiosity solution calculates then displays in the viewport. The red light color is now splashed prominently on the back walls.

    Red skylight color increased
Next, you will take the radiosity lighting information and add it to the vertex color information by using the Assign Vertex Color Utility. This will create a vertex paint layer that you can then manipulate.
Bake radiosity into the vertex paint layer:
  1. On the toolbar, find the Named Selection Set drop-down list and click the down arrow. Choose VertPt_set from the list.
    This will select all the objects in the scene except for the lights.
  2. On the Utilities panel, choose More > Assign Vertex Colors.
  3. In the Assign Vertex Colors rollout, leave the Channel set to Vertex Color.
  4. Make sure in the Light Model group that Lighting + Diffuse is turned on.
  5. In Color assignment, turn on Color By Vertex, if it isn’t already.
  6. In the Rendering Options rollout, make sure Mapping is on, and choose Radiosity, Reuse Direct Illum. From Solution.
  7. Click Assign To Selected.
    The Radiosity information is assigned object by object throughout the scene. You will see each object update in the viewport.

    The vertex information has been applied to the geometry, but the vertex isn't really displaying it yet. To see the vertex color information, you’ll use the floating vertex paintbox
  8. On the Utility panel > Assign Vertex Colors rollout, click Edit.
    The floating vertex paintbox appears, and the Modify panel is now displayed instead of the Utility panel. The VertexPaint modifier is now visible in the stack. It appears in italics, indicating that it is an instanced modifier, shared by several objects in the scene.
Display the vertex color in the viewport:
At the top of the paintbox is a row of buttons which allow you to control the viewport display as you work.
Tip: It’s important you understand these modes. For example you can find yourself painting on something you can’t see, because you aren’t displaying it in the viewport.
  1. Click the Vertex color display – unshaded button.

    Unshaded vertex color displayed

    The viewport now displays the vertex color without the viewport lighting.
  2. Click the Vertex color display – shaded button.

    Shaded vertex color mode

    The viewport now displays the vertex color with the viewport lighting.
  3. Click the Vertex color display – disable vertex color button.
    The vertex color is hidden.

    Vertex color disabled

  4. Turn display vertex color display – shaded on.
    This is the mode you will use when you do your vertex painting.
    In the next section, you will explore using the vertex paint tools to blur shadows, adjust color and paint directly on the garage floor using multiple vertex color layers. But first you should save your work.
  5. Save your file as mygarage_vertexcolor01.max.

Next

Painting the Garage with VertexPaint

Painting the Garage with VertexPaint

Now you will explore the vertex paint modifier tools.
Set up the tutorial:
  • Continue from the previous exercise, or open \tutorials\vertex_color\tut_vertexpaint_garage_blur.max.
    If you are opening the provided file, select the VertPt_set from the toolbar Named Selection sets list. On the Modify panel, display the floating vertex paintbox by clicking the Edit button.
Blur the shadows:
  1. Navigate the viewport to explore the scene. Use the Zoom and Pan tools to see what the interior of the garage looks like.
  2. Use Arc Rotate to look at the skylights and fluorescent fixtures. Look up at the ceiling from the center of the room. You may notice the lighting information around the skylight is a bit coarse.

    Problems on the ceiling

    It's easy to smooth this out using the blur command.
  3. Right-click the Perspective viewport label and choose Edged Faces.
  4. Press the H key on the keyboard and select the GARAGE_WALLS object from the list.
    Next you’ll select the faces that need work.
  5. On the Parameters rollout in the Selection group, turn on Ignore Backfacing, then click the Face Selection button.
  6. On the toolbar, turn on Window selection, then drag a selection rectangle around one of the skylight areas.

    You can use Soft selection for the blur operation since you want to make sure the blur happens smoothly.
  7. On the Parameters rollout, click the Soft Selection button, then in the Soft Selection dialog, turn on Use Soft Selection.

    Use Soft Selection

  8. To blur the selected area, click the Blur All button.
    The lighting is smoothed out in the ceiling.

    Blur applied to ceiling faces

    If you like, you can repeat the blurring procedure on the roof areas surrounding the other two skylights.
  9. Choose File > Save As to save your file. Use the plus button to save to an incrementally named scene.
Paint additional layers:
You can add as many layers as you want. Each layer is applied as another VertexPaint modifier in the stack. These layers can be adjusted or animated individually.
  1. On the vertex paintbox, click New Layer. Accept the default setting in the dialog that appears, then click OK.
    A second modifier is added to the stack.
  2. Navigate the viewport so you can see the floor of the garage.
  3. Click the color swatch next to the Pick Color From Object (eyedropper) button, then choose a bright yellow from the color selector.
  4. Click the Paint button, then move your cursor over the garage floor and paint.

    Painting a second layer

    This paint layer is very adaptable. In the next few steps, you'll see some of the adjustments you can make to this layer.
  5. Change the opacity of the Layer by dragging the opacity slider to the left.
  6. Change the Mode. Click the drop-down arrow and choose Color Dodge, then set the opacity back to 100.
    This creates the effect of a washed out spot on the floor.

    You can use the Adjust Color command to change the Hue, Saturation or Value.
  7. Change the mode from Color Dodge back to Normal and change the opacity to 39.
  8. Click the Adjust Color button. In the Adjust Color dialog, drag the hue slider to change the color. Click Apply.

  9. Drag the Saturation slider to the left to make the effect more subtle. Click Apply, and then click OK to close the Adjust Color dialog.

  10. Save you work using File > Save As. Use the plus button to increment the name to mygarage_vertexcolor02.max.

Next

Animating Vertex Paint Layer Opacity

Animating Vertex Paint Layer Opacity

In this lesson you will separate the lighting information from the individual objects onto independent layers. We'll show you how its done, then you will load a file that has the work completed.
You'll create the illusion of a flickering fluorescent tube by animating the opacity value of the vertex paint layer, and then keyframing the material self illumination color.
Set up the tutorial:
  • Continue from the previous procedure.
Create separate radiosity layers:
  1. With the garage walls still selected, hold down the Ctrl key, then on the Modify panel select the two VertexPaint modifiers in the stack and delete them using the Remove Modifier From Stack button below the modifier window.
    You can use the Layer Manager to quickly hide and unhide parts of your scene. You'll hide all the lights but one, then create a radiosity pass for that and bake it into a vertex paint layer.
  2. On the toolbar, click the Layer Manager button.
  3. On the Layer Manager dialog, click Hide for all the objects except FlourescentFlicker and Misc.

    Layer Manager

    Now the only objects visible in the scene are the garage elements and the one fluorescent tube.
  4. On the Rendering menu, choose Render. Then on the Advanced Lighting Tab, click Reset. Then click Start.
    The radiosity solution is calculated for the light coming from the single fluorescent tube.

    Radiosity from single fluorescent fixture
    Of course, the next step is to create the vertex color layer.
  5. On the Utilities Panel, click More > Assign Vertex Colors. Make sure the selection set namedVertsPT_set is selected, then click Assign To Selected.
    The lighting coming from the one fluorescent tube is applied to this vertex color layer.
  6. Click the Edit button to jump to the Modify panel.
    In the Modifier stack, highlight the Vertex Paint layer and right-click, then rename it VertexPaint Flicker.
  7. Repeat the procedure for the another light layer. On the Layer Manager, unhide the layer named Fluorescent Lights, and hide the layer named Fluorescent Flicker. Repeat the above steps to reset radiosity, create a new radiosity solution, and assign it to a vertex color layer.

    Radiosity for the rest of the fluorescent tubes.

    You could do the same for the skylights.

    Radiosity for the skylights

    We've provided a finished file that has all the work done for you.
  8. Save your file if you wish, then open tut_vertexpaint_anim_start.max to continue.
Animate the layer opacity:
Now you can create the illusion of a flickering fluorescent tube. The technique you use is simple. You select the layer with the lighting information, then in Auto Key mode, keyframe the opacity of the layer. You'll then complete the illusion by keyframing the self-illumination color of the material.
  1. In the new file you just opened, look at the modifier stack for the VertPT_set objects.
    There are six vertex paint layers in this file.
  2. In the modifier stack, highlight VertPT_Flicker, then click the Edit button to display the vertex paintbox if it isn't already visible.
  3. Turn on the Auto Key button.
  4. Move the time slider to frame 10.
  5. On the floating vertex paintbox, move the opacity slider down a little, then back to 100.
    This sets a key at frame 10, and frame 0.
  6. Move to frame 12 and slide the opacity slider down to 0.
  7. Move to frame 14 and slide the opacity slider up a little, then back down to 0.
  8. Advance to frame 16 and slide the opacity slider up to 100.
  9. Play the animation in the viewport. The light flickers once.
  10. Open the Material Editor and find the Flourescent_light material. In the Advanced Lighting Override Material rollout, click the Base Material name.
    The Base material parameters appear.
  11. Move to frame 10 and click the Self-Illumination color swatch. Move the whiteness slider toward grey, then back to white.
    The color swatch is outlined in red, to show it is animated.
  12. Move to frame 12. Change the Self-illumination color to Black using the Whiteness slider.
    Move to frame 14, and keyframe the color as Black again.
  13. Move to frame 16 and keyframe the Self-Illumination back to white.
  14. Turn off Auto Key and close the Material Editor.
  15. In the track bar, drag a selection rectangle around the keys. Hold down Shift and drag the keys to make copies so the flickering repeats.
    If you play the animation now, its a little slow. You can improve the performance by collapsing the layers.
Preserve the flickering layer:
You'll use the Preserve Layer command to keep the animated layer while condensing the remaining ones.
  1. On the Parameters rollout, with the VertPt_Flicker layer still selected, turn on Preserve Layer.
  2. Now highlight the Layer at the top of the stack.
  3. On the floating vertex paintbox, click Condense To Single Layer.
    The five other layers are collapsed into a single layer, while the flicker layer is preserved.
  4. In the Modifier stack drag the Flicker layer so it is at the top of the stack, then play the animation in the viewport.

Summary

In this tutorial you have explored the use of the VertexPaint modifier. You have learned to bake radiosity into vertex color using the Assign Vertex Color Utility, and how to add paint layers in the modify panel. You have learned to animate the opacity of the layers to create a flickering lighting effect that can be exported to a game engine.


Rendering to Texture

The Render To Texture tool in 3ds Max lets you render, or “bake,” various scene elements into your textures, including lighting and shadows. You can use these special textures in real-time 3D applications such as games to reduce the burden on the renderer, thus improving the frame rate.
In this lesson, you'll look at basic usage of this feature.
All the files necessary for this tutorial are provided on the program disc in the \tutorials\vertex_color directory. Before starting the tutorials, copy the \tutorials folder from the disc to your local program installation.
Examine the setup:
  1. Load the file tut_texturebake_start.max. This file is in the \tutorials\vertex_color folder.
    The scene consists of a texture-mapped biplane model and a single shadow-casting Omni light. First, you'll see how the scene looks rendered in 3ds Max.
  2. Make sure the Perspective viewport is active. On the toolbar, click Quick Render, or press Shift+Q to render the scene.
    In the rendered image, note the presence of shadows, particularly those cast by the propeller blade and the vertical strut between the upper and lower wings. These shadows don't appear in the Perspective viewport, though.
  3. Close the rendered frame window.
  4. Select the Fuselage object; this is the main body of the biplane.
    The Fuselage uses an Unwrap UVW modifier for complex and precise texture mapping. Because this is the only texture-mapped object in the scene, you'll concentrate on it for this lesson. First, you'll take a look at the texture.
  5. Go to the Modify panel, and in the modifier stack display, make sure the Unwrap UVW entry is highlighted.
  6. On the Parameters rollout, click Edit.
    This opens the Edit UVWs dialog. You can see how the texture map is divided into various sections, with different face clusters overlaid on each. These face clusters are UVW mapping coordinates that correspond to different parts of the Fuselage mesh.
  7. Close the dialog.
  8. Press M to open the Material Editor, and note that the fuselage is mapped with a standard material named Fuselage. Close the editor window.
Bake the texture:
  1. From the Rendering menu, choose Render To Texture.
    The Render To Textures dialog opens.
  2. On the Objects to Bake rollout, note that the Fuselage is the only object listed. Also note that the Selected Object Settings group > Enabled check box is on, and All Selected is chosen. This means that Render To Texture will use any selected objects.
    If you like, try selecting different objects in the Perspective viewport, and note that the Objects To Bake list updates dynamically. Finish by selecting only the Fuselage object.
  3. On the Output rollout, click the Add button.
    This opens the Add Texture Elements dialog, with a list of different types of texture elements you can render. Typically, you want to combine all elements into a single texture, so you use CompleteMap.
  4. In the Add Texture Elements dialog list, double-click CompleteMap, or highlight it and then click the Add Elements button.
  5. When you use Render To Texture, the software creates a new material. You must specify where in this new material the rendered texture will go. In the Selected Element Common Settings group, click the drop-down list next to Target Map Slot and choose Diffuse Color.
    CompleteMap appears in the Output rollout list, along with the default texture size to be generated: 256x 256. The original texture map is fairly large, so you'll probably want to render it to a bigger size.
  6. Near the bottom of the Output rollout, click the 768x768 button.
    Other sizes are available from the preset buttons, and you can use the Size setting to specify any output size you want.
    This size is lower than that of the original texture; using it will help you see the differences between it and the one that Render To Texture generates.
  7. In the Name field, change the “CompleteMap” text to MyCompleteMap. Press Tab to refresh the dialog.
    The name in the output list changes to reflect your edit, as does the File Name And Type entry.
  8. At the bottom of the Render To Textures dialog, click the Render button.
    Alerts appear briefly, displaying the progress of flattening UVs and baking the texture, and then a virtual frame buffer window opens with the newly rendered CompleteMap texture. This image looks similar to what you saw in the Edit UVWs window, but the texture is subdivided differently.
  9. Close the rendered frame window, and then close the Render To Textures dialog.
Examine the results:
  1. Take a look at the modifier stack display, and then look at the biplane in the Perspective viewport.
    A second modifier, named Automatic Flatten UVs, has been added to the Fuselage. This is an Unwrap UVW modifier, but it was created and applied automatically by the Render To Texture function.
    The Fuselage object is still mapped accurately, but the cast shadows now appear in the viewport. For example, if you move the light source, you can see that the shadows cast onto the fuselage from the propeller don't change with as the light source moves, because they're baked into the texture.
    You can also see that the texture map as applied to the fuselage in the viewport is of lower quality, but if you render the image, the texture is of its original high quality. In the next few steps, you'll see why that is.
  2. Again open the Material Editor. Click the first material, which was previously named Fuselage.
    The software has renamed the material orig_Fuselage.
  3. Scroll down to find an unused sample sphere, click it, and then click the Get Material button.
  4. From the Material/Map Browser dialog > Browse From group, choose Selected.
    A single material now appears in the list. Its name is Fuselage (from the object it's applied to), and the type, Shell Material, appears next to the name. This material was generated automatically by Render To Texture, and then applied to the Fuselage object.
    Basically, a Shell material lets you combine two materials into one; you can see one material in the viewports while rendering with the other. When Render To Texture generates a Shell material, it uses the original material for rendering, and the baked material for displaying in the viewports.
  5. Double-click the texture in the list to add it in the Material Editor. Close the Material/Map Browser dialog.
    You can find the scene to this point in tut_texturebake_finish.max.
    This material has only one rollout: Shell Material Parameters. It shows that the original material (orig_Fuselage) is to be rendered with, while the baked material (baked_Fuselage, generated by Render To Texture) is to be visible in the viewports.
  6. Click the Original Material button, and then, on the Material Editor toolbar, click the Show Map In Viewport button.
    This step lets you see the material in the viewport in the next step.
  7. Return to the top level of the material, and on the Shell Material Parameters rollout, under Viewport, click the top radio button (next to Original Material).
    In the Perspective viewport, the Fuselage returns to its previous appearance, and the shadows go away.
  8. Try moving the light source, and then rendering with the baked texture.
    The original shadows remain where you baked them. Depending on where you position the light source, you might see an additional set of shadows, cast by the light during the rendering.
  9. In the shell material, return viewport display to the baked material.
Render other elements:
Besides the CompleteMap, you can render individual elements, one or more at a time.
  1. Open the Render To Texture dialog and on the Output rollout, delete the MyCompleteMap element, and then add a ShadowsMap element. Set Target Map Slot to Diffuse Color.
  2. Click Render.
    The new material is unshaded, except where the shadows fall. You can use this type of texture if your target rendering engine supports compositing multiple textures.
    Note that the rendered frame window still shows the CompleteMap, even though Render To Texture didn't save one. This is always the case, no matter which types of elements you render. You can turn off the automatic display of the frame window on the General Settings rollout.
  3. On the Render To Textures dialog, delete the ShadowsMap texture element, and then add, at the same time, DiffuseMap and LightingMap elements.
    They appear in that order in the list. With multiple textures in the list, you can specify output settings for each by clicking its list entry.
  4. In the list, click the DiffuseMap entry, and then set Target Map Slot to Diffuse Color.
  5. Click Render. When the Missing Map Targets alert appears, click the Continue button.
    The Missing Map Targets dialog shows any texture elements that aren't assigned to target map slots.
    The new Shell material is created for the first element in the list only, as shown in the Perspective viewport. However, all textures are saved in the target directory. You can see the LightingMap texture in the viewport by deleting the DiffuseMap.
  6. Delete the DiffuseMap list entry, set the LightingMap's Target Map Slot to Diffuse Color, and then click the Render button.
    Render To Texture generates a new material and applies it to the Fuselage, so it is now visible in the viewport. The LightingMap element includes all shading and shadows, but no diffuse coloring.
    Note: Only one texture element at a time can be set to any given target map type. Also, if you add a texture element that was previously assigned a target map type, the software automatically assigns the most recent target map type that it used, if no other active texture element is already using that target map type. If another active texture element is using that target map type, the target map slot for the newly assigned texture element is blank.

Summary

Render To Texture is a versatile tool that can save you time in generating texture maps for real-time applications. In this tutorial you learned how to bake different types of textures, and how to work with the Shell material that Render To Texture generates. Try generating other texture elements, and then exporting them to your real-time 3D engine.

No comments:

Post a Comment