Monogame MRT Sample + BLOOM EFFECT SAMPLE

Hi guys,

just a short blog post with a super short content. I’ve seen a question on the monogame forums of how to render to multiple render targets at once in monogame (identical in XNA, too).

I am writing this again on my blog so it is preserved for future searchers :)

Here is the solution (160kb). You will have to build the content anew and build the solution itself to make it run. (Open the content pipeline -> rebuild)

The idea is very very simple: I draw red to one texture and blue to the other (but I do that at the same time with MRT rendering).
To showcase our results I render these two textures seperately.

https://drive.google.com/file/d/0B5WzekweeryvbGtZN0Z4ZmhDSVU/view

and here is version which just uses spritebatch, in case you need that

https://drive.google.com/open?id=0B5WzekweeryvMG9zZXhsc2V0aGs

Bloom

I’ve also noticed that I didn’t even post about the bloom solution / integration I’ve made for fellow indie devs.
https://github.com/UncleThomy/BloomFilter-for-Monogame-and-XNA

Here you go. The sample should be pretty easy to understand and integrate into your game if you want. For more info follow the link.

An example application is in my deferred engine, which you can download on github, too.
https://github.com/UncleThomy/DeferredEngine
(Discussion here: http://community.monogame.net/t/deferred-engine-playground-download/8180)

Overview MRT

Basically it is just these two functions

protected override void Initialize()
{
//Create a mesh to render, in our case a simple rectangle / quad
quadRenderer = new QuadRenderer();

//Create our rendertargets!
renderTarget1 = new RenderTarget2D(GraphicsDevice, width, height);
renderTarget2 = new RenderTarget2D(GraphicsDevice, width, height);

//Create our Rendertargetbinding
renderTargetBinding[0] = renderTarget1;
renderTargetBinding[1] = renderTarget2;

base.Initialize();
}

and

protected override void Draw(GameTime gameTime)
{
//Set our renderTargetBinding as the target!
GraphicsDevice.SetRenderTargets(renderTargetBinding);

//Clear!
 GraphicsDevice.Clear(Color.Black);

//Apply our shader. It should make the first rendertarget red, and the second one blue. You find the shader in content/BasicShader.fx
MRTEffect.CurrentTechnique.Passes[0].Apply();

//Draw our mesh! It's just a fullscreen quad / rectangle (We can use spritebatch, see second link)
 quadRenderer.RenderQuad(GraphicsDevice, -Vector2.One, Vector2.One);

//Set our backbuffer as RenderTarget
 GraphicsDevice.SetRenderTarget(null);
 GraphicsDevice.Clear(Color.CornflowerBlue);

//Draw our rts
spriteBatch.Begin();

//Our first rt should be red! It's in the top left corner!
 spriteBatch.Draw(renderTarget1, new Rectangle(0,0,width/2, height/2), Color.White);
//Our second one should be blue in the bottom right corner
 spriteBatch.Draw(renderTarget2, new Rectangle(width / 2, height / 2, width / 2, height / 2), Color.White);
spriteBatch.End();
base.Draw(gameTime);
}

 

As you can see it’s very basic.

  • Draw a fullscreen quad with MRT, draw red to the first one and blue to the other one
  • Draw the RTs seperately to the backbuffer to see how they look like now

Shader

struct VertexShaderInput
{  float3 Position : POSITION0;
};

struct VertexShaderOutput
{  float4 Position : POSITION0;
};

VertexShaderOutput VertexShaderFunction(VertexShaderInput input)
{  VertexShaderOutput output;  output.Position = float4(input.Position, 1);  return output;
}

struct PixelShaderOutput
{  float4 Color0 : COLOR0;  float4 Color1 : COLOR1;
};

PixelShaderOutput PixelShaderFunction(VertexShaderOutput input)
{  PixelShaderOutput output;    //The first rendertarget is red!  output.Color0 = float4(1, 0, 0, 0);  //The second rendertarget is blue!  output.Color1 = float4(0, 0, 1, 0);  return output;
}

technique Technique1
{  pass Pass1  {   VertexShader = compile vs_4_0 VertexShaderFunction();   PixelShader = compile ps_4_0 PixelShaderFunction();  }
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s