Off-piste simulator: Tracks

The winter is just around the corner. If you, as myself, enjoying alpine winter sports, this little toy will get you into the mood. Imagine that you have climbed all the way up the mountain, before the lifts starts feeding the mountain with people. You want to be sure that you get a ride on fresh untouched snow all the way down. You now standing on the top and watching the sun rise behind a nearby peak. Googles on. Gears on the back. It’s you and the mountain… I love that feeling!

This is the first part of this experiment of making a off-piste simulator/game in Away3D. The first step is to create the slope and generate tracks in the snow. Check it out the first test

I got inspired by @tonylukasavage and his morphing mesh experiments with HeightMapModifier in Away3D.

Some notes about the texture; I start of with a bitmap filled with the color-value 0x80000. That fill represents the center of the offset. I then draw the track to another BitmapData ranging from black to red. To make the scrolling effect I found a method that I’m never used before: BitmapData.scroll(x,y). The two layers is comped together to a single bitmap. One advantage of using layers is that I can add noise, shadows and other effects to each layer. The heightmap is then converted to a normalmap with NormalMapUtil and a texture with paletteMap. Now I got what I need to create a nice phong-shaded Pixelbender material. The grid has very few triangles (25×25 segments), I have to save some cpu for the character and the other stuff. I’m not doing any real-time triangulations either, so in some cases the vertices starts to jump around. I have to accept that for now.

I don’t really know the outcome of all the future parts yet, but next up is to add a character and some controls.

Waterfall

I realize all my posts so far has one thing in common. Perlin noise. So why make an exception this time. Remember the post about fire? Make the animation go in the opposite direction, change the colors and some parameters, put in on a texture and mix with blendmodes and filters and you got yourself another element of nature. Water.

When I play first-person-shooters like Just Cause, Far Cry or Uncharted 2 there is one thing that I always remember most. Water-effects. I forget about the story and just play around with it. I hope you will remember this one 😉

The cliff and water is simple models created in 3D Studio Max, then imported as a scene into Away3D with the Loader3D. The materials are converted to PhongMaterials. I tried to use a normal-map and a pixelbender-material on the cliff to get a wet look, but it was to CPU-intense together with the other effects, so that had to go.

The trick to make the water refract the light was to render the view twice. One with the waterfall alone and with just black and red colors. And another pass with the final result. Then the first pass is used to create a displacementMapFilter on the view. It’s quite slow, but I couldn’t resist to activate it by default when the visual result is much better. Try to switch it off to see the difference in quality and speed.

Update: I strongly recommend using Flash player 10.1 with this one, it’s a huge difference in speed! And how come Chrome is so damn faster than the rest? I added a slider for the texture resolution as well, so that performance can be adjusted. Lame, I know…

Open demo

I found the texture for the cliff over here.

Procedural eyes

Procedural graphics is surely my favorite. The concept of create visual things with just code. Really comes in handy when your a crappy designer and still want to do visual stuff. Here you can see the result of yet another experiment on this track. It’s a eye-shader for generating procedural eyes. The 3D-engine of choice is Away3d. I use a CompositeMaterial consisting a PhongMultiPassMaterial and a SphericEnvMapPBMaterial (for the environment reflections). The bitmap that is used in the material is generated by a haxe-swf that is loaded in runtime. Just as previous experiments. The same bitmap is used as a base for the spherical normalmap. That adds a nice displacement to the surface. The iris is quite simple and could have more layers and complexity to get a more realistic pattern. Anyway, the texture looks something like this.

When wrapping this on a sphere it will fit seamlessly . I know, the blood-vessels aren’t that great. Perhaps I should use lines with turbulence instead.

Design your own eye

Here is a tool where you can try the different settings and create a unique eye.
Open editor

Demo

This “mars-attacks”-demo follows the mouse. To get two eyes I duplicates the output from the view. Thats why he can’t look at his nose (if existed). Notice that he is reacting to light, sort of…


Click to open

Open demo

Cubes

There have been a lot of things to deal with lately so I have kept a low profile online. But last night I finally did a little experiment. It’s a little toy to make models made of cubes in away3d. Or infact, there is just ordinary planes. I suspect that it should be much faster if I created the geometry inside i single object, but this was fast enough for this experiment.

The material of choice is a WhiteShadingBitmapMaterial. The shadows are baked into the bitmap depending on the surrounding nodes. To render the shadow I use fillRect-method on the BitmapData. To make the shadows more soft I use the diffuse-color, but with lower brightness. When all shadow-rectangles are drawn the bitmap is blurred with applyFilter. The shadows was added to get a kind of fake ambient occlusion. Each cube, or node, has it’s own position in a 3d-grid (multidimensional array). When a plane is clicked a new node and its corresponding planes is created, animated and evaluated. If there is any doublets or planes inside the structure, it’s removed.


Click on the some of the models for a closeup view. Or just try it out yourself: Extrude the cube, dude!


Open

I have been a huge fan of voxels and voxel-engines lately. I know it’s pretty big and few voxels, but let me call this a micro-voxel-editor please 😉

Knocking on procedural wood

My next track on my journey through procedural domains goes through the woods. Not so revolutionary maybe, but I haven’t seen it in flash before and that’s enough challenge for me. And it’s a good way to learn the basics of textures. Here is the first tests:

For the sphere, I use the spherical mapping from the previous post. The cube has one texture for each side. One benefit if using a 3D procedural texture is that the wrapping is accurate and it looks like a block of massive wood. I can also use the optimized 3D Perlin noise as turbulence to make the grains look more natural.

Simple tree texture designer

I have added a few parameters to change, but several features could be added like: more object types, ring-types (tri,saw, sine), base texture blending.

Try it out here

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?

Spherical Perlin Noise

I’m not quite done experimenting with 3d perlin noise. Another cool feature that I haven’t seen in flash is to wrap the noise on a sphere seamlessly. Here is the result:


Click the spheres for a slightly larger version

To get the texture to wrap seamless without distortion, we can use the 3d nature of the noise in a interesting way. If we evaluating the 3d-position of each point on the surface of a sphere we can get the noise in that particular point. To convert the point from 3d-space to 2d-space some trigonometry is needed. My math-skills really suck, but my cut-n-paste skills are excellent. Once again, LibNoise showed me the way with 5 lines of code. First I only got chaotic noise with some sort of repeating pattern. It took some time to figure out that I had to convert the numbers to a positive range.

lat = py / height * 180- 90;
lon = px / width * 360-180;
r = Math.cos(DEG_TO_RAD *  lat);

//range between 0-1
_x = (r * Math.cos (DEG_TO_RAD * lon) +1)*.5
_y = (Math.sin (DEG_TO_RAD * lat)+1)*.5
_z = (r * Math.sin(DEG_TO_RAD * lon)+1)*.5

For the sphere and the material/lighting I use Away3d. In the next post I will show you more about that and the tool for creating the different materials. Oh, and it’s looks a lot better animated 🙂