A Guide to Torque X Shaders & Materials
by John Kanalakis · in Torque X 2D · 10/30/2007 (2:30 am) · 13 replies
I've decided to learn the shader effect framework for Torque X tonight. This is not an authorative guide to Torque X shaders, just a summary of my findings in case anyone else is interested in wandering down this path. For this summary, I've posted a sample shader that simply takes a sprite on screen and turns it into black&white.
Shader Effect Code (Required)
Recap: Shader effects are implemented as HLSL code that instruct the GPU to do interesting things. Shader
effects can be created manually or with design tools, such as ATI's Render Monkey. For Torque X, the resulting HLSL code should be saved to a .fx file somewhere within the game's data folder, such as:
This one shader (.fx) file combines the pixel shader and vertex shader code together with variable declarations at the top. XNA will compile the shader file into a .xnb file - reminder for when you edit your .txscene file.
C# Source Code (Optional)
Different shaders take different inputs from TorqueX. For each custom shader you write, you might need to create your own BaseDXEffect derrived class. Your derrived class needs to implement _LoadEffect(), _ClearEffectParameters(), _SetupEffectValues(), and Init().
DefaultEffect - lighting, bump mapping, specular mapping, and refraction (used by all scene objects added with Torque X Builder)
GenericEffect - user defined name and semantic bind support
SimpleEffect - simple rendering such as solid color or texturin
In my test, I used the GenericEffect, so that I wont need to create my own BaseDXEffect-derrived class.
Scene XML (Required)
The levelData.txscene contains the definition for the shader effect.
That's it. Nothing fancy, but hopefully a starting point for others to work from and maybe kick-off some interesting discussions.
John K.
Shader Effect Code (Required)
Recap: Shader effects are implemented as HLSL code that instruct the GPU to do interesting things. Shader
effects can be created manually or with design tools, such as ATI's Render Monkey. For Torque X, the resulting HLSL code should be saved to a .fx file somewhere within the game's data folder, such as:
/data/effects/myshader.fx
This one shader (.fx) file combines the pixel shader and vertex shader code together with variable declarations at the top. XNA will compile the shader file into a .xnb file - reminder for when you edit your .txscene file.
float4x4 worldViewProjection;
texture baseTexture;
sampler2D baseTextureSampler = sampler_state
{
Texture = <baseTexture>;
};
struct vertexshader_Input
{
float4 position : POSITION;
float4 color : COLOR;
float2 texCoord : TEXCOORD0;
};
struct vertexshader_Output
{
float4 position : POSITION;
float4 color : COLOR0;
float2 texCoord : TEXCOORD0;
};
vertexshader_Output vertexshader_main(vertexshader_Input input)
{
vertexshader_Output output;
//pass the texture info through to the pixelshader (test)
output.position = mul(input.position, worldViewProjection);
output.texCoord = input.texCoord;
output.color = input.color;
return output;
}
float4 pixelshader_main(vertexshader_Output input) : COLOR
{
//get the color
float4 color = tex2D(baseTextureSampler, input.texCoord);
//set new color range
float intensity = (0.299 * color.r) + (0.587 * color.g) + (0.184 * color.b);
//apply the black&white color value
color = float4(intensity.xxx,color.a);
return color;
}
technique TexturedTechnique
{
pass P0
{
VertexShader = compile vs_1_1 vertexshader_main();
PixelShader = compile ps_1_1 pixelshader_main();
}
} C# Source Code (Optional)
Different shaders take different inputs from TorqueX. For each custom shader you write, you might need to create your own BaseDXEffect derrived class. Your derrived class needs to implement _LoadEffect(), _ClearEffectParameters(), _SetupEffectValues(), and Init().
DefaultEffect - lighting, bump mapping, specular mapping, and refraction (used by all scene objects added with Torque X Builder)
GenericEffect - user defined name and semantic bind support
SimpleEffect - simple rendering such as solid color or texturin
In my test, I used the GenericEffect, so that I wont need to create my own BaseDXEffect-derrived class.
Scene XML (Required)
The levelData.txscene contains the definition for the shader effect.
<Materials>
<DefaultEffect name="OLD_GGLogoMaterial">
<BaseTex>data/images/GGLogo.png</BaseTex>
<Translucent>true</Translucent>
<SpecularPower>1.000</SpecularPower>
<SpecularColor>
<X>1</X>
<Y>1</Y>
<Z>1</Z>
<W>1</W>
</SpecularColor>
<EnableLighting>false</EnableLighting>
<Additive>false</Additive>
</DefaultEffect>
<GenericEffect name="GGLogoMaterial">
<Filename>data/effects/myshader.xnb</Filename>
<EffectTextureBinds>
<GenericEffectTextureBind>
<BindType>Name</BindType>
<BindAddress>baseTexture</BindAddress>
<Value>data/images/gglogo.png</Value>
</GenericEffectTextureBind>
</EffectTextureBinds>
</GenericEffect>[/b]
</Materials> That's it. Nothing fancy, but hopefully a starting point for others to work from and maybe kick-off some interesting discussions.
John K.
About the author
John Kanalakis is the owner of EnvyGames, an independent game development studio in Silicon Valley that produces games and tools for Xbox 360, Windows, and the Web.
#2
John K.
10/30/2007 (10:23 am)
Thanks Henry, let me know if you run into any problems. Keep in mind that the sample shader I provided is not really efficient - I was more interested in illustrating all the parts of a working shader. I'll start looking into lighting and full-screen shaders next.John K.
#3
Ill have a fiddle with the shaders and what not when i get a chance later.
Henry
10/30/2007 (10:32 am)
You seem to be putting alot into putting stuff out there for the comunity, keep it up ;)Ill have a fiddle with the shaders and what not when i get a chance later.
Henry
#4
10/30/2007 (10:35 am)
Great stuff, thanks for this.
#5
10/30/2007 (8:37 pm)
Is there a way to add post processing effects? I'd love to add sort of a grainy old film filter to my game to make it look like an old time movie.
#6
John K.
10/30/2007 (10:08 pm)
Thanks guys. I'm pretty excited about Torque X and XNA. I'll check on the full screen post-processing. I hear this can't be done with out the Torque X Pro version since a change needs to be made to the TorqueEngineComponent. I'll double check on it and post back. I think a grainy film filter would look really good.John K.
#7
We have a flash prototype of our game with the Grainy film filter and its really pretty cool. So getting it in Torque would be nice.
10/31/2007 (3:30 pm)
Cool thanks for the response John.We have a flash prototype of our game with the Grainy film filter and its really pretty cool. So getting it in Torque would be nice.
#8
where could I learn the basics about semantics and binding, sas etc?
12/03/2007 (9:49 pm)
Is there a way to add the effect in txb (withouht having to edit the xml scene file)?where could I learn the basics about semantics and binding, sas etc?
#9
i downloaded nvidia fx composer... when you're dealing with a 2d animated sprite as the receipient of your own shader, what cool thing could you possibly do? The default effect with bump and specular mapping seems like the only things that make sense... (but the black and white thing is cool :) )
expand my mind please
12/04/2007 (6:59 am)
Mind you, what would you want to do with this guys?i downloaded nvidia fx composer... when you're dealing with a 2d animated sprite as the receipient of your own shader, what cool thing could you possibly do? The default effect with bump and specular mapping seems like the only things that make sense... (but the black and white thing is cool :) )
expand my mind please
#10
12/04/2007 (7:37 am)
Can a shader be used to implement new textures at runtime or implement colormaps, or am I in left field again :P
#11
Dan, as far as I can tell, Torque X Builder has no support for custom material mapping, just the DefaultEffect. So, direct XML changes is the only solution for now. Also, I fully agree. Most cool shader effects are applied to 3D shapes in a 3D world. But there are some very slick 2D material shaders too... The black & white shader was just a simple example ;) Some interesting 2D material shaders might include a refraction shader to make distorted see-through water drops, a velvety or hairy shader that reacts to light sources, or even a material simulation (like wood, metal, or plastic shines). Also, there are many great full-screen post shaders that will work great with 2D games, like glow, motion blur, Matthew's grainy film, red/blue color offsetting for 3D glasses, and so on. Just about anything you can do with a Photoshop filter, you should be able to do with a filter.
Check out nVidia's Shader Library for some more ideas for your game.
The notes I posted above only apply to material shaders, not full screen shaders. now that the new Torque X 1.5 is out, and the render targets are more accessible, I can do another write up on that. By the way, I have not tested to see if the steps above still work with the new release.
John K.
12/04/2007 (9:19 am)
David, yes you should be able to change change textures and color maps at runtime, but you can probably do that more easily just with the Torque X Framework code by changing materials on the fly with code.Dan, as far as I can tell, Torque X Builder has no support for custom material mapping, just the DefaultEffect. So, direct XML changes is the only solution for now. Also, I fully agree. Most cool shader effects are applied to 3D shapes in a 3D world. But there are some very slick 2D material shaders too... The black & white shader was just a simple example ;) Some interesting 2D material shaders might include a refraction shader to make distorted see-through water drops, a velvety or hairy shader that reacts to light sources, or even a material simulation (like wood, metal, or plastic shines). Also, there are many great full-screen post shaders that will work great with 2D games, like glow, motion blur, Matthew's grainy film, red/blue color offsetting for 3D glasses, and so on. Just about anything you can do with a Photoshop filter, you should be able to do with a filter.
Check out nVidia's Shader Library for some more ideas for your game.
The notes I posted above only apply to material shaders, not full screen shaders. now that the new Torque X 1.5 is out, and the render targets are more accessible, I can do another write up on that. By the way, I have not tested to see if the steps above still work with the new release.
John K.
#12
I guess I'll just wait until GG hires you
12/04/2007 (12:49 pm)
The full screen post shaders as you mentioned sound cool,I guess I'll just wait until GG hires you
#13
John K.
12/04/2007 (1:12 pm)
LOL, I'm just really excited about XNA and Torque X. Since the new 3D release has come out, I've been jamming away on a 3D sports game for the Xbox 360... Look out EA ;) I really like TGE and TGEA, but I just feel 20 times more productive working in C#. John K.
Torque 3D Owner Henry Garle
Henry