Why are decals important?

The decal is one of my favorite 3D graphics tools. It serves so many purposes: covering seams, spicing up tiling textures, adding unique details, and allowing dynamic cosmetic environmental changes. Here is a naked 'land chunk' model, with no decals:

Here is the same model again after adding a rock decal and a moss decal:

As you can see, the surface is now more interesting and detailed, and the transition between the ground and the 'land chunk' is less abrupt and unrealistic.

How do decals work?

We've already discussed the user interface for adding decals in parts one and two, so now I will talk about how the shading works. We start by placing a couple decals using the decal editor.

As each decal is placed, it creates a small 'base normal' map (the 'normal' of a surface is a vector perpendicular to it) and blurs it slightly to remove any seams. Here is what the base normal map looks like for these decals. The red, green, and blue channels represent the X, Y and Z axes respectively, so the surfaces pointing up (+Y) are green, surfaces facing 'right' (+X) are red, and surfaces facing 'in' (+Z) are blue.

The decals use the alpha channel of their color map to control their transparency. Here is the base normal map color combined with the decal map alpha, so we can see how much of the base mesh shows through.

The base normal map is then combined with the decal normal map to get the final surface normals. This is used to make the lighting respond to the surface details of the decals, such as the roughness of the moss and the smooth roundness of the rocks.

Here is what the direct diffuse lighting looks like on the final normal map. This is easy to calculate because we are using world-space normals -- we just have to calculate the dot product of the light vector and the normal vector in the fragment shader. We don't have to worry at all about tangents and bitangents.

Finally, we modulate the decals by their color channels, and add ambient lighting. The decals blend into the scene very well because they are using the same lighting model as everything else.

In Lugaru I used decals for all sorts of effects, including footprints, wall cracks, blood puddles, and shadows. Can you think of anything special we can use decals for in Overgrowth?

When I was at GDC this year, one of the IGF finalists that really caught my eye was a sidescrolling platformer brawler called Cletus Clay. The game is being developed by team Tuna and has you play the role of a friendly farmer who suddenly finds his land under attack by an alien invasion.

What really blew me away was the fact that all of the game's artwork and animations are made from clay models and claymation. After devouring the Cletus demo's fun arcade-style gameplay at the Tuna IGF booth, I had a chance to talk to members of the Tuna dev team. Among them, was Sarah Quick, one of the team's amazing clay modelers.

We've stayed in touch and have had a few brainstorms about ways to spread awareness of indie games. I've definitely shown her our indie PR tips but I also couldn't help but mention that if she had time to make us a ninja rabbit out of clay, we would definitely give Cletus a shout out on the Wolfire Blog. To our delight, Sarah took me up on my offer. Below are some of the work-in-progress shots and more can be found on the Overgrowth Facebook Page.

Sarah told me this bunny took her about 8 hours to complete. You can see he has a matchstick endoskeleton that makes him sturdy enough to stand up on his own and Sarah even went the extra mile to give him pantaloons, blade weapons and rope. Below is the final version.

This masterful 3D manifestation of Aubrey's concept art exceeded our expectations and alludes to the care and quality that you can expect to be a part of Cletus Clay.

Be sure to check out the Cletus videos on Tuna's YouTube channel and keep up with the latest development gossip on the Cletus Clay Twitter feed. This game is going to be something special. Thanks again Sarah and good luck to you and your team!

If any other indies out there are interested in arranging for a guest post on the Wolfire Blog, please contact us. Making us a ninja rabbit is a surefire way to win us over.

Here is what is new in Overgrowth in this weekly alpha. If you are confused what a weekly alpha is, or even what Overgrowth is, please read our fancy FAQ. Basically, we are developing a massive video game from the ground up -- we are able to do this completely independently by accepting preorders for the game before it's done!

Apple's WWDC is over and we got back from a weekend in Sierra City. David is working hard on the fighting system, and this alpha contains the first serious prototype, complete with blocking, grabbing, counters, and punching. Phillip also has added a few more mapping features and has gotten it relatively stable again. We will have some videos and more details about the fighting system soon.

I don't have much more to say, so here is a picture of my parents' new puppy, Sulfie, in a wheelbarrow.

Here are a few highlights from the source repository:

- Added first fighting prototype (power strikes, quick strikes, dodging, countering, throwing)
- Undo / redo is back for transformations
- Grouping is mostly back
- Decal object missing tool added (select a decal, hold o, and click an object hit by the decal)
- Simple paintbrush is back
- Added timer to control scrolling
- Bug fixes

Thanks as always for all the support! See you guys in IRC and the forums.

Sometimes we spend so much time programming and playing video games (and Magic cards), that we forget what the real world looks like. Luckily, this weekend, we took a trip to Sierra City, and had a chance to reconnect with nature.

Sierra City, CA

Today, we set off on a hike for Haskell Peak. We had some old hand-written directions, but I thought it would be easier to just punch the coordinates into my trusty GPS. Unfortunately, I plugged in the coordinates for the actual summit of the peak rather than the trailhead. We started driving up, but before we knew it, the road had changed into a rough, dirt trail -- which we later realized was probably intended for walking. We had actually driven up a good portion of the hike. It was pretty surreal to be driving through thick forest. After a while, the car started getting buffeted by rocks in the trail and eventually there was an impassible snowbank, so we had to stop. Worried that we were obstructing the trail, we parked half on and half off the hill next to the trail.

As we walked, we noticed that a lot of the vegetation looked unusual. If we included it in Overgowth, people would maybe complain that it's unrealistic. We experienced this earlier when we included Yosemite USGS data to generate a level in the game and the peaks were criticized as being too exaggerated. Here are a few examples:

This clearing is clich. Is this Little Red Riding Hood?

What is this clown doing in the ground?

You have some funky rendering artifacts on your tree model.

Hey Nature, your moss is way too green. Your texture channels are way off.

It was great to get out and take a lot of photos for reference and inspiration. What do you guys think about nature? Is it as good as video games?

Since launching the Overgrowth webcomic a few days ago, a lot of people have been asking about our custom viewer. Here's a brief outline of all of its features and some insight on how each of them work.

Preloading and AJAX
When you navigate in the comic viewer, it doesn't actually load a new page, it simply loads the necessary image. This is much more efficient, because it is a single HTTP request, instead of having to load the entire page again. Additionally, when you access the webcomic, it begins preloading the next several panels in the background. This minimizes the load time as you navigate because the images will already be in your browser's cache. If all goes well, you shouldn't see a single panel loading. Many sites use the old fashioned model because it racks up many pageviews, which results in more adviews. Luckily, we don't have to worry about that.

I tried to optimize the comic as much as possible, for instance, combining all of the images into sprites, and following all of the best practices.

High definition

HD is always cool.

I think that this is my favorite feature. Aubrey draws all of the art at an extremely high resolution. I wrote a script that downsamples them to two resolutions, 800x500 and 1280x960. By default, the viewer displays all of the comics at the lower resolution, but if you click the HD button in the bottom right, the comic viewer dynamically resizes and all of the images are swapped out for the higher resolution versions.

High resolution images are relatively heavy on the bandwidth, but it is actually way smaller than even a small video. The comic is hosted on Google App Engine, which means means that the comic can scale pretty much indefinitely and also costs about $0 to run.

Dim the lights
This is a feature inspired by Hulu. If you click the lightbulb button, the background becomes desaturated, becoming less distracting. This effect looks a lot more complicated than it is. The background is desaturated beforehand and I simply fade it in as a layer above the regular background. Here are the two backgrounds for comparison: regular, desaturated.

Referral system
One thing I was really worried about is that Aubrey and David would spend a lot of effort making a sweet comic, and everyone on the blog / forums would say "noice comic!" but then that would be that. Instead of begging people to pass the comic on to their friends, I thought a small incentive (seeing the upcoming comics early) would be a lot more effective. So far about half of our views are thanks to referrals, so thanks guys, for spreading the word!

Bookmark
As you navigate through the webcomic, the bookmark slider will remember your furthest location. You can drag and drop the bookmark to change the location. This is stored clientside with a simple cookie. This feature should be a huge convenience as more and more slides get added to the comic.

Quick navigation
If you click on the slider bar at the bottom of the viewer, you can quickly jump to any panel. I got a little carried away with making the animation. It will actually scroll through all the intermediate panels when you click on it, but way too fast to actually see them.

What other features would you like to see in a comic viewer?