Making Tinted Windows

From Multiverse

This tutorial was created by Jason MacWilliams.

Contents 1 Overview 1.1 Downloads 2 An ordinary material 3 A multi-pass material 4 Making the window 5 Making the glass 6 Making the window frame 7 The final code 8 A pretty window

Overview

This tutorial shows how to construct the material file for a tinted window. It starts with an example of a simple material supplied by Multiverse, then develops the components of the tinted glass material, and finally applies the tinted glass and a window frame to a single material, straps it onto a mesh, and places it in the world.

Note: This is only one way to make a tinted window. There are probably other ways to do it.

Downloads

Download the zipped tutorial source (including the mesh, material, and skin) and try the window for yourself.

An ordinary material

The following listing is taken from axe.material. It illustrates the format of a simple material file.

material axe.axe_003____Default____Standard__
{
    technique
    {
        pass
        {
            shading phong

            // === color ===
            ambient  1.00000 1.00000 1.00000 1.00000
            diffuse  1.00000 1.00000 1.00000 1.00000
            specular 0.00000 0.00000 0.00000 1.00000
            emissive 0.00000 0.00000 0.00000 1.00000

            // === texture ===
            texture_unit
            {
                texture axe_003.dds
                tex_coord_set 0
            }
        }
    }
}

This texture uses only a single pass in the technique to define and apply color properties and a texture to the material.

A multi-pass material

To make a window, you will use two passes in the technique to apply two different effects to the material. This allows you to define the glass as a single pass and the window frame as another pass. This way you can easily change the glass without affecting the frame and change the frame without the glass. Your material will initially look like the following:

material tinted_window
{
    technique
    {
        pass
        {
            // draw the glass
        }
        pass
        {
            // draw the window frame
        }
    }
}

Making the window

To apply the correct properties to the passes in the material, set a list of property values that make the material work more like a window.

lighting off             // turn off lighting (may not need this)
cull_hardware none       // turn off hardware and software culling so that the window is two-sided
cull_software none       //
scene_blend alpha_blend  // use alpha blending to tint the object
depth_write off          // don't write to the depth buffer so the window doesn't obscure objects

Making the glass

The heart of the window code is in the glass. If you get the right glass effect, then you're in great shape. First apply the five properties from above, then make a single texture unit. Here, the tint is applied to the material using a colour_op_ex to set a color (in this case blue), and an alpha_op_ex to set the opacity (in this case 0.5).

pass
{
    lighting off
    cull_hardware none
    cull_software none
    scene_blend alpha_blend
    depth_write off

    texture_unit
    {
        // =====                                    r,g,b (0..1)
        colour_op_ex source1 src_manual src_current 0 0 1
        // =====                                  alpha (0..1)
        alpha_op_ex source1 src_manual src_current 0.5
    }
}

So now you have a pass (that can be put in any technique) to attach a flat layer with color r=0, g=0, b=1, a=0.5.

Making the window frame

The window frame is quite easy by comparison. Start with the first four of the five properties from above (not all of these are necessary, but they might be optimizing rendering). From there, the window is a texture (with transparency) and a colour_op to tell it how to mix this pass with the previous one. One of the important parts is to keep depth_write on so that the window frame blocks the background. Also turn on alpha_rejection for the frame so it doesn't draw over the glass.

pass
{
    lighting off
    cull_hardware none
    cull_software none
    scene_blend alpha_blend

    texture_unit
    {
        alpha_rejection greater_equal 128
        //  window frame texture
        texture window.dds
        tex_coord_set 0
    }
}

The final code

The final version of the code attaches "draw the glass" and "draw the frame" into a single technique:

material tinted_window
{
    technique
    {
        pass
        {
            lighting off
            cull_hardware none
            cull_software none

            scene_blend alpha_blend
            depth_write off

            texture_unit
            {
                //                                          r,g,b (0..1)
                colour_op_ex source1 src_manual src_current 0 0 1

                //                                         alpha (0..1)
                alpha_op_ex source1 src_manual src_current 0.5
            }
        }

        pass
        {
            lighting off
            cull_hardware none
            cull_software none

            scene_blend alpha_blend
            depth_write off

            texture_unit
            {
                //  window frame texture
                texture window.dds
                tex_coord_set 0
                colour_op modulate
            }
        }
    }
}

A pretty window

The end result of the window material is a blue tinted window with a white window frame. Because of the two passes applied to the material, the white window frame became tinted slightly blue as well. This is a side-effect of the technique and has not been corrected yet.