My Writings. My Thoughts.

Dynamic Billboarded Integer Rendering

// June 13th, 2010 // No Comments » // My Graphics Programming, My Stuff

Aliens Dynamic Score

A few months ago I was working on Aliens and implementing a new scoring system. I ran into an issue: I needed a way to dynamically render a number (basically a point value) on a billboarded quad. It had to be dynamic because the value of each item would change based on a multiplier, which could also change at any time. I could have done it as a UI element instead of actual geometry, but that didn’t feel right for the game. I was committed to having the scores be billboarded quads in the scene.

Aliens Dynamic Score

My first thought was to simply render a number to a texture and apply that texture to the quads. This would work great if I needed few unique numbers. I could render the current numbers to a few textures, or create a large texture with multiple numbers and map the numbers to different quads. I quickly realized that this wouldn’t work for Aliens; if different items were worth different amounts, and your multiplier was frequently changing, the quantity of different numbers that were required would be changing as well. Since the quads fade in and out, the player could destroy an object worth 500 points, get a multiplier, and then destroy the same type of object which is now worth 1000 points. Both quads would be on the screen at the same time. It could get hairy fast.

I needed the whole process to be dynamic, so that I could feed an integer to the shader and have it render. I wrestled with it for a few days until I came up with the solution I ended up using: If I could get both the number of digits in a number, and any one digit based on the position inside the quad, I could render that number.  The results were exactly what I wanted: Dynamic numbers on geometry in the scene, in a font that matched the rest of the game.

So how does it work?  I’ve got some shader code below that shows the process.  Several pieces of data are passed in: the number itself, the number of digits, the age of the quad, a scale and a color.  The number, scale and color are self-explanatory.  The number of digits is used in several places.  It could have been calculated in the shader, but it seemed better to calculate it once when the quad was created.  The age of the quad is used to fade it in and out, as well as make it float upwards.  The numbers are pulled from a greyscale texture:

Digit Texture

Below is my vertex shader code.  The first block of code does the billboarding and scaling.  The overall scale and Y position are based on age.  This allows the quad to grow and move upwards over time.  The width is based on the number of digits that we need to render; the quad auto-adjusts to fit the number. The BigUV output parameter scales the overall UV by the number of digits, which is used in the pixel shader to determine which digit a particular pixel represents. There are constants mixed in which adjust the height and alpha (to achieve the exact look I wanted).

1
2
3
4
5
6
7
8
9
10
11
12
13
// Calculate the position
scale *= 1.0f + age;
output.Position = mul(float4(0, 0, 0, 1), mul(World, View));
output.Position.x += input.Position.x * scale * numDigits;
output.Position.y += input.Position.y * scale * 1.5f + (15.0f * age) + 5.0f;
output.Position = mul(output.Position, Projection);

// Pass the UVs through
output.UV = input.UV;
output.BigUV = input.UV.x * numDigits;

// Adjust the alpha based on age
output.Alpha = saturate(5.0f - abs(age * 10.0f - 5.0f));

The pixel shader code below determines which place the current pixel represents and which digit from the digit texture it needs to sample.

1
2
3
4
5
6
7
8
9
10
11
12
13
// Get the current digit
float place = numDigits - floor(input.BigUV);
float digit = floor((number % pow(10, place)) / pow(10, place - 1));

// Calculate the correct U coord
float u = input.BigUV.x - floor(input.BigUV.x);
u *= 0.1f;
u += digit * 0.1f;
input.UV.x = u;

// Return the correct color
color.a = input.Alpha;
return tex2D(digitSampler, input.UV) * color;

Dynamic Billboarded Integer Rendering

That’s about it! I haven’t really done any optimization, and my math may be a little verbose, but it works pretty well. I’ve been meaning to make a post about this for a while, but I haven’t been working on Aliens since development started on Blocks. Once Blocks wraps up, I’ll probably revisit this (and start refactoring most of Aliens). I made a simple info-graphic on the overall process, which may or may not help visualize what’s going on.

-Chris

XNA Fur Rendering

// November 22nd, 2009 // No Comments » // My Graphics Programming

I was pretty sick last weekend, and sticking to my odd “get sick, code something” habit, I decided to finally try to make a fur rendering demo. I read a few articles about it years ago, so I knew the general concept behind it: render lots of “shells” around the model with an appropriate fur texture. The fur texture is basically a transparent texture with dots on it, and as the shells get layered on top of each other, the dots are essentially extruded into individual furs (without having to render each fur individually).

I’ve seen fur effects used in a few games, notably Star Fox Adventures for the GameCube, and the more recent Super Mario Galaxy for the Wii. I have no idea if they are using the same technique, but the Super Mario Galaxy queen bee looks similar.

What really got me thinking about finally starting this demo was an article I found on reddit. The article is from xbdev.net, and is (appropriately) called Generating Fur in DirectX or OpenGL Easily. While it’s not the most well-written article I’ve ever read (especially the comments in the provided code), it has some nice diagrams and screenshots of the technique in progress. If you’re interested in learning more about fur rendering, I’d suggest starting there.

After reading that article, I decided to go for it. I got the basics up and running pretty quickly. I added some camera controls and the ability to change a few things on the fly (like the fur length), mostly for testing purposes. One of the first things you notice with basic fur rendering is that everything is the same color, so you only notice the “fur” aspect of it around the edges. I added some basic N dot L lighting and I modified the fur by the model’s texture so it wasn’t all the exactly the same. This helped a bit, but the hairs were still bleeding into each other and not looking very fur-like. Clearly some sort of individual fur shading was needed.

I went back to the fur article linked above to check out their shadowing technique. To be honest, I’m not 100% sure I even implemented it the way they explained it (which I would have to describe as “poorly”). The gist of it is to re-render each shell, offsetting the texture a bit and making it look like a shadow. I didn’t like it from the start. Double the number of shells that need to be rendered? No thanks. I didn’t need to render an actual shadow of each fur. I just wanted the fur to get darker the “deeper” it was, so that’s what I did. The shells closer to the model are rendered a bit darker, and they get brighter as they get further away. The last piece of this puzzle was to make sure the model itself was rendered slightly darker, giving the illusion that the fur is shading the scalp.

One thing I did implement from the article was the concept of gravity affecting the fur. Each shell is offset a tiny bit in the negative Y direction (based on a power function) to give the impression that the fur is bending due to gravity. It’s a very nice effect, and it was easy to implement. I decided to take it a step further and make the fur react as you drag the model around. When you drag it, the fur gets stretched in the opposite direction and slowly interpolates back to its normal “bent” position. It’s fake physics, but it looks neat.

I’ve got some plans to continue this the next time I’m bored. A few features off the top of my head would be: multiple models & swapping at run time, more controls for different settings (gravity, fur density, etc) and adding a fur length map, so certain sections of the model can have different lengths of fur (or be bald).

-Chris

My World of Warcraft Video

// June 17th, 2009 // No Comments » // My Videos

I just did a quick portfolio update to include the World of Warcraft video/movie I did. It won 6th place in the Comedy category of the very first World of Warcraft / Xfire movie contest. I ended up getting a PCMCIA sound card as a prize. Woohoo? I still have the thing in a drawer somewhere, unopened.

I had actually forgotten all about this movie until today. Luckily I recently put Windows 7 on my old Alienware laptop, so I was able to get the original video file off of there with no problems. I even found some old pictures of the setup I used when recording the in-game “footage”, so I threw them in the portfolio as well.

I had a lot of fun writing the script, blocking out all the shots and editing everything together. I definitely learned a lot about the whole process as well. The biggest lesson was: don’t try to do it in a weekend. I had planned on doing it for so long, gave up on the idea right as the contest started, and finally said “screw it, I’m doing it” 4 days before it was due. I had so much footage to go through, and not enough time to really tighten everything up. Overall I think it was decent, although I can’t stand watching it anymore. All I see are the problems and the areas I wasn’t satisfied with. I always meant to do a sequel, or at least another movie, but school has taken up most of my time until recently (when I graduated).

I’m embedding a version that was uploaded to Google Video below. I didn’t actually do the upload, some random person decided to download it from the official movie site and upload it. Fair enough. Looks like they uploaded it on March 14th, 2006. Crazy. For a higher quality version, take a look at my portfolio.

Also, just as a quick comment: I usually refrain from using the word “machinima”. This is mostly because I think it’s a terrible term, just awful. Also, no one seems to know how to pronounce it correctly.

-Chris

Arthas Gettin’ Down In Luster

// June 12th, 2009 // No Comments » // Luster

Arthas in Luster

I recently finished up a really cool skeletal animation tech demo for Darkwind.  I was able to get the model of Arthas (aka the Lich King) from World of Warcraft and do my own little animation on it.  I brought the animated model into Luster and added some nice lighting and shadow effects. These effects include per-pixel lighting, normal maps, shadows maps and variance shadow maps (VSMs). There is a video of the Skeletal Animation Tech Demo below, and more screenshots available in the Luster Gallery.

I also did a longer write-up of the whole process on the Darkwind Media blog.

-Chris

Videos, Themes and Dreams

// May 16th, 2009 // No Comments » // Misc

Turns out I lied about settling on a theme. Oh well. I really do like the one I’m currently using though. Not only does it look decent, but it’s customizable and I fit in my “cartoon/avatar” thing. The colors are not that great between the cartoon and the background, but it’ll do for now.

I figured I’d post this video of Choof and I at the office, mostly because the last video I posted has an ugly still. Plus I find it far too amusing.

Speaking of videos, I recently emailed the small YouTube playlist I made of our Dimension Break videos to someone in the games industry. I’m pretty sure of two things: A: I won’t be hearing back and B: I probably sounded like a complete idiot. But you gotta take a chance sometimes, right? Nothing ventured, nothing gained. Not that I’m looking for anything out of it. I’m mostly hoping for feedback and, if I’m lucky, to start a discussion. We’ll see. I’m sure I’ll yell it from the highest mountain tops if I actually do hear back, even if the email says “Go away, you smell”.

I have to add Dimension Break (and Rocktropolis for that matter) to my portfolio. And then redo the damn thing because I hate it. Well, that’s not true. I dislike the transitions between “pages”, so I just need to make them look a bit nicer. Once that’s done I’ll feel a whole lot better about it.

-Chris

New Dimension Break Video

// May 13th, 2009 // No Comments » // My Games

I finally got around to putting together a video of the old portal tech test I did for Dimension Break. It’s nothing fancy, but I’ve wanted to be able to show it for a while now. I’d really like to go back and polish it up a bit. Maybe finally implement the more Portal-esque portals for fun.

-Chris

Dimension Break Video

// April 5th, 2009 // No Comments » // My Games

I made a video of Dimension Break with some footage I took before the GDC.  I have it up on games.rit.edu, as well as YouTube.

I wish I could have taken some better videos, but the game isn’t quite ready yet.  Hopefully soon though!

-Chris

I Knew It

// April 5th, 2009 // No Comments » // Misc

Yeah, that theme didn’t last very long. After playing around with every theme I could get my hands on, I think this is going to be the one (until I get tired of it, that is). I think I’d be less picky if it wasn’t so easy to swap between them at will. I’m just not in the mood to design my own at the moment, so “Gear” it is. I’m pretty happy with it, although I’m sure I’ll photoshop a new icon or two.

-Chris

A Theme?

// April 4th, 2009 // No Comments » // Misc

I think i’ve settled on a theme (for now).  I’m far too indecisive when it comes to my own stuff.  We’ll see how long it lasts.

-Chris

Every Saga has a Beginning

// April 3rd, 2009 // No Comments » // Misc

I guess it was about time.  I’ve had the same “splash screen” on my website for over two years, and since I finally finished my portfolio I figured some sort of change was in order.  Here goes nothing!

-Chris

P.S. I hate the term “blog”, so I’m just going to refer to this as my “website”.  Sound good?