What can be the natural evolution of an isometric engine? Of course a voxel engine…

It was really a lot of time I had this in mind and already did some experiment, but never finalized them.
What I’ll show you now is some first implementation. Source code is already optimized but I need to finish class public methods so I’ll not post source for now.

Let me say that these screenshot really suck, but you got to see them moving (they runs very fast).

This first sample is a bitmap based map. The class wants two bitmap, one for the height map and one for the color. Of course you can use the same twice (but obviously it looks good only with grayscale images). With my brand new Intel Quad core QX9550 I easilly reach the fps limitator of 51 (ok, ok… on the screenshot is written 29 but believe me! ). I am new to multi core cpu and I am really surprised to see that now the browser vs IDE situation totally changed. Now I can do 51 fps in the browser (Opera 9.23) and 30 in the IDE… mmm strange behaviour, maybe I just need some sleep.

The file is very big cause of the low compressed 2000×2000 jpeg files. No preloader (don’t even try to ask for it) so be patient please (631 Kb)

Actionscript voxel landscape (Image map)
(move mouse to fly around.Map is bitmap based so has boundaries)

This second one is to make you write some comment like: “hey man how can you be so stupid… trying to code a fast voxel engine lots of optimization etc. and then you came up with a perlin noise based sample which simply drain half of the power”… Yeah! but is cool to have infinite landscape and test my new CPU

Actionscript voxel landscape (perlinNoise)

Same but with two octaves… very blobby feeling.

Actionscript voxel landscape (weird 2 octaves perlinNoise)

Expect more about this and more new things. I am preparing a lot of funny stuff.

As usual if you like this let me now via comments and if you want to keep an eye on updates subscribe to my feed

Bookmark It

Hide Sites

Here we are with a new as3 experiment.
This time I wanted to try to simulate some mercury-like fluid with its blobby aspect that resembles some sort of lava lamp.

Off course everything animated.

See this in action

This tecnique is quite simple, you just need some fantasy to reach the final effect:

1. Create two BitmapData
2. Create a Bitmap object linked to one of the BitmapData and add to the display list
3. Apply a PerlinNoise with two octaves to the first (hidden) BitmapData
4. Use the threshold method on the second (displayed) BitmapData
5. Add some ubercool filters
6. Animate everything on a frame based event
7. Enjoy the magic

Here is the code:
(I will post the FrameRater class soon, until that just comment relatives lines and as usually remember to drop an instance of the components used (checkBox, slider) to the library before compiling or flash won’t be able to attach them dinamically)

import flash.display.Shape;
import flash.events.Event;
import flash.display.Bitmap;
import flash.display.BitmapData;
import fl.controls.Slider;
import fl.controls.CheckBox;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.filters.BevelFilter;
import flash.filters.BlurFilter;
import flash.filters.GlowFilter;
import com.oaxoa.components.FrameRater;
 
var w:Number=300;
var rect:Rectangle=new Rectangle(0,0,w,w);
var point:Point=new Point(0,0);
var a:Array=[new Point(1,1), new Point(3,3)];
 
var bd:BitmapData;
var bd2:BitmapData;
var bmp:Bitmap;
 
var bevel:BevelFilter;
var blur:BlurFilter;
var glow:GlowFilter;
 
var shape:Shape;
var ns:Slider;
var cb:CheckBox;
var fr:FrameRater;
 
initFilters();
initBmp();
initInterface();
 
function onframe(event:Event):void {
	a[0].x+=1;
	a[0].y+=1;
	a[1].x+=2;
	a[1].y+=0;
	bd.perlinNoise(105,105,2,0,false,true, 7, true, a);
	bd2.fillRect(rect, 0x00000000);
	bd2.threshold(bd, rect, point, ">", ns.value/255*0xffffff, 0xffff8000, 0x00ffffff, false);
}
 
function initBmp():void {
	bd=new BitmapData(w,w);
	bd2=new BitmapData(w,w);
	bmp=new Bitmap(bd2);
	bmp.filters=[blur, bevel, glow];
	addChild(bmp);
	addEventListener(Event.ENTER_FRAME, onframe);
}
 
function initFilters():void {
	bevel=new BevelFilter();
	bevel.blurX=bevel.blurY=20;
	bevel.distance=10;
	bevel.highlightColor=0xffffff;
	bevel.shadowColor=0xCC0000;
	blur=new BlurFilter(2,2);
	glow=new GlowFilter(0xFFAA00, 1, 20, 20, 2, 1, false, false);
}
function initInterface():void {
	// draw the white bar
	shape=new Shape();
	shape.graphics.beginFill(0xffffff, .75);
	shape.graphics.drawRect(0,0,w,30);
	shape.graphics.endFill();
	shape.y=w-30;
	// create slider
	ns=new Slider();
	ns.x=80;
	ns.y=w-18;
	ns.minimum=0;
	ns.maximum=255;
	ns.value=150;
	ns.snapInterval=1;
	ns.liveDragging=true;
	// create checkbox
	cb=new CheckBox();
	cb.label="Use filters";
	cb.selected=true;
	cb.x=200;
	cb.y=w-27;
	cb.addEventListener(Event.CHANGE, switchFilters);
	// create FrameRater
	fr=new FrameRater();
	fr.y=w-30;
	// add iutems to display list
	addChild(shape);
	addChild(ns);
	addChild(cb);
	addChild(fr);
}
 
function switchFilters(event:Event):void {
	event.currentTarget.selected ? bmp.filters=[blur, bevel, glow] : bmp.filters=[blur];
}

Important: don’t know why but i found a little bug in the flash CS3 actionscript editor. If you try to autoformat the above code the function switchFilters will be messied up. The line using the ternary operator (just a simpler way to write an if) will be pushed out of the curly brace so pay attention.

Bookmark It

Hide Sites