In this update, I'm going to look at how I make the paper for Blue Comb.

A big part of the appeal of Origami (the real thing, and my simulation of it) is the aesthetic of paper. I wanted the materials in the game to capture as much of that look as I could achieve.

With no material applied, the simulation looks like this:

paper09.jpg

It has some slightly papery crumples on it, but otherwise it looks like it's made of plastic. What I want is more like this:

paper04.jpg

Or even this:

paper07.jpg

So how's that done?

There are 3 elements we need to achieve that look:

  • Diffuse texture - this is the colouring of the paper. With your standard bleached machine-made paper, this is basically just white. However, there are lots of interesting craft papers whose fibres display a lot of variation, and I wanted to be able to simulate them.
  • Surface normal - this captures the bumpiness of the surface. The tiny variations in height caused by the fibrous structure of the paper produce variations in light & shadow that become increasingly visible with shallower angles of light.
  • Opacity map - This is possibly the most important part of the papery illusion. Paper is very thin, so light shining through from behind contributes a lot to the overall lighting. You can clearly see this effect in the paper faces sticking up in the images above.

The first thing I did was to buy a bunch of paper from the art shop, and try capturing these details directly. This image shows a very fibrous sheet of paper under varying lighting conditions. It's the same portion of the same piece of paper in each grid square, but you can see how different the lighting can make it look.

paperportion.jpg

The top row has the light coming mostly from behind, showing the effect of varying opacity. The bigger, thicker fibres block more light, and are darker.

The middle row has very glancing light coming in from the left, and is dominated by surface shadows. (This paper was artfully crumpled, so the contribution of the fibres' shadows is hard to make out.)

The bottom row has the light coming increasingly in line with the viewer, and shows the surface colour.

For a while I got quite excited about the idea of using these images directly. The material shader would take the direction of the incoming light on the paper, and use that to look up a paper image taken under the same lighting. It seemed like a promising approach, but ultimately it always looked like a computer model with a photograph textured onto it.

Next, I tried capturing the various elements from real samples of paper. The diffuse and opacity maps are straightforward enough, but capturing the normal map proved very difficult. There are various tools out there which can reconstruct the surface from images taken under controlled lighting conditions, but because paper's details are so small, I struggled to get useable results which aligned convincingly with the other textures.

What I failed to try until just a couple of minutes ago while writing this blog entry was treating the opacity map as a height map and deriving the normal map from that. In other words, take a backlit image of the paper, and, on the assumption that the darker areas are where the paper is thicker, and the thicker areas are where the surface is higher, run it through a standard filter which computes surface normals from height maps. Early tests look promising. Hmm.

Anyway! I didn't do that; I decided to generate the paper procedurally, giving me full control over every aspect of the appearance, the ability to pull out any properties I need for rendering, and seamless tiling.

Paper is made by mixing a whole lot of fibres into water, and then draining the water from them. The fibres end up randomly layered together. To simulate this, I first need to be able to create something that looks like a fibre. What I do for each fibre is create a spline from some random control points, and then add variations of that spline by randomly perturbing the control points. This produces a satisfyingly fibrous clump of wiggles.

flocc1.jpg

The length of the splines, the number of them that get clumped together, the amount of variation between each offset, the colour, width and so on is all controllable, allowing me to create a huge range of different types of paper fibre.

These fibres are then layered together, alternately flattening and building up each pass. The texture map is taken from the colour of the topmost fibre, with a height map and an opacity map taken from different flattening approaches. Again, the number of layers and the way they're accumulated is controllable to create different varieties of paper.

flocc2.jpg

(This compares well with the microscope image from the Wikipedia article on paper.)

Putting it all together, I think the end result looks quite convincingly papery.

petal.jpg