Advanced Mediocrity

I should admit that I love Flare3D more and more.I wish it could be an open source.The team has been doing a great job with the Falre3D V2 pre-release.And I receive almost daily updated release build of the engine for beta testing.For this I should thank Ariel Nehmad (the Flare3D CTO ) for giving me an opportunity to have a sneak peek into the latest engine’s features and try those out.
It was a conversation between me and Ariel regarding Flare3D filters as I desperately needed a clone() method on those for FLINT particles Flare3D module.So I had ,with Ariel’s help, a chance to have a deeper look into Flare3D filters system when he told me that they designed a whole language to write custom filters.Before I get to that rather cool stuff let’s first explain what are filters in Flare3D.For those who don’t know ,a filter in Flare3D is the module assigned to the material giving it a unique appearance.It works similar to layers in Photoshop so that each layer contains a specific filter.This kind of design gives a lot of power to developer.You can stack and blend several different filters on top of each other creating impressive material effects.
To get a better idea what I am talking about here is an example where we set up a material using Shader3D which uses several filters:

                        var myShader:Shader3D = new Shader3D( "myShader1" );
			myShader.filters.push( new TextureFilter( textureMap ) );
			myShader.filters.push( new EnvironmentFilter( envMap, BlendMode.MULTIPLY) );
                        myShader.filters.push( new ColorFilter( 0x00FF0C,0.3, BlendMode.ADD) );
			myShader.build();
                        var mySphere:Sphere=new Sphere();
                        mySphere.setMaterial(myShader);

As it is seen from the code snippet the shader can be stuffed with several types of filters -each one adding its unique effect.Furthermore you can stack the materials if you wish.Every mesh in Flare3D may have more than one material.So I am sure you can imagine how many possibilities you have in potential for creating stunning material sets.
But this is not all.As I mentioned above ,you can write your own filters using FLSL-Flare3D designed shader language which uses under the hood AGAL.Why do you need such a language you might ask.Well , writing shader programs with AGAL is not something you would even wish your enemy.Besides the FLSL pipeline integrates seamlessly withing Flare3D API.You write an inline shader program string and compile it using Flare3D special tools or you can write the program in an external text file which should have .flsl extension.Than you load or embed it as any other assets.The language itself is very similar to GLSL or HLSL .So people have any experience with OpenGL or Direct3D shading languages will pick on it very fast.The amount of operators and objects FLSL presents is limited but the team still has been working on adding more features into FLSL API.If you download V2 engine pre-release version you can take a look at the current features list and a couple of “Getting started” tutorials for writing your own filter.
And here is my personal experiment with the FLSL.Just imagine how much potential you have when working with shaders.Here you can see a sphere which is being morphed in runtime and interpolated into Box-all is done with a single line of code inside Vertex Shader I wrote using FLSL:

And here is the quick walk through so you guys get an idea how it works:
First we write an FLSL shader program.It contains both vertex and pixel shaders.In this example I wrote everything inline:

private var customShader:String="<namespace:flare, name:BasicTransform> \n" +
			"public WORLD_VIEW_PROJ worldViewProj; \n" +
			"public float4 color = float4( 0.1, 0, 1, 1 );\n" +
			"public float1 bendFactor = float1(0);\n" +
			"input POSITION position; \n" +
			"input NORMAL normal; \n" +
			"private float4 myVertex() \n" +
			"{ \n" +
			"float4 pos = float4( position, 1 ); \n" +
			"float4 norm = float4(normal,1); \n"+
			" pos*=cos(norm*bendFactor); \n"+
			"return pos * worldViewProj; \n" +
			"} \n" +
			"private float4 myFragment() \n" +
			"{ \n" +
			"return color; \n" +
			"} \n" +
			"technique basic{ \n" +
			"vertex myVertex(); \n" +
			"fragment myFragment() ;\n" +
			"} \n" ;

I am not going to explain the FLSL here because it needs a solid understanding of shader programming and some math but for the curious between you only these 3 lines are responsible for the magic you have seen in the demo above:

                        "float4 norm = float4(normal,1); \n"+
			" pos*=cos(norm*bendFactor); \n"+
			"return pos * worldViewProj; \n" +

In fact I figured out this effect of morphing casually,playing around with different FLSL commands.So what I have done was to pass normals info for each vertex into the vertex program.There I scale each normal vector by bendFactor, I set as a property of the filter,and finally multiplying the vertex position by the co-sinus of that scaled normal.Actually I have never thought such a simple and senseless algorithm could yield such a cool effect .Let’s continue.So we have written the shader.Next we need to compile it and create a new filter based on this program:

                private var shaderBytes:ByteArray;
		private var _myFilter:FLSLFilter;
		private function compileShader():void{
			shaderBytes=FLSLCompiler.compile(customShader);
			_myFilter=new FLSLFilter(shaderBytes);
 
 
			var mat:Shader3D=new Shader3D("mat1",[_myFilter],true);
			mat.build();
			var sphere:Sphere=new Sphere("",50,20,mat);
 
			scene.addChild(sphere);
			_myFilter.params.bendFactor.value=Vector.<Number>( [1] );
			_myFilter.update();

A little explanation on the snippet above.I use FLSLCompiler class to compile the shader.You pass it the string containing all the FLSL code as I have shown above.Next you can create an empty instance of FLSLFilter which is a base class for all generic Flare3D filters.And to create your own filter all you do is instantiating it and passing into it’s construcor the compiled shader which takes a form of ByteArray.Next comes a regular material setup routine.I add “_myFilter” to a new Shader3D material.Also I set a property for blendFactor which is passed into the vertex shader I wrote:

                        _myFilter.params.bendFactor.value=Vector.<Number>( [1] );
			_myFilter.update();

The last step is the morphing animation.I run it on each frame changing blendFactor property on my custom filter:

                       if(_myFilter){
			_myFilter.params.bendFactor.value=Vector.<Number>(                   [Math.cos(getTimer()/300)+0.3] );
			_myFilter.update();
			}

As you can see the whole process is pretty short and the result looks good as well.Achieving this kind of effect on CPU using conventional 3d math techniques would take your much more time and efforts.Also what is nice on my opinion that although Flare3D is close sourced engine the team compensates you with the ability to roll your own materials where only your proficiency and imagination is the limit.