A brief introduction to 3D

With WebGL and Molehill around there is a new playground for us flash developers. First I felt a bit stressed over the fact that I have to compete with people doing this for years on the desktop, consoles, mobiles and with plugins like Unity. But it’s just a good thing. There is loads of information and knowledge around waiting for us to consume. We can cut to the chase and use the techniques developed by people before us. We are also several years left behind cutting edge 3D regarding performance and features, so the 3D community have produced loads of forum-threads, tutorials and papers. It will be interesting to see how the flash community will embrace this “new” technique. Games is a obvious field, but what about campaigns and microsites?

Some days ago I had the opportunity to hold a presentation about 3D basics. My goal was to give a overview of topics that could be good to look into as a starter. I have tried to pick them from the perspective of a “online developer”, with MolehillWebGL and Unity as a foundation. The word-cloud above show some of the words I put into context.  It’s basic stuff, in keywords and bullet-lists, so think of this as a dictionary of topics to find more information about on your own. There is some cool demos and resources in there as well. If you are into 3D programming already, this is probably not so interesting for you though, instead you can help me review the slides and point out possible improvements ;) .

Here is the presentation as PowerPoint (16 MB, with fancy transitions and animations) and pdf (6 MB, not so fancy but comments are more visible). If you don’t have PowerPoint installed you can  just download PowerPoint viewer here instead.

Important topics missing? Thing I got wrong? I would love to hear some feedback on things to improve.

Reaction-diffusion patterns

 

 

I stumbled on a interesting pattern-generating process the other day, called reaction-diffusion. To quote wikipedia: “Reaction–diffusion systems are mathematical models which explain how the concentration of one or more substances distributed in space changes under the influence of two processes: local chemical reactions in which the substances are transformed into each other, and diffusion which causes the substances to spread out over a surface in space.”

There is a lot of different types and variations with names that makes it sound pretty advanced: Turing (which my experiment is based on), Meinhardt, Gray-Scott and Ginzburg-Landau. These patterns can be seen in nature, like dots and stripes on animal fur. There is some  java applets (or I’m sure there are flash apps as well) on the web doing this faster and more advanced than mine, but I had some ideas that I wanted to try. More of that in future posts.

Open and try the demo here. If you have enough patient, play around with the settings, otherwise check out the presets. To begin the process, hit “Start” and to start over make sure to hit “Reset” first.

Original source can be found here. If you want my haxe-version, just let me know.

Off-piste simulator: Part 3

Time for one more step in this snowy experiment. I can’t help feeling like I’m dropped of the wagon right now with all kick-ass 3D demos around for the upcoming flash 3D API molehill. Of course, it’s not just about the amount of triangles, but also the creativity and love put into those you got. Anyway, I hope that you will like this piece while we all waiting for the salvation. Just put a smooth-modifier in your mental stack.

To mention some of the additions to this version, I have added collada-animations, a background view, different camera-angles including the typical fish-eye lens seen in many snowboard-videos. But the main feature is that you now can control it and make nice bezier curves in the snow yourself. You have three different inputs to play with:

Keyboard
Steer with the arrow-keys. Press down-arrow to bend your knees and push the snow a little harder. With this input-method it’s simple to keep a continuous pace, but it feels a little static.

Mouse
In my opinion a more dynamic way to get smoother turns and more control. Until you found your pace it can look a little funny, because the engine need a previous turn to calculate the leaning angle. Try to move the mouse back and fourth as an arc across the slope to get a balance of speed and pressure, simulating the g-force when surfing through the snow.

Webcam
This is quite fun to play with. I like the idea of moving your own body to control the movement. The face-detection-algorithm steals some CPU, so it’s maybe not the best choice. Use the same technique as with the mouse. Y-axis controls the pressure. Calibrate yourself against the webcam preview image to find a good position.

Now, lets make some turns.

Alternative controls

Multi-touch
I don’t have a multi-touch trackpad, otherwise that would have been cool to control each foot with a finger, like a finger board. Or a wacom-board, with different levels of pressure.

Gyro
Would be even cooler to control the board in 3D. Or maybe connect a wii-control to it?

Animation

To get a natural and correct looking turn, the character have to lean the body through to whole turn, almost before the turn even starting. So how do we know which phase of the turn we’re in? We could “record” the position and interploate and adjust it afterwards, like a bezier-drawing application. But I do not want this delay as it’s affect the response and feeling of riding in real-time. I came up with a different approach. I have two markers, xMin and xMax. Each time a the turn reach it’s maximum or minimum position the values are updated. I then have an estimated range of the next turn (if I assume that the next turn will be the same length). The current x-position is then compared with the estimate range and I got a normalized value between 0-1. Now I can ease that value with a Sine.easeInOut-function. That eased value is then used for the leaning angle. If you do a shorter or longer turn than expected it will of course look different, or before you find your pace, but it is still looking ok.

That’s all for now. Thanks for reading!

Off-piste simulator: Part 2

I have some  improvements for you since last time!  New stuff in this version is terrain, a rider and some snow-particles. In this demo, try to combine different values to see how the rider and the snow is affected. All parameters is connected together, so you can get pretty cool results.

Launch demo

Terrain
I mentioned that I could add effects to each layer in the heightmap/texture-comp. I now added perlin noise to the base-layer. The offset for each octave is the same as the track-layer-scroll so they are in sync with each other.  By resizing the y-scale of the noise the terrain got more stretched look, like ridges, or dunes, created by the wind. It’s a simple example of distortion and more parameters and effects will be added to create different slopes. I also read out the height-value at the snowboarders position. Notice how the rider floats on top of the terrain minus the snow-depth and depending on the current pressure.

The rider
The guy is a fully rigged model imported from 3d studio max. I have just begun to test the bone-support in Away3D, that is way he is looking like a rookie. For now I just control joint rotations, but later on I will try to add bones-animations and poses, especially if I add  jumps and tricks. I tried to move the joints up and down, but I could not sort that out with correct IK and without destroying the mesh. I’m sure that method would be pretty CPU-intensive as well with all the recursive translations going on in IK. I have to dig deeper into that later.

Just for the record, I’m in fact a skier, so maybe the movements are completely wrong since I never even tried a snowboard :)

Particles
I also added some snow-particles, or animated sprites to be more specific. The animation is dynamic depending on the speed and the pressure. If more pressure and the snow is deep, the particle will fly longer.

I guess next time I will try to make the rider controllable.

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 0×80000. 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 ;-)

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.

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 :)

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.


Marble


Electric


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


Space


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.


FlashTerrain – Lets make landscapes

It’s finally time to render a landscape with all the different parts that I have covered so far.

I’m really curious of your output and render-time, so please upload it to the gallery when you created your own landscape. The gallery will be published as soon as I got a collection of images.

This tool is in a very experimental phase and this applications using pretty much memory and CPU-power. There is plenty of memory-leaks and optimization that has to be fixed. But for now, I don’t want to focus on that. Some calculations freezing the player for a while. But I think that the tolerance-level is higher if the user can see the progress both with a bar and status-notifications. Notice the effect when drawing the geometry above sea-level. It’s completely cosmetic and waste of CPU but makes it looks more advanced :)

FlashTerrain demo

Post production

I have also added the possibility to do some adjustments on the result. For now you can change the colorMatrix (brightness, contrast, hue and saturation) and add some sharpening.

Save / upload

If you have a flickr account, you can save it to your own photostream. Or upload to the public gallery, also using flickr, but a account dedicated to FlashTerrain. Or of course, encode the image to a jpg and save it to your desktop.

Credits and useful links so far

Papervision3d: http://www.papervision.org
AS3Dmod library: http://code.google.com/p/as3dmod/
Stok3d: http://www.derschmale.com/2009/06/08/introducing-stok3d-more-fp10-3dpixel-bender-shading/
ColorMatrix: http://www.gskinner.com/blog/archives/2007/12/colormatrix_upd.html
Gradient color component: http://mariosh.com/components/gradient-editor/
Advanced color picker: http://www.sephiroth.it/file_detail.php?id=150#
Multipart URLLoader Class by Eugene Zatepyakin (in-spirit): http://code.google.com/p/in-spirit/wiki/MultipartURLLoader
Flickr authorization control: http://www.mikechambers.com/blog/2008/08/12/flex-based-flickr-api-authorization-control/
phpFlickr: http://phpflickr.com/

FlashTerrain – Vegetation distribution

Next step is to distribute the tree we just created on to the terrain. I use the heightmap as the source. I create an array with objects representing all pixels. The reason for this is that I now can filter and sort these points. First, filter out all points in the defined range, based on the y-value and the range defined in the editor. Then, sorting out a specified amount of random points, sort them on the z-value for correct render order. Before this last sorting I can add all different objects to the same batch. I’m sure there are much better and faster methods than this. Analyzing the terrain for more realistic distribution should make it more interesting.   When rendering, I have to make a render for each position and merge the result with the final image.  It will not work to just paste the result on top of the terrain. The tree is sometimes behind the terrain and partly hidden. And if the terrain is included in each pass, next render will cover the previous. So after some experimenting with masks, pixel bender matte calculation, my solution was this:

  1. Render the object by itself in a transparent viewport.
  2. Add the terrain and set the material to a white color material and viewport background color to white. Move the object to a new position and render.
  3. Get the boundingbox of all none white pixels with getColorBoundsRect. This is the rectangle that we want to work with. Draw a new BitmapData with this rectangle from the viewport. Lets call it maskTree, the object with white surroundings.
  4. Crop the transparent pass with the same clipping-rectangle  as maskTree. Lets call the result transparentTree.
  5. Add effects like fog and filters like blur to transparentTree.
  6. If the tree got covered by any terrain, the edges now has straight cuts because we just use a rectangle clipping. We have to fix that. Loop through all pixels in the maskTree . If  its completely white in the mask, its a transparent pixel in the transparent image, so set that pixel transparent in transparentTree. Left is a masked image, but with correct multiplied alpha colors.
  7. Merge transparentTree with the final result. To do this a put the final canvas and the new object in sprites and cache them with draw() to a new final canvas
  8. Send an event so the user can follow the progress and start over with next iteration.

I tried to use a matte pixelbender-filter so that I just had to render the viewport once, but the alpha-channel in flash is pre-multiplied (correct me if I’m wrong here), so the edges became white when blending it with the final canvas. One downside is that it’s pretty slow. Another is the z-sorting issues that occurs. Maybe a down-sampled heightmap can be used instead when setting the position in 3d space.

Shadows and effects

Because the result of each tree is a single transparent bitmap, I can use different effects on each tree. A blur-filter based on the distance to the camera is added. A small random value on the hue/saturation make the trees more random. If fog is enabled a color tint is added. I didn’t find out how to change the color-transformation correctly , so I found a workaround by setting the tint with TweenMax and change the progress to 0-1 depending on the z-position and fog amount. Have to work more on this later on.

I mentioned the shadow-layers in one of the previous posts. To add every shadow to the final result, I make a temporary container and add a sprite with a radial gradient fill for every tree and cache that with bitmapData.draw(). This is then baked into the texture with the multiply blendmode.

Distribution demo

Things to improve:

- There is plenty of optimization here to do here. This is the most time-consuming part.
- Check visibility against the clipping planes and skip those objects.
- Adjust all the effects with better z-depth-control.
- Let the position of the sun affect the brightness.
- More realistic distribution such as slope detection or algorithms.