Materials with Ogre 3D

Exclusive offer: get 50% off this eBook here
OGRE 3D 1.7 Beginner's Guide

OGRE 3D 1.7 Beginner's Guide — Save 50%

Create real time 3D applications using OGRE 3D from scratch

£16.99    £8.50
by Felix Kerger | November 2010 | Beginner's Guides Open Source

Materials are a really important topic and it's necessary to understand them to produce good-looking scenes. Materials are also an interesting topic of ongoing research, which has a lot of undiscovered possibilities.

In this article, by Felix Kerger, author of Ogre 3D 1.7, we will:

  • Learn how to create our own materials
  • Apply textures to our quad

Here we specifically cover:

  • Creating a white quad
  • Creating our own material
  • Texture coordinates take two
  • Using the wrapping mode with another texture
  • Using the mirror mode
  • Using the border mode
  • Changing the border color
  • Scrolling a texture
  • Animated scrolling
  • Inheriting materials

 

OGRE 3D 1.7 Beginner's Guide

OGRE 3D 1.7 Beginner's Guide

Create real time 3D applications using OGRE 3D from scratch

  • Easy-to-follow introduction to OGRE 3D
  • Create exciting 3D applications using OGRE 3D
  • Create your own scenes and monsters, play with the lights and shadows, and learn to use plugins
  • Get challenged to be creative and make fun and addictive games on your own
  • A hands-on do-it-yourself approach with over 100 examples

Images

        Read more about this book      

(For more resources on this subject, see here.)

Creating a white quad

We will use this to create a sample quad that we can experiment with.

Time for action – creating the quad

We will start with an empty application and insert the code for our quad into the createScene() function:

  1. Begin with creating the manual object:
    Ogre::ManualObject* manual = mSceneMgr-
    >createManualObject("Quad");
    manual->begin("BaseWhiteNoLighting", RenderOperation::OT_TRIANGLE_
    LIST);
  2. Create four points for our quad:

    manual->position(5.0, 0.0, 0.0);
    manual->textureCoord(0,1);
    manual->position(-5.0, 10.0, 0.0);
    manual->textureCoord(1,0);
    manual->position(-5.0, 0.0, 0.0);
    manual->textureCoord(1,1);
    manual->position(5.0, 10.0, 0.0);manual->textureCoord(0,0);

  3. Use indices to describe the quad:

    manual->index(0);
    manual->index(1);
    manual->index(2);

    manual->index(0);
    manual->index(3);
    manual->index(1);

  4. Finish the manual object and convert it to a mesh:

    manual->end();
    manual->convertToMesh("Quad");

  5. Create an instance of the entity and attach it to the scene using a scene node:

    Ogre::Entity * ent = mSceneMgr->createEntity("Quad");
    Ogre::SceneNode* node = mSceneMgr->getRootSceneNode()-
    >createChildSceneNode("Node1");
    node->attachObject(ent);

  6. Compile and run the application. You should see a white quad.

What just happened?

We used our knowledge to create a quad and attach to it a material that simply renders everything in white. The next step is to create our own material.

Creating our own material

Always rendering everything in white isn't exactly exciting, so let's create our first material.

Time for action – creating a material

Now, we are going to create our own material using the white quad we created.

  1. Change the material name in the application from BaseWhiteNoLighting to MyMaterial1:

    manual->begin("MyMaterial1", RenderOperation::OT_TRIANGLE_LIST);

  2. Create a new file named Ogre3DBeginnersGuide.material in the media\materials\scripts folder of our Ogre3D SDK.
  3. Write the following code into the material file:

    material MyMaterial1
    {
    technique
    {
    pass
    {
    texture_unit
    {
    texture leaf.png
    }
    }
    }
    }

  4. Compile and run the application. You should see a white quad with a plant drawn onto it.

What just happened?

We created our first material file. In Ogre 3D, materials can be defined in material files. To be able to find our material files, we need to put them in a directory listed in the resources.cfg, like the one we used. We also could give the path to the file directly in code using the ResourceManager.

To use our material defined in the material file, we just had to use the name during the begin call of the manual object.

The interesting part is the material file itself.

Materials

Each material starts with the keyword material, the name of the material, and then an open curly bracket. To end the material, use a closed curly bracket—this technique should be very familiar to you by now. Each material consists of one or more techniques; a technique describes a way to achieve the desired effect. Because there are a lot of different graphic cards with different capabilities, we can define several techniques and Ogre 3D goes from top to bottom and selects the first technique that is supported by the user's graphic cards. Inside a technique, we can have several passes. A pass is a single rendering of your geometry. For most of the materials we are going to create, we only need one pass. However, some more complex materials might need two or three passes, so Ogre 3D enables us to define several passes per technique. In this pass, we only define a texture unit. A texture unit defines one texture and its properties. This time the only property we define is the texture to be used. We use leaf.png as the image used for our texture. This texture comes with the SDK and is in a folder that gets indexed by resources.cfg, so we can use it without any work from our side.

Have a go hero – creating another material

Create a new material called MyMaterial2 that uses Water02.jpg as an image.

Texture coordinates take two

There are different strategies used when texture coordinates are outside the 0 to 1 range. Now, let's create some materials to see them in action.

Time for action – preparing our quad

We are going to use the quad from the previous example with the leaf texture material:

  1. Change the texture coordinates of the quad from range 0 to 1 to 0 to 2. The quad code should then look like this:

    manual->position(5.0, 0.0, 0.0);
    manual->textureCoord(0,2);
    manual->position(-5.0, 10.0, 0.0);
    manual->textureCoord(2,0);
    manual->position(-5.0, 0.0, 0.0);
    manual->textureCoord(2,2);
    manual->position(5.0, 10.0, 0.0);
    manual->textureCoord(0,0);

  2. Now compile and run the application. Just as before, we will see a quad with a leaf texture, but this time we will see the texture four times.

What just happened?

We simply changed our quad to have texture coordinates that range from zero to two. This means that Ogre 3D needs to use one of its strategies to render texture coordinates that are larger than 1. The default mode is wrap. This means each value over 1 is wrapped to be between zero and one. The following is a diagram showing this effect and how the texture coordinates are wrapped. Outside the corners, we see the original texture coordinates and inside the corners, we see the value after the wrapping. Also for better understanding, we see the four texture repetitions with their implicit texture coordinates.

We have seen how our texture gets wrapped using the default texture wrapping mode. Our plant texture shows the effect pretty well, but it doesn't show the usefulness of this technique. Let's use another texture to see the benefits of the wrapping mode.

Using the wrapping mode with another texture

Time for action – adding a rock texture

For this example, we are going to use another texture. Otherwise, we wouldn't see the effect of this texture mode:

  1. Create a new material similar to the previous one, except change the used texture to: terr_rock6.jpg:

    material MyMaterial3
    {
    technique
    {
    pass
    {
    texture_unit
    {
    texture terr_rock6.jpg
    }
    }
    }
    }

  2. Change the used material from MyMaterial1 to MyMaterial3:

    manual->begin("MyMaterial3", RenderOperation::OT_TRIANGLE_LIST)

  3. Compile and run the application. You should see a quad covered in a rock texture.

What just happened?

This time, the quad seems like it's covered in one single texture. We don't see any obvious repetitions like we did with the plant texture. The reason for this is that, like we already know, the texture wrapping mode repeats. The texture was created in such a way that at the left end of the texture, the texture is started again with its right side and the same is true for the lower end. This kind of texture is called seamless. The texture we used was prepared so that the left and right side fit perfectly together. The same goes for the upper and lower part of the texture. If this wasn't the case, we would see instances where the texture is repeated.

OGRE 3D 1.7 Beginner's Guide Create real time 3D applications using OGRE 3D from scratch
Published: November 2010
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Using another texture mode

We have seen the effect and usage for the wrapping mode. Now, let's look into another texture mode called clamping.

Time for action – using the clamp mode

We are going to use the same project and just create a new material:

  1. Create a new material called MyMaterial4, which is identical to the previous material:

    material MyMaterial4
    {
    technique
    {
    pass
    {
    texture_unit
    {
    texture terr_rock6.jpg
    }
    }
    }
    }

  2. Inside the texture unit block, add a line that tells Ogre 3D to use the clamp mode:

    tex_address_mode clamp

  3. Change the material we use for our quad from MyMaterial3 to MyMaterial4:

    manual->begin("MyMaterial4", RenderOperation::OT_TRIANGLE_LIST);

  4. Compile and run the application. You should see the stone texture from before in the upper-right corner of the quad. The other three parts of the quad should be lines of different colors.

What just happened?

We changed the texture mode to clamp. This mode uses the border pixels of a texture to fill all texture coordinates that are greater than 1. In practice, this means the border of an image gets stretched over the model; we can see this effect in the preceding image.

Using the mirror mode

Let's get to the next texture mode that we can use.

Time for action – using the mirror mode

For the mirror mode, we again create a new material:

  1. Create a new material called MyMaterial5 using the previous material as a template.
  2. Change the texture mode to mirror:

    tex_address_mode mirror

  3. Change the texture to the leaf texture that we used before:

    texture leaf.png

  4. Compile and run the application, and you should see the leaf mirrored four times.

What just happened?

We again changed the texture mode—this time to mirroring. Mirror is a simple, yet effective, mode when used for texturing big areas like a stone wall. Each time the texture coordinates are bigger than 1, the texture gets flipped and then used as it is in wrap mode. We can see the effect of this in the following diagram.

Using the border mode

Only one mode is left for us to try, namely, the border mode.

Time for action – using the border mode

  1. Create a new material called MyMaterial6, and just like the previous five times, base it on the material used previously.
  2. Change the texture mode to border:

    tex_address_mode border

  3. Also remember to change the used material in the code file:

    manual->begin("MyMaterial6", RenderOperation::OT_TRIANGLE_LIST);

  4. Compile and run the application. Surprisingly, this time we will only see one leaf.

What just happened?

Where did the other leaves go? The border mode doesn't create multiple copies of our texture through mirroring or wrapping. When texture coordinates are greater one, this mode paints everything in the defined border color—the default obviously is black, as black can be seen as the zero value for colors.

Changing the border color

If we could only use black as a border color, this feature would be rather useless. Let's see how we can change the border color.

Time for action – changing the border color

  1. Copy the last material and name it MyMaterial7.
  2. After setting the texture mode, add the following line to set the border color to blue:

    tex_border_color 0.0 0.0 1.0

  3. Compile and run the application. This time, we also see only one leaf texture, but the rest of the quad should be in blue.

What just happened?

We changed the border color from black to blue. Similarly, we can use any color as the border color, which can be described with an RGB value. This texture mode can be used when putting logos onto objects like racing cars. We only need to set the border color to the color of the car and then add the texture. If there are little errors or inaccuracies with the texture coordinates, they won't show up because the car and the border color are the same.

Pop quiz – texture modes

  1. What is the difference between the four texture modes—wrap, clamp, mirror, and border?
    1. How texture coordinates are used which have a value between 0 and 1
    2. How texture coordinates are handled that are lower or higher than the range of 0 to 1
    3. How the texture colour is rendered

Have a go hero – Using texture modes

Try using texture coordinates that are larger than 2 or are negative.

Scrolling a texture

We have seen several texture modes, but this is only one attribute a material file can have. Now, we are going to use another attribute that can also be quite useful.

Time for action – preparing to scroll a texture

This time, we are going to change our quad to see the effect of the new material:

  1. Change the used material to MyMaterial8 and also change the texture coordinates from 2 to 0.2:

    manual->begin("MyMaterial8", RenderOperation::OT_TRIANGLE_LIST);
    manual->position(5.0, 0.0, 0.0);
    manual->textureCoord(0.0,0.2);
    manual->position(-5.0, 10.0, 0.0);
    manual->textureCoord(0.2,0.0);
    manual->position(-5.0, 0.0, 0.0);
    manual->textureCoord(0.2,0.2);
    manual->position(5.0, 10.0, 0.0);
    manual->textureCoord(0.0,0.0);

  2. Now create the new material MyMaterial8 in the material file. This time, we don't need any texture mode; just use the texture terr_rock6.jpg:

    material MyMaterial8
    {
    technique
    {
    pass
    {
    texture_unit
    {
    texture terr_rock6.jpg
    }
    }
    }
    }

  3. Compile and run the application. You should see a part of the stone texture that we had seen before.

OGRE 3D 1.7 Beginner's Guide Create real time 3D applications using OGRE 3D from scratch
Published: November 2010
eBook Price: £16.99
Book Price: £27.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

What just happened?

We are only seeing a part of the texture because our quad only has a texture coordinate that is going up to 0.2; this means four-fifths of the texture isn't rendered onto our quad. Everything that has happened in this Time for action should be easy to understand, as it's just a repetition of the stuff we learned in this article up until now.

Time for action – scrolling a texture

Now that we have prepared our quad, let's scroll the texture:

  1. Add the following line into the texture block of the material to scroll the texture:

    scroll 0.8 0.8

  2. Compile and run the application. This time, you should see a different part of the texture.

What just happened?

The scroll attribute changes the texture coordinates with the given offset. The following is a diagram showing the effect of scrolling. The upper-right corner was the first part of the texture we rendered and the lower-left corner was the part of the texture we rendered with the scroll applied.

This attribute can be used to change the texture coordinates without the need for changing the UV coordinates of a model itself.

Animated scrolling

Being able to scroll the texture in the material isn't exactly breathtaking, but it can help to save some time in comparison to retexturing a complete model. Let's add a bit of dynamic scrolling.

Time for action – adding animated scrolling

We can also make the scrolling of the texture dynamic. Let's do it:

  1. Create a new material and change the scroll attribute to animated scrolling:

    scroll_anim 0.01 0.01

  2. Remember to also change the used material of the manual object; otherwise, you won't see any changes.
  3. Compile and run the application. When you look carefully, you should see the texture moving from the upper-right to the lower-left corner. I can't show a picture of this because printing isn't yet able to show animations (maybe in the future).

What just happened?

We used another attribute to make the texture scroll. Besides the name, this attribute is almost similar to the scroll attribute, with the small, but important, difference that now the offset we set is per second.

There are many more attributes that we can use for manipulating a texture. A complete list can be found at http://www.ogre3d.org/docs/manual/manual_17.html#SEC9.

Inheriting materials

Before we touch more complex topics like shaders, we will try inheriting from materials.

Time for action – inheriting from a material

We will create two new materials and one new quad. We will also change how our quad is defined:

  1. For this example, we need a quad that simply displays one texture. Change the quad definition to use only texture coordinates between 0 and 1 and remember to change the used material to MyMaterial11, which we will create soon:

    manual->begin("MyMaterial11", RenderOperation::OT_TRIANGLE_LIST);
    manual->position(5.0, 0.0, 0.0);
    manual->textureCoord(0.0,1.0);
    manual->position(-5.0, 10.0, 0.0);
    manual->textureCoord(1.0,0.0);
    manual->position(-5.0, 0.0, 0.0);
    manual->textureCoord(1.0,1.0);
    manual->position(5.0, 10.0, 0.0);
    manual->textureCoord(0.0,0.0);

    manual->index(0);
    manual->index(1);
    manual->index(2);
    manual->index(0);
    manual->index(3);
    manual->index(1);
    manual->end();

  2. The new material will use the rock texture and use the attribute rotate_anim, which rotates the texture with the given speed. But the most important thing is to name the texture unit texture1:

    material MyMaterial11
    {
    technique
    {
    pass
    {
    texture_unit texture1
    {
    texture terr_rock6.jpg
    rotate_anim 0.1
    }
    }
    }
    }

  3. Now create a second quad and translate it 15 units on the x-axis so that it doesn't intersect with the first quad. Also use the setMaterialName() function to change the material used by the entity to MyMaterial12:

    ent = mSceneMgr->createEntity("Quad");
    ent->setMaterialName("MyMaterial12");node = mSceneMgr-
    >getRootSceneNode()->createChildSceneNode("Node2",Ogre::Vect
    or3(15,0,0));
    node->attachObject(ent);

  4. The last thing to do is to create MyMaterial12. We will inherit from MyMaterial11 and set the texture alias to another texture that we want to use:

    material MyMaterial12 : MyMaterial11
    {
    set_texture_alias texture1 Water02.jpg
    }

  5. Compile and run the application, and you should see two quads with rotating textures—one is a rock texture and the other one is a water texture.

What just happened?

We created two quads, each with its own material. Steps 1 and 2 just modified the quad to only use texture coordinates in the range of [0,1]. In step 2, we created our material for the quad and used the new attribute rotate_anim x, which rotates the texture x turns per second—nothing fancy. Also we gave the texture unit the name texture1; we need this name later. In step 3, we created another instance of the quad and used the setMaterialName() function to change the material used by the entity. The important part was step 4. Here we created a new material by using inheritance, a concept which should be familiar. The syntax is the same as in C++, NewName : ParentName. In this case, MyMaterial12 inherits from MyMaterial11. Then we use the attribute set_texture_alias that binds the texture Water02.jpg to the texture unit texture1. In this case, we replace terr_rock6.jpg with Water02.jpg. Because this is the only change we wanted to make with our new material, we can stop here.

The use of texture aliases enables us to create a lot of materials that only differ in the used texture without the need to write each material from the ground up, and we all know that duplication should always be avoided, if possible.

We have covered a lot of things about materials, but there is a lot more that we can do. We have covered the basics and with the help of the documentation, it should be possible to understand most of the other attributes that can be used in materials. Just take a look here http://www.ogre3d.org/docs/manual/manual_14.html#SEC23. We will now go a bit deeper and learn how to program our graphics card with the so-called shaders.

Summary

In this article we covered:

  • Learn how to create our own materials
  • Apply textures to our quad

Further resources on this subject:


About the Author :


Felix Kerger

Felix Kerger is a Computer Science Student at the Technical University of Darmstadt and has been developing 3D real-time applications using OGRE 3D for more than 5 years. He has given several talks on software development and 3D real-time applications at different conferences and has been working for three years as an assistant researcher at the Fraunhofer Institute for Computer Graphics Research. He also works as a freelance journalist and reports yearly from the Game Developer Conference Europe.

Books From Packt


Blender 3D 2.49 Architecture, Buildings, and Scenery
Blender 3D 2.49 Architecture, Buildings, and Scenery

Unity 3D Game Development by Example Beginner's Guide
Unity 3D Game Development by Example Beginner's Guide

3D Graphics with XNA Game Studio 4.0
3D Graphics with XNA Game Studio 4.0

Papervision3D Essentials
Papervision3D Essentials

3D Game Development with Microsoft Silverlight 3: Beginner's Guide
3D Game Development with Microsoft Silverlight 3: Beginner's Guide

Blender 3D 2.49 Incredible Machines
Blender 3D 2.49 Incredible Machines

Irrlicht 1.7.1 Realtime 3D Engine Beginner's Guide: RAW
Irrlicht 1.7.1 Realtime 3D Engine Beginner's Guide: RAW

Away3D 3.6 Essentials
Away3D 3.6 Essentials


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software