Tutorials

XNA Shader Programmering, Tutorial 5

digitalerr0r — Thu, 17 Apr 2008 18:23:00 GMT

XNA Shader Programming

Welcome back to the XNA Shader Programming series. Since the start of tutorial 1, we have been looking at different lighting algorithms. Todays tutorial will be quite short and different, compared to those others, a pure vertex shader effect for deforming objects.

Before we start

In this tutorial, you will need some basic knowledge of shaderprogramming, a understanding of geometry, vector math and matrix math. Also, the project is for XNA 2.0 and Visual Studio 2005.

Sourcecode: de_shader_tutorial_5.zip

Deforming objects

Since vertex shaders can be used to process and transform vertices on a per vertex basis, it's quite ideal to use them to deform objects/meshes. Vertex shaders make it really easy to deform objects, let's take an example. Say you have a game that will make it possible to create your own character. This includes changing skin color, eye color, hair, clothes and so on. We can in this example create a vertex shader to create a weight property for our character, where say 0 means that our character will be very slim, and 1 that says that our character will be fat.

Fat/Slim

To do this, we need a vertex shader that simply moves a vertex along it's normal:

If we move all the vertices along their normals, the object will be bigger, or smaller.

Ocean waves

Instead of making a big bone animated mesh to create a realistic looking ocean in your game, you could use a vertex shader to produce waves.
To do this, you will need a big flat mesh that will represent your ocean without any waves. You could either do this in 3Ds, or produce it with code. It will need many vertexes, as the shader will move them up and down according to a sine/cos function.

As we can see in this picture, we got a plane defined by alot of vertexes. We can here use a Vertex Shader to move all vertexes by its Y-axis with a sine function, say f(y)=sin(y). Say vertex X is moved with pos.Y = sin(X.pos+time);
This will produce waves on the ocean. Ofcourse, this is really simple and pretty ugly. There is alot of differen Ocean algorithms out there, so if you want to look more closely on this subject, just do a google on the topic.

To make the ocean look better, you could apply a normal map to create small bumps on the surface, in addition to huge waves. You can also mix sine and cos functions to make more realistic waves.

"Fake Spherical harmonics"

This is what I'm going to implement today. Its pretty much a combination of the slim/fat algorithm and the ocean algorithm. The example will use a sphere object, and apply a pretty advanced sin/cos function to move vertexes along their normal in order to deform it, based on time.

Implementing the shader

The shader is just a Vertex Shader. The pixel shader will only do some basic lighting to make it look more real. You can add normal-mapping here and so on to create really cool looking effects( refer to my last tutorial, 4 ).
In this shader, we will need a time variable, so we can move our vertexes along with a timer to make it look animated, and then we only make a huge mess of sine and cos functions to make it look cool. Feel free to play with these values.
Here is the Vertex Shader for this effect:

float4 g_fTime;

OUT VS(float4 Pos : POSITION, float3 N : NORMAL)
{
    
    OUT Out = (OUT)0;      
   
    
    float angle=(g_fTime%360)*2;
    float freqx = 1.0f+sin(g_fTime)*4.0f;
    float freqy = 1.0f+sin(g_fTime*1.3f)*4.0f;
    float freqz = 1.0f+sin(g_fTime*1.1f)*4.0f;
    float amp = 1.0f+sin(g_fTime*1.4)*30.0f;
    
    float f = sin(N.x*freqx + g_fTime) * sin(N.y*freqy + g_fTime) * sin(N.z*freqz + g_fTime);
    Pos.z += N.z * amp * f;
    Pos.x += N.x * amp * f;
    Pos.y += N.y * amp * f;
    
    Out.Pos = mul(Pos, matWorldViewProj); 
    Out.N = mul(N, matWorld);    
    
    float4 PosWorld = mul(Pos, matWorld); 
    
    Out.L = vecLightDir;
    Out.V = vecEye - PosWorld;
    
   return Out;
}

This shader calculates an amplitude and a frequency in order to find a smooth value that the vertex can be moved to, based on its vertex.

Using the shader

Nothing new here. We only pass a variable time to our shader trough the g_fTime parameter defined in our shader file.

XNA Shader Programmering, Tutorial 4

digitalerr0r — Fri, 11 Apr 2008 16:53:00 GMT

XNA Shader Programming

Welcome back to the XNA Shader Programming series. I hope you enjoyed the last 3 tutorials, and have started to get a grip on shaders!
Last time we talked about Specular lighting, and how to implement this in our own engines. Today I'm going to take this to the next level, and implement Normal Mapping.

Before we start

In this tutorial, you will need some basic knowledge of shaderprogramming, vector math and matrix math. Also, the project is for XNA 2.0 and Visual Studio 2005.

Sourcecode: de_shader_tutorial04.zip

Normal Mapping

Normal mapping is a way to make a low-poly object look like a high-poly objekt, without having to add more polygons to the model. We can make surfaces, like walls, look alot more detailes and realistic by using the technique in todays lesson.
A easy way to descibe normal mapping is that it is used to fake the existence of geometry.

To compute normal mapping, we will need two textures: one for the colormap, like a stone texture, and a normal map that describes the direction of a normal. Instead of calculating the Light by using Vertex normals, we calculate lighting by using the normals stored in the normal map.

Sounds easy, ey? Well, there is one more thing. In most Normal mapping techniques( like the one I'm describing today ), the the normals are stored in something that is called texture space coordinate system, or tangent space coordinate system,. Since the light vector is handled in object or world space, we need to transform the light vector into the same space as the normals in the normalmap.

Tangen space

To describe tangent space, take a look at this image:

Our shader will create a vector W for the texture space coordinate system by using the normal. Then we will calculate U with the help of a DirectX Util function called D3DXComputeTangent() and then calculate vector V by taking the corss-product of W and U.
V = WxU.

Lets take a closer look on how to implement this later, for now, let's focus on todays next thing: Textures!
As you might have noticed, we need textures to implement normal mapping. Two textures to be spesific.

So, how do we load textures? In XNA this is very simple, and I'll cover this later. And guess what? It's just as simple to implement textures in our shaders.
To implement textures, we need to create something that is called Texture samplers. A texture sampler, as the name describes, sets the sampler state on a texture. This could be info about how the texture should use filtering( trilinear in our case ), and how the U,V coordinates of the texturemap will behave. This can be clamping the texture, mirroring the texture and so on.

To create a sampler for our texture, we first need to define a texture variable the sampler will use:

texture ColorMap;

We can now use ColorMap to create a texture sampler:

sampler ColorMapSampler = sampler_state
{
   Texture = <ColorMap>; // sets our sampler to use ColorMap
   MinFilter = Linear;        // enabled trilinear filtering for this texture
   MagFilter = Linear;
   MipFilter = Linear;
   AddressU = Clamp;       // sets our texture to clamp
   AddressV = Clamp;
};

So, we got a texture and a sampler for this texture.
Before we can start using the texture in our shaders, we need to set a sampler stage in our technique:

technique NormalMapping
{
    pass P0
    {
        Sampler[0] = (ColorMapSampler);

        VertexShader = compile vs_1_1 VS();
        PixelShader = compile ps_2_0 PS();
    }
}

Ok, now we are ready to use our texture!
Since we are using a pixels shader to map a texture to an object, we can simply create a vector named color:
float4 Color;

and set the values in the color variable to equal the color in our texture at texturecoordinate UV.
In HLSL, this can easily be done by using a HLSL function called tex2D( s, t ); where s is the sampler, and t is the texture coordinate of the pixel we are currently working on.
Color = tex2D( ColorMapSampler, Tex ); // Tex is an input to our pixel shader, from our vertex shader. It is the texture coordinate our PS is currently working on.

Texture coordinates?? Well, let me explain that. A texture coordinate is simpla a 2D coordinate ( U,V ) that is store in our 3D model or object. It is used to map a texture onto the object and are ranging from 0 to 1.

With texture coordinates, the model can have textures assigned to different places, say an Iris texture on the eyeball part of a human-model, or a mouth somewhere in a human face.

As for the lighting algortihm, we will use Specular lighting.

Ok, guess we are done with the teory, hope you got an overview of the different components needed in the Normal Map shader.

Implementing the shader

The biggest differences on this shader and the specular lighting shader is that we will use tangent space instead of object space, and that the normals used for lighting calculation will be retrived from a normal map.

Lets start by declaring a few global variables:

float4x4 matWorldViewProj;    
float4x4 matWorld;    
float4 vecLightDir;
float4 vecEye;

Nothing new here, lets continue by creating an instance and a sampler for the color map, and the normal map.

texture ColorMap;
sampler ColorMapSampler = sampler_state
{
   Texture = <ColorMap>;
   MinFilter = Linear;
   MagFilter = Linear;
   MipFilter = Linear;   
   AddressU  = Clamp;
   AddressV  = Clamp;
};

texture NormalMap;
sampler NormalMapSampler = sampler_state
{
   Texture = <NormalMap>;
   MinFilter = Linear;
   MagFilter = Linear;
   MipFilter = Linear;   
   AddressU  = Clamp;
   AddressV  = Clamp;
};

We create an instance of the ColorMap texture and a sampler for it. These textures will be set trough a parameter from our main application. As you can se, we are using trilinear filtering for both our texture.
Now, the output structure that the Vertex Shader will return looks just the same as in the specular lighting shader:

struct OUT
{
    float4 Pos  : POSITION;
    float2 Tex : TEXCOORD0;
    float3 Light : TEXCOORD1;
    float3 View : TEXCOORD2;
};

Let's continue with the Vertex Shader. There is a lot of new things here, mostly because we want to calculate the tangent space. Have a look at the code:

OUT VS(float4 Pos : POSITION, float2 Tex : TEXCOORD, float3 N : NORMAL, float3 T : TANGENT  )
{
    OUT Out = (OUT)0;      
    Out.Pos = mul(Pos, matWorldViewProj);
    
    float3x3 worldToTangentSpace;
    worldToTangentSpace[0] = mul(T, matWorld);
    worldToTangentSpace[1] = mul(cross(T, N), matWorld);
    worldToTangentSpace[2] = mul(N, matWorld);
        
    Out.Tex = Tex;
    
    float4 PosWorld = mul(Pos, matWorld);    
    
    Out.Light = mul(worldToTangentSpace, vecLightDir);     // L
    Out.View = mul(worldToTangentSpace, vecEye - PosWorld);    // V
    
   return Out;
}

We start by transforming the position as usually.
Then we create a 3x3 matrix, worldToTangentSpace, that is used to transform from world space to tangent space.

Basically, what we get from this vertex shader is the transformed Position, and a transformed Light and View vector based on the tangent space matrix. This is because, as mentioned earlier, the normal map is stored in tangen space. So to calculate a proper light based on the normal map, we need to do this to have all vectors in the same space.

So, now that we have our vectos in the right space, we are ready to implement the pixel shader.
The pixelshader need to get the pixelcolor from the colormap, and the normal from the normal map.
Once this is done, we can calulate the ambient, diffuse and specular lighting based on the normal from our normal map.

The code for implementing the pixel shader is pretty much straigth forward, have a look at the code:

float4 PS(float2 Tex: TEXCOORD0, float3 L : TEXCOORD1, float3 V : TEXCOORD2) : COLOR 
{
    float4 Color = tex2D(ColorMapSampler, Tex);    
    
    float3 N =(2 * (tex2D(NormalMapSampler, Tex)))- 1.0; 
     
     
    float3 LightDir = normalize(L);    // L
    float3 ViewDir = normalize(V);    // V
        
    float D = saturate(dot(N, LightDir)); 
    
    float3 R = normalize(2 * D * N - LightDir);  // R
     
    float S = min(pow(saturate(dot(R, ViewDir)), 3), Color.w);

    return 0.2 * Color + Color * D + S;    
}

There ain't much new here, except for the N variable and the calculation on specular lighting.
The normal use the same function as getting the pixel color from the colormap: tex2D(s,t);
And, its pretty much the same thing. We need to make sure that the normal can range from -1 and 1 so we multiply the normal with two, and subtract one.
float3 N =(2 * (tex2D(NormalMapSampler, Tex)))- 1.0;

And also, to compute how shiny the surface will be( specular lighting ) we can use the alphachannel in our colormap to make it possible for artists to specify how shiny different parts of a texture will be.

Finally, we create the technique and initiates the samplers used in this shader.

technique NormalMapping
{
    pass P0
    {
        Sampler[0] = (ColorMapSampler);        
        Sampler[1] = (NormalMapSampler);        
    
        VertexShader = compile vs_1_1 VS();
        PixelShader  = compile ps_2_0 PS();
    }
}

Using the shader

Ok, not much new when it comes to using the shader, except for the textures!

To initiate and use textures in XNA we are going to use the built in Texture2D class.

Texture2D colorMap;
Texture2D normalMap;

Now we are ready to initialise the texutres using the Content.Load function. We assume that you have created a normal map and a colormap for your object.

colorMap = Content.Load<Texture2D>("stone");
normalMap = Content.Load<Texture2D>("normal");

All that is left is to pass the textures into the shader. 
This is done exactly the same way as other parameters passed to the shader.

effect.Parameters["ColorMap"].SetValue(colorMap);
effect.Parameters["NormalMap"].SetValue(normalMap);

Excersises

1. Play with different colormaps and see how the outcome is.
2. Try different models, like a cube to create a detailed brickwall or a stonewall.
3. Implement a normal map shader, with detailed control for all light values( ambient, diffuse, specualar ) and make it possible to enable or disable different parts of the algorithm( tips: use a boolean to set disabled values to zero ). This could result in a pretty cool and flexible shader for your applications.

I hope you now understand how normal mapping is implemented, but if not, please give me some feedback so I know what part I need to work on.
But, as you can see, to create good looking effects you won't have to write big and advanced shaders!

Next time, I'm going to write a tutorial about deforming objects.

XNA Shader Programmering, Tutorial 3

digitalerr0r — Tue, 08 Apr 2008 22:02:00 GMT

XNA Shader Programming

Tutorial 3 by Petri T. Wilhelmsen aka. digitalerr0r
www.gamecamp.no

Since the site is being more international atm, I dediced to write the 3rd tutorial on English. Hope this won't be a problem for most of you, but if you got any questions, please don't hesitate contacting me.

In todays lesson, we are going to implement an other lighting algorithm called Specular Lighting. This algeorithm builds on the Ambient and Diffuse lighting tutorial, so if you haven't been trough my last tutorials, now is the time. :)

Before we start:
In this tutorial, you will need some basic knowledge of shaderprogramming, vector math and matrix math. Also, the project is for XNA 2.0 and Visual Studio 2005.

Sourcecode: de_shader_tutorial03.zip

Specular lighting

So far, we got a nice lighting model for making a good looking lighting on objects. But, what if we got a blank, polished or shiny object we want to render? Say a metal surface, plastic, glass, bottle and so on.

To simulate this, we need to implement a new vector to our lighting algorithm: The eye vector.

Whats "the eye" vector, you might think? Well, it's a pretty easy answer to this. It's the vector that points from our camera position to the camera target.

We already got this vector in our application code:

viewMatrix   = Matrix.CreateLookAt( new Vector3(x, y, zHeight), Vector3.Zero, Vector3.Up );

The position of "The eye" is located here:

Vector3(x, y, zHeight)

So let's take this vector, and store it in a variable:

Vector4 vecEye = new Vector4(x, y, zHeight,0);

Let's look more closely about how to use the shader after we have created it.

The formula for Specular Lighting is

I=AiAc+DiDcN.L+SiSc(R.V)^n*

Where

R=2(N.L)N-L

As we can see, we got the new Eye vector V, and aslo we got a reflection vector R.

To compute the Specular light, we need to take the dot product of R and V and use this in the power of n where n is controlling how "shiny" the object is.

Implementing the shader

It's time to implement the shader, but first, let's look at the result:

As you can see, this object looks polished/shiny, only by using the shader we are going to implement!
Pretty cool, ey?

Lets start by declaring a few variables we will need for this shader:

float4x4 matWorldViewProj;    
float4x4 matWorld;    
float4 vecLightDir;
float4 vecEye;
float4 vDiffuseColor;
float4 vSpecularColor;
float4 vAmbient;

And then the output structure for our Vertex Shader. The shader will return the transformed position , Light vector, Normal vector and view vector( the Eye vector ) for a given vertex.

struct OUT
{
    float4 Pos  : POSITION;
    float3 L : TEXCOORD0;
    float3 N : TEXCOORD1;
    float3 V : TEXCOORD2;
};

Not much new in the vertex shader since last time, except for the V vector. V is calculated by subtracting the transformed position from the Eye vector.
Since V is a part of the OUT structure, and we have defined OUT Out, we can calculate V with the following code:

float4 PosWorld = mul(Pos,matWorld);
Out.L = vecEye - PosWorld

where vecEye is a vector passed into the shader trough a shader-parameter.( The camera position ).

OUT VS(float4 Pos : POSITION, float3 N : NORMAL)
{
    OUT Out = (OUT)0;      
    
    Out.Pos = mul(Pos, matWorldViewProj);    
    Out.N = mul(N, matWorld);                
    
    float4 PosWorld = mul(Pos, matWorld);    
    
    Out.L = vecLightDir;
    Out.V = vecEye - PosWorld;
    
   return Out;
}

And then its time to implement the pixelshader. We start with normalizing the Normal, LightDir and ViewDir to make calculations a bit simpler.
The pixelshader will reatun a float4, that represents the finished color, I, of the current pixel, based on the formula for specular lighding described earlier.

Then, we will calculate direction of the diffuse light as we did in Tutorial 2.

The new thing in the Pixel Shader for Specular Lighting is to calculate and use a reflectionvector for L by N, and using this vector to compute the specular light.

So, we start with computing the reflectionvector of L by N:
R = 2 * (N.L) * N – L

As we can se, we have already computed the Dotproduct N.L when computing the diffuse light. Lets use this and write the following code:
float3 Reflect = normalize(2 * Diff * Normal - LightDir);

Now, all there is left is to compute the specular light. We know that this is computed by taking the power of the dotproduct of the reflection vecotor and the view vector, by n: (R.V)^n
You can think of n as a factor for how shiny the object will be. The more n is, the less shiny it is, so play with n to get the result you like.

As you might have noticed, we are using a new HLSL function pow(a,b). What this does is quite simple, it returns a^b.
float Specular = pow(saturate(dot(Reflect, ViewDir)), 15);

Phew, we are finally ready to put all this together and compute the final pixelcolor:
return vAmbient + vDiffuseColor * Diff + vSpecularColor * Specular;

This formula should no longer be a suprise for anyone, right?
We start by calculating the Ambient and Diffuse light, and add these together. Then we take the specular light color and multiply it with the Specular component we just calculated, and add it with the Ambient and Diffuse color.

The pixelshader for this tutorial could look like this:

float4 PS(float3 L: TEXCOORD0, float3 N : TEXCOORD1,
            float3 V : TEXCOORD2) : COLOR
{
    float3 Normal = normalize(N);
    float3 LightDir = normalize(L);
    float3 ViewDir = normalize(V);

    float Diff = saturate(dot(Normal, LightDir));

    // R = 2 * (N.L) * N – L
    float3 Reflect = normalize(2 * Diff * Normal - LightDir);
    float Specular = pow(saturate(dot(Reflect, ViewDir)), 15); // R.V^n

    // I = A + Dcolor * Dintensity * N.L + Scolor * Sintensity * (R.V)n
    return vAmbient + vDiffuseColor * Diff + vSpecularColor * Specular;
}

And offcourse, we have to specify a technique for this shader, and compile the Vertex and Pixel shader:

technique SpecularLight
{
    pass P0
    {
        // compile shaders
        VertexShader = compile vs_1_1 VS();
        PixelShader  = compile ps_2_0 PS();
    }
}

The whole code for the shader( .fx ) file is:

float4x4 matWorldViewProj;    
float4x4 matWorld;    
float4 vecLightDir;
float4 vecEye;
float4 vDiffuseColor;
float4 vSpecularColor;
float4 vAmbient;


struct OUT
{
    float4 Pos  : POSITION;
    float3 L : TEXCOORD0;
    float3 N : TEXCOORD1;
    float3 V : TEXCOORD2;
};


OUT VS(float4 Pos : POSITION, float3 N : NORMAL)
{
    OUT Out = (OUT)0;      
    
    Out.Pos = mul(Pos, matWorldViewProj);    
    Out.N = mul(N, matWorld);                
    
    float4 PosWorld = mul(Pos, matWorld);    
    
    Out.L = vecLightDir;
    Out.V = vecEye - PosWorld;
    
   return Out;
}


float4 PS(float3 L: TEXCOORD0, float3 N : TEXCOORD1, 
            float3 V : TEXCOORD2) : COLOR
{   
    float3 Normal = normalize(N);
    float3 LightDir = normalize(L);
    float3 ViewDir = normalize(V);    
    
    float Diff = saturate(dot(Normal, LightDir)); 
    
    // R = 2 * (N.L) * N – L
    float3 Reflect = normalize(2 * Diff * Normal - LightDir);  
    float Specular = pow(saturate(dot(Reflect, ViewDir)), 15); // R.V^n

    // I = A + Dcolor * Dintensity * N.L + Scolor * Sintensity * (R.V)n
    return vAmbient + vDiffuseColor * Diff + vSpecularColor * Specular; 
}


technique SpecularLight
{
    pass P0
    {
        // compile shaders
        VertexShader = compile vs_1_1 VS();
        PixelShader  = compile ps_2_0 PS();
    }
}

Using the shader

There is almost nothing new when it comes to using the shader in an application since my last tutorial, except for setting the vecEye parameter to the shader.
We just take the position of the camera and pass it to our shader. If you are using a camera-class, there might be a function for getting the camera position. It's really up to you how you decide to get it.
In my example, i use the same variables for setting the camera position, and creating a vector that is passed to the shader.

Vector4 vecEye = new Vector4(x, y, zHeight,0);

and pass it to the shader:
effect.Parameters["vecEye"].SetValue(vecEye);

Setting parameters in a shader from the application and how to implement the shader should not be a new topic for you if you'r at this stage, so I won't go into further detail about this. Please refer to Tutorial 2 and Tutorial 1 about this, or send me an e-mail.

We also have to remember to set the technique to "SpecularLight".

Excersises

1. Make a new global variable in the shader that specifies the "shininess" of the object. You should be able to set this variable from the application that is using the shader.
2. In this tutorial, you don't have so much control over the light settings( like setting Ai and Ac, Di and Dc ). Make this shader to support setting Ai, Ac, Di, Dc, Si and Sc where Si and Sc is the color and intensitivity for the specular light

Thanks for reading this tutorial, hope I covered it enough for you to understand!
If you have any comments, feedback or questions, please ask me on petriw(at)gmail.com, or find me on the forums.

Next time I'm going to cover Normal mapping, and how to use textures in shaders.

Compressing audio in Xna for Windows

Einar Ingebrigtsen — Wed, 02 Apr 2008 15:55:00 GMT

Xna does not support MP3 or WMA, neither on Xbox or Windows. For Xbox you have a format called XMA that is pretty much like WMA on Windows, but for Xna for Windows you have to resort to uncompressed (PCM) or close to uncompressed (ADPCM). This tutorial shows you how you can use ADPCM and get at least some compression for your sounds and save a bit of space. The average compression rate is 27% for the default settings.

We will be using XACT (Microsoft Cross-Platform Audio Creation Tool) that comes with both Xna 1.0 and 2.0.

Create a new project by going to File->New Project (Ctrl +N) and create yourself an empty project.

You then get a screen looking something like this:

First we will create a compression preset by right-clicking the compression presets and select new compression preset:

Give it a name, so you'll recognize it later on in the process.

Now we need to select ADPCM and samples per block:

We'll leave the samples per block to 128, which is default. The quality of the sound is quite good with this setting.

Now we need to create a wave bank by right-clicking the wave banks in the project and choose new wave bank:

Leave the default settings for now.

You're then given a window where all your wave files will exist for that particular wave bank. Here we can insert our wave files.
Just right-click inside the window and choose to insert wave files:

Select your wave file:

We can now select the compression preset we want to use for the imported wave by selecting the wave file and then selecting the correct preset in the properties in the lower left of the application:

Now we need to create sound bank by right-clicking the sound banks and choose new sound bank:

Open your wave bank and select the wave file you want to be cue in the sound and drag it from the wave bank onto the cue part of the window.
The result should be something like this:

You now have a project you can build and use from your solution programmatically.

XNA 3D Engine - Camera and Game services (Part 3)

raymond — Sun, 16 Mar 2008 01:42:00 GMT

Welcome to the third part of this tutorial.

You can download the project for all the three parts at the bottom of the page.

Today we’ll look at how to create a camera class for our engine, and how it will play along with the hero class we made.

The first thing we need to do is to create an IHero interface for the camera to query.

A nice way to do that (if you don’t have Resharper) is to enter the class designer for the project, right click the hero class and select “extract interface”.

Choose the rotation and position member to create the new interface.

It should look like this:

interface IHero

{

Vector3 Position { get; }

float Rotation { get; }

}

In the game class, right after we add the hero component, we’ll add the hero game service like this:

// Add the IHero service to the Game Services.

this.Services.AddService(typeof(IHero), hero);

Game services are objects with a typically long life cyclus. We need them when we want an object exposed to many other objects. It’s also important that we don’t expose our services too much. We don’ want our camera to change the position of our hero or our scene to change the projection matrix of our camera.

Now we can finally create the camera.

A 3D camera needs to expose a view matrix and a projection matrix for our scene.

The projection matrix typically doesn’t change a lot, so let’s concentrate on the view matrix.

To calculate the view matrix we need to know the position our camera is in, and what direction we are looking.

We get the hero’s position and rotation from our IHero game service.

The position is a point in 3d space, here represented as a Vector.

The rotation is in radians and we need that for calculating where the camera should look at.

Our camera class looks like this:

using Microsoft.Xna.Framework;

namespace XNA3DEngine

{

public class Camera : GameComponent, ICamera

{

private Vector3 _position;

private Vector3 _lookAt;

private Matrix _viewMatrix;

private Matrix _projectionMatrix;

private IHero hero;

public Camera(Game game) : base(game)

{

hero = (IHero)Game.Services.GetService(typeof(IHero));

}

public Vector3 Position

{

get { return this._position; }

set { this._position = value; }

}

public Vector3 LookAt

{

get { return this._lookAt; }

set { this._lookAt = value; }

}

public Matrix ViewMatrix

{

get { return this._viewMatrix; }

}

public Matrix ProjectionMatrix

{

get { return this._projectionMatrix; }

}

/// <param name="gameTime">Time elapsed since the last call to Microsoft.Xna.Framework.GameComponent.Update(Microsoft.Xna.Framework.GameTime)</param>

public override void Update(GameTime gameTime)

{

updatePosition();

this._viewMatrix = Matrix.CreateLookAt(this._position, this._lookAt, Vector3.Up);

}

private void updatePosition()

{

// Gets the position of our hero from the IHero service.

this._position = hero.Position;

// Updates our cameras lookAt vector.

updateLookatVector();

}

private void updateLookatVector()

{

// Turn the camera in the direction that our hero is facing

Matrix rotation = Matrix.CreateRotationY(hero.Rotation);

// Gets the displacement vector.

Vector3 transformReference = Vector3.Transform(Vector3.Forward, rotation);

// Finally changes the lookAt vector. this wants to be right in front of the character.

// It's very important to change this every time the character moves or rotates.

// if the lookAt vector isn't directly in front of the character at all times,

// it moves out of sync (and kind of funny :D).

this._lookAt = _position + transformReference;

}

public override void Initialize()

{

this._projectionMatrix = Matrix.CreatePerspectiveFieldOfView(

MathHelper.ToRadians(40.0f),

this.Game.GraphicsDevice.DisplayMode.AspectRatio,

0.1f,

10000.0f);

base.Initialize();

}

We need our scene to know about the camera class, so we have to expose the camera as a service too.

Create this interface for our camera:

interface ICamera

{

Matrix ProjectionMatrix { get; }

Matrix ViewMatrix { get; }

}

Now we have to add both the camera game component and the game service.

Add these lines between our hero and scene initialization code:

// Add our camera class

Camera camera = new Camera(this);

this.Components.Add(camera);

// Add the ICamera service to the Game Services.

this.Services.AddService(typeof(ICamera), camera);

This is great, now our hero checks for input in it’s update method and our camera positions itself in its update method. The only thing that’s missing now, is to update our scene class to actually use our camera’s view and projection matrix.

Add this as a private field to our scene class:

private ICamera camera;

In the initialize method, get a reference to the camera object like so:

camera = (ICamera)Game.Services.GetService(typeof(ICamera));

Now change the Draw method:

public override void Draw(Microsoft.Xna.Framework.GameTime gameTime)

{

foreach (ModelMesh mesh in scene.Meshes)

{

foreach (BasicEffect effect in mesh.Effects)

{

effect.View = camera.ViewMatrix;

effect.Projection = camera.ProjectionMatrix;

}

mesh.Draw();

}

base.Draw(gameTime);

}

Hit F5 and voila! You can move the character around with the arrow keys.

That’s it for now. The next part will be a little more advanced as we are delving into collision detection.

Until then, here’s the code I promised you:

Download Solution - XNA3DEngine.zip

XNA 3D Engine - Hero class and rendering (Part 2)

raymond — Sun, 17 Feb 2008 20:25:00 GMT

In this second part of the tutorial we’ll look at how to render our scene, and building our hero class.

The code for both parts is available from a link at the bottom of the article.

Navigate to the Scene class we made.

This is still just an empty class, so what want to do now is to draw our model.

First we need to load it.

Add these as members of our class:

private Model scene;

..and in LoadContent(), add:

scene = this.Game.Content.Load<Model>("CastleSiege");

This basically means that we load some content of type “Model” into our “scene” member.

Let’s go and draw our model, this will be the most complicated task in this part of the tutorial.

A model consists of several ModelMeshes. The ModelMesh has its own Effect, which in turn has a view, projection and world matrix. It also has a Draw method, which means that we have control of both movement and visibility of our modelmeshes in the model.

There is much more to it than this, but let’s take one step at a time.

In our Draw Method, we’ll first need to iterate over our modelmeshes. Then we’ll iterate over the effects and set its matrices. After that, we’ll draw the modelmesh. Here’s how:

public override void Draw(Microsoft.Xna.Framework.GameTime gameTime)

{

foreach (ModelMesh mesh in scene.Meshes)

{

foreach (BasicEffect effect in mesh.Effects)

{

effect.World = Matrix.CreateTranslation(new Vector3(0,-80,0));

effect.Projection = Matrix.CreatePerspectiveFieldOfView(

MathHelper.ToRadians(40.0f),

this.Game.GraphicsDevice.DisplayMode.AspectRatio,

0.1f,

10000.0f);

}

mesh.Draw();

}

base.Draw(gameTime);

}

We set the world matrix to position our model slightly more up in the y axis, that’s because the model’s origo is in the “ground” of our castle.

The projection matrix is a tutorial of it’s own, but this just means how we view the world.

XNA luckily has a helper function like CreatePerspectiveFieldOfView to make it easier for us.

Notice that we don’t set our view matrix.

This is something we have to add later when we start to move around in our scene.

Finally, we have to register our scene component with our Game object.

Go to the XNA3DEngine class, and navigate to the Initialize method.

It will look like this:

protected override void Initialize()

{

Scene scene = new Scene(this);

this.Components.Add(scene);

base.Initialize();

}

It’s in the game’s “Components” collection that our gamecomponents reside.

OK, hit F5 now and let’s see the result so far.

Cool, we are actually in a 3d scene now. Hit alt+F4 to close the game window.

First thing we’ll need to do now is to make it possible to move around in our world.

In the drawing code above, we excluded the view matrix.

The view matrix is the one that changes how we view the model

To encapsulate the work we have to do in constructing the view matrix, we need a camera class…but we also need a Hero class to hold positional information.

But which of these classes should we start building now?

Does our hero tell the camera where he is, or is it the camera that tells him where he should be?

You guessed correctly; let’s introduce… our Hero game component.

Our hero needs to move or rotate, based on the user input.

The movement and rotation is based on the position/direction he is facing, so the Hero class must contain his position and rotation in radians.

Here’s the class:

using Microsoft.Xna.Framework;

using Microsoft.Xna.Framework.Input;

namespace XNA3DEngine

{ /// <summary>

/// This is a game component that implements IUpdateable.

/// </summary>

public class Hero : GameComponent

{

private Vector3 position;

public Vector3 Position

{

get { return position; }

}

private float rotation;

public float Rotation

{

get { return rotation; }

}

public Hero(Game game)

: base(game)

{

this.position = new Vector3(0, 80, 0);

this.rotation = 0f;

}

/// <summary>

/// Allows the game component to perform any initialization it needs to before starting

/// to run. This is where it can query for any required services and load content.

/// </summary>

public override void Initialize()

{

base.Initialize();

}

/// <summary>

/// Allows the game component to update itself.

/// </summary>

/// <param name="gameTime">Provides a snapshot of timing values.</param>

public override void Update(GameTime gameTime)

{

KeyboardState state = Keyboard.GetState();

if (state.IsKeyDown(Keys.Up))

{

move(new Vector3(0, 0, -10));

}

else if (state.IsKeyDown(Keys.Down))

{

move(new Vector3(0, 0, 10));

}

if (state.IsKeyDown(Keys.Right))

{

rotate(-0.01f);

}

else if (state.IsKeyDown(Keys.Left))

{

rotate(0.01f);

}

base.Update(gameTime);

}

private void move(Vector3 translation)

{

// Extract the rotation matrix that reflects the direction we are facing.

Matrix forwardMovement = Matrix.CreateRotationY(Rotation);

// Then reposition ourselves according to the direction we are facing.

position += Vector3.Transform(translation, forwardMovement);

}

private void rotate(float rotationSpeed)

{

rotation += rotationSpeed;

}

This is pretty straightforward. The movement is done by first extracting the rotation matrix from the “rotation” member and then move in the direction specified by the translation vector.

The rotation is in radians, and you add it to turn left, and subtract from it to turn right.

To register our game component, go back to our game class and add this before our scene initialization:

Hero hero = new Hero(this);

this.Components.Add(hero);

This is it. In the next part of the tutorial we’ll add a camera to our game and I’ll explain how the camera and our hero interact with our game world.

Until next time, take care!

Code - XNA 3D-Engine Part 2

XNA 3D Engine - Introduction (Part 1)

raymond — Fri, 15 Feb 2008 01:38:00 GMT

This is the first part in a series of many, in which we'll explain how to make a 3D engine in XNA from the ground up.

We expect the reader to have some knowledge in C# and linear algebra.

Here’s what you need to be able to create games built in XNA:

Any copy of Visual Studio 2005 or Visual C# 2005 Express
Microsoft XNA Game Studio 2.0
Graphics card that supports DirectX 9.0c and Shader Model 1.1 (some ”starter kits” need Shader Model 2.0)

Let's start by opening Visual Studio 2005 and create a new project.

Go to “Visual C#” and “XNA Game Studio 2.0”, then select ”Windows Game (2.0)” and call the project ”XNA3DEngine”. Click “Ok”.

The first thing we’d like to do is to rename our “Game1” class to “XNA3DEngine”. You can do that from the solution explorer by right clicking on the file, and then choose “Rename”.

Next, delete the SpriteBatch field and the instantiation in “LoadContent()”.

This is code that is generated for us but we don’t need it now.

You can now test build your application by hitting F5.

You’ll se a nice cornflower blue screen, isn’t that nice!

The code that does this is in a method in our game class called Draw(GameTime gameTime).

The draw method is where all the graphics operations are taking place, and later we’ll create DrawableGameComponents that has the exactly same method.

Exit by hitting Alt+F4 and you’ll bounce back to the code.

We can see in solution explorer that a Content folder has been made for us.

Let’s put our content there

Follow the link at the bottom of this tutorial to download the content

Unzip it to whatever folder you like, then right click on “Content”, choose “Add” and “Existing Item”. Choose the files you downloaded and then hit the arrow button next to the “Add” button. Then click “Add As Link”.

Right click on the CastleSiege.x file and verify that Build action is set to compile:

Now that we have added our content we need to display it.

XNA does this amazingly easy as you are about to see.

Right click on the project in the solution explorer and click “Add”->”New Item…”

Choose the GameComponent template, and call it “Scene.cs”. Click OK.

This just creates a normal game component without our Draw method.

Lets change the class definition with this:

public class Scene : DrawableGameComponent

Click “Class Diagram” in the Solution explorer. Right click our “Scene” class there, choose Intellisense->Override members.

Expand the GameComponent class in the listbox, and choose to override the Draw and LoadContent methods and hit “OK”.

Go back to your scene class and you’ll see that the methods you selected to be overridden are implemented.

OK, this is just meant as a teaser for what’s to come here on www.gamecamp.no

In the next part of this tutorial, we’ll look at how easy XNA can display our scene component.

Here's the graphics:

Graphics.zip

Here’s the code so far:

Code - XNA3DEngine.zip

See you next time, take care!

XNA 2.0 - Getting Started

Einar Ingebrigtsen — Tue, 12 Feb 2008 21:01:00 GMT

This tutorial is meant as a starting point for those of you who wants to try out XNA and get started with programming.

What is XNA?
XNA is a set of tools and runtime environment for developing games. The default programming languages supported are Visual Basic.net and C# built on top of the .net framework. It was first announced in march 2004 at the Games Developers Conference in San Jose, California. With XNA you can write games that can target a Windows based PC with DirectX or better and a Xbox 360.

What do I need?
In order for you to get started with XNA you will need a set of tools. This article will only focus on the free tools that Microsoft provides. If you need anything else, please refer to the XNA Creators web-site.

	Microsoft Visual Studio 2005 Express
	Download and Install Visual Studio 2005 Express Learn more about Visual Studio 2005

	Update Visual Studio 2005
	Install Visual Studio 2005 Express Editions Service Pack 1. Select VS80sp1-KB926749-X86-INTL.exe download option at the bottom.

	Install XNA Game Studio 2.0
	Download and install XNA Game Studio 2.0

	Start using XNA Game Studio 2.0
	Start XNA Game Studio 2.0 by clicking on your Start Menu, then on Microsoft XNA Game Studio 2.0, then either Microsoft Visual C# 2005 Express Edition or Microsoft Visual Studio 2005. You’re ready to start making games.

If you're interested in connecting your Xbox 360 up and start developing games for it, please read the following article at Microsoft.

Creating a simple XNA Camera class

Einar Ingebrigtsen — Tue, 29 Jan 2008 18:18:00 GMT

Libraries such as XNA, DirectX or OpenGL provides a set of facilities for rendering different types such as polygons and objects, but they normally do not include things you are used to in a 3D game engine. The facilities missing is normally something you put together yourself, often using built math facilities in the target library and platform.

This tutorial is meant to be very simplistic and will only show the basics of how you can build a reusable camera class for your own projects.

A camera is defined as a point in 3D space the camera is located and another point in which the camera is pointing towards, in addition the camera has a vector indicating what is up in the world. With these 3 variables we can manipulate the camera as we want to. By using these variables (and a couple of others) we can calculate the matrices needed to translate the 3D world onto the screen. We need 2 matrices; a view matrix that will rotate the world according to the camera in 3D and then we need a projection matrix that will translate the 3D data to the 2D screen.

In XNA we have a lot of math methods to help us achieve this very easy :

First we need to calculate the aspect ratio of the 2D screen, we will need this to create our projection matrix.

this._aspectRatio = ((float)viewport.Width) / ((float)viewport.Height);

We take the viewports width and divide it by the height of the viewport, e.g. 640 / 480 = 1.33333...
Then we can calculate the projection matrix by using a static method on the Matrix class :

this._projectionMatrix = Matrix.CreatePerspectiveFieldOfView(
                            MathHelper.ToRadians(40.0f),
                            this._aspectRatio,
                            1.0f,
                            10000.0f);

The first argument is the field of view in radians. By using the MathHelper.ToRadians() method we can convert from angles to radians. In our example we create a field of view of 40 degrees. Then we pass in the aspect ratio we calculated. The last two arguments represents the near clipping distance and the far clipping distance. These arguments are the distance from the camera when objects/polygons are clipped. The projection matrix will most likely not change, unless you rescale the viewport or want to change the field of view or the clipping distances, so it is sufficient to do this during construction of the camera.

We now have the projection matrix, we only need the view matrix in order to complete our camera.

this._viewMatrix = 
    Matrix.CreateLookAt(this._position, this._lookAt, Vector3.Up);

The Matrix class provides a static method called CreateLookAt(), this method takes in the position of the camera the location where the camera is looking at and a up vector which we get from the Vector3 class since we are pretty much going for default stuff. This matrix creation should be called every time you render your scene, in case the camera has changed.

All the code above assumes you have a set of properties and fields setup in your class, the entire class will look something like this :

public class Camera
{
    private Vector3 _position;
    private Vector3 _lookAt;
    private Matrix _viewMatrix;
    private Matrix _projectionMatrix;
    private float _aspectRatio;

    public Camera(Viewport viewport)
    {
        this._aspectRatio = ((float)viewport.Width) / ((float)viewport.Height);
        this._projectionMatrix = Matrix.CreatePerspectiveFieldOfView(
                                    MathHelper.ToRadians(40.0f),
                                    this._aspectRatio,
                                    1.0f,
                                    10000.0f);
    }

    public Vector3 Position
    {
        get { return this._position; }
        set { this._position = value; }
    }
    public Vector3 LookAt
    {
        get { return this._lookAt; }
        set { this._lookAt = value; }
    }
    public Matrix ViewMatrix
    {
        get { return this._viewMatrix; }
    }
    public Matrix ProjectionMatrix
    {
        get { return this._projectionMatrix; }
    }
    public void Update()
    {
        this._viewMatrix = 
            Matrix.CreateLookAt(this._position, this._lookAt, Vector3.Up);
    }
}

During construction of your game you initialize your camera :

this._camera = new Camera(graphics.GraphicsDevice.Viewport);
this._camera.LookAt = new Vector3(0.0f, 0.0f, -1.0f);

In your Draw method you do something like this :

this._camera.Update();

...

When drawing your object(s), walk through the "effects" in the mesh and set the following :

effect.View = this._camera.ViewMatrix;
effect.Projection = this._camera.ProjectionMatrix;

Then you are good to go with a camera class that is easier to manipulate and have a more better feel to it than using the Matrix, MathHelper and Vector classes directly to achieve the same result. In addition you get an abstraction on top of XNA that will enable you in some ways to be able to create games that aren't aware of the platform they are running on.

XNA Shader Programmering, Tutorial 2

digitalerr0r — Sun, 16 Dec 2007 19:57:00 GMT

XNA Shader Programmering

Tutorial 2 av Petri T. Wilhelmsen aka. digitalerr0r
www.gamecamp.no

I forrige artikkel snakket vi litt om hvordan en kunne implementere shadere i XNA, og touchet såvidt borti shader programmering. I dag skal jeg gå gjennom en annen lys algoritme, som bygger på Ambient Litghting som vi sist gikk gjennom.

Jeg skal ikke fokusere på hvordan en skal hente og bruke shadere via XNA nå, så om du ikke kan dette, ta en titt på XNA Shader Programming - Tutorial 1 før du går videre med denne.

Ambient lighting er ikke akuratt eye-candy, og objektene ser heller ikke veldig 3D ut. Men, det er en viktig del i mange sammenhenger, og kan se pent ut da en blander det med noe annet. Derfor skal vi her se på Diffuse Lighting, som kan gjøre scenene dine mye mer pene og dynamiske!

Føt vi starter:

For å forstå denne tutorialen her burde du ha noe kjennskap til regning med vektorer og matriser, og vært igjennom Tutorial 1 av denne serien.

Kildekode: de_ShaderTutorial_2.zip

Diffuse Lighting

Vi skal nå se på noe som heter Diffuse Lighting! Algoritmen bygger på ambient lighting algoritmen fra Tutorial 1:

I = Aintensity * Acolor

Som vi ser, så er dette et lys som ikke har noen retning, den bare er der og gir et "lys grunnlag" til alle objekter. Diffuse lighting er vel en av de enkleste lys-algortimene som støtter at lyset har en retning.

Diffuse lighting algoritmen er litt tyngre, sett fra et matematiskt perspektiv, enn ambient lighting, men det er ikke noe å være redd for. Dette er egentlig veldig lett! Selv om jeg ikke er en matte-lærer av noe slag, skal jeg gjøre mitt beste på å forklare alt som står bak denne algoritmen vi nå skal se på.

For å kalkulere diffuse lighting, må vi bruke to vektorer, en vektor N som er normalen til en flate, og en vektor L som er retningen på lyset. Disse to vektorene bestemmer hvor "mye" lys flaten skal reflektere. Er L paralell med N, vil den reflektere mest, og er L paralell med flaten, vil den reflektere minst. Vi kan si at vinkelen mellom L og N er med på å bestemme hvor mye flaten skal reflektere lys!

For å beregne dette kan vi bruke en lov fra vektorverdenen som heter Dot-produktet, eller skalar produktet. Denne regelen blir brukt til å bl.a finne vinkelen mellom to vektorer, og kan defineres slik: Gitt to vektorer N og L har vi

N.L = |N| x |L| x cos(a) der |N| er lengden av vektor N, |L| er lengden av vektor L og cos(a) er vinkelen mellom vektorene.

Dette kan vi bruke i formelen vår. Men vi skal også bruke to hjelpevariabler: Dintensity og Dcolor. Dintesity skal bestemme hvor kraftig Diffuse Lightingen skal være, og Dcolor bestemmer fargen på lyset.

Da har vi gått igjennom de forskjellie komponentene ved Diffuse Lighting, og kan dermed se på hele formelen.

Diffuse Lighting algoritmen:

I = Aintensity x Acolor + Dintensity x Dcolor x N.L

Vi ser at vi fortsatt har tatt vare på Ambient Lighting formelen. Dette er fordi vi fortsatt vil at et basislys i bunn av alt, slik at alle delene av en modell kan i hvertfall ha litt lys. Så plusser vi på intensitiviteten, fargen og Dot-produktet mellom N og L for å beregne Diffuse Lighting.

Implementere shaderen

Da er det på tide å programmere selve shaderen, og få noen resultater ut på skjermen!

Denne tutorialen baserer seg på Tutorial 1, så du kan gjerne åpne solution filen for forrige tutorial, og bygge den videre slik at den støtter Diffuse Lighting! Hvis ikke, må du lage et nytt prosjekt og skrive koden for å initialisere og hente inn shaderen vi nå skal lage.

Vi starter med å definere noen globale variabler, som skal bli satt til shaderen gjennom applikasjonen:

float4x4    matWorldViewProj;
float4x4    matInverseWorld;
float4      vLightDirection;

Her har vi et par nye variabler: matInverseWorld og vLightDirection. matInverseWorld blir beregnet i applikasjonen ved å invertere matrisen til World matrisen, og brukes til å regne ut en korrekt normal. vLightDirection blir brukt til å sette retningen på lyset vårt!

OUT er en struktur som vår Vertex shader skal returnere. Denne inneholder fortsatt posisjonen på vertexen, men i tillegg vil vi ha ut retningen på lyset L, og normalen til vertexen N. Disse blir definert som TEXCOORD0 og TEXCOORD1, som sier i hvilket register på skjermkortet vi vil lagre denne informasjonen.TEXCOORDn blir ofte brukt til å lagre litt ymse data, der n er større eller lik 0, og mindre eller lik antallet støttet av skjermkortet du programmerer mot( som oftest et sted mellom 0 og 8 ).

struct OUT 
{ 
    float4 Pos: POSITION; 
    float3 L:    TEXCOORD0; 
    float3 N:    TEXCOORD1; 
};

Så definerer vi selve funkjsonen for Vertex Shaderen, og som vi ser, skal den returnere OUT. Vertex shaderen tar inn to parametere som er posisjonen på- og normalen N til vertexen som passerer gjennom shaderen:

OUT VertexShader( float4 Pos: POSITION, float3 N: NORMAL ) 
{ 
    OUT Out = (OUT) 0; 
    Out.Pos = mul(Pos, matWorldViewProj); 
    Out.L = normalize(vLightDirection); 
    Out.N = normalize(mul(matInverseWorld, N)); 
    return Out; 
}

La oss dele opp koden over i små biter:

"Out.Pos = mul(Pos, matWorldViewProj);" transformerer vertexposisjonen med matWorldViewProj, slik at den havner rett sted på skjermen.
"Out.L = normalize(vLightDirection);" normaliserer vektoren vLightDirection.
"Out.N = normalize(mul(matInverseWorld, N));" multipliserer matrisen matInverseWorld med vektoren N, og normaliserer resultatet.

normalize(x) er en funksjon definert av HLSL, der normalize returnerer en normalisert versjon av vektoren x.

PixelShader skal også denne gangen bare returnere fargen på pixelen som passerer gjennom shaderen, men tar nå inn to nye verdier: L og N. L er da retningen på lyset til den gjeldende pixelen, beregnet av VertexShader, og N er normalen til Pixelen, som også beregnes av VertexShader.

Vi starter med å regne ut Ambient Lighting, så Diffuse Lighting:

float4 PixelShader(float3 L: TEXCOORD0, float3 N: TEXCOORD1) : COLOR 
{

    // ambient lighting
    float Ai = 0.8f; 
    float4 Ac = float4(0.075, 0.075, 0.2, 1.0); 
   
    // diffuse lighting    
    float Di = 1.0f; 
    float4 Dc = float4(1.0, 1.0, 1.0, 1.0); 
    return Ai * Ac + Di * Dc * saturate(dot(L, N)); 
}

Her ser vi noe nytt: saturate(dot(L, N))

saturate(x) er en funksjon definert av HLSL språket, der x kan være et skalar, en vektor eller en matrise. Funksjonen "klemmer" verdien x til å befinne seg i et område mellom 0 og 1.

Dette betyr at vi her bergener Dot-produktet til L og N, også endre resultatet slik at det havner på en skala mellom 0 og 1 ved å passere resultatet inni saturate funksjonen.

"return Ai * Ac + Di * Dc * saturate(dot(L, N));" bør nå ikke se helt ukjent ut?

I = Aintensity x Acolor + Dintensity x Dcolor x N.L

Til slutt definerer vi teknikken DiffuseLight, med et pass P0. Denne kan vi da kalle fra koden for å bruke den shaderen vi nå har laget :)

technique DiffuseLight 
{ 
    pass P0 
    { 
        VertexShader = compile vs_1_1 VertexShader(); 
        PixelShader = compile ps_1_1 PixelShader(); 
    } 
}

Hele koden for shaderen skal nå se slik ut:

float4x4    matWorldViewProj;
float4x4    matInverseWorld;
float4      vLightDirection;

struct OUT
{
    float4 Pos: POSITION;
    float3 L:    TEXCOORD0;
    float3 N:    TEXCOORD1;
};

OUT VertexShader( float4 Pos: POSITION, float3 N: NORMAL )
{
    OUT Out = (OUT) 0;
    Out.Pos = mul(Pos, matWorldViewProj);
    
    Out.L = normalize(vLightDirection);
    Out.N = normalize(mul(matInverseWorld, N));
    
    return Out;
}

float4 PixelShader(float3 L: TEXCOORD0, float3 N: TEXCOORD1) : COLOR
{
    float Ai = 0.8f;
    float4 Ac = float4(0.075, 0.075, 0.2, 1.0);
    float Di = 1.0f;
    float4 Dc = float4(1.0, 1.0, 1.0, 1.0);
    
    return Ai * Ac + Di * Dc * saturate(dot(L, N));
}

technique DiffuseLight
{
    pass P0
    {
        VertexShader = compile vs_1_1 VertexShader();
        PixelShader = compile ps_1_1 PixelShader();
    }
}

Bruke shaderen i applikasjonen vår

Da shaderen er ferdig, er vi klare til å bruke denne i applikasjonene/spillene vi lager. Jeg skal ikke gå gjennom hele prosessen her, fordi dette ble gjort i XNA Shader Programmering - Tutorial 1, men jeg skal gå gjennom det som er forskjellig fra Tutorial 1.

Det nye her, er egentlig bare det som ligger i Render funksjonen vår. Vi må jo sette teknikken vår effekt skal bruke:

effect.CurrentTechnique = effect.Techniques["DiffuseLight"];

Der DiffuseLight er navnet på teknikken vi lagde.

Neste steg er å sende inn de forskjellige parameterverdiene som shaderen krever for å fungere:

worldMatrix = bones[mesh.ParentBone.Index] * renderMatrix;

Matrix worldInverse = Matrix.Invert(worldMatrix);
Vector4 vLightDirection = new Vector4(0.0f, 0.0f, 1.0f, 1.0f);
effect.Parameters["matWorldViewProj"].SetValue(worldMatrix * viewMatrix * projMatrix);
effect.Parameters["matInverseWorld"].SetValue(worldInverse);
effect.Parameters["vLightDirection"].SetValue(vLightDirection);

worldInverse blir beregnet av en funksjon Invert som finnes i Matrix klassen. Denne funksjonen brukes til å invertere en matrise. Vi ser her at worldInverse er det samme som den inverse av worldMatrix. Vi sender så worldInverse til matInverseWorld i shaderen.

Så definerer vi en vektor som skal fortelle shaderen hvilke retning lyset har( husker du vektoren L som vi bruker i vertex shaderen? Dette er denne).

Dette er det som er nytt i Render funksjonen. Kjører du applikasjonen nå, vil du se det samme objektet som i Tutorial 1, men med en litt penere lys-setting! Nå ser det faktisk 3D ut, eller hva? ;)

Oppgaver
1. Lek deg gjerne med de forskjellige verdiene i shaderen, slik at du forstår hvilken innvirkning de forskjellige komponenetene har for lys-settingen!
2. Gjør det mulig å sette Diffuse fargen via en parameter til shaderen( som en global variabel ).
3. Lag to effekter i shaderen, en som bare er Ambient Lighting( se tutorial 1 ) og en som er Diffuse Lighting, slik at du selv kan velge hvilken lys-algoritme du vil bruke da du tegner objekter.

Da er vi ferdige med Tutorial 2!

Som vi ser er det ikke veldig avansert å lage lys som ser ganske bra ut, eller hva?
Nestegang skal jeg ta for meg Specular Lighting, som igjen bygger på Diffuse Lighting algoritmen vi har skrevet idag!

Spørsmål? ta kontakt via petriw@gmail.com eller via forumet på www.gamecamp.no

XNA Shader Programmering, Tutorial 1

digitalerr0r — Fri, 07 Dec 2007 11:01:00 GMT

XNA Shader Programmering

Tutorial 1 av Petri T. Wilhelmsen aka. digitalerr0r
www.gamecamp.no

Velkommen til XNA Shader Programming tutorial serien! Mitt navn er Petri Wilhelmsen og jeg er et medlem av gruppen Dark Codex, som bl.a deltar på The Gathering konkuransene. Dette er min første tutorial, så feedback hadde vært veldig bra!

Denne tutorial serien vil ta deg med i gjennom mange temaer innenfor shadere, samt hvordan en kan bruke dem til å lage kul grafikk og funksjonalitet ved hjelp av GPUen din. Vi starter med noe teori (ja, jeg veit det er kjedelig, men jeg skal prøve å være rask ), og går deretter over til praktisk shader programmering hvor jeg vil introdusere bl.a. noen lys algoritmer, normal mapping, parallax mapping og mye annet.
Den første delen av tutorial serien vil ta for seg teori biten, en shader som transformerer et objekt og en en algoritme for Ambient lighting. Deretter vil jeg ta for meg mer avanserte shadere.
Teori-delen er ikke veldig detaljert, men er skrevet for at du skal få deg en kort og enkel oversikt over de viktige emnene ved shader programmering. Jeg vil forklare emner nærmere da vi faktisk får bruk for dem, så fortvil ikke om du ikke helt henger med gjennom teorien!

Den pratiske delen går steg for steg i gjennom hvordan du skal lage et prosjekt, kode shaderen, implementere og bruke den i XNA. Dette er på ingen måte den beste metoden for å gjøre dette på, men skal være forholdsvis lett å følge.

Forkunnskaper: Noe programmering i XNA, slik at du forstår hvordan du kan rendre ut et 3D objekt, og sette opp view og projection matriser, samt utføre regne-operasjoner med matriser. Jeg forklarer litt om dette i denne tutorialen, men ikke nok til at dere som ikke har vært borti dette før, kan forstå hva som skjer.

Kildekoden til tutorial 1 kan du finne her: Tutorial1, Kildekode

En historie om Shaders

Før DirectX8 kom hadde GPU programmererne en fast måte å transformere pixels og vertexes på, noe som heter ”Fixed pipeline”. Dette gjorde at utviklerene ikke hadde noen mulighet for å endre hvordan disse skulle bli tranformert på, noe som gjorde at grafikken på f.eks DirectX 7.0 spillene kunne bli ganske like hverandre. DirectX 8.0 introduserte Vertex og Pixel shadere, som var en metode utviklere kunne bruke for å selv bestemme og endre hvordan vertex og pixels skulle bli tranformert, noe som ga utrolig mye fleksibilitet.

Utviklerene brukte da et assembly liknende språk for å skrive shadere, noe som var vanskelig og tungvindt, og det var kun støtte for Shader Model 1.0. Dette ble forbedret da DirectX 9.0 kom, hvor vi ble introdusert til High Level Shader Language (HLSL), som erstattet assembly-programmeringen med noe som liknet mer på C-programmering. Dette gjorde shadere mye enklere å lage, lese og lære.

Nå nylig ble DirectX 10.0 sluppet ut, som støtter Shader Model 4.0, samt introduserer en ny shader: Geometry Shader. Ulempen er at DirectX 10.0 krever et ganske nytt skjermkort, og fungerer kun i Windows Vista.

XNA støtter kun Shader Model 1.0 – 3.0, men fungerer da på Windows XP, Vista og Xbox 360!

Ok, hva er shaders?

Etter å ha pratet litt rundt historien om shaders, er det kanskje på tide å fortelle litt om hva shadere egentlig er? Som nevnt kan du bruke shaders til å endre måten vertexer og pixler blir tranformert og prosessert på. Vertex shaders tranformerer vertexer, og pixel shaders transformerer pixler. I figuren under ser vi hvordan et program, vertex shader og en pixel shader jobber sammen for å produsere et bilde i frame bufferen( som da tilslutt skal vises på skjermen ).

En ting som er viktig å huske på er at mange skjermkort ikke støtter de nyeste funksjonene i en shader. Dette bør en da ta hensyn til da en utvikler shadere, slik at en kan lage alternative metoder for eldre skjermkort, og la de nye bruke andre metoder.

Vertex Shaders
Vertex shader brukes da til å manipulere vertex-data, per vertex. Dette kan f.eks være en shader som skal gjøre objekter “fetere” under rendering, ved å flytte vertexene fra sin orginale posisjon til en ny posisjon langs vertexen sin normal, noe som gjøres for hver vertex på de objektene som blir tegned ved bruk av shaderen.

Vertex shaderen tar input fra en vertex struktur definert i f.eks koden, og loader dette da inn I shaderen fra vertex bufferen du sender til shadere. Dette kan f.eks være Position, Color, Normal og Tangent. Jeg vil introdusere de forskjellige bitene i en senere tutorial.
Vertex shaderen kan gi output for senere bruk i f.eks pixel shaderen, og fungerer enten ved at du definerer en struktur i shaderen og får vertex shader funksjonen til å returnere denne, eller ved å definere parametere med out syntaksen. Output kan f.eks være Position, Fog, Color og Texture coordinates.

struct VS_OUTPUT
{
    float4 Pos: POSITION;
};

VS_OUTPUT VS( float4 Pos: POSITION )
{
    VS_OUTPUT Out = (VS_OUTPUT) 0;
    ...
    return Out;
}

// eller..

float3 VS(out float2 tex : TEXCOORD0) : POSITION
{
      tex = float2(1.0, 1.0);
      return float3(0.0, 1.0, 0.0);
}

Pixel Shaders
Pixel shaderen manipulerer pixelene til et objekt som blir sendt I gjennom shaderen. Dette kan f.eks være et objekt vi ønsker å beregne en per pixel lys algoritme på. Pixel shaderen henter data fra vertex shaderns output verdier, som position, normals, color og texture coordinates. Input til pixel shaderen kan f.eks være posisjon til pixelen( x,y ), color, texture coordinates osv.

float4 PS(float vPos : VPOS, float2 tex : TEXCOORD0) : COLOR
{
      ...
      return float4(1.0f, 0.3f, 0.7f, 1.0f);
}

Pixel shaders kan bare ha to verdier som output, og det er Color og Depth. Color forteller hvilken farge pixelen har, og depth er en ting vi kommer tilbake til litt senere.

HLSL

High Level Shading Language brukes til å programmere shadere. Ved hjelp av dette språket kan en definere variabler, funksjoner, datatyper, tester( if/else/for/do/while..) og mye annet, samt lage logikk for hvordan pixel og vertex shaderne skal fungere.
Under har vi noen nøkkelord definert av HLSL, dette er selvfølgelig ikke alle men det viktigste er at du er klar over at det finnes mye å velge i. Da jeg introduserer nye datatyper( ol. ) senere I tutorialen, vil jeg forklare disse grundig!

Eksempler på lovlige datatyper i HSLS
bool true eller false
int 32-bit heltall
half 16bit heltall
float 32bit desimaltall
double 64bit desimaltall

Eksempler på lovlige vektorer i HSLS
float3 vektorTest
float vektorTest[3]
vector vektorTest
float2 vektorTest
bool3 vectorTest

Eksempler på lovlige matriser i HSLS
float3x3 en 3x3 matrise av type float
float2x2 en 2x2 matrise av type float

Vi har også en rekke med funksjoner som kan brukes I HLSL til bl.a regne operasjoner.

cos( x ) Returnerer cosnius til x
sin( x) Returnerer sinus til x
cross( a, b ) Returnerer kryssproduktet av to vektor a og b
dot( a,b ) Returnerer dotproduktet av to vektorer a og b
normalize( v ) Returnerer en normalisert vektor av v ( v / lengden av v )

For en komplett liste, gå til http://msdn2.microsoft.com/en-us/library/bb509611.aspx

HLSL tilbyr en rekke med funkjonaliteter for å gjøre shader utviklingen enklere, og det er nettopp dette vi skal lære oss i denne tutorialen, så mer om dette temaet etter teori delen.

Effect filer

Effect filene ( .fx ) gjør bruken av HLSL enklere, og du kan samle det meste av shaderkoden i en .fx fil! Filen inneholder f.eks globale variabler, funksjoner, strukturer ( f.eks Out ), Vertex shaderen, Pixel shaderen, en eller flere teknikker med en eller flere pass, shadere, teksturer mm.
Vi har tidligere sett kort på hvordan vi kan definere stukturer, variabler og funksjoner i en shader, og jeg vil nå forklare alt dette med teknikker og pass. En shader kan inneholde en eller flere teknikker. Hver teknikk har et unikt navn, og vi kan fra applikasjonen bestemme hvilken teknikk vi vil bruke ved å sette CurrentTechnique egenskapen til Effect.

effect.CurrentTechnique = effect.Techniques["AmbientLight"];

Her sier vi at effect( som er en ferdig lastet shader ) skal bruke en teknikk med navn AmbientLight. En teknikk kan ha en eller flere pass, og vi må huske å prosessere alle passene til en teknikk om vi vil ha det resultatet vi ønsker.

Dette er et eksempler på en shader som har en teknikk og et pass:

technique Shader
{
    pass P0
    {
        VertexShader = compile vs_1_1 VS();
        PixelShader = compile ps_1_1 PS();
    }
}

Dette er et eksempler på en shader som har en teknikk og to pass:

technique Shader
{
    pass P0
    {
        VertexShader = compile vs_1_1 VS();
        PixelShader = compile ps_1_1 PS();
    }
pass P1
    {
        VertexShader = compile vs_1_1 VS_Other();
        PixelShader = compile ps_1_1 PS_Other();
    }
}

Dette er et eksempler på en shader som har to teknikker:

technique Shader_11
{
    pass P0
    {
        VertexShader = compile vs_1_1 VS();
        PixelShader = compile ps_1_1 PS();
    }
}

technique Shader_2a
{
    pass P0
    {
        VertexShader = compile vs_1_1 VS2();
        PixelShader = compile ps_2_a PS2();
    }
}

Vi ser her at shaderen har to teknikker, den ene bruker f.eks Shader Model 1, mens den andre er for nyere skjemkort med støtte for Pixel Shader 2. Disse to teknikkene kan f.eks gjøre det samme, men ved bruk av forskjellig kode slik at det passer for all hardware!

Vi kan også sende inn teksturer til shadere, noe vi vil komme tilbake til senere!

Implementering av Shadere I XNA

Heldigvis er det veldig enkelt å bruke shaderei XNA. Dette gjøres faktisk med veldig få linjer kode. Under har vi en liten liste vi kan følge for å implementere shadere:
1. Programmer en shader
2. Legg shaderfilen( .fx ) i f.eks “Contents”
3. Lag en instanse av Effect klassen
4. Initier denne instansen
5. Velg hvilken teknikk du vil bruke i shaderen
6. Start shaderen
7. Sett parametere til shaderen
8. Tegn objetet du vil skal bruke shaderen
9. Stopp shaderen

1.For å kode en shader kan vi bruke f.eks notepad, visual studio eller 3. parts programmer. Jeg bruker nVidia FX Composer 2.0 som kan lastes ned gratis: http://developer.nvidia.com/object/fx_composer_home.html

2. Da shaderen er laget, kan du kopiere filen inn i prosjektet, slik at den får et asset name:

3. XNA Framework har en Effect klasse, som kan brukes til å laste inn effekter og kompilere dem. For å lage en instanse av Effekt klassen gjør du slik:

Effect effect;

Effect er en del av “Microsoft.Xna.Framework.Graphics”, så husk å inkludere denne i prosjektet:

using Microsoft.Xna.Framework.Graphics

4. For å initiere shaderen kan vi bruke noe av funksjonaliteten Content gir oss. Vi kan loade shaderen fra prosjektet, eller fra en fil.

effect = Content.Load<Effect>("Shader");

Her er "Shader" asset navnet og effect er en instanse av class Effect.

5. Valg av teknikk er like enkelt som alt annet, bare meld i fra til effect at du vil bruke en teknikk med gitt navn, f.eks AmbientLight.

effect.CurrentTechnique = effect.Techniques["AmbientLight"];

Techniques gir deg tilgang til alle teknikkene i effect, og du kan sende inn en key for å hente ut en spesifikk teknikk. Dette kan gjøres ved at du tester hva slags støtte det er for shadere i GPUen, og bruke resulatet til å velge den rette shaderen for de rette grafikk-kortene.

6. For å starte å bruke en Effect, kaller du bare Begin() funksjonen:

effect.Begin();

7. Mange shadere har parametere, og det finnes forskjellige metoder å hente/sette de på. Vi vil i denne tutorialen kun bruke en enkel måte for å gjøre det litt lettere å følge med. Andre metoder vil bli brukt senere!
Dette er ikke den raskeste måten å sette parametere på, men den fungerer bra:

effect.Parameters["matWorldViewProj"].SetValue(
          worldMatrix * viewMatrix * projMatrix);

"matWorldViewProj" er definert i shaderen: float4x4 matWorldViewProj; og worldMatrix * viewMatrix * projMatrix er en matrise.

SetValue setter en verdi til parameteren og sender den til shaderen, mens GetValue<Type> henter en verdi fra parameteren, der Type er datatypen du vil hente ut. GetValueInt32() henter et heltall fra shaderen.

8. Tegning av objekter kan bli gjort på mange forskjellige måter. I mitt eksempel, tegner jeg ut et 3D objekt hentet fra en .X fil ved å gå gjennom hver mesh og meshpart i .X filen.

9. For å stoppe shaderen, eller effekten, kaller du End() metoden til Effect:

effect.End();

Da er vi i gjennom de forskjellige stegene for å implementere og bruke en shader i XNA, og vi er dermed ferdig med den teoretiske delen av tutorialen! Gratulerer, du har kommet langt.

Ambient Lighting Algoritmen

Alle objekter har som oftest et slags globalt basiskt minimums lys, et slags lys som bare eksisterer i rommet og treffer alle objekter fra alle kanter. Det er dette vi kaller for Ambient Lighting, og skal implementere nå!

Ambient lighting er ikke noe spesielt spennende, men kan være et godt hjelpemiddel for at ikke alle objekter som ikke blir truffet av andre ”lysstråler ”skal være 100% mørke.

Formelen for Ambient lighting er:

I = Aintensity x Acolor ( 1.1)

Der I står for lys intensitiviteten, Aintensity står for intensitiviteten for Ambient lyset, og Acolor står for fargen på Ambient lyset.

Det er relativt enkelt å implementere denne lys algoritmen, og er derfor en god start på tutorialen J.

Dette er hva vi skal lage i dag!

Programmere selve effekten
Det kan være lurt å laste ned sourcekoden, slik at du har tilgang til 3D objektene og en kildekode som fungerer, og har en referanse om du skulle ha problemer med stegne under.
Start med å lage et nytt prosjekt i VS2005 eller VC# Express og velg Windows Game( 2.0 ) templaten under XNA Game Studio

Velg et ordentlig navn på prosjektet, og trykk OK.

Trykk F5 for å se om prosjektet kjører og at alt er greit.

Høyreklikk på Content, eller på den folderen du vil ha effekt filene dine liggende, velg Add->New Item. Da vil et vindu komme fram, der du skal velge ”Effect File”. Gi den navnet Shader.fx .

Da vil Shader.fx komme fram under Contents. Dobbeltklikk på Shader.fx, og et default effekt dokument vil bli åpnet. Slett alt innholdet i denne, slik at vi kan begynne fra blanke ark!

For å lage en shader må vi være klar over hva den skal gjøre. For det første, skal vi ha en Vertex Shader som skal transformere alle vertexene basert på matWorldViewProj ( slik at objektet blir vist der vi vil at den skal bli vist, matWorldViewProj er en variabel som vi setter utenfor shaderen ). Så skal vi ha en pixel shader som vil gi ambient lighting til pixlene i objektet.

Vi starter med å definere en matrise som skal inneholde World*View*Projection matrisene( De som definerer hvor objektet står, hvor du ser og hvordan du ser):

float4x4 matWorldViewProj;

Deretter trenger vi en struktur som definerer hva Vertex shaderen skal returnere av data.

struct OUT
{
    float4 Pos: POSITION;
};

Her ser vi at vi lager en struktur med navnet OUT, som inneholder en variabel av type float4 med navn Pos, der ”:POSITION” forteller noe om hvilket register en vil ha verdien i.

Register? Et ”lager” i skjermkortet som kan inneholde data. Skjermkortet har egne registre for posisjon, normaler, texcoord osv. Dette er noe du ikke trenger å tenke på i første omgang, bare vit at skal du ha posisjonen til et objekt, brus :POSITION.

Da vi har stukturen klar, kan vi begynne å skrive selve Vertex Shader logikken. Her henter vi World/Model view posisjonen til objektet, og transformerer den i forhold til matWorldViewProj.

Vi starter med å lage funksjonen VertexShader( float4 Pos: POSITION ) med returdata OUT, og parameteren Pos.

Deretter definere vi en instanse av OUT med navn Out, og nullstiller det slik at vi ikke har noe random data. Så setter vi Out.Pos til å være lik resultatet av mul(Pos, matWorldViewProj). mul(a,b) multipliserer matrise a med en annen matrise b, og returnerer resultatet. Da vi er ferdig med å behandle/endre den dataen vi vil, kan vi returnere Out objektet for videre behandling i render pipelinen.

OUT VertexShader( float4 Pos: POSITION )
{
    OUT Out = (OUT) 0;
    Out.Pos = mul(Pos, matWorldViewProj);
    return Out;
}

Deretter lager vi logikken for Pixel shaderen. Vi starter med å lage funkjsonen PixelShader() : COLOR med returtype float4. ”: COLOR” gjør så vi behandler returdata fra denne funksjonen som en COLOR verdi.

float4 PixelShader() : COLOR
{
    float Ai = 0.8f;
    float4 Ac = float4(0.075, 0.075, 0.2, 1.0);
    
    return Ai * Ac;
}

Innholdet til pixelshaderen er ganske rett fram, vi definerer intensitiviteten til A i float Ai = 0.8f; og fargen til A i Ac = float4(0.075, 0.075, 0.2, 1.0);. Ac tilsvarer en ganske mørk lilla farge. Da variabelene er definert, returnerer vi Ai * Ac slik at vi får den fargen og intensitiviteten på ambient lyset vi vil ha. Legg merke til at vi returnerer en verdi som følger formelen for Ambient Lighting( 1.1 ). Ai brukes til å velge ”styrken” på fargen, mens Ac bestemmer hvilken farge objektet skal få.

Fordi vi lager en effektfil, må vi ha en teknikk med minst et pass. Denne kodebiten gjør ikke mye annet enn å definere en teknikk med navnet AmbientLight, som inneholder et pass P0. Deretter setter vi at denne effektfilens VertexShader ligger i funksjonen VertexShader(), og PixelShaderen ligger i PixelShader(). compile vs_1_1 og compile ps_1_1 kompilerer koden i shaderen med støtte for vertex shader 1.1 og pixel shader 1.1.

technique AmbientLight
{
    pass P0
    {
        VertexShader = compile vs_1_1 VertexShader();
        PixelShader = compile ps_1_1 PixelShader();
    }
}

Da har vi endelig fått skrevet shaderen vår, og mangler da bare å implementere denne til XNA og bruke den! Jeg kommer ikke til å forklare hvordan matriser og hvordan tegning av et 3D objekt fungerer i detalj, så hvis du ikke forstår hva som står her, burde du lese litt om dette.

Dobbeltklikk på Game1.cs og lag en instanse av Effect med navn effect.
Skriv dette der du definerer dine variabler for klassen:

Effect effect;

Vi trenger også noen hjelpevariabler slik at vi kan sette opp en view, world og projection matrise:

Skriv inn dette over Effect effect; :

float width, height;
float x = 0, y = 0;
float zHeight = 15.0f;
float moveObject = 0;

Så kan vi definere matrisene våre:

Matrix renderMatrix, objectMatrix, worldMatrix, viewMatrix, projMatrix;
Matrix[] bones;

Og 3D objektet vårt:

Model m_Model;

Koden skal så langt se slik ut:

float width, height;
float x = 0, y = 0;
float zHeight = 15.0f;
float moveObject = 0;

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

// 3D Object
Model m_Model;

Effect effect;

// Matrices
Matrix renderMatrix, objectMatrix, worldMatrix, viewMatrix, projMatrix;
Matrix[] bones;

Så må vi nullstille modell objektet vårt i konstruktoren.
Legg til m_Model = null; i konstruktoren:

public Game1()
{
    graphics = new GraphicsDeviceManager(this);
    Content.RootDirectory = "Content";
    m_Model = null;
}

Så går vi videre til Initialize funksjonen, hvor vi først henter dimensjonen/oppløsningen på vinduet vårt, nullstiller worldMatrix, og setter en projection. Vi henter også effekt filen vår, ”Shader”, fra Content og legger den i effect slik:

effect = Content.Load<Effect>("Shader");

Koden for Initialize ser slik ut:

protected override void Initialize()
{
      width = graphics.GraphicsDevice.Viewport.Width;
      height = graphics.GraphicsDevice.Viewport.Height;

      // Set worldMatrix to Identity
      worldMatrix = Matrix.Identity;
            
      float aspectRatio = (float)width / (float)height;
      float FieldOfView = (float)Math.PI / 2,
                NearPlane = 1.0f, 
                FarPlane = 1000.0f;
                projMatrix = Matrix.CreatePerspectiveFieldOfView( 
                       FieldOfView, aspectRatio, NearPlane, FarPlane );

      // Load and compile our Shader into our Effect instance.
      effect = Content.Load<Effect>("Shader");

      // Vertex declaration for rendering our 3D model.
      graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(
                           graphics.GraphicsDevice,  
                           VertexPositionNormalTexture.VertexElements);


      base.Initialize();
}

Det viktigste her er VertexDeclaration.og Content.Load<Effect>("Shader"); Det er her vi bestemmer hvilke data som skal bli sendt til Vertex Shaderen! Vi ser her at vi skal sende inn Vertex, Position, Normal og Texture til shaderen, noe vi henter fra 3D objekt filen.

Da vi har fått hentet inn shaderen vår, og satt opp matrisene, kan vi gå videre til LoadContent() funksjonen. Her loader vi 3D modellen, og setter opp diverse data for 3D modellen vår.

Koden ser slik ut:

protected override void LoadContent()
{
      spriteBatch = new SpriteBatch(GraphicsDevice);

      // Load our 3D model and transform bones.
      m_Model = Content.Load<Model>("dclogo__");
      bones = new Matrix[this.m_Model.Bones.Count];
      this.m_Model.CopyAbsoluteBoneTransformsTo(bones);
}

Update inneholder bare kode for å kalkulere og oppdatere viewMatrix, renderMatrix og objectMatrix( for å rotere objektet vårt) .
Koden ser slik ut:

protected override void Update(GameTime gameTime)
{
      zHeight = 80;

      float m = (float)gameTime.ElapsedGameTime.Milliseconds/1000;
      moveObject += m;

      // Move our object by doing some simple matrix calculations.
      objectMatrix = Matrix.CreateRotationX( moveObject / 2 )
                     * Matrix.CreateRotationZ(-moveObject / 4 );
           
      renderMatrix = Matrix.CreateScale( 0.5f );
      viewMatrix   = Matrix.CreateLookAt( 
          new Vector3(x, y, zHeight), Vector3.Zero, Vector3.Up );

      renderMatrix = objectMatrix * renderMatrix;

      base.Update(gameTime);
}

Da er vi kommet til siste steg i denne tutorialen, og det er Draw(..) funksjonen! Her skjer det mye i Shader verdenen.

Koden for Draw() ser slik ut:

protected override void Draw(GameTime gameTime)
{
      graphics.GraphicsDevice.Clear(Color.Black);


      effect.CurrentTechnique = effect.Techniques["AmbientLight"];

      // Begin our effect
      effect.Begin();

      foreach (EffectPass pass in effect.CurrentTechnique.Passes)
      {
          // Begin current pass
            pass.Begin();

            foreach (ModelMesh mesh in m_Model.Meshes)
            {
                foreach (ModelMeshPart part in mesh.MeshParts)
                  {
                        worldMatrix = 
                             bones[mesh.ParentBone.Index]*renderMatrix;

                        effect.Parameters["matWorldViewProj"].SetValue( 
                                   worldMatrix * viewMatrix * projMatrix);

                        // Render our meshpart
                        graphics.GraphicsDevice.Vertices[0].SetSource(
                                                     mesh.VertexBuffer,
                                                     part.StreamOffset,
                                                     part.VertexStride);

                        graphics.GraphicsDevice.Indices = mesh.IndexBuffer;

                        graphics.GraphicsDevice.DrawIndexedPrimitives(
                                             PrimitiveType.TriangleList,
                                             part.BaseVertex, 0,
                                             part.NumVertices,
                                             part.StartIndex,
                                             part.PrimitiveCount);
                }
           }

           // Stop current pass
           pass.End();
      }
      // Stop using this effect
      effect.End();

      base.Draw(gameTime);
}

Vi starter med å velge hvilken teknikk vi vil bruke, og da skal vi så klart bruke teknikken vi definerte i starten av denne delen, AmbientLight.

Deretter kaller vi effect.Begin() slik at vi begynner å bruke shaderen vår.

Så går vi i gjennom alle passene som er definert i AmbientLight teknikken( som her bare er en ). Da vi er i et pass, kan vi tegne det vi vil. Vi starter med å gå i gjennom alle delene av et 3D objekt og setter opp matrisene for den. Da matrisene er klare, kan vi sende den til shaderen, slik at objektet vil få riktig posisjon:

effect.Parameters["matWorldViewProj"].SetValue(
                worldMatrix * viewMatrix * projMatrix);

Her setter vi da matrisen matWorldViewProj i shaderen, til å være worldMatrix * viewMatrix * projMatrix.

Da alle parameterene våre, her bare en, er satt, kan vi tegne ut selve 3D objektet!
Denne lille kodebiten er ikke så farlig som den ser ut til å være:

graphics.GraphicsDevice.Vertices[0].SetSource(mesh.VertexBuffer,
                          part.StreamOffset, part.VertexStride);

graphics.GraphicsDevice.Indices = mesh.IndexBuffer;

SetSource(..) er en funksjon som brukes til å sette kilden der vi skal hente vertex streamen fra! Funksjonen er definert slik:

public void SetSource (
            VertexBuffer vb,
            int offsetInBytes,
            int vertexStride )

Der vb er vertex buffer kilden, offsetInBytes er hvor fra vi vil starte streamen, og vertexStride er størrelsen på elementene i vertex bufferen.

Alt den gjør er da å hente ut vertex bufferen og index bufferen til det gjeldende 3D objekt delen, for så å bruke dem til å skrive ut alle vertexene:

graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList,
                                              part.BaseVertex, 0, 
                                              part.NumVertices,
                                              part.StartIndex, 
                                              part.PrimitiveCount);

DrawIndexedPrimitives(..) har mange parametere, men er ganske mye enklere enn den ser ut til å være:

public void DrawIndexedPrimitives (
                       PrimitiveType primitiveType,
                       int baseVertex,
                       int minVertexIndex,
                       int numVertices,
                       int startIndex,
                       int primitiveCount)

Parameterene til denne funksjonen kan du lese mer om her:
http://msdn2.microsoft.com/en-us/library/microsoft.xna.framework.graphics.graphicsdevice.drawindexedprimitives.aspx

Vi spesifiserer at vi skal skrive ut en index buffer, ved å bruke TriangleList.

Da skal funksjonene være ferdig programmert! Du må huske å sette inn et 3D objekt som skal tegnes ved bruk av shaderen. Hele koden for tutorial 1 kan lastes ned her, ta gjerne en titt om det skulle være noen problemer J.

Phew, det var mye på en gang! Jeg håper du nå har begynt å forstå hva shadere egentlig er, og hvordan du kan implementere enkle shadere ved hjelp av XNA! Lek deg gjerne med shaderen, prøv å gi den forskjellige farger og varier Ai for å vise hvilken innvirking Ai har på Ambient Lighting algoritmen, og gjør oppgavene gitt under!

Nå som du har fått en god forståelse på hvordan du kan implementere og bruke shadere i XNA vil jeg i neste tutorial gå dypere inn på shader programmering. Tutorial 2 skal være om Diffuse Lighting algoritmen, slik at objektet vårt faktisk kan få en illusjon av 3D :P

Oppgaver

Her er et par enkle oppgaver du kan prøve deg på:

1: Endre fargen på ambient lyset slik at den er helt blå.

2: Prøv å set fargen på Ac til å være gitt av en global parameter i shaderen.
(Tips: effect.Parameters["AmbientColor"].SetValue( color );)

3: Lag en ny teknikk i samme shader file, som skal bruke samme Vertex Shader, men en ny Pixel shader. Den nye pixel shaderen skal gi en helt grønn farge til objektet.
(Tips: Lag en ny teknikk ”AmbientLight2” og bruk effect.Techniques["AmbientLight2"];)

4: Bruk Xbox kontrollen din, eller tastaturet, til å rotere objektet og/eller kameraet!

Har du noen spørsmål, så ta gjerne kontakt via petriw@gmail.com eller via www.gamecamp.no.

Takk for meg!

XNA Game Components Tutorial

raymond — Sun, 30 Sep 2007 21:41:00 GMT

Her skal jeg prøve å forklare hva "Game Components" i XNA er.

La oss tenke oss at vi lager et rollespill. Hva er det vi trenger?

Vi trenger bl.a en verden, en helt og våpenet til helten vår

Alle disse er kandidater til en "DrawableGameComponent". Dette er en komponent som kan oppdatere seg selv og tegne seg selv på skjermen.

"GameComponent" kan bare oppdatere seg. Eksempler på det kan være kamera og bruker interaksjon (keyboard, joystick). DrawableGameComponent er en utvidelse av GameComponent objektet.

Hvordan lager man en Game Component?

Aller først må man ha et XNA prosjekt. Så kan du høyreklikke på prosjektnavnet i Solution Explorer og velge "Add Item". Her kan du velge "GameComponent".

Da vil du få en ferdig klasse med overrides på Initialize og Update, samt en konstruktør som gir deg "game" objektet vårt.

Det er ikke mulig å velge en DrawableGameComponent så skal vi ha en det må vi bare bytte navnet på klassen vi arver fra (GameComponent) til DrawableGameComponent og så legge til nye overrides.

public class Camera : Microsoft.Xna.Framework.GameComponent

{

public Camera(Game game)

: base(game)

{

}

public override void Initialize()

{

base.Initialize();

}

public override void Update(GameTime gameTime)

{

base.Update(gameTime);

}

Her har vi laget en game component som heter Camera.

En DrawableGameComponent vil se sånn ut:

public override void Initialize()

{

base.Initialize();

}

protected override void LoadGraphicsContent(bool loadAllContent)

{

base.LoadGraphicsContent(loadAllContent);

}

protected override void UnloadGraphicsContent(bool unloadAllContent)

{

base.UnloadGraphicsContent(unloadAllContent);

}

public override void Update(GameTime gameTime)

{

base.Update(gameTime);

}

public override void Draw(GameTime gameTime)

{

base.Draw(gameTime);

}

Hva/Hvor med kode?

I konstruktøren lager vi som regel objektene vi skal bruke I komponenten.

La oss si at vi skal legge til en "Avatar" komponent.

Så vil vi legge til et Interface vi har laget til kameraet vårt, da kan vi skrive: camera = (ICamera)Game.Services.GetService(typeof(ICamera));

Hvor camera er en klassevariabel av typen ICamera.

Legg merke til at jeg har lagt til camera objektet i Services til Game. Her kan du legge interfacene dine som du vil at alle komponentene dine skal få tilgang til.

Så har vi forskjellige overrides som:

public override void Initialize()

Her kan vi sette properties på child på objektene, som camera.

La oss si at vi skal fortelle kameraet vårt at den skal begynne på posisjonen 0,0,0:

camera.Position = Vector3.Zero;

protected override void LoadGraphicsContent(bool loadAllContent)

Dette er et perfekt sted å laste inn modellen(e) våre: avatar = Game1.content.Load<Model>("Content\\Models\\warlock");

Hvor content er et statisk objekt av en ContentManager i Game1 klassen.

protected override void UnloadGraphicsContent(bool unloadAllContent)

Close() og Dispose() objektene dine her. Dette er spesielt viktig på Xbox der du har en "undeterministic" garbage collection, nemlig en veldig lat en. Xbox bruker en spesialtilpasset versjon av .NET Compact Framework. Se her: http://blogs.msdn.com/shawnhar/archive/2007/06/29/how-to-tell-if-your-xbox-garbage-collection-is-too-slow.aspx

override void Update(GameTime gameTime)

Hvis kameraet vårt skal følge avateren kan vi oppdatere posisjonen til kameraet her.

public override void Draw(GameTime gameTime)

Her tegner vi avataren vår på skjermen:

if (avatar != null)

{

Matrix[] transforms = new Matrix[avatar.Bones.Count];

avatar.CopyAbsoluteBoneTransformsTo(transforms);

foreach (ModelMesh mesh in avatar.Meshes)

{

foreach (BasicEffect effect in mesh.Effects)

{

effect.TextureEnabled = true;

effect.Texture = warlockTexture;

effect.EnableDefaultLighting();

if (camera != null)

{

effect.View = camera.View;

effect.Projection = camera.Projection;

}

effect.World = transforms[mesh.ParentBone.Index] * Matrix.CreateTranslation(position);

}

mesh.Draw();

}

Hvordan snakker XNA med mine game components?

For at XNA skal kalle opp funksjonene våre som Draw() og Update(), må vi legge dem til "Components" listen i "Game" objektet, som her:

public class Game1 : Microsoft.Xna.Framework.Game

{

protected override void Initialize()

{

this.Components.Add(new Camera(this));

base.Initialize();

}

.....

Game objektet er det bare et av.

"Game" inneholder bl.a. "Game components" og "Services".

Her lager vi objektet med det samme, så konstruktøren til "Camera" blir kalt opp først, sammen med klassens lokale variabler.

Etter base.Initialize(); vil XNA gå gjennom alle initialize funksjonene i komponentene vi har lagt til.

I en DrawableGameComponent vil LoadGraphicsContent() kalles opp med det samme vi kaller opp base.Initialize(); .

Det kan noen ganger være uklart i hvilken rekkefølge dette skjer og hvilke game components som blir Initiert/Oppdatert eller Tegnet først. Det beste er da å debugge og gå gjennom programmet linje for linje. Det er viktig å vite så du ikke gjør tings som å bruke et uinitialisert objekt. Derfor er det lurt å sjekke om Texture objekter o.l som brukes i protected override void Draw(GameTime gameTime) er null.

Du kan bruke this.UpdateOrder i komponentene for å bestemme hvem som skal oppdateres først. Komponenten med laveste verdi oppdateres først.

Så da er det bare å sette i gang og bygge game components! J

Lykke til.

NB! Her er noen linker (på engelsk) som også forteller om XNA Game Components:

http://www.xnaresources.com/pages.asp?pageid=20

http://www.nuclex.org/articles/xna-gamecomponents-and-gameservices

DirectX På Windows Mobile 5 med Visual Basic

raymond — Sat, 25 Aug 2007 19:22:00 GMT

Vi skal i denne tutorial lære hvordan du kan få fram en spinnende kube på skjermen ved bruk av DirectX på en Windows Mobile 5.0 enhet.

Siden den er myntet på nybegynneren, forventes det lite av forkunnskaper i DirectX, Visual Basic og .NET Compact Framework som vi skal programmere i.

Du trenger:

- Visual Studio 2005. Dette kan være standard, professional eller team system, men ikke express.

- Windows Mobile 5 SDK for Pocket PC

- Active Sync/Mobile Device Center

- .NET Compact Framework 2.0

- En Windows Mobile 5 enhet.

Du kan laste ned trial versjon av Visual Studio, .NET CF 2.0, WM 5.0 SDK og Active Sync fra: www.msdn.com/downloads

Start Visual Studio og velg Create Project.

Velg så "Visual Basic" -> "Smart Device" -> "Windows Mobile 5.0 Pocket PC" -> "Device Application". Vi kan gi den navnet "MD3DMTutorial". Trykk på "OK".

Merk "Form1.vb" i Solution Explorer og trykk "View code" knappen eller trykk"F7".

Det er her vi skal skrive all koden vår.

For at Visual Studio skal snakke med DirectX må vi legge til en "referanse" til DirectX.

Høyreklikk på "MD3DMTutorial" i Solution Explorer og velg "Add Reference". Bla nedover i listen til du finner "Microsoft.WindowsMobile.DirectX" og trykk "OK".

Så må vi velge vår utviklingsplatform, nemlig "Windows Mobile 5.0 Pocket PC Device" fra nedtrekksmenyen øverst til venstre i skjermbildet. NB! Menyen kan ligge andre steder på din kopi av Visual Studio.

Tilbake til koden vår... Vi har nå en klasse som heter Form1. Skriv "Imports" setninger til DirectX så vi slipper å skrive det fulle namespacet hver gang vi skal skrive en DirectX funksjon.

Det første vi nå trenger er en Direct3D device. Koden ser nå sånn ut:

Imports Microsoft.WindowsMobile.DirectXImports
Microsoft.WindowsMobile.DirectX.Direct3D
Public Class Form1
Dim _device As Direct3D.Device
End Class

Nå skal vi lage et D3D vindu som vi kan se på skjermen. Da må vi først lage device objektet og så fortelle vår device om hva slags vindu dette er. Vi gjør dette med å mate den med parametere i form av "Presentation Parameters".

La oss lage vår device:

Sub LagDevice()
    Dim pp As New Direct3D.PresentParameters()
    pp.Windowed = True
    pp.SwapEffect = Direct3D.SwapEffect.Discard
    _device = New Device(0, DeviceType.Default, Me, CreateFlags.None, pp)
    _device.RenderState.Lighting = False

End Sub

Her har vi valgt at vi skal ha et vanlig vindu og ikke full skjerm. Vi har også valgt å slå av DirectX sin håndtering av Lighting. Neste setning sier at når et nytt bilde blir vist på skjermen så blir det gamle fjernet.

Merk et sted i klassen og skriv "sub new" og trykk enter.

Da vil konstruktøren bli laget for deg. Etter InitializeComponent() kaller du opp metoden vår med å skrive "LagDevice()"

Rett før "End Class" skriver du: "Protected Overrides OnPaint" og trykk "TAB".

Da vil OnPaint metoden bli laget for deg, og skriv følgende inn i metoden så den ser sånn ut:

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
    _device.Clear(ClearFlags.Target, Color.Blue, 1.0F, 0)
    _device.BeginScene()
    _device.EndScene()
    _device.Present()
    Me.Invalidate()
End Sub

I OnPaint nuller vi ut skjermbildet vårt med en blå farge, deklarerer en BeginScene() og EndScene(), og så til sist en Present() kommando. En ting å være klar over er at vi hele tiden jobber mot et "buffer" som vi ikke kan se. Det er først når vi forteller vår direct3D device at den kan presentere innholdet, at vi kan se det. Dette gjøres med _device.Present()

Det som skal stå mellom _device.BeginScene() og _device.EndScene() skal være koden vi bruker til å tegne kuben. Dette kommer vi tilbake til.

Til slutt står det Me.Invalidate(). Dette oppdaterer vinduet vårt, som betyr at vi kaller kontinuerlig opp Paint eventen vår. Da har vi vår "rendering loop" oppe og går.

Gjør det samme med "Protected Overrides OnPaintBackground". Sett en ' (kommentar tegn) foran MyBase.OnPaintBackground(e). Dette forhindrer programmet i å oppdatere bakgrunnen til formen. Da unngår vi flimring på skjermen.

Nå skal vi lage vår kube, som vi etterpå skal få litt fart på. Rett før "Sub New()" skriver du:

Dim _box As Mesh

Etter at vi har kalt opp "LagDevice()" i konstruktøren, lager vi kube objektet vårt med:

_box = Mesh.Box(_device, 1, 1, 1)

Det var det, nå har vi en kube med "1" i lengde, bredde og høyde.

For at vi skal kunne se den, må vi instruere DirectX om hvordan vi skal se vår 3d verden.

Dette gjøres ved å sette såkalte "Transforms", og hver av dem er en matrise.

Så hva er en matrise?

Dette er en mengde med tall, normalt en 4x4 array. Denne skal ganges med en annen matrise for at vi skal få det resultat vi ønsker. I DirectX vil det si at hvis vi f. eks vil snu oss rundt, så ganger vi world matrix med riktig rotation matrix, for å få den nye posisjonen.

Så det fins tre Transforms som vi må sette:

World Transform - Beskriver hvor kuben vår er.

_device.Transform.World = Matrix.Identity

Matrix.Identity betyr en matrise som ikke forandrer noe. Akkurat som 2 * 1 = 2, så er world transform matrix * Identity matrix = world transform matrix.

View Transform - Beskriver hvor kameraet er

Heldigvis gjør DirectX dette lett for oss. Nå skal vi lage en matrise som skal beskrive hvor i verden kameraet vårt er.

_device.Transform.View = Matrix.LookAtLH( _
    New Vector3(0.0F, 0.0F, -3.0F), _
    New Vector3(0.0F, 0.0F, 0.0F), _
    New Vector3(0.0F, 1.0F, 0.0F))
End Sub

Det er en funksjon I Matrix klassen som heter LookAtLH som lager den matrisen vi trenger. Den har tre parametere, og alle er av typen Vector3.

Før vi går videre må vi forklare hva en vektor er. En Vector3 er en type som inneholder 3 floats. I 3d grafikk bruker vi hovedsakelig disse 3 verdiene til å beskrive en av to ting:

1. Vektoren har en lengde og retning, men vi vet ikke hvor i verden den er.

2. Vektoren beskriver et spesifikt punkt i 3d universet vårt.

Vektoren er som regel i formatet (x, y, z).

Tilbake til vår Matrix.LookAtLH funksjon, den første vektoren i parameter listen er en vektor som sier hvor kameraet befinner seg. Her har vi plassert kameraet 3 units tilbake i Z retning. Kameraet har da plassert seg lenger vekk fra kuben vår som ligger i 0,0,0.

Den neste vektoren sier hvilket punkt kameraet skal se på. Her skal kameraet se på kuben vår i 0,0,0.

Siste vektoren skal beskrive hva som er opp til kameraet vårt, og vi sier at opp er en positiv y nemlig (0,1,0).

Projection Transform - Hvordan vi ser verden.

Denne trenger vi ikke legge så mye vekt på, bare at den gjør oss å i stand til å se vår 3d verden på skjermen, som er 2D.

_device.Transform.Projection = _
Matrix.PerspectiveFovLH(Math.PI / 4.0, _
1.0F, 1.0F, 100.0F)

Vi setter disse inn I en funksjon som vi kaller for SettMatriser:

Sub SettMatriser()
    _device.Transform.World = Matrix.Identity
    _device.Transform.View = Matrix.LookAtLH( _
    New Vector3(0.0F, 0.0F, -3.0F), _
    New Vector3(0.0F, 0.0F, 0.0F), _
    New Vector3(0.0F, 1.0F, 0.0F))

    _device.Transform.Projection = _
        Matrix.PerspectiveFovLH(Math.PI / 4.0, _
       1.0F, 1.0F, 100.0F)
End Sub

Denne kan vi kalle opp etter LagDevice() i konstruktøren.

Nå som vi har satt matrisene våre kan vi tegne boksen vår. Mellom _device.BeginScene() og _device.EndScene() i OnPaint, skriver vi:

_box.DrawSubset(0)

Parameteren 0 betyr bare at vi skal tegne det første "subset" i meshen. Vi har bare ett subset i vår mesh.

For å rotere boksen, ganger vi vår world matrise med en rotasjons matrise sånn:

_device.Transform.World *= Matrix.RotationY(0.02F)
Dette skriver du rett før _box.DrawSubset(0)

Nå kan du kjøre programmet med "F5" eller trykke på den grønne pilen.

På enheten vil du nå se en spinnende hvit kube på en blå bakgrunn:

For de av dere som har erfaring med DirectX på PC'en vil nok si at det ikke er mye som er forskjellig her. Det er det heller ikke, og DirectX på Windows Mobile ligner mye på DirectX 8 når det gjelder funksjonalitet. Noen av den mest avanserte funksjonaliteten mangler, og det fins enda ikke støtte for pixel og vertex shaders.

En annen forskjell er at det lønner seg å bruke "fixed" tall istedenfor floats/doubles. Dette fordi ARM prosessoren, som de fleste håndholdte kjører på, har ikke FPU (Floating Point Unit).

Da kan du bruke Vector3Fixed og MatrixFixed i stedet for Vector3 og Matrix.

F.eks:

_device.Transform.ViewFixed = New MatrixFixed(Matrix.LookAtLH( _
    New Vector3(0.0F, 0.0F, -3.0F), _
    New Vector3(0.0F, 0.0F, 0.0F), _
    New Vector3(0.0F, 1.0F, 0.0F)))

Gratulerer med overstått tutorial!

Jeg har prøvd å gjøre denne tutorial så enkel som mulig med så lite kode som mulig, så det er bl.a ikke tatt hensyn til hva som skjer ved en device reset og generell error handling.

Prosjektet kan lastes ned her: MD3DMTutorial.zip

Roterende 3D kube for Silverlight 1.1 med bruk av C#

Einar Ingebrigtsen — Tue, 24 Jul 2007 21:06:00 GMT

Silverlight representerer en mindre del av det som er WPF, en av de tingene som ikke er inkludert i Silverlight sin definisjon av XAML er 3D. Med slippet av Silverlight 1.1 alpha og bruk av managed code som f.eks. C# kunne jeg ikke vente med å få hendene mine skitne og se på muligheten for å allikevel støtte 3D i Silverlight. Jeg ble veldig glad når jeg så at de hadde inkludert et tegneobjekt som heter Polygon, det betyr at det finnes en optimalisert måte å tegne trekanter. Hensikten med denne tutorial er å vise hvor lite kode som skal til for å lage en veldig enkel roterende kube.

Eksempelet viser en veldig enkel fremgangsmåte og involverer ikke tung geometri matte. Hvis du ser etter en løsning som er mer avansert og benytter Matrise matematikk og annen geometry matte, ta turen til Balder prosjektet som blant annet undertegnede jobber på : http://www.codeplex.com/Balder

Hovedloopen

Det aller første vi har behov for er en måte å få en jevn loop i form av en event eller lignende. Ved å benytte animasjons-systemet i Silverlight kan vi gjøre dette. Vi lager oss et storyboard og hekter opp Completed eventet. I Page.xaml filen lager vi oss et Canvas og legger vårt Storyboard i dette :

  <Canvas x:Name="spinningCubeCanvas">
    <Canvas.Resources>
      <Storyboard x:Name="spinningCubeStorybard" 
Completed="spinningCubeCanvas_Render"/>
    </Canvas.Resources>
  </Canvas>

Faktisk, så er dette all XAMLen vi trenger for vårt formål; en roterende kube. Nå kommer moroa i C#.

I Page_Loaded eventet må vi legge til en linje kode for å starte vårt storyboard.

this.spinningCubeStorybard.Begin();

Deretter trenger vi å implementere Completed eventet som vi hektet opp i XAMLen :

1
2
3
4
 public void spinningCubeCanvas_Render(object sender, EventArgs e)
{
   this.spinningCubeStorybard.Begin();
}

Kuben vår

For å definere kuben, trenger vi punkter i en 3D verden, disse kaller vi Vertices (flertallsform for Vertex). En enkel klasse kan representere dette. Klassen nedenfor representerer den originale punktet før vi har gjort noen kalkulasjoner, den inneholder også den ferdig kalkularte utgaven som passer på en 2D skjerm.

1
2
3
4
5
6
     private class Vertex
    {
      public  double X, Y, Z;
      public double RotatedX, RotatedY, RotatedZ;
      public int TranslatedX, TranslatedY;
    }

Som du kan se så inneholder vertexen X,Y og Z som er koordinatet i 3D rommet, i tillegg til dette har vi den roterte utgaven etter at vi har gjort våre rotasjonen også
inneholder den den translaterte (2D) versjonen. Når vi nå har vertex definisjonen, trenger vi noe som definerer trianglene som skal henge på koordinatene, vi kaller 
disse Faces. En Face inneholder 3 integer verdier som representerer indeksen inn i en array av vertices for objektet vi roterer.

1
2
3
4
     private class Face
    {
      public int VertexA, VertexB, VertexC;
    }

Så trenger vi en array av vertices for objectet :

1
2
3
4
5
6
7
8
9
10
     private Vertex[] _vertices = new Vertex[] {
                     new Vertex() { X=-150, Y=-150, Z=-150},
                     new Vertex() { X=150, Y=-150, Z=-150},
                     new Vertex() { X=-150, Y=150, Z=-150},
                     new Vertex() { X=150, Y=150, Z=-150},
                     new Vertex() { X=-150, Y=-150, Z=150},
                     new Vertex() { X=150, Y=-150, Z=150},
                     new Vertex() { X=-150, Y=150, Z=150},
                     new Vertex() { X=150, Y=150, Z=150},
                   };

Også trenger vi en array av faces som koples opp mot vertices :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
     private Face[] _faces = new Face[] {
                    new Face() { VertexA=2, VertexB=1, VertexC=0},
                    new Face() { VertexA=1, VertexB=2, VertexC=3},
                    new Face() { VertexA=4, VertexB=5, VertexC=6},
                    new Face() { VertexA=7, VertexB=6, VertexC=5},
                    new Face() { VertexA=0, VertexB=4, VertexC=6},
                    new Face() { VertexA=0, VertexB=6, VertexC=2},
                    new Face() { VertexA=7, VertexB=5, VertexC=1},
                    new Face() { VertexA=3, VertexB=7, VertexC=1},
                    new Face() { VertexA=5, VertexB=4, VertexC=0},
                    new Face() { VertexA=1, VertexB=5, VertexC=0},
                    new Face() { VertexA=2, VertexB=6, VertexC=7},
                    new Face() { VertexA=2, VertexB=7, VertexC=3},
                };

Magien

Da er vi klare til å implementere selve rotasjonen og visningen av en roterende kube. Først trenger vi å rotere alle vertices rundt X,Y og Z aksene. 
Det gjør vi veldig enkelt uten noen matrise matematikk.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
       // Calculate all the vertices
      foreach (Vertex vertex in this._vertices)
      {
        // Rotate the vertex around the Z axis
        tempY1 = (vertex.X * Math.Sin(this._zRotation)) + 
                 (vertex.Y * Math.Cos(this._zRotation));
        tempX1 = (vertex.X * Math.Cos(this._zRotation)) - 
                 (vertex.Y * Math.Sin(this._zRotation));

        // Rotate the vertex around the Y axis
        vertex.RotatedX = (vertex.Z * Math.Sin(this._yRotation)) + 
                          (tempX1 * Math.Cos(this._yRotation));
        tempZ1 = (vertex.Z * Math.Cos(this._yRotation)) - 
                 (tempX1 * Math.Sin(this._yRotation));

        // Rotate the vertex around the X axis
        vertex.RotatedZ = (tempY1 * Math.Sin(this._xRotation)) + 
                          (tempZ1 * Math.Cos(this._xRotation));
        vertex.RotatedY = (tempY1 * Math.Cos(this._xRotation)) - 
                          (tempZ1 * Math.Sin(this._xRotation));

        // Translate the vertex into a 2D coordinate
        vertex.TranslatedX = ((int) ((vertex.RotatedX * focalLength) / 
                                    (vertex.RotatedZ + zoom)))+xoffset;
        vertex.TranslatedY = ((int) ((vertex.RotatedY * focalLength) / 
                                    (vertex.RotatedZ + zoom)))+yoffset;
      }

Nå har vi våre punkter ferdig roterte og translaterte. Supert, da er vi klare til å få selve kuben tegnet. Den neste delen bruker punktene til å bygge opp triangler ved
å basere seg på hva som er i hvert Face sin index til Vertices, deretter lager vi et Polygon for hvert face og legger til som en Visual for Silverlight å tegne. I vårt
tilfelle legger vi til Polygons til vårt Canvas som vi definerte tidligere for vår roterende kube. Før vi legger noe til den trenger vi å fjerne det som eventuelt ligger
ved å kalle Clear på Childrens propertien. I tillegg til dette finner vi ut hva slags triangler som ikke er synlige og sørger for å ikke legge disse til 
(hidden surface removal), det gjør vi ved å gjøre et mikset produkt av de tre punktene som er involvert.

Resultatet av det miksede produktet kan også brukes i vårt tilfelle for å gi hvert polygon en farge, derav fargemagien som skjer i loopen. :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 // Create polygons for Silverlight to work with from the newly 
// calculated vertices
this.spinningCubeCanvas.Children.Clear();
foreach (Face face in this._faces)
{
  Vertex vertexA = this._vertices[face.VertexA];
  Vertex vertexB = this._vertices[face.VertexB];
  Vertex vertexC = this._vertices[face.VertexC];

  // Do a mixedproduct of all vertices for hidden surface removal
  double mixedProduct = (vertexB.TranslatedX - vertexA.TranslatedX) *
               (vertexC.TranslatedY - vertexA.TranslatedY) -
               (vertexC.TranslatedX - vertexA.TranslatedX) *
               (vertexB.TranslatedY - vertexA.TranslatedY);
  bool visible = mixedProduct < 0;
  if (!visible)
  {
    continue;
  }


  // Use the mixed product for "shading". 
  // The larger the face, the brighter it is.
  double shade = -mixedProduct; // *512;
  shade /= 1024;

  int color = (int)shade;
  color += 128;
  if (color >= 250)
  {
    color = 250;
  }
  if (color < 30)
  {
    color = 30;
  }

  byte red = (byte)(color >> 3);
  byte green = (byte)(color >> 1);
  byte blue = (byte)(color);


  // Create the polygon and initialize the point and the color
  Polygon polygon = new Polygon();
  polygon.Points = new Point[] {
       new Point(vertexA.TranslatedX,vertexA.TranslatedY),
       new Point(vertexB.TranslatedX,vertexB.TranslatedY),
       new Point(vertexC.TranslatedX,vertexC.TranslatedY)
     };
  polygon.Fill = new SolidColorBrush(Color.FromRgb(red, green, blue));

  this.spinningCubeCanvas.Children.Add(polygon);
}

Det er stort sett det man trenger, nå trenger man bare å rotere den. :)

Last ned kildekoden som er lagt til denne tutorialen for å få en fullstendig versjon.

Tutorials

XNA Shader Programmering, Tutorial 5

XNA Shader Programming

Before we start

Deforming objects

Fat/Slim

Ocean waves

"Fake Spherical harmonics"

Implementing the shader

Using the shader

XNA Shader Programmering, Tutorial 4

XNA Shader Programming

Before we start

Normal Mapping

Tangen space

Implementing the shader

Using the shader

Excersises

XNA Shader Programmering, Tutorial 3

XNA Shader Programming

Specular lighting

I=Ai*Ac+Di*Dc*N.L+Si*Sc*(R.V)^n

R=2*(N.L)*N-L

Implementing the shader

Using the shader

Excersises

Compressing audio in Xna for Windows

XNA 3D Engine - Camera and Game services (Part 3)

XNA 3D Engine - Hero class and rendering (Part 2)

XNA 3D Engine - Introduction (Part 1)

XNA 2.0 - Getting Started

Creating a simple XNA Camera class

XNA Shader Programmering, Tutorial 2

XNA Shader Programmering

Diffuse Lighting

Implementere shaderen

Bruke shaderen i applikasjonen vår

XNA Shader Programmering, Tutorial 1

XNA Shader Programmering

En historie om Shaders

Ok, hva er shaders?

HLSL

Effect filer

Implementering av Shadere I XNA

Ambient Lighting Algoritmen

Oppgaver

XNA Game Components Tutorial

DirectX På Windows Mobile 5 med Visual Basic

Roterende 3D kube for Silverlight 1.1 med bruk av C#

I=AiAc+DiDcN.L+SiSc(R.V)^n*

R=2(N.L)N-L