We are going to open a “request for beta” very soon, so, it’s a good time to introduce some of the concepts of the new version.
If this is your first time in the shaders world, this short description may be useful: (from wikipedia)
Shaders are simple programs that describe the traits of either a vertex or a pixel. Vertex shaders describe the traits (position, texture coordinates, colors, etc.) of a vertex, while pixel shaders describe the traits (color, z-depth and alpha value) of a pixel. A vertex shader is called for each vertex in a primitive (possibly after tessellation); thus one vertex in, one (updated) vertex out. Each vertex is then rendered as a series of pixels onto a surface (block of memory) that will eventually be sent to the screen.
How do I use them in Flare3D? The process is very simple!
First rule! don’t panic! at the beginning you may get a bit confused, but you’ll see pretty soon how easy and fun is to play with shaders
- Write your shader in a file with an (*.flsl) extension.
- Drop the FLSL file into the Flare3D tool (image above), and it will output a file with the same name plus a (*.compiled) extension.
- Embed or load the compiled shader file into your AS3 project.
- To use your shader, you can create a FLSLFilter to use in your Shader3D mixed with other fitlers, or you can just create a FLSLMaterial for a static material.
So, let’s start from the basics and take a look at some of the data types availables in FLSL:
- Namespace: Yes!, namespaces, like in AS3, you can import different packages (namespaces in flsl) to make your shader code easier.
- Samplers are the data type related to textures. You can use sampler2D for traditional 2D textures or samplerCube for cube map textures.
- Techniques: In each FLSL file you could have one or more techniques that define different behaviors for the shader like, different profiles of the same shader, or simply different materials or filters in one file.
- Outputs are the variables that defines the final state of the shader, at minimum, each shader should write the vertex position and fragment pixel.
There are other data types that will be detailed in future posts, but for now, let’s see what this code does:
We declare a variable “texture” of type “sampler2D”. Samplers are public variables and they are exposed also on AS3 side so you can change it also by code.
output vertex = transform();
In this line, we declare a variable vertex of type output and assign to it the value returned by the function transform() (declared in flare.transforms), which contains a simple vertex multiplication to transform the raw vertex data into the perspective vertex position into the screen.
output fragment = textureMap( texture );
And finally, the declaration of the variable fragment of type output also, and assign to it the value returned by textureMap(), which gets the pixel value of the sampler texture passed as a parameter.
The output data type, is a dynamic one, and it is reserved for certain output values. In the case of veretx and fragment variables, they are declared as float4 values which represents a XYZW for the vertex position and RGBA for the fragment.
So, there are so many new things here…but don’t worry!, with just some examples you’ll see how much powerful and easy is to get around it.
See you in the next part!.