DirectX 11 Lessons/Tutorials

If your interested in a great book to really get you a strong foundation in directx 11, check out Frank Luna's "Introduction to 3D Game Programming with DirectX 11":

Like I've mentioned around the site, all comments and suggestions don't only make me feel so very happy for making the lessons, but they can also be very helpful, and not only for me, for you too! An example of this, is a suggestion by someone with the name of Shellcoder, which was to upload the source code in .zip format instead of the .rar format which i'm used to, as not everyone has or even wants to download and use winrar, so from now on I'll be uploading the source code in .zip format! Thanks Shellcoder!

Oh yeah, one more thing about comments, I've taken out the email field for the convenience of those who do not wish to enter one. But because of this, i'm not able to send a personal message to you, which I would really like to do. So if you'd like me to reply, please put your email in with the message!

---

If you're having problems with an error when you try to draw your scene, try changing "vs_5_0" and "ps_5_0" to "vs_4_0" and "ps_4_0".

-> Download Lesson Source Code <-
HLSL Constant Buffer Packaging - If your having problems with constant buffers

I've been getting a few comments about problems with constant buffers not being able to be created. This is usually because of the way HLSL "packs" constant buffers. HLSL packs constant buffers into groups of 16 bytes. An easy way to look at this is 4 float elements. When you send a constant buffer to the shaders, you need to make sure that no variable is split between two groups of 16 bytes. You can be sure that no variable is "split" by using "padding", or sometimes just by re-organizing the structure. I know this probably sounds confusing, so i'm going to show you with an example:


struct constantBuffer
{
     // first group of 16 bytes
     float variable1;           // 4 bytes
     float variable2;           // 4 bytes
     float variable3;           // 4 bytes
     float variable4;           // 4 bytes

     // second group of only 12 bytes
     D3DXVECTOR3 variable5;     // 12 bytes (4 * 3)

     // Since the above group only contains 12 bytes, it will take the next 4 bytes to complete the group
     // This is where you would find an error
     D3DXVECTOR3 variable6;     // First 4 bytes are put into the above group,
                                // meaning this variable is "split", which would cause an error    
};

One way to go about fixing this problem, is just "re-organizing" the structure like this:


struct constantBuffer
{
     // first group of 16 bytes
     D3DXVECTOR3 variable5;     // 12 bytes (4 * 3)
     float variable1;           // 4 bytes

     // second group of 16 bytes after re-organizing
     D3DXVECTOR3 variable6;     // 12 bytes (4 * 3)
     float variable2;           // 4 bytes

     // Last group containing 8 bytes
     float variable3;           // 4 bytes
     float variable4;           // 4 bytes
};

The other way to go about fixing this problem, is by using "padding" like this:


struct constantBuffer
{
     // first group of 16 bytes
     float variable1;           // 4 bytes
     float variable2;           // 4 bytes
     float variable3;           // 4 bytes
     float variable4;           // 4 bytes

     // second group now contains 16 bytes by including the "pad"
     D3DXVECTOR3 variable3;     // 12 bytes (4 * 3)
     float pad1;                // 4 bytes

     // Now that the above group contains 16 bytes,
     // this next variable is no longer split
     D3DXVECTOR3 variable3;     // 12 bytes, not split

     // HLSL will add padding automatically to the end    
};

Another thing to mention, is different types can be different sizes as you can see. I remember running into a problem using a boolean type. I was using the default C++ type "bool" in my constant buffer, which was causing an error. This is because the C++ "bool" type is only one byte, so switching to Window's "BOOL" type, which is 4 bytes, solved the problem.

You can easily find the size of a data type by using the function sizeof(), which returns the size in bytes.

Here's a little table of some common types and their sizes: (Remember 1 byte is 8 bits)

Type	Size
bool	1 byte
char	1 byte
short	2 bytes
int	4 bytes
long	4 bytes
float	4 bytes
double	8 bytes
BOOL	4 bytes
BYTE	1 byte

Type	Size
CHAR	1 byte
DWORD	4 bytes
FLOAT	4 bytes
INT	4 bytes
INT64	8 bytes
LONG	4 bytes
SHORT	2 bytes
WCHAR	2 bytes
WORD	2 bytes

Title

Description

1	Setting Up

This is just a quick lesson on how to set up your environment in MS Visual Studio 2008.

1	Setting Up in VS 2010

This is just a quick lesson on how to set up your environment in MS Visual Studio 2010.

2	Creating a Window

Before we get started with DirectX, we first need to create the window which we will draw our graphics on.

3	Initializing Direct3D 11

Here we will learn how to set up the direct3d device, and use direct3d to render to the screen! Since this is the bare minimum for directx to work, all lessons from this point on will use this, sometimes with a little modification here or there.

4	Begin Drawing!

Now that we have initialized direct3d, we can start displaying our crazy minds on the computer! Well... maybe not quite, but drawing a simple triangle is a huge step in the right direction, as ALL 3D objects and scenes we will be drawing are made up of them. Here we will draw a simple, solid blue colored triangle. We will discuss the rendering pipeline and get an idea of how shaders work.

Color!

This is a short lesson on how we can modify our shaders, vertex structure, and input layout to include color. The color we specify for each vertex will be "interpolated" across the triangle.

Indices

This is another short lesson on how to use indices. Indices let you define how to draw your geometry. For example, you could draw a square by creating two triangles, each with 3 vertices. That makes 6 vertices you would need to create. Using an index buffer, you can create a square using only 4 vertices like we will do. Our index list will define the first triangle as vertex 0, 1, 2, and the second vertex as 0, 2, 3.

Depth

Here is another short lesson on how to impliment depth. We will create a depth/stencil buffer, then create a depth/stencil view which we bind to the OM stage of the pipeline. Binding a depth/stencil view to the OM stage will allow it to check each pixel fragement's depth value on the render target. If there are more than one pixel fragments in a spot on the render target, the pixel fragment with the lowest depth value (closest to the screen) will get drawn, and the others will be discarded.
The outcome of this tutorial will not look any different from the last tutorial, but implimenting a depth/stencil buffer is necessary to render 3D scenes in directx.

8	World View and Local Spaces (static Camera)

We will learn about the world, view, and local spaces in a 3D world, which will enable us to create a camera, so only the things the camera sees will be drawn to the screen. We will learn how to impliment a static (not moving) camera, and how to work with a shaders constant buffers, which are variables in an effect file that shaders can use, and we can update from our code.

9	Transformations

This is another pretty short lesson on tranformations. We will transform the world space for each object (the two cubes) using transformation matrices.

10	Render States

Here is a nice little lesson which will teach you about Direct3D's render states.

Textures

Here's another pretty short lesson on how to load a texture from a file and map it onto geometry!

Blending

Here we will learn about a technique called "blending"! This will give us the ability to render "transparent" primitives.

This lesson builds off the last lesson "Textures". We will add blending to our lesson, so the two boxes will look like they are made of stained glass or something.

We will also learn about a problem when rendering transparent objects, where they are transparent to each other sometimes, and sometimes they are not transparent to each other at all.

13	Pixel Clipping

This is a very short lesson on how to quickly and efficiently clip pixels from being drawn to the screen.

14	Simple Font

I waited for this lesson until we have covered some things that need to be implimented in this lesson, such as blending and textures.

As you may or may not know already, font in direct3d 11 is a pain in the ass to say the least. I don't know what the developers were thinking exactly, but I believe they have taken out the ID3DXFont interface from direct3d in order to direct people to two new API's, Direct2D and DirectWrite. However, the worst part about this is that Direct2D is not "interopable" with D3D 11, meaning you can't use them together directly... (A big thumbs down for microsoft).

So anyway, enough complaining. There are a couple ways we can impliment font into D3D 11, and the one we will be learning about uses the two new API's microsoft wants us to use, because in fact, they could be very usefull and pretty cool, not to mention flexible (except for the fact we can't use them directly with a D3D 11 device...). Since we are not able to use them directly with a D3D 11, we will need to use them with a D3D 10.1 device, and swap between the two devices when rendering.

15	High Resolution Timer

In this lesson, we will learn how to make a high resolution timer in three functions, which we can use to make sure the speed of every moving thing in our scene is updated based on time. This means that no matter what our frames per second are, an object moving in our scene will cover exactly the same distance in one second, whether the fps is 3, 30, or 300, as the distance the object covers or how much it spins will be based on time, and not fps like we have been doing. I waited to have a font lesson before I did this one so we can display the fps, as thats always a nice thing to know when developing games.

16	Simple Lighting

There are four types of light, and three kinds of light sources. We will go over them in this lesson, and learn how to impliment simple lighting, using a "Directional" Light source. We will cover the other two types of light sources and specular lighting in a later lesson.

16.1	Point Lights

This lesson will build right off the last lesson. We will learn how to make a simple point light, which takes the position of the first cube and rotates around the second (center) cube.

17	Direct Input

We will learn how to take input from a user, through the keyboard, mouse, or even a joystick in this lesson. We will be learning how to impliment Direct Input in our games!

18	First Person Camera

Here we will look at how to impliment a simple first person vector camera, to make it look like you are walking around. We will also learn how to go fullscreen, and exit without getting errors.

19	Cube Mapping (Skybox)

In this lesson we will learn how to use a 3D texture to texture a sphere. This technique is called cube mapping, and we will learn how to make a skybox using this technique.

20	Spotlights

Here we will learn how to impliment a spotlight, which we will use as a flashlight. Since spotlights are basically just point lights with a direction, we are able to build directly off code from the pointlight. This lesson will build directly off of lesson 18, first person camera. I figured a good example of spotlights would be a flashlight, so thats whats happening here!

21	Loading Static 3D Models (.obj Format)

In this lesson we will learn how to load a static 3d model from an .obj file. .obj files are not usually what you will want to use in a game, as they don't contain animation, and they are in ascii format, so a bit larger than other formats such as .3ds, but they are a good starting point for learning how to load models.

This lesson will build directly off the last lesson, spotlights.

The upcoming lessons (Specular lighting, and Normal mapping. Probably others too) will use the code from this lesson as the starting point.

BTW, please go easy on me when making fun of my poor modeling skills...

22	Normal Mapping (Bump Mapping)

In this lesson, we will learn how to give a flat textured surface the appearance of depth. This technique is called normal mapping. We will actually be building directly from the last lesson, loading obj models. But instead of using the model from the last lesson (because I suck at modeling...), we will be using a more simple model which will be the ground, textured with grass.

The image to the left shows you the end result using normal mapping (left) compared to no normal mapping (right).

Picking

This lesson builds directly off the last lesson, normal mapping.

Here we will learn how to turn the 2d screen position (in pixels) that the mouse cursor is at, into a 3d ray in world space. We can then check to see if that ray intersects with any of the objects on the screen. (The objects in this case are "supposed" to be bottles, but i've been recently told they look like urns...).

If the ray intersects with any of the bottles in this lesson, we will display the distance from the camera to that bottle, increase the score, and remove that bottle from being displayed any longer and from being checked if the ray picks it again.

24	Bounding Volumes

Think if your scene has a couple thousand models in it, and each model has a couple thousand triangles. Now if you were to pick them using just the picking method from the lesson above, it might take 5 seconds just to finish that picking operation. 5 seconds on a single frame is just not acceptable, and this is where bounding volumes come into play.

We will be learning how to create and use a Bounding Box and a Bounding Sphere. The bounding box is usually more accurate than the bounding sphere, but it also takes a little more time to do the picking operation than the sphere takes.

We will use our High Resolution timer from an ealier lesson to time exactly how long the operation for each picking method takes.

25	Bounding Volume Collision Detection

We will learn how to detect a collision between two objects in this lesson. We will be learning how to use their bounding volumes to do the collision detection instead of the object themselves, as it is much more simpler, and much faster to compute than triangle to triangle collision detection.

In this lesson, we will build a pyramid of bottles or something, and "throw" a bottle when the mouse button is clicked. If the "thrown" bottle collides with one or more of the bottles in the pyramid, then they both just dissapear and the score is increased. I know, I know, not very realistic physics, but i've decided to skip all that extra stuff so we can just focus plainly on the actual collision detection methods.

26	Loading An MD5 Model

MD5 models are split into two separate files; "md5mesh" and "md5anim". This is convenient since I was planning on splitting this lesson into two lessons anyway, one for loading the MD5 model, and one for animation. This lesson being the first of two, will teach you how to load the MD5 model from the "md5mesh" file and set up the vertex positions based on the layout of the joints. The next lesson will teach you how to load the animation for the model from the "md5anim" file and animate your model. In this lesson, we will cover the following:

- The "md5mesh" format
- A breif introduction to quaternions
- How "bones" work in skinned models

(You may be wondering why it's taken me so long to complete this lesson. The reason is because i'm so bad with creating 3D models, and I would like to have a decent looking model for this lesson, since we will be animating it and fun things like that ;)

27	Skeletal Animation (based on the MD5 format)

Here is the second part of the lesson, animating the MD5 model. The MD5 format uses a skeletal system to do the animation (more specifically, joints), so we will be learning how to loop through the animation stored in the "md5anim" file and apply it to our model. Skeletal systems are nice because they take up less memory than storing keyframe animations, where its basically a new model for every frame of animation. The joint system (which we will be using) just stores the orientation and position of the bones at each frame. Bone systems are also cool when you want to do "rag-doll" physics! After this lesson, you should be able to load in skeletal animations from any model, and even be able to create your own animations or a rag-doll effect during runtime!

28	Free-Look Camera

This is an extremely short lesson which will show you how to change the camera funcntion from the first person camera to a free-look camera. It is based directly off the first person camera lesson.

29	Heightmap (Terrain)

Here we will learn how to load a grayscale bmp image as a heightmap.
This lesson builds directly off the last lesson, the Free-Look Camera.

30	Sliding Camera Collision Detection

This one is a more interactive one than the previous ones. We will learn how to "slide" our camera around our world using a spherical shape called an ellipsoid, using the technique described in "Improved Collision detection and Response" by Kasper Fauerby. We learn how to detect a collision between a swept sphere and triangle, and the result is a very pleasing "sliding" camera, which slides around on our terrain, slides up stairs, and slides over small objects. It's great because it does not get "stuck" on hard edges (if you do it right). We will also be implimenting gravity so we will not float away.

This technique does not only apply to a camera, it will apply to any object you wish to slide around, and in fact, you don't even have to have the object slide around, you can VERY EASILY change the code so that the object will "bounce" off the surface instead of sliding across it.

31	Simple 3rd Person Camera

Here's a pretty simple lesson on how to create a very simple third person camera. This lesson will teach you how to create a vector camera (which we use for the first person and free look cameras), rotate your character smoothly towards their destinated direction, and rotate the camera around the character. (You'll have to register to download the female model from the Braynzar Vision section of the site. Please don't complain, I don't ask for much in return for providing these lessons ;)

32	Instancing (With Indexed Primitives)

Before anything, I want to say instancing is actually much more simple to do than you may think.

In this lesson, we will be rendering a forest using the technique called "Instancing". We will be drawing 400 trees, with 1000 leaves on each tree, giving us a total of 400,000 leaves! Instancing is a fast way to draw many of the same meshes with similar geometry but slight changes, such as positions, color, rotations, animation, etc. This technique can mean the difference between 1 frame per second and 500. We will be drawing the trees using instancing, only chaning the position of the trees. Then we will draw the leaves using instancing, passing in a matrix array to a constant buffer which will give us the position of each leaf on a single tree, and using the instance buffer to move the leaves to their correct trees.

33	(AABB) CPU Side Frustum Culling

This is another lesson that you will most definitely want to learn how to do because of the massive performance boost it can give you. In this lesson, we will have 4000 trees in our scene! How is this possible? This is possible with the technique called frustum culling! We will be learning how to check if an objects AABB (Axis-Aligned Bounding Box) is within the cameras view, and if it isn't, we will not send it to the GPU, easy as that!

I say "CPU Side Frustum Culling" because the GPU actually does frustum culling for us. The problem with that though, is that the GPU must check every single triangle we send to it, so in this lesson, we will check if an objects bounding volume is within view of the camera before we send it to the shaders for more accurate frustum culling.

34	Render To Texture

We will be making a sort of map in this lesson, by rendering the terrain onto a texture, then drawing that texture in the bottom right corner of our backbuffer. It's actually a very easy thing to do, but I decided to make a lesson on it since we will be using this in the next two lessons.

35	Billboarding (Geometry Shader)

Billboarding is a technique to draw many far away objects without actually drawing all the geometry. Instead of drawing our entire trees which contain thousands of faces, we will simply draw a single quad per tree in the distance.

We will be using the Geometry shader in this lesson, by sending a single point to the shaders, and expanding that point into a quad using the geometry shader. The result will be perspective facing billboarders, where all billboards are facing the camera.