2012
01.07

Hi All.A while ago I wrote a flash app that could be used to write and test shader programs in real time using Flare2D shading language(FLSL).For those who don’t know what FLSL is take a look at my previous articles.Essentially ,the main advantage of it is the ability to write shaders in OpenGL’s GLSL-like user friendly syntax without need messing up with AGAL registers and opcodes directly.
The app was very simple but then I decided to upgrade it a little and put out for the masses.So what you can do.You can write your shaders,compile them in real time,save them to file locally or save them to a database I designated especially for it which then us used as the shaders code bank.Yes the concept of the app is pretty the same as of mr Doob’s GLSL SANDBOX .

 

If you think that UI is ugly you are right.Unfortunately I am not a designer :)  Some explanation on how to use.In the middle you have got the editor window which you can hide by clicking “Close editor” button in the footer.You type your shader code in this window.Right side bar has more controls.The top most drop list enables you to select one of 3 primitives to render in the viewport.These are Sphere,Cube,Plane.Under it you have a button called “Upload Texture”.By default the program passes into shader program a simple perline noise generated bitmapdata which you access via “tex1Map” uniform.You may choose your own texture by uploading one.Then we have “Select shader” drop list.This is the list of users shaders which comes straight from the DB.The more people will submit they experiments the bigger shader collection we will have.To save your work to DB don’t forget to enter description in the “Description” field.Further ,there are two buttons:”Compile Shader” which as you probably guessed compiles the current code in the editor to  a shader program.The green “Save to File” button allows you to save the shader at your computer in .flsl file which you can then load directly or embed in the Flare3D engine.

Another important details  is how you actually write the code.So first ,you have a button at he footer called “FLSL reference”. Clicking it will open FLSL reference doc.There you can find all the built in shader functions,default uniforms and attributes accessible from inside any shader.Also when you startup the app you have a basic shader code inserted by default into the editor.It can serve a good quick start.Also take a look at my previous articles which include some explanation on how to write FLSL.Once I have more free time I will publish detailed tutorial on this subject.

At last ,I want to get bug reports,feedbacks from you .This app is really Alpha so expect some bugs.Also ,more features will be added gradually.It all depends how much free time I have Â

The FLSL Editor (Alpha)    

3 comments so far

Add Your Comment
  1. The movie doesn’t load :(

  2. What version of Flash Player do you use ? It works fine with the current release.Still haven’t tested it with 11.2

  3. Good work, thank you for creating this. Works fine with 11.1 . I was only able to rotate the sphere since the cube ignored mouse input. And my horribly slow test computer achieved a dismal average ~15 FPS :) Regardless, it looks promising.

View Michael Iv's profile on LinkedIn