Throwing Rocks at Frogs

Exploding frogs - what's not to like about that?

Frogs in Block World

Slow week since my graphics card died on me over the weekend. I finally got up and running again last night.

To celebrate my new graphics card, I made some frogs.

Block Models

I am currently working on adding more details to my Block World environment. This will be done mostly through the use of what I am calling "Block Models" - meshes generated from a 3D cubic grid of "trixels".

I started with 16x16x16 grid and did a test to see how many I could render. Quite a few, it turns out.

Another Block World Island

Here's a shot of another island in Block World.

Block World

Here is a little video to show the current state of my "Block World".

I've implemented a physics model and added some basic terrain editing. The next step will be to increase the diversity of the landscape - adding angled ramps (but still keeping things blocky) and some decorations (bushes, trees, etc.)

Lo Fi

Inspired by Minecraft (which I find interesting, but have no real desire to "play") and 3D Dot Game Heroes (which I ordered today), I spent the day messing around with this.

I'm not yet sure if I will do anything with it, but I think it looks cool.

Bike Gameplay Video

Here is a short video showing the current state of my bike game.

The physics is not quite where I want it yet, I need a real motorbike engine sound, and I need a more interesting track (currently I'm using the track path I showed in my previous post with some "humps" added in along the route to make things a bit more interesting).

Progress is being made, though.

Bike Paths

I wouldn't have much of a bike game without a track, so that's what I've been working on today. The red points are editable control points and I interpolate the other points using Catmull-Rom Splines.

The track is just X-Y coordinates, with the Z value obtained from the height of the terrain.

Potential new game WIP

I had been working on some sort of flight mechanic as the gameplay for my next project.

Then, I had a thought - what about bikes?

Trees Using Model Instancing

I'm working on getting more detail into my islands, so adding trees was an obvious next step. To draw them efficiently, I'm using model instancing - a technique that allows you to render multiple instances of the same geometry in a single draw call.

Terrain Level-Of-Detail: Dealing with Seams

Handling Level-Of-Detail (LOD) gracefully for terrain turns out to be tougher than you might expect. Terrain has a particular characteristic that you don't usually have to deal with when doing LOD for other kinds of objects (ie: trees, etc.) - it is continuous. That creates problems.

Initially, I was doing LOD on an entire island-by-island basis. I could increase or decrease the detail of the island based on distance, but the entire island had the same level of detail. That worked ok, but it was inefficient and I knew I would eventually outgrow it.

Above, you can see my current method for doing terrain LOD. Instead of the terrain being composed of a single grid mesh, it is now broken down into concentric square "rings". With each successive ring, the grid size is doubled. As the camera moves, the grid moves with it so that the highly detailed area is always nearby.

The big win you get from doing this is that the number of triangles you need to draw increases linearly with the size of the terrain, rather than exponentially with the area. The down side is that you have to deal with seams. Where one level of detail meets the next, you get discontinuities in the terrain. As you can see below, this is clearly not acceptable:



It took me a while before I came up with a solution to the seam problem that I was happy with. Most techniques for handling seams revolve around adding extra geometry to "stitch" the edges together. I really didn't want to resort to that unless I had to.

Yesterday I finally came up with a good solution. I'll see if I can explain it in a way that makes sense. The situation that creates seams is the edge between one ring and the next ring with half as many grid squares. As you can see below, where the two rings share an edge, the more detailed ring samples an extra height point between each point on the less detailed ring. This creates a gap in the mesh:



Conceptually, my solution was to force the heights of the extra middle points on the edge of the more detailed grid to be the average of the two points on either side - essentially simulating the edges of the neighboring, less detailed grid. In practice, though, it is a bit more tricky. I couldn't do the averaging in the terrain shader since it only has very local access to one vertex at a time.

Since my height data is passed to the shader in a texture (rather than being baked into the vertices themselves), I was able to create a secondary texture at each level of detail where I pre-set the averaged intermediate points. Then I configured my grid vertex data with an extra piece of data (currently in the otherwise unused 'Z' component of position) - a blend amount between the averaged height texture and the unmodified texture. Edge vertices have this set to 1, while it is zero elsewhere.

So far it seems to be working really well. Here is the same picture from above, but now using the averaging technique:



Yay - no seams!

Terrain Rendering Progress

It isn't Crysis or Just Cause 2 yet, but my terrain rendering system is coming along nicely.

Here is a flyover video. Any stuttering in the video is from the capture and encoding process - it runs butter-smooth.



Techniques I'm currently using:

• Terrain generation with L3DT.
• Skybox rendered with Terragen and cube-maped with AMD CupeMapGen.
• Texture splatting for landscape detailing.
• Water shading based on a modified version of Kyle Hayward's water component with the addition of variable water transparency depending on water depth.
• Bloom and Lens Flare based on Microsoft's XNA samples.
• Simple terrain Level-Of-Detail system. It currently works at a whole-island level - I'll likely have to move to a more complicated approach.

Sky

I just finished adding a skybox to my scene (rendered with Terragen, put into a cubemap texture with AMD CupeMapGen). The water looks much more interesting when it has something to reflect.

New Project

With Avatar Pinball now in peer review, it was time to move on to a new project. Since the backdrop for my next game is a set of islands, I needed to create a terrain rendering system. I've only been working on it for a couple of days, but as you can see above, I've already managed to get pretty far.

I'm using similar techniques to those I described a few years ago when I was working with TV3D. In this case, however, I'm using my own shader to do the texture splatting.

The water is done using a modified version of Kyle Hayward's water component for XNA.

3D Landscape Rendering With Texture Splatting

The above image is from a project I'm working on at the moment. It took a bit of research and trial and error to get to this point, so I thought I would take a moment to share some of what I've learned along the way.

One of the key elements of many types of 3D games is rendering realistic-looking landscapes, and one of the key elements of rendering a realistic-looking landscape is being able to texture the landscape so it looks good both at a distance and up close, all without completely killing the framerate. A technique known as texture splatting allows us to do just that.

But first, a few landscape basics. A rendered landscape has two basic elements -- an elevation, or height map and texturing. The information for both of these can be generated by a landscape generation program. The one I use is a fantastic program called L3DT. It uses all sorts of fancy techniques to generate realistic looking terrain, and can output a number of useful data files that can be used inside a 3D engine to display the landscape.

First, the height map. This is generally exported as a grayscale image, with lighter areas being higher in elevation. Here is an example:



L3DT can also generate a corresponding texture image that represents the type of the terrain and also bakes in lighting information:



Using just these two images, we can already generate a pretty decent 3D visualization of the landscape. All we do is create a terrain mesh based on the height map and stretch the texture image completely over it. The result is something like this:



Looks pretty good, right? Well, there is a problem. It looks good at a distance because we are seeing the texture image at roughly it's actual resolution. When we render up close it is a different story altogether:



Not so hot. The texture image just doesn't have enough resolution to show detail up close. We could increase the resolution of the texture, but that quickly breaks down -- it simply takes too much memory in the graphics card.

This is where texture splatting comes in. What we want to do is supplement the high-level texture with some low-level details. To do this, we render some number of tiled-texture detail layers on top of the high-level texture. Each detail layer alpha-blended with the rest using an alpha map that represents the "amount" of the detail texture at any given point on the landscape. As a simple example, lets say that we have two detail textures -- grass and rock. Here are the two alpha maps, one for each, that can be used to control the texture splatting, along with an example subregion of the grass and rock detail textures I am using:




In the alpha maps, lighter areas mean more of the texture, with white being solid and black being fully transparent. These simple alpha maps will result in a landscape that is half grass and half rock, with a transition in the middle. If we use these alpha maps and apply them to our height map from earlier, we get this:



Kind of silly looking, but I hope it serves as a good example to understand how the alpha maps determine how the textures are rendered on the landscape.

For a real example, however, we will want alpha maps that match our landscape texture. Fortunately, L3DT can export these as well. For each terrain type L3DT is using to generate the landscape, it can export an alpha map that represents the density of that kind of terrain. For example, here is the grass density map it generates:



As you can see, we have grass all over the island area except for certain steep sections that contain rock. One thing to note here is that I have slightly modified the alpha map L3DT produces by taking the brightness down by about a quarter. This is so that we will still be able to see the high-level texture under the splatting layer.

Here is the result with splatting. I am using three splatting layers -- grass, rock and sand (which you can see a bit on the shore).



As you can see, we have nice details up close, while still retaining the color variation and shadowing from the high-level texture. By using the high-level texture as a base, you can often get by with just a few splatting layers. They only need to be used to highlight textural differences, not color differences since the color variation is provided by the high-level texture base. Here is an example of this:



You can see the rock texture blend into the grass texture. This is caused by the alpha maps. The variation in lightness within the rock area, however, just comes from color variation in the high-level texture base.

That's it. Hopefully this helped to explain what texture splatting is, why it is useful and how you use it.

Some additional notes:

• How to actually *do* the splatting: Your best bet is to use an engine that supports it. I use Truevision3d. Failing that, you'll need to implement a splatting shader yourself that blends the base texture with the splatting layers while tiling the detail textures.
• Notes on detail textures: Use high-contrast textures with a lot of fine detail. Avoid textures with high-level variation in them or you will see tiling patterns on your landscape.
• About the water: The water in the pictures uses a modified version of Zak's Ocean Shader. Thanks, Zak!
• About the sky: It is a skybox rendered with Terragen.
• About the trees and grass in the first picture: The trees are just individual meshes. The grass is billboarded (rectangular textures that are rotated to always face the camera) using a custom groundcover system.
  
• How to use splatting in Truevision3d: I'll write up an example soon.