Hello World XNA Game Studio Part 5 Texturing

<< Hello World XNA Game Studio 4 Part 3: Creating a simple model in Autodesk Softimage Mod Tool and animating in XNA | Mix 10 Discussion of High Performance 3D on Windows Phone 7 >>

Jul 20

Hello World XNA Game Studio Part 5 Texturing

No Comments »

When we last left our project we had a fully working 3D model in XNA running on Windows Phone, alas there were no shaders so while it looked like a TopHat in shape it didn’t really look like much. In fact if we had put this on a white background we wouldn’t have been able to tell there was a TopHat shape at all..

So now lets got back into our project and add some shaders, so the whole thing can be textured properly.

We have to do two things, here are the steps:

Add the realtime DirectX Shaders into the content folder of our XNA Game Studio 4 Solution.
Copy the shaders also into our XSI project models and assign them as our shaders we are using into the mod tool.

First we go back into our Autodesk XSI mod tool and find the shaders. When we updated the Mod Tool to support XNA Game Studio it installed everything we need including the FX Samples in the XNA Game Studio menu item including a menu ITEM to help us find the FX files we need to add back to our XNA Game Studio 4 project....

We first need to add a folder called textures to our content folder in our content project as part of our solution file.. To do this right click on the content project in our Solution Project.. and select (from the pop-up menu Add –> New Folder…

now we have to add the shaders from within the Mod Tool’s add-on folders with the appropriate direct X shaders.. This will let the GPU access them via the XNA pipeline as part of the project when the game is compiled and run.,

If you notice in our solution explorer I have two “Models” folder, I have one in the main project as sort of a repository.. I usually don’t include this in the compile time resources, it’s mainly there for me to start back porting this Visual Studio Project sample back to Visual Studio 2008/XNA Game Studio 3.1 and the X-Box 360..

Next we are going to copy the textures over but we have to find them first..

So it’s back to the Autodesk SoftImage Mod Tool for the moment to our XNA menu.. and select “browse fx samples”

This will open the shaders that are available and we are allowed to use on our project. These are realtime rendered FX shaders (the DirectX variety). You can use these to apply surface FX to the project. WARNING: there are other shaders with Autodesk SoftImage tool but you shouldn’t use them in your project at all because they are designed for non-XNA use. In other words, if you were rendering out to film in SoftImage they would be for that purpose ONLY..

So after selecting the “Browse FX Samples” menu a new dialog will pop up with the location of our useable shader FX files and a list of them..

In the file list you will see both files ending in the .FX extension, we’ll need these copied over to our XNA Game Studio 4.0 project but also the files ending in “.HLSL”. HLSL stands for “High Level Shader Language” and it is actually the DirectX 9 shader that we will be using to dress up our TopHat object..

The other files are mapping files that are attached to the surfaces and rendered by the shader.

we are going to add these as well, however they are not needed at this moment for this example..

In the top is the path to these files we will need to copy this full path and hop into visual our XNA Game Studio 4 project with this..

The default path to these files on my system is:

C:\Softimage\Softimage_Mod_Tool_7.5\Addons\XNAGSE\Data\XNA_SAMPLES\FX

So back in XNA Game Studio 4 we right click on our already created textures folder and select Add –> existing item..

from the folder list that pops up we browse to..

C:\Softimage\Softimage_Mod_Tool_7.5\Addons\XNAGSE\Data\XNA_SAMPLES\FX

for safety and to make sure everything is need I select ALL and add them to my textures folder..

I also manually copy all of the folders to the XSI folder inside of content of the main project to make sure XSI can see and use these..

Next we will go back into the Mod Tool and assign a shader to our TopHat model.. I am going to choose the standard phong shader..

from the browser we opened earlier I can simply click on the file name of the shader (phong.fx) and drag and drop onto one of the meshs. I will need to do it for the trunk and the brim of the hat..

To verify that we have added the shader to our mesh we can go into the scene explorer and verify that they are there and in the right places by clicking on the SELECT scene button ..

the phong shader has been applied to the trunk and the hat Brim meshes.

after we have dragged and dropped the texture and verified it’s there we can turn on the DirectX9 Real-time shader view by clicking on the view option drop down menu in the upper right corner and selecting DirectX9..

Warning Note: Using a DirectX10 only shader and viewing in DirectX10 will require a DirectX10 card and may not be backwards compatible..

If the view doesn’t show up and we get an error it’s usually because we haven’t assigned the proper FX shader to the textures.. As you can see in this view the TopHat object still isn’t much to look at, as everything is set for it’s default values..

By selecting either the Trunk or the Brim mesh inside the view, we can then go in and make changes to color etc. We can even set the method to skinning, which I will cover in a later tutorial..

Adding your own shaders

It is possible to add your own shaders into both your XNA Game Studio project and Map them in the Mod Tool. You just need two files yourself to do this an .FX “wrapper” file and the .HLSL shader file itself.. However realize some XNA targets don’t support custom shaders, or to be more precise only specific shaders..

Note: there are a few differences as I noted earlier in the type of shaders and texturing that Windows Phone and X-Box 360 can support. If you are starting the project as a PC game then you need to set the project properties in Visual Studio 2010/XNA Game Studio 4 as follows..

If you are coding first for a Windows Game it’s okay to set for “HiDef”, if you need to write just for the X-Box 360 or the Windows Phone 7 then you should use the “Reach” profile. Know that certain features and limits based on the X-box and Windows Phone will be observed and if your models don’t have the right number of vertexes for instance you will get errors with you content and have to go back and rework your 3d content models..

The wrapper looks something like this (it’s just a text file that can be opened).

Here is the base template for the FX file… This is the minimal information required for every shader in the Mod Tool. Notice that it includes both static and skinned methods.

Template.FX

        1: #include <xsi_include9.hlsl> 

       2:  

       3: //**********************************************************************

       4: // Tweakables

       5: //**********************************************************************

       6:  

       7: float4 ColorParameter

       8: <

       9:     string SasUiControl = "ColorPicker";

    string SasUiLabel =  "Color";    

> = {1.0f, 1.0f, 1.0f, 1.0f};

  

//**********************************************************************

// Runtime bound

//**********************************************************************

// lights

#include <xsi_lightlist9.hlsl>

  

  

  

//**********************************************************************

// Vertex Shaders

//**********************************************************************

  

#include <xsi_defaultvs.hlsl>

  

  

//**********************************************************************

// Pixel Shaders

//**********************************************************************

  

float4 PS

(

    XSI_VertexToPixel IN

) : COLOR

{

    return ColorParameter;

}

  

//**********************************************************************

// Techniques

//**********************************************************************

  

  

technique Static

{

    pass p0

    {        

        VertexShader = compile vs_2_0 VSStatic();

        PixelShader = compile ps_2_0 PS();

    }

}

  

technique Skinned

{

    pass p0

    {        

        VertexShader = compile vs_2_0 VSSkinned();

        PixelShader = compile ps_2_0 PS();

    }

}



If you want to look at the Phong.FX file you will notice it fills in quite a bit more information about the techniques etc..

Here is the phong shader FX file we just applied..

       1: #include <xsi_include9.hlsl> 

       2:  

       3: //**********************************************************************

       4: // Tweakables

       5: //**********************************************************************

       6:  

       7: float3 AmbientColor

       8: <

       9:     string SasUiControl = "ColorPicker";

    string SasUiLabel =  "Ambient";    

> = {0.3f, 0.3f, 0.3f};

  

float3 DiffuseColor

<

    string SasUiControl = "ColorPicker";

    string SasUiLabel =  "Diffuse";    

> = {0.7f, 0.7f, 0.7f};

  

float3 SpecularColor

<

    string SasUiControl = "ColorPicker";

    string SasUiLabel =  "Specular";    

> = {1.0f, 1.0f, 1.0f};

  

float SpecularPower

<

    string SasUiControl = "Slider";

    string SasUiLabel = "Specular Power";

    float SasUiMin = 1;

    float SasUiMax = 200;    

> = 20.0f;

  

texture2D AmbientMap

<

    string ResourceName = "default_ambocc_map.png";

    string ResourceType = "2D";

>;

  

texture2D AlbedoMap

<

    string ResourceName = "default_surface_map.png";

    string ResourceType = "2D";

>;

  

texture2D NormalMap

<

    string ResourceName = "default_normal_map.png";

    string ResourceType = "2D";

>;

  

sampler2D AmbientSampler = sampler_state

{

    Texture = <AmbientMap>;

    MipFilter = LINEAR; 

    MinFilter = LINEAR;

    MagFilter = LINEAR;    

};

  

sampler2D AlbedoSampler = sampler_state

{

    Texture = <AlbedoMap>;

    MipFilter = LINEAR; 

    MinFilter = LINEAR;

    MagFilter = LINEAR;    

};

  

sampler2D NormalSampler = sampler_state

{

    Texture = <NormalMap>;

    MipFilter = LINEAR; 

    MinFilter = LINEAR;

    MagFilter = LINEAR;    

};

  

//**********************************************************************

// Runtime bound

//**********************************************************************

  

  

float4 sieye

<

    string SasBindAddress = "Sas.Camera.Position"; 

>;

  

  

// lights

#include <xsi_lightlist9.hlsl> 

  

  

//**********************************************************************

// Vertex Shaders

//**********************************************************************

  

#include <xsi_defaultvs.hlsl>

  

  

//**********************************************************************

// Pixel Shaders

//**********************************************************************

  

float4 Phong_2

(

    XSI_VertexToPixel IN

) : COLOR

{

    #include<xsi_lightdef9.hlsl>

  

    float3 globalpos = IN.texcoord4;    

    float3x3 TangentToWorldSpace;

    

    float3 lightcolor = 0.0f;

    

    //*************************************************

    // sample our textures

    //*************************************************

    float3 normaltex = tex2D(NormalSampler, IN.texcoord0) * 2 - 1;

    float3 ambienttex = tex2D(AmbientSampler, IN.texcoord0);

    float3 albedotex = tex2D(AlbedoSampler, IN.texcoord0);

    

    AmbientColor = AmbientColor * ambienttex;

    DiffuseColor = DiffuseColor * albedotex;

    

    TangentToWorldSpace[0] = IN.texcoord5.xyz;

    TangentToWorldSpace[1] = IN.texcoord6.xyz;    

    TangentToWorldSpace[2] = IN.texcoord7.xyz;

    

    //*************************************************

    // convert normal in world space

    //*************************************************

    float3 normal = normalize(mul(normaltex,TangentToWorldSpace));

    

    //*************************************************

    // eye to vertex    

    //*************************************************

    float3 eyetovert = normalize(sieye.xyz - globalpos);

    

    //*************************************************

    // light up

    //*************************************************

    

    float3 ts_lightdir;

    float3 ts_hvec;

        

    int loop;

    for(loop = 0; loop < NUM_LIGHTS; loop++)

    {

    

        // light direction 

        ts_lightdir = LightPos[loop].xyz - globalpos;

        

        float lightdistance = length(ts_lightdir);

        ts_lightdir = normalize(ts_lightdir);

    

        // half vector

        ts_hvec = normalize(eyetovert + ts_lightdir);

    

        float3 currentcolor =  LightCol[loop] * (

            (DiffuseColor * clamp(dot(normal, ts_lightdir), 0, 1)) +    // diffuse

            (SpecularColor * LightCol[loop] * pow(clamp(dot(normal, ts_hvec),0,1), SpecularPower)));    // specular

            

        lightcolor += currentcolor;

    }    

    

    

    float4 result;

    result.xyz = AmbientColor + lightcolor ;    

    result.w = 1;

  

  

    return result;

}

  

//**********************************************************************

// Techniques

//**********************************************************************

  

  

technique Static

{

    pass p0

    {        

        VertexShader = compile vs_2_0 VSStatic();

        PixelShader = compile ps_2_0 Phong_2();

    }

}

  

technique Skinned

{

    pass p0

    {        

        VertexShader = compile vs_2_0 VSSkinned();

        PixelShader = compile ps_2_0 Phong_2();

    }

}



Next we should look at the HLSL file that is included (or referred to) in the shader phong shader file above file..

       1: //************************************************************

       2: // standard include file for XSI DirectX 9 HLSL shaders

       3: //************************************************************

       4:  

       5: //************************************************************

       6: // Application to vertex data

       7: //************************************************************

       8: struct XSI_AppToVertex

       9: {

    float4 position : POSITION;

    float4 normal : NORMAL;

    float4 color0 : COLOR0;

    float4 color1 : COLOR1;

    float4 texcoord0 : TEXCOORD0;

    float4 texcoord1 : TEXCOORD1;

    float4 texcoord2 : TEXCOORD2;

    float4 texcoord3 : TEXCOORD3;

    float4 texcoord4 : TEXCOORD4;

    float4 texcoord5 : TEXCOORD5;

    float4 texcoord6 : TEXCOORD6;

    float4 texcoord7 : TEXCOORD7;

    float4 BoneIndices : BLENDINDICES0;

    float4 BoneWeights : BLENDWEIGHT0;    

};

  

//************************************************************

// Vertex to pixel data

//************************************************************

struct XSI_VertexToPixel

{

    float4 position : POSITION;

    float4 color0 : COLOR0;

    float4 color1 : COLOR1;

    float4 texcoord0 : TEXCOORD0;

    float4 texcoord1 : TEXCOORD1;

    float4 texcoord2 : TEXCOORD2;

    float4 texcoord3 : TEXCOORD3;

    float4 texcoord4 : TEXCOORD4;

    float4 texcoord5 : TEXCOORD5;

    float4 texcoord6 : TEXCOORD6;

    float4 texcoord7 : TEXCOORD7;

};

There are many ways to get shader files of all types on the internet, anything from Toon Shaders, to glass, metals, etc.. I recommend if you want to experiment with creating your own there are two great ones available that won’t require much coding on your part...

FX Composer from NVIDIA

ATI Render Monkey from AMD

You might also check out NVIDIA’s HLSL shader library..

http://developer.download.nvidia.com/shaderlibrary/webpages/hlsl_shaders.html

Here is the same example with virtually the same code and model running first as a PC XNA GAME Application

And again our sample running on Windows Phone 7

This runs great on the X-Box 360, but it’s a little difficult for me to do a screen capture at the moment. Let me just say, writing code once and having the same “connected experience” on all three places is really fun..

Hello World XNA Game Studio 4 Part 3: Creating a simple model in Autodesk Softimage Mod Tool and animating in XNAWhen we last left off we had learned how to link Autodesk’s SoftImage Mod Tool to XNA Game Studio an...Hello World XNA Game Studio 4 Part 2 Linking to Autodesk’s SoftImage Mod ToolBy Don Burnett In our last XNA tutorial we set up a simple “Hello World” Application that took us t...Hello World XNA Game Studio 4 Part 2 Linking to Autodesk’s SoftImage Mod ToolBy Don Burnett In our last XNA tutorial we set up a simple “Hello World” Application that took us t...

Hello World XNA Game Studio Part 5 Texturing

Tags

Archives

Pages