Dynamic text with phong shading using Stok3d
Tuesday, June 9th, 2009Yesterday David DerSchmale Lenaerts released Stok3d into the wild. When he showed me the demos, I immediately felt (you guessed it) STOKED!
Naturally my first question was : "does it support transparency?!", and with a resounding yes, I just had to try this with text 
I wanted to generate the texture maps dynamically. It's not quite there yet, but not bad for a quick experiment 
This took three steps:
- Create the diffuse map by generating a text field, taking a bitmap data snapshot of it and adding some bevel to it.
- Create the normal map by repeating the previous step, only using Red and Blue colors, with slightly different bevel settings.
- Create the specular map by extracting "outlines" using convolution filter.
These three bitmaps look like this:
Here's the code for generating them:
-
var font_size:uint=140;
-
var tf:TextFormat=new TextFormat("Arial",font_size,0xac8ea9,true);
-
var diffuse:BitmapData=createTextLineBitmapDataFromTextFormat("STOK3D",tf);
-
diffuse.applyFilter(diffuse,new Rectangle(0,0,diffuse.width,diffuse.height),new Point(),new BevelFilter(5,45,0xFFFFFF,1,0x00,1,10,10,3,3));
-
_diffuse_map=new Bitmap(diffuse);
-
-
tf=new TextFormat("Arial",font_size,0xbf6cde,true);
-
var normal:BitmapData=createTextLineBitmapDataFromTextFormat("STOK3D",tf);
-
normal.applyFilter(normal,new Rectangle(0,0,normal.width,normal.height),new Point(),new BevelFilter(5,45,0x89a1f9,1,0xFF00FF,1,12,12,3,3));
-
_normal_map=new Bitmap(normal);
-
-
tf=new TextFormat("Arial",font_size,0xFFFFFF,true);
-
var specular:BitmapData=createTextLineBitmapDataFromTextFormat("STOK3D",tf);
-
specular.applyFilter(specular,new Rectangle(0,0,normal.width,normal.height),new Point(),new BevelFilter(5,45,0x999999,1,0x00,1,0,0));
-
specular.applyFilter(specular,new Rectangle(0,0,normal.width,normal.height),new Point(),
-
new ConvolutionFilter(3,3,new Array(0,20,0,20,-80,20,0,20,0),10));
-
specular.applyFilter(specular,new Rectangle(0,0,normal.width,normal.height),new Point(),new BlurFilter(2,2,2));
-
_specular_map=new Bitmap(specular);
Then I just grabbed Davids demo code and replaced his textures with mine... and voila:
click image for demo:
storm image from http://www.flickr.com/photos/digitaltool/2569963337/
For some reason the demo doesn't start everytime. Just refresh a few times and you should be STOKED! 
Also, the specular lights go black sometimes. I'm convinced this is just due to my happy go lucky texture generation, but David claims he needs to look at his code.
download the demo as project. This is just my demo file, you'll need to fetch the Stok3d code from google (see link above);
I have to say, Stok3d is pretty damn cool! Sweet work herr schmale 
.
