Intro to Effects and Post-Processing

Intro to Effects and Post-Processing

March 9, 2008

Let’s learn how to use effects in our game to achieve a highly stylized, unique look to our game. <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> width="468" scrolling="no" height="15" frameborder="0" allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-4918349833220447&dt=1212402216830&lmt=1212402215&prev_slotnames=5585453236&output=html&slotname=2273068045&correlator=1212402216336&url=http%3A%2F%2Fwww.stromcode.com%2F2008%2F03%2F09%2Fintro-to-effects-and-post-processing%2F&ref=http%3A%2F%2Fwww.stromcode.com%2F2008%2F04%2F02%2Fan-introduction-to-hlsl-part-i%2F&frm=0&cc=100&ga_vid=2992875446891075600.1212401973&ga_sid=1212401973&ga_hid=1148312423&ga_fc=true&flash=0&u_h=900&u_w=1440&u_ah=870&u_aw=1440&u_cd=32&u_tz=480&u_his=1&u_java=true&u_nplug=13&u_nmime=40" name="google_ads_frame">

One of the coolest, and I think most inspirational, of the sample packs released on the XNA Creators Club website is the Non-Realistic Rendering sample. One of the coolest things, in my mind, about the oncoming onslaught of indie games for the X360 is going to be the huge amount of highly stylized games. If you’ve ever browsed Steam, you’ve probably noticed that the big studio games all fall into the same “awesome graphics FPS” category, while the indie games really stand out based on their unique look, combined with their unique gameplay. Games like Darwinia, Rag Doll Kung Fu and Gish immediately come to mind.

One of the ways to get a unique, highly stylized look to your game is through the clever and creative use of shaders, both as applied to your models, and as post-processing effects. I’ve recently showed you how you can take the colored crosshatching example from the Non-Realistic Rendering sample, combined with a grungy texture, to get a Silent Hill effect. What we’re going to do now is look at how shaders are used, pre- and post-, and how we can build up a nice little application that we can use to swap effects in and out and see what we’ll end up with.

In order to follow along, you’re going to need to know how to do some of the basics on your own. We’re going to start with a simple demo app that renders a textured model, renders a background, and accepts input (to allow you to rotate your model). If you don’t know how to do all of that, go get up to speed and come back.

For my example, I have used the Ship.fbx model that you’re all familiar with. Because I like to have my models, textures and effects in their own folder in the content pipeline, I’ve edited Ship.fbx to set the RelativePath of the ShipDiffuse.tga texture to ../Textures/ShipDiffuse.tga and you may want to do the same. I’ve also added a background texture, which is simply a 256×256 jpg named background.jpg. I included this texture in my project under the Textures folder, loaded it in LoadContent into a Texture2D object, then rendered it before rendering the ship model using the SpriteBatch. The Draw call specifies that I want that 256^2 texture stretched out to the dimensions of the viewport. So we’re not going to get the prettiest background, but its good enough to see what kind of effect any postprocessing will have on the scene.

I took a little shortcut here by calling SpriteBatch.Begin with the SaveStateMode.SaveState flag, although apparently this will cause a significant performance hit. For our purposes, it shouldn’t be an issue, but this is likely not how you’d want to handle drawing a background in a real game (Shawn Hargreaves has more on this here). Here’s the code I used to render both the background and then the model:

1. spriteBatch. Begin (SpriteBlendMode. None, SpriteSortMode. BackToFront, SaveStateMode. SaveState );
2. spriteBatch. Draw (background, new Rectangle ( 0, 0, graphics. GraphicsDevice. Viewport. Width, graphics. GraphicsDevice. Viewport. Height ), Color. White );
3. spriteBatch. End ( );
4.  
5. foreach (ModelMesh mesh in ship. Meshes ) {
6.     foreach (BasicEffect effect in mesh. Effects ) {
7.         effect. EnableDefaultLighting ( );
8.         effect. View = view;
9.         effect. Projection = projection;
10.         effect. World = world;
11.     }
12.  
13.     mesh. Draw ( );
14. }

That’ll get our model up, with a nice little background up behind it.

Let’s take a quick look at what we’ve got so far:

http://www.youtube.com/watch?v=odXkqLG3i7M