Archive for the ‘Tutorials’ Category

Flare3D Water Rendering tutorial with FLSL

Tuesday, April 16th, 2013

FLSL water shader

The last April 12, Sergey Gonchar from ‘Stage3D group‘ organized ‘Stage3D Workshop Meeting’. On which, Ariel Nehmad explained how to create a water effect using FLSL. The rendering includes reflection, refraction, dynamic waves , particles, etc..

Check out the following video to see how the pirates sail over a beautiful FLSL’s shader.

 

If you missed the event you can watch the recorded meeting here (you’ll find Flare3D talk at the end).

Ariel published source code and the live demo in his blog here.

Enjoy it :-)

 

FROYO TAXI – development explained at wandah.com

Friday, February 8th, 2013

Banner_Blog_froyo

We are very glad when an user shares his development experience with the community!!

At wandah.com you can find a couple of interesting posts explaining some techniques used in Froyo Taxi development. The First post is called “3D Modeling on Froyo Taxi” and explains the approach used by Wandaw to make the game’s 3D assets (cars, characters and buildings), This is a very important topic and rarely you’ll find information about it. Things like amount of polys for model  and textures size are treated here.

lowpoly-city

The second post is called “Handling 3D movement on Froyo Taxi” is about ‘movement’ and explains how collisions, paths definition and some AI for cars and characters were implemented in the game. Wandah chose to use a custom implementation to solve it and explains how to get it using  a simple approach.

froyotaxi-screenshot

Have you read the articles? Now click here to play FROYO TAXI!

Improving wiki’s FLSL section!

Wednesday, December 19th, 2012

 

flsl_banner

Flare3D’s Wiki is growing! and now, we will dedicate an exclusive FLSL section where you can find all kind of resources such as:

  • Flare3D Shader Language Guide.
    This document will help you with your first steps into FLSL’s world. Also, includes a FLSL’s API reference.
  • Code examples
    A useful showcaso of FLSL´s examples.
  • Tutorials and 3° party examples
    Contributions from Flare3D community

image

Check it now!

Enjoy it! Guiño

Getting started with FLSL : Part 1

Tuesday, October 16th, 2012

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 you didn’t see the previous post, you may want to take a look first here.

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 ;)

  1. Write your shader in a file with an (*.flsl) extension.
  2. Drop the FLSL file into the Flare3D tool (image above), and it will output a file with the same name plus a (*.compiled) extension.
  3. Embed or load the compiled shader file into your AS3 project.
  4. 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:

sampler2D texture

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!.

Mobile Adventures – Intro

Thursday, October 4th, 2012

banner_test

The last few weeks I’ve been busy with a fun new little project: A mobile game for Android and iOS. As you might remember, this isn’t the first time we talk about using Flare3D on mobile devices, but back then it was a quick proof-of-concept port of YellowPlanet using Flare3D 2.0.48 running on an iPad 2.

FingerAttack-screen2This time, however, things are a little different: I’m using bleeding edge builds of the much awaited Flare3D 2.5 and my target device is way less powerful. The idea is to get a complete 3D game running smoothly at 30 FPS on a Motorola Droid 2 smartphone. We realize that this device is a little old and underpowered, but that’s pretty much the idea, to push our code to the limits. After all, if we get it to run properly on this device, it should work great on anything more powerful. So, challenge accepted! :D

The idea is to share here in the blog different aspects of this project from time to time and for this first installment, I’ll talk a little about what the project is and what are the main challenges that it presents: The idea is to make a vertical space shoot’em up with full 3D graphics, background music and sound effects. The game must feature enemy squadrons attacking you, plenty of bullets and animated explosions all around. But one picture is woth a thousand words, or so they say.

So, a few topics I’d like to talk about:

  • Asset creation and management: As you can see, there are enemies, different kinds of bullets, the player ship, background geometry and explosions. Since loading and setting up all that stuff can take some time on mobile due to hardware constrains, we have to be very organized and avoid any kind of loading during gameplay.
  • Multiplatform development: Even though the Flash and AIR platforms excel at portability, there are still things to consider like screen resolutions and aspect ratios. We’ll show you how to handle these topic as painless as possible.
  • Lots of collisions! It isn’t just between enemies, bullets and the player, it’s also possible to collide against some of the background elements. Since 3D collision detection can be expensive, specially on mobile, so we had to figure out a more lightweight approach.
  • We want the game to look as good as possible while mantaining a smooth framerate. Animated explosions, scrolling backgrounds and shiny ships / structures, we make use of some FLSL magic to make everything pretty and fast.
  • Object pooling: We must be able to create and destroy items all the time while using as little CPU power as possible and keeping memory activity controlled. We really don’t want the garbage collector affecting our precious framerate.
  • Manual drawing. In order to have more control and flexibility in some situations, we need to draw some objects by hand instead of just adding them to the scene. We’ll show you why this can be useful in certain situations and how it’s done.
  • There are a few more topics that I’d like to talk about but, for the time being, this should give you a general idea of what you’ll be getting each week. Stay tuned for more! :)

    Hello FLSL!

    Wednesday, October 3rd, 2012

    It has been a long journey since we started with the FLSL project (Flare3D Shader Language) , and I can guarantee that it was one of the hardest thing we have ever made!

    So, being so close to the coming release, I want to take a little time to share some details and examples about why is FLSL so important and what does it mean for you.

    FLSL is a very special (and loved) component of the coming version, is like the heart of the engine!, lets say…

  • It allow you to modify the appearance of each object / material / pixel on the screen.
  • You can not only make things look better, but also faster!
  • It gives to you full control…I mean, it puts all the render pipeline into your hands!!, you will be able to twist the engine to its limits!
  • It’s a very simple and powerful language, you will not need to deal with AGAL/Assembler or low level code.
  • It produces optimized bytecode and deals with all the hard and boring stuff for you :)
  • It is the first shader language based on a dynamic virtual machine (we’ll talk about this later).
  • It Rocks!! ;)
  • What can you do with FLSL?, basically all kind of better looking materials, post process filters, special effects, shadows….the sky is the limit ;)

    There is so much to talk about, but enough for now…..show me!!!!…show me!!!!

    Introducing FLSL!

    Flare3D 2.5 + Starling Integration

    Tuesday, July 24th, 2012

    starling

    To take all the advantages of accelerated content on Flash, and achieve the maximum possible performance, you would like to mix between 2D and 3D accelerated frameworks, well, it is now possible!

    Maybe, you are working in a project where you need to optimize its performance as much as possible (like a mobile project). In this cases, you must to avoid any CPU intensive operations, and one thing that you can do, is changing the traditional 2D Flash interface that uses CPU resources for other based in GPU acceleration. To take advantage of Stage3D capabilities with 2D accelerated graphics you can use The Starling Framework. With Flare3D 2.5 and the next version of starling you will be able to use them together!.

    We were working with Starling team to provide the most easy and simple possible integration, and to prove it we made a short example that shows how Flare3D and Starling can work together. If you were working with Starling framework before, you’ll feel most of the code very familiar.

    You can see this sublime experience (and more) in the following example:

    A public beta of Flare3D 2.5 is coming very soon ;)

    Stay tuned!

    Vertex Spheres + TweenLite = Magic

    Tuesday, May 22nd, 2012

    vertex tweened animation

    When you think in a mesh you are basically  thinking in vertexs.
    In this cute example, our dear Ivan takes four 3D meshes, gets its surface information and place a sphere in each vertex’s position. When the stage is clicked, a new mesh is taken as reference and each sphere is tweened to the new vertex position. For tweening, we are using the famous Greensok’s TweenLite library (I love Greensock’s products Risa ).

    vertexvertex

    This example presents a simple technique for handling objects info and how to use them as reference for manipulating scene objects.

    Live demo and full source code in our Wiki

    Enjoy it!

    Bullet Collision – Example and source code

    Monday, May 14th, 2012

    bullet3

    Bullet collisions are the basis in a lot of games!! Maybe you need it for a FPS or you are working in a game like a Carnival where you need to shot stacked cans to win the big plush bunny Conejito!! Well.. No matter the situation, if you need to shot a bullet and detect the collision with an element in the scene, then you must check this new example that explains how to do it.

    In this nice example, you can learn how to solve this kind of behaviours. Notice that in this example the bullets bounce between the elements. How to calculate the bounces? Vector3DUtils.mirror  is the clue Guiño.

    let’s play!!

    Flare3D Physics Engine (Beta)

    Tuesday, December 20th, 2011

     

    The waiting is over, Flare3D physics engine beta version is finally here. Let´s Solve some complex tasks such as mouse detection, mesh collision and many others! 

    avatar

    Check out our Wiki (wiki.flare3d.com) there you will find everything you need to start using this engine. Explore online examples included in Flare3D, code snippets, utilities, experiments and advanced examples.

    Are you new working with Physics? don´t worry, you don´t have to be Isaac Newton to create amazing physicalized developments. In our Wiki we go from the basics, explaining how to initialize a physics engine to how to control an avatar in a 3D map.

    mesh2pool

    During the process you will learn how to handle mesh collisions, primitives (how to create different kind of rigid bodies), understanding materials properties of a body (friction, restitution, force, mass, torque, etc), how to keep attached a body to a specific position and even understanding how mass of body affects its motion.

    Sounds complex, but is not! Why don´t you try it?

    Wiki: http://wiki.flare3d.com

    Team flarephysics credits:
    Marcos Lazo (Core)
    Juan Pablo D’Amato (Data Structures, Optimization)
    Cristian García Bauza (Core, Project Manager)