History: MOGRE Intermediate Tutorial 7

Source of version: 4 (current)

__MOGRE Intermediate Tutorial 7: Render to texture__

__Note:__ This tutorial converted from OGRE and work with MOGRE SDK 1.7.1 r72 
Any problems you encounter while working with this tutorial should be posted to the [http://www.ogre3d.org/addonforums/viewforum.php?f=8|MOGRE Forum].

{maketoc}

!!Introduction
This tutorial will teach you the basics of rendering to textures. This technique is necessary for a variety of effects especially in combination with shaders, e.g Motion Blur.

The idea behind rendering to textures {LEX()}RTT{LEX} is rather simple. Instead of sending the render output data of your scene to your render window, you just send it to a texture. This texture can then be used just as a normal texture from your harddrive.

{img src="img/wiki_up/RTT_final.jpg" alt="RTT_final.jpg"}

You can find the code for this tutorial ((MOGREIntermediateTutorial7Source|here)).

Also you can see some Ogre RTT tutorial by MadMarx:
((MadMarx Tutorial 9 - Part 1|Traditional Render To Texture (RTT)))
((MadMarx Tutorial 9 - Part 2|Render A Texture To Itself)) - C# code available
((MadMarx Tutorial 9 - Part 3|Render A Texture To Itself Using A Temporary Texture)) - C# code available

!!!The Initial Code
Add references to MOGRE and Demo.ExampleApplication.
Set up your application to look like this:

{CODE(wrap="1", colors="c++")}namespace Mogre.Demo.RenderToTexure
namespace Mogre.Demo.RenderToTexure
{
    class Program
    {
        static void Main(string[] args)
        {
            try { new RTTTutorial().Go(); }
            catch
            {
                if (OgreException.IsThrown) ExampleApplication.Example.ShowOgreException();
                else throw;
            }
        }
    }

    class RTTTutorial : ExampleApplication.Example
    {
        public override void CreateScene()
        {
            sceneMgr.AmbientLight = new ColourValue(0.2f, 0.2f, 0.2f);

            Light light = sceneMgr.CreateLight("MainLight");
            light.Position = new Vector3(20, 80, 50);

            camera.Position = new Vector3(60, 200, 70);
            camera.LookAt(0, 0, 0);

            MaterialPtr mat = MaterialManager.Singleton.Create("PlaneMat", ResourceGroupManager.DEFAULT_RESOURCE_GROUP_NAME);
            TextureUnitState tuisTexture = mat.GetTechnique(0).GetPass(0).CreateTextureUnitState("grass_1024.jpg");

            mPlane = new Plane();
            mPlane.d = 0;
            mPlane.normal = Vector3.UNIT_Y;

            MeshManager.Singleton.CreatePlane("PlaneMesh", ResourceGroupManager.DEFAULT_RESOURCE_GROUP_NAME, mPlane, 120, 120, 1, 1, true, 1, 1, 1, Vector3.UNIT_Z);
            mPlaneEnt = sceneMgr.CreateEntity("PlaneEntity", "PlaneMesh");
            mPlaneEnt.SetMaterialName("PlaneMat");

            mPlaneNode = sceneMgr.RootSceneNode.CreateChildSceneNode();
            mPlaneNode.AttachObject(mPlaneEnt);

            root.FrameRenderingQueued += frameRenderingQueued;
        }

        bool frameRenderingQueued(FrameEvent evt)
        {
            mPlaneNode.Yaw(new Radian(evt.timeSinceLastFrame));
            return true;
        }

        Plane mPlane;
        Entity mPlaneEnt;
        SceneNode mPlaneNode;
    }
}
{CODE}

Compile and run this program before continuing. You should see a simple plane rotating around the Y-axis.

{img src="img/wiki_up/RTT_initial.jpg" alt="RTT_initial.jpg"}

!!Render to texture
!!!Creating the render textures
First of all, we need to create a texture.
{CODE(wrap="1", colors="c++")}
TexturePtr rtt_texture = TextureManager.Singleton.CreateManual("RttTex", ResourceGroupManager.DEFAULT_RESOURCE_GROUP_NAME, TextureType.TEX_TYPE_2D, window.Width, window.Height, 0, PixelFormat.PF_R8G8B8, (int) TextureUsage.TU_RENDERTARGET);
{CODE}
(Where "window" is your MOGRE.RenderWindow declared in Demo.ExampleApplication Example class)

The first parameter to CreateManual() is the name of the texture, which is commonly named RttTex. The second specifies the resource group, the third the texture type (in our case a 2D texture), the fourth and the fifth the width and height of the texture. You also have to pass the number of mip maps you want as well as the texture format and a usage flag. Concerning the texture format: There are many different ones, but the most simple is the PF_R8G8B8 which will create a 24-bit RGB-texture. If you are in the need of an alpha channel, PF_R8G8B8A8 should suit best for this.

Now we need to get the render target of this texture in order to set some parameters and later also add a RenderTargetListener.

{CODE(wrap="1", colors="c++")} 
RenderTexture renderTexture = rtt_texture.GetBuffer().GetRenderTarget();

renderTexture.AddViewport(camera);
renderTexture.GetViewport(0).SetClearEveryFrame(true);
renderTexture.GetViewport(0).BackgroundColour = ColourValue.Black;
renderTexture.GetViewport(0).OverlaysEnabled = false;
{CODE}
After getting the render texture, we have to add a viewport to it. This is the viewport with whose content the RenderTexture will be filled. We also tell the viewport to clear itself every frame, set the background color to black and request to disable all the overlays for the texture as we don't want to have them on it.

!!!Write texture to file
At this point we've got everything ready to do a first check: We just store the content of our created RenderTexture in a file. The handy thing is, that the RenderTextures are derived from RenderTarget and so have a ready function to store the content of the texture in a file (as well as we can do it with RenderWindows). But before saving the content to a file, you should update your RenderTexture. You can do this either manually via the update() function or request the application to automatically update the RenderTexture by once setting the IsAutoUpdated property.

{CODE(wrap="1", colors="c++")}
// Either this way
renderTexture.IsAutoUpdated=true;
// or this way
renderTexture.Update(); //if we want to get it before render loop starter, we need update manually

// Now save the contents
renderTexture.WriteContentsToFile("start.png");
{CODE}
After running the application, you will find now a .png-file in the directory your .exe is in, that should show the content of your screen (in our case the textured plane).
__Note:__ in some cases it may be overhead to use RTT to just make simple screenshot of whole window use "window.WriteContentsToFile(fileName)"


!!Implementing a mini screen
!!!General
Now, we will add a mini screen in the lower right corner of our application window. To do this we'll add a Rectangle2D to our scene which will get our RenderTexture as texture. Our scene will be shown twice: one time rendered to the RenderWindow as normal, and a second time as the texture on our Rectangle2D.

Using this method it is also possible to implement TV screens (or CCTV cameras, etc). You can display other parts of your level by putting a camera there, creating a RenderTexture (as described in the first section) and displaying it on the TV screen.

!!!Setting up the rectangle
Creating an MOGRE.Rectangle2D is rather simple:

{CODE(wrap="1", colors="c++")}
Rectangle2D mMiniScreen = new Rectangle2D(true);
mMiniScreen.SetCorners(0.5f, -0.5f, 1.0f, -1.0f);
mMiniScreen.BoundingBox= new AxisAlignedBox(-100000.0f * Vector3.UNIT_SCALE, 100000.0f * Vector3.UNIT_SCALE);
{CODE}
In the first line, we set the parameter to true to generate texture coordinates, which we later need to map the texture on the rectangle. In the second line we have to specify the corners of the rectangle. Left is -1.0 and right +1.0, top is +1.0 and bottom -1.0. So our rectangle is just in the lower right corner of our application window.
We also give the rectangle a real huge bounding box to prevent it from being culled when we are not facing its scene node. You could also use .SetInfinite() method to create infinite BoundingBox, instead of manually setting the size of the box, but there have been some problems with this in the past, so manually setting a huge box should be the safest way.

Now that we have created the rectangle, we just need to attach it to a -SceneNode which should not be anything new for you.

{CODE(wrap="1", colors="c++")} 
SceneNode miniScreenNode = sceneMgr.RootSceneNode.CreateChildSceneNode("MiniScreenNode");
miniScreenNode.AttachObject(mMiniScreen);
{CODE}
If you run the application at this stage, you will see a white rectangle in the lower right corner of our application window.


{img src="img/wiki_up/RTT_Rectangle.jpg" alt="-RTT rectangle.jpg"}

!!!Creating a material from scratch
The next step is now to show the RenderTexture we created in the first section on this rectangle. Therefore we have to create a material for it. We can do this either in a material script or directly in the code while runtime. We will do the last method in this tutorial to just have everything toghether in one file.

{CODE(wrap="1", colors="c++")} 
MaterialPtr renderMaterial = MaterialManager.Singleton.Create("RttMat", ResourceGroupManager.DEFAULT_RESOURCE_GROUP_NAME);
renderMaterial.CreateTechnique().CreatePass();
Pass pass = renderMaterial.GetTechnique(0).GetPass(0);
pass.LightingEnabled = false;
pass.CreateTextureUnitState("RttTex");
{CODE}
In this lines we create an empty material and add a technique and a pass. With the third line we disable the lightning to prevent our mini screen from beeing darker than the actual texture. In the last line we create a new TextureUnitState by passing our created RenderTexture from the first section.

__Note:__ that we get "pass" __not__ in this way:
{CODE(wrap="1", colors="c++")} Pass pass = renderMaterial.CreateTechnique().CreatePass(); {CODE}

Now we can apply this material to our mini screen.

{CODE(wrap="1", colors="c++")}
mMiniScreen.SetMaterial("RttMat");
{CODE}
If you run the application now, you will see an undesired effect: The mini screen itself has a miniscreen! To solve this, Ogre introduces RenderTargetListener.

!!Usage of RenderTargetListener
!!!General
In many cases you will need RTTs with only some scene objects on it. In our case we need a texture that only contains the output of the application window without the mini screen yet on it, as this texture is intended to be applied to our mini screen. So we have to hide the mini screen each time before the window output is stored in our RenderTexture. And this is where the RenderTargetListener comes in. 
This listener has two important functions: preRenderTargetUnpdate() and postRenderTargetUpdate(). As the names induces already, the first function is automatically called by the listener before the RenderTexture is filled (so we can hide our mini screen here) whereas the second function is automatically called after the RenderTexture has been filled (so we can show our mini screen again).

!!!Implementing a RenderTargetListener
MOGRE use events instead of Listener, so we subscribe to events pre- and postRenderTargetUpdate:

{CODE(wrap="1", colors="c++")} 
 renderTexture.PreRenderTargetUpdate += renderTexture_PreRenderTargetUpdate;
 renderTexture.PostRenderTargetUpdate += renderTexture_PostRenderTargetUpdate;
{CODE}
{CODE(wrap="1", colors="c++")} 
void renderTexture_PreRenderTargetUpdate(RenderTargetEvent_NativePtr evt)
{
    mMiniScreen.Visible = false;
}
void renderTexture_PostRenderTargetUpdate(RenderTargetEvent_NativePtr evt)
{
    mMiniScreen.Visible = true;
}
{CODE}

That's it. Now you have a simple mini screen in your app. It's that simple.

{img src="img/wiki_up/RTT_mini screen.jpg" alt="-RTT mini screen.jpg"}

!!RTTs and shaders
!!!Passing a RTT to a shader
As RTTs are often used toghether with shaders, you have to know how to pass the RenderTexture to one. Gladly, this is really simple.

The most simple case is, that you will never change the texture for the shader during runtime. If don't need to, you just have to tell your material script the name of the texture you create while runtime, in our case RttTex. So your texture_unit in the material should look like this:

{CODE(wrap="1", colors="c++")} texture_unit
{
     texture RttTex
}
{CODE}
If you will change the texture the shader should use during runtime, just add the following two lines:

{CODE(wrap="1", colors="c++")} 
MaterialPtr material =  MaterialManager.Singleton.GetByName("Sepia");
material.GetTechnique(0).GetPass(0).GetTextureUnitState(0).SetTextureName("OtherRttTex");
{CODE}
With the first line we get a pointer to the material (in this case here a sepia shader material) where we change the texture name in the second line to the desired one.

Now, as you have set the correct texture name in your material script with one of these two ways you can access the texture in your cg shader by the following line:
{CODE(wrap="1", colors="c++")} 
 uniform sampler2D SceneSampler : register(s0)
{CODE}
Well, that's it. Your texture of the mini screen should now be passed through your shader and e.g. look like this (with the sepia shader attached to this tutorial page):

{img src="img/wiki_up/RTT_final.jpg" alt="-RTT final.jpg"}

!!Conclusion
That are all the basics you need to know for starting with RTT. Now play around a bit with this code and discover a new world of graphical effects.
History: MOGRE Intermediate Tutorial 7

Source of version: 4 (current)

Search by Tags

Latest Changes

Search

Online Users
