FlashTerrain – Water

Okay, lets add some water. This time an ocean.

One way would be to set set each vertex under a certain level to the same y-value, but I wanted to control the geometry under the surface as well. The SplitMesh util in papervision solved that for me. First I split the mesh and then adding another plane in that intersection. It was a little tricky to get the z-sorting right when previewing all parts together. One problem was to assign a viewport layer to the new objects. The triangles had different parents so some triangles got hidden. One solution was to clone the object and it’s material, but that was cpu- and memory-consuming in my case. Instead, I modified the splitMesh-method to change the parent of those triangles that where cut. The split-util is quite slow for large meshes, so it freezes the player for a while. Unfortunately I’m not an expert on splitting for-loops into chunks, so I have to live with that for now. Added a waiting-screen instead.

As with the terrain, the sea texture is a composition of several planes and materials put in different viewport layers for z-sorting and blend mode effects. The first plane contains the diffuse color. You can also use a reflection of the sky instead of the color value (this makes the sun reflect in the surface ). With BitmapData.draw() I create a bitmap which in turn get the alpha channel from a transparency map, in this case a gradient fill where we set the alpha (water transparency) and range (z-depth). The terrain under sea level becomes visible, and the cut become less sharp. The details below sea level is so flat and small, so I don’t bother using a displacement map to simulate light refracting through water.

The waves is generated by, can you guess? Perlin Noise. Just as with the clouds a bevel-filter adds a kind of volume to it.

Geometry above sea level is also cloned with inverted vertices. Then a displacement-map based on perlin noise is added on the viewport. There you got some nice reflections.

water demo

Future improvements:
– More realistic bump map.
– Sun reflections in waves (glitter). I tried a similar lightmap as the terrain uses but I can’t make the tiling correct.
– Foam ( along beach lines it would be easy to use the heightmap and a modify the paletteMap with transparent and white colors ) to create white waves around it.