Playing with fire

Last time I made some wood. Now let’s burn that up. Still experimenting with the same 3D perlin noise as before, but this time animated. When you can take control over each pixel of noise it’s easy to add extra rules to form the shape of the noise such as turbulence based on y-value or an offset animation along the z-axis to gain some depth. Applying “ridges” to the perlin noise (invert all negative values when the range is between -1 to 1) makes the flames look more interesting. The bitmap generated is just 80×80 and 2 octaves of Perlin noise, so the possibilities are quite limited.

Click here or on the fireplace above to get warm.

If you want to see how it works, here is a zip with sources for a simple example. No graphics or UI is included though. The noise is compiled with Haxe, but a swf is included if you want to skip that.

See this post for additional credits.

Noise Editor

The images in the last post was created with this tool. I use the heightmap to create a normal map with a excellent class called SphericalDispToNormConverter. So since I now have a heightmap and a normal map, Away3D can do the rest. The material used in this example is the PhongMultiPassMaterial. When “displacement map” is disabled a simple BitmapMaterial is used. The @away3D -team has really done a great job with the pixelbender materials.

Among the settings you can choose between a regular perlin noise or a ridged one. You will notice that the difference is pretty big. Also, check out the different presets.

The resolution on the heightmap is 400×200, but scaled down in the UI. (By the way I can’t tell you enough how I love the minimalcomps by mr @bit101.)  The heightmap-generation is pretty heavy on the CPU, so choose browser with care and stay away from debug-players 😉

Sphere designer

What do you think? Time for a generative material-library for Away3D?

Ridged Perlin Noise

While doing research for the terrain editor I found a lot of different methods for creating noise. One of my favorite algorithms is “ridged fractal noise”. I haven’t found any examples of this in AS3 so I created my own version based on the Optimized Perlin Noise seen in the community before. I think the route of that source began with Ron Valstar’s AS3 version (@Sjeiti), then with a optimized version by @quasimondo, and further optimized with a haxe-version by Nicolas Cannasse. It was very easy to just add the ridged part to the noise generated. There is some source to look at in other languages such as C++, Java or C#. First some examples to see whats the characteristics of ridges. Some of them uses a Stok3d PhongShader created by @DerSchmale to add a nice depth:

Terrain | My favorite. Imagine using this with a voxelengine.



Trails | Put together in Photoshop to demonstrate the effect of the shader


Stone texture

It’s quite fun to search for new patterns by just adjusting the few parameters:

Make some noise

Try it out for yourself. I have limited the size of the bitmap to 200×200. It’s pretty optimized, but still to slow for large bitmaps. A Cool thing is that the swf is just 26 kB. Thanks @bit101 for MinimalComps.

Open editor

Here is a explanations for some of the parameters (I borrowed the descriptions from the reference of world-machine):

Offset: Offset determines at what elevation the fractal behavior begins to change its character.
Gain: A multifractal parameter, Gain typically controls the relative strength of the detailed versus smooth regions of the fractal. Low values are very smooth, while high values bring on the detailed nature more quickly.
Persistence: Controls the degree to which the strength of each layer of noise is reduced as they are layered together. Low persistence values produce very smooth terrains, whereas increasing the persistence produces more detail (and spikiness). Unlike a low octaves value, all layers of noise are still calculated when using a low persistence, so that terrain features are smoothly introduced as the value is increased.

If you’re interested, here is the source code for the noise generator (in Haxe).

In a terrain a heightmap with ridges is suitable for creating high mountains or sand dunes, which was my primary goal. Next step is to visualize it in 3d. The ridges does not look so good with a low poly mesh, so I have to look for a voxel-engine now.