Thursday, November 3, 2011

Rendering to a texture

    Sometimes it is required to render to something else than the screen. This can be useful if we want to generate our own textures, save a screenshot or create shadows using shadow maps. After we render the image we can then use it as any other regular texture in our shaders. In this application we will replace the texture of the bottom-right corner of the image from the crate texture to a scene of the same cube on the main part of the screen only on a different color background.

Sunday, October 23, 2011

Projective Texturing

Sometimes we will need to apply a texture just like a projector would. This technique can help us create different effects like the Batman sign on the night sky or water caustics.

Monday, May 9, 2011

Environmental Reflections

Shiny objects in your game should be able to reflect the environment around them. Don't think that you can use a mirror technique everywhere, the reflections on a car will require a high number of directions to reflect so it will become almost impossible to compute them. We can use a cube map to simulate the reflections of the environment around the object. Cube mapping helps us because we don't need to actually reflect the items, we just have to do a texture look-up and that's it.

Wednesday, May 4, 2011

Loading a model with a custom effect

XNA allows us to use complex 3D models very easily, we just use the content pipeline and load a model into the game just like a texture. It will have everything it needs, vertex buffers, index buffers, bones, effects, textures. All we will have to do is set our effect parameters (for each effect in the mesh) and draw it. But by default the Model class uses one of the 5 build-in effects and as  I love shaders, I want to make it run with one of my own.

Tuesday, May 3, 2011

Creating a Sky Box

If your game is going to have a part that you play outside you will also need a sky. One of the most simple ways to get this is by simply using a cube map to create a sky box. What you will do is create a cube map that has all 6 faces mapped to a cube surrounding the player. Simple huh? Well it is and you should get results like this one:

Screenshot from the finished tutorial

Monday, May 2, 2011

Cube Mapping

Environmental reflections can be very expensive to compute, luckily we can use a cube map accomplish this.  Cube maps are textures that help us map the environment on a 3D object like so:

Environmental reflections on a skull

Sunday, May 1, 2011

Using the stencil buffer, rendering a stencil mirror

As we've seen the stencil buffer helps us to stop some pixels from ever being drawn to the screen, also the rasterizer is configurable in such a way that we can tell it how to draw geometry. In this short tutorial you will see how to combine these 2 to get a mirror effect.

How the rasterization process works, the RasterizerState object

You probably noticed that when we draw something we use polygons (triangles) but on screen we have pixels. The process of converting from triangles to pixels on the screen. We can play with this process by using a few settings exposed to us by the RasterizerObject.

How depth and stencil testing work, the DepthStencilState object

You probably have noticed that when more than one object is drawn in the same place on the GPU the closer object is the one we will see on screen. That makes sense right? You can't see objects that are behind other objects (I'm talking about opaque objects).  This is the result of the depth test. The GPU looks at the different pixels and compares their respective depth values, the smaller (closer) ones get drawn while the others are discarded. We can change this behavior and set up another one, the stencil test, which is completely configurable.

Saturday, April 30, 2011

Moving files to dropbox

Wiki upload is just ridiculous! After only a few days of no activity they remove the files, it's okay if you want to upload something at home and download it at work or for big files, but it's useless for what i need! I need to have files uploaded to a server, ready for download any time for unlimited time. That's why I'm moving all my files to dropbox! It's easy to use, I just have a folder on my computer where I copy the files I want, and BAM! they're online. I'm limited to 2 Gigs at the moment but I don't need that much and they will be there as long as I need them to be (as long as this blog exists). I've updated the source code post with this info too.

Also if you want to use dropbox too and would like to help me increase the 2GB limit please create an account using this link, I will get 250MB more space for each person (limit 8GB) and they say you will get 250MB too, thank you.

Multipass lighting

Rendering a single light in a scene won't help us too much, we must be able to draw more than just one light, of course we could easily just create a pixel shader that takes into account more than one light, but this techniques will only work in fixed circumstances. Another approach is to use multipass lighting, this technique renders the scene more than once, each time adding the new light components into the mix. Multipassing can also be used for more advanced techniques so it is important to see a working example early.

Thursday, April 28, 2011

How blending works, the BlendState object

Blending is the process of combing color data. We already saw how to combine textures with multitexturing, but what about combing the colors of different objects? Blending will allow us to combine the colors of multiple objects in many ways, this type of techniques will allow us to draw translucent objects or combine multiple pixel shaders over the same object.

Using state objects in XNA

Changing render states in shaders can become very inefficient and cumbersome. Another option is to use state objects, these are classes already existent in the XNA framework that we can use to set all the required rendering settings in a easy and efficient way. This post is more for orientation purpose than an actual reference.

Wednesday, April 27, 2011

Implementing Basic Lights

Rendering lights is one of the most important aspects of 3D graphics. Lights give an object shape and volume, the increase the depth of objects and induce very realistic details into the final details. Learning to render even the most basic lights is important.

Simple directional light

Monday, April 25, 2011

How lighting works

Simply rendering geometry and applying a color or texture won't get us too far down the realism path. To get more visually accurate renders we need to take into account light:

Skull with 1 point light

Multiple textures

Rendering a single texture on a surface can be very dull, what we will see in this tutorial is how we can combine more than one texture to obtain a more complex effect.

Substracting a texture from our textured cube

Multiple techniques in one effect

In our effect files we can have more than just one technique. Different techniques can have different number of passes and can call different pixel and vertex shaders, it's all very simple but still, it's worth mentioning.

Sunday, April 24, 2011

Simple texturing

To increase the realism of our scene we can add textures to our 3D models. Textures are a great and simple way to increase the detail of our game, they are used for a lot of different effects like normal mapping. But let's not get ahead of ourselves and just see how we can render a simple textured cube:

Drawing a simple cube

The most simple 3D rendering example (I can think of) is that of a colored cube:

Rendering a simple cube

Saturday, April 23, 2011

Source code

I will start uploading code along with my tutorials, the files will be uploaded on dropbox. You will find download link at the beginning  and end of tutorials. Why? Because I will offer both the start and finished version of tutorials.

Anatomy of an effect file

To be able to render geometry to the screen using our own shader programs we must create an effect file. Effect files contain our vertex and pixel shaders and all other variables they require to run.

Saturday, April 16, 2011

Create your own Vertex Structure

Because we send our geometry as vertices to the graphics card we need a structure that can hold all the information that we need. XNA already has 4 vertex types by default, we can use one of these, but what happens when if we need another vertex type? Well we will need to create our own vertex structure that has everything we need.

Thursday, April 14, 2011

Creating a basic IndexBuffer

When rendering geometry we have to sent it as primitives to the graphics card. In XNA we have to send lines or triangles, so what happens when I have to render a square? I have to draw 2 triangles, the problem here is that I'll have to store 6 vertices to render 2 triangles when I can actually use only 4 for a square, so there must be a better way to do this, to reuse the vertices I have. The index buffer addresses just this problem.

Wednesday, April 13, 2011

Creating a basic VertexBuffer

When rendering on a graphics card you specify a geometry for it to draw. This geometry is usually in a VertexBuffer and then processed by the rendering pipeline to create the image we see on screen. So, if the VertexBuffer is so important, how do we create one?

Anatomy of a XNA project

So, you want to do some graphics programming in XNA 4.0 huh? Well first of all you have to create a new project. Yup, this is what this post is all about. Just hit File->New->Project.

Tuesday, April 12, 2011

My First Blog

Hi there,

 First of all I'd like to say I'm really glad you are reading this! This is my first blog and I hope to make it a wonderful place for people to visit and find useful information (about shaders and related topics).

 Who am I? Well I'm just a little student that likes graphics programming and wants to help out people that just started or want to begin learning this field of programming. If you are wondering I'm a third year student at a four year university and have taught some students XNA and a few things about shader programming. Oh and btw my name is Adrian (almost forgot to say that), what's yours? Really? Nice to meet you!