Archive for the ‘Tutorials’ Category

Seriously, look all the things we did during 2014! :-)

Wednesday, February 4th, 2015

Flare3D 2014

2014 has gone and this is our yearly analysis so we can enjoy, once  again, all the things we have done together during this amazing year! :-)
Do you remember our last year post “Bigger, better, faster, …. “ ? Yes, I know… that was a long article. The list of new things was incredible and we spent a lot of time writing about the most relevant features. This year is not different, we were thinking about the new things that we made in the last year and we noticed that they are a lot more than the previous period! Keep reading, this will be a wild ride along all amazing things that you are currently enjoying in Flare3D.

Collisions and Physics system

Flare3D 2.7 came with one of the most wanted features in Flare3D. Our own “Collisions and Physics system”. Included into Flare3D’s core, is the fastest and mobile friendly collision’s system that you can find in Flash. We did a small set of getting started examples and we even had some fun doing our own version of the mega-hit Flappy Bird called ‘Flappy Flare’ for you! :-)

To see what’s possible to do with it, check out the following video. All of them are using the new Flare3D Collisions and Physics engine.

if you want to know more about Collisions and Physics,  you can also read this beautiful post.

FLSL and shaders fun!

AGAL2, MRT (Multi Render Target), we added lots of new features and keep FLSL up to date with the latest Flash Player improvements and features, but we didn’t stop there, we’re adding a whole new range of innovation to support impressive rendering pipelines without affecting current workflow and still keep the designers flexibility we’re all used too, which is definitely awesome :)

One of the first examples was AIR Gamepad Demo, which was impressively running on mobile as well!

Walk through demo using Adobe AIR Gamepad

Walk through demo using Adobe AIR Gamepad

Workflow improvements with Flare3D IDE

We have added a new full set of features here, from workflow improvements to a completely redesigned and improved F3D file format (which we’re going to talk about next in this article). This allows for a lot more complex and bigger projects, as well as simplifying tedious and boring optimization tasks for different platforms.

Flare3D 2.8 IDE

The new and improved IDE in Flare3D 2.8

We have also added the new Texture options panel with a nice set of options, and more beautiful and helpful thumbnails and tool tips, and tons of improvements and optimizations to the whole tool. We’ll go in more detail on all these features in a new, coming soon blog post!

F3D binary files are back!

Before Flare3D 2.0 was released, the Flare3D’s files were saved as F3D files. F3D was a binary and compact file containing all the necessary data for each 3D model. Once the Flare3D 2.0 was released, the old F3D was replaced by a new format called ZF3D (which is basically a zip file with a set of files containing all the information 3D models need). ZF3D files use an open and simple structure so that everyone is able to change and mess with it without to too many complications, as well as bringing a friendly format to be exported from different 3D modeling software.

The main problem with ZF3D is that it’s largely based on XML files and its loading process could be slow, as well has having other limitations and less features to keep its simplicity. That’s the reason why we are going back to the F3D binary format. The results are amazing!, F3D not only improved loading times “a lot”, but it also optimizes file sizes depending on each  particular platform, so for example, on mobile you can avoid some compression to be able to load things faster, but on web, you may want the smaller file you can get.

F3D is not only about file size and faster loading times, it also brings a lot behind the scene optimizations, huge memory improvements, and full range of new features like shared packages, embedding any type of assets like xml’s, or sounds or whatever you would like to put inside, easier access to all loaded resources, the ability to upload, download and dispose packages in a more organized way, multiple scenes, and the list goes and goes 😉

So, why not removing ZF3D files then, well, both ZF3D and F3D files have its purposes, it is like having a PSD and JPG, a FLA and SWF files, in the same way, ZF3D files are lossless and are useful when editing / exchange during development. Once you have all set, you can export the final F3D files for shipping your projects.

Holy sparkles Batman!

A new Sprite Particles system was added to Flare3D!, a powerful combination between GPU and CPU, bringing a lot speed and flexibility at the same time.  Differently from the currently fully GPU partciles system, the new Sprite Particles allows to treat each particle individually, and create a lot more flexible visual effects. Since it does not require to pre-compute big buffers, they are fully dynamic, interactive and take a lot less GPU memory as well, still, maintaining full rendering speed trough batching in few draw calls lots of particles together. All this comes with a little cost, in which we need to update particles at CPU side, so depending on each particular case, you may still want to use the old particles for specific cases like fire or smoke…where you don’t really need too much flexibility or interaction.

Since the new sprite particles is more about flexibility, it mostly works from as3 side, so it will require a bit of code to make things work, but while getting a lot more freedom as well 😉

This is what the “boy wonder” said when he discovered the new particles system.

 Added static objects and automatic batching.

Optimizations are always welcomed, and this is not a minor one. We added the option to set objects as static, the engine will internally try to optimize all those objects to reduce draw calls as much as possible, which means, a lot more rendering speed!
How this works?, basically, you set the objects to be static in the IDE via the properties panel, or through the Pivot3D setStatic method in As3, and that’s it. All those objects will be sent to a Static Batch which will do its best to optimize the rendering of those objects.
This of course has some limitations, as you won’t be able to move or animate objects that are set to be static, also some features may be disabled like changing materials or setting objects to a different layers, but as any tool, you just need to use it in the right place 😉

Dynamic Batching.

Static batching is really cool, but dynamic batching is even more than cool :) It only works on specific cases, but it really does a good job!

A dynamic batch (or MeshBatch3D) allows you to groups multiple identical objects (in their geometry and materials) and draw them in fewer draw-calls, which also speeds the rendering time a lot!

It is specially useful in cases where you need to render tons of bullets, trees, game coins or pick-ups, enemies, basically, every time you have lots of identical objects.

And the best part, these objects can be moved, rotated or scaled and support camera culling.

And that’s not all!

Along 2014 we were involved in the development of two amazing projects, pushing Flare3D more and more.

The first one was Lightstorm, a futuristic racing car game that we made to demonstrate the capabilities of Flare3D, the power of FLSL and the new Physics engine.

Lightstorm

The game was inspired by the style of Tron.

The second was Regular Show – Dimensional Drift, a racing car game inspired by the popular cartoon of Cartoon Network. The game can be played in two different modes “Single player” and “Multi player”. Was released in november and until now has more than 2 millions of plays and it keeps in the top five of the most popular games at Cartoon Network.

Regular Show

Regular Show is one of the most popular CN’s shows.

Thank you all!

The latest section is for you guys! For those people that trust in Flare3D, for their commitment with the community and because you make incredible things with our engine. THANKS!

forrest_gump_41885

like a chocolate box…

 “My momma always said Life is like a box of chocolates, you never know what your gonna get”

Forrest Gump

 

“My CTO always said Flare3D is like a box of chocolates, you never know what your gonna get”

Flare3D’s crew member

Join Flare3D on GitHub

Friday, October 10th, 2014

Flare3D on GitHub

We just opened our new GitHub repositories a few weeks ago, and little by little we have been filling it with new and helpful things, and we expect to continue doing that :-)

First one to join was Flare3D Labs, this repo includes all kind of experimental code (deferred lightning, Adobe AIR Gamepad, SAO, etc…) that you can use as an inspirational starting point to do your own creations.

We then added a new Flare3D Engine repo where you can find parts of the core engine, either to extend its functionality or as part of the documentation to better understand how things work internally, for example, all material filters and its FLSL shaders can be found there.

Flare3D GitHub

We are waiting for you on GitHub

 

If you want to be updated with the latest examples, please follow us in GitHub, if you like the content, please feeds our ego giving us a star in your preferred repo and if you think that you are ready to add some amazing stuff we will be glad to receive your contribution :-)

Visit us on GitHub regularly, cool things will be published soon!

If you want to stay tuned to receive latest news and announcements, follow us on Facebook and Twitter.

social_facebook
twitter

 

 

Oculus Rift DK2 example by Tom Goethals

Thursday, October 9th, 2014

Flare3D and Oculus Rift DK2

 

Tom have been working with Oculus Rift for a long time, some time ago he made a nice example for Oculus Rift DK1 and now he just released an updated ANE and Flare3D’s example for the new DK2.

We talked with him about Virtual Reality, Oculus Rift and Flare3D’s integration:

Which is your previous experience with Virtual Reality?

From the first time i saw the holodeck in Star Trek, the next generation, i’ve always wanted to pursue virtual reality.

In the 90’s, I was 12 or 13 years old during the first VR hype, the local computer business showcased the huge Forte’s VFX-1 HMD for PC. It really was not that good and i certainly did not have the funds to buy something like that. But it always stayed in the back of my head.

When Nvidia started experimenting with the first stereo drivers that worked with shutter glasses (before slow lcd’s became the standard) I immediately went and bought them, Battlefield 1942 looked gorgeous in stereo 3D.

After graduating i started working as a flash developer in an awesome multimedia company called BUT. (www.but.be). When the first 3D engines came out in flash, before Stage3D came to the scene, I created some demo’s with stereo views in anaglyph 3D.

I read the MTBS forums (http://www.mtbs3d.com/) at the time Palmer Luckey was contemplating his first rift prototype and went to kickstarter with it. I asked my boss for a developer kit and could not wait for it to arrive. After playing around with it a few evenings i wanted to create things myself. I looked around if somebody created a Native Extension for Air already. Jonathan Hart just started his ANE and a few other people contributed code. I set out to create the distortion shader (in AGAL) and spent many many nights until the basics finally came together.

Palmer Luckey Oculus Rift

Palmer Luckey and an earlier Oculus Rift prototype

By then i found out about Flare3D and it’s FLSL language, I asked for help on the forums and just minutes later Ariel came up with a working distortion shader with chromatic aberration. :-) I felt like all my AGAL studying was for nothing, but was sold on Flare3D. The support is just great!

Are you working on an Oculus Rift project?

While the implementation is already really usable there is still work to be done, latency tracking is next on the todo list. But the most important bits are done including Timewarp.

I’ll soon be making a demo project so we can pitch ideas to clients. Personally I would really like to make a space shooter. Sitting in a cockpit looking into the void of space is just something that is made for VR.

Jonathan Hart just completed work on integrating the Oculus into the award winning VR-based music video for Beck’s “Sound and Vision”, produced by Stopp Family and directed by Chris Milk which won 2 Webby Awards last year. This piece also uses Flare3D, and in a very novel way. http://www.stopp.se/chris-milk-beck-hello-again/

Interactive music video for Beck’s Sound and Vision

Awesome Interactive 360 music video for Beck’s “Sound and Vision” also uses Flare3D

Beyond that there is also already work underway to support the Samsung Gear VR and integrating Oculus’ Android SDK as a platform target for the ANE. Exciting times are ahead!

What offers Oculus Rift DK2 comparing it with their previous version?

DK1 had a 1280×800 60hz. LCD display. DK2 has a 75hz. full HD OLED display that is capable of showing a much crisper image.When Adobe AIR is delivering 75fps and you turn on the low latency mode, the difference with the first developer kit is huge. Low latency shows the rendered frame only for a fraction of the 13ms it would normally be visible to the eye. The result is that the image does not smear like in DK1 when looking around.

Besides the better visual qualities it also has an external camera that tracks the users position. makes a huge difference in not getting sick.

DK2’s only downside is that is has a lower fov. then the first developer kit has. But it’s important to know that all of this is still for developers. The final consumer version specs are in no way locked down and i’m sure they’ll be improving almost every aspect of the current developer kit for the first consumer version. for example the new prototype Oculus showed last week has completely different optics, a higher refresh rate (90hz. is hinted) and it looks like it has a higher resolution.

Is the example ready or does it need a few tweaks to consider it finished?

It needs tweaking, the perspective projection is calculated in Flare3D while Oculus provides a projection matrix from the SDK. I just can’t make sense of the one they are providing, it’s something that needs looking at so the setup will automatically work for future versions.

Flare3D and Oculus Rift DK2

Flare3D and Oculus Rift DK2

Adobe Air does vsync but in my test setup it locks to the refreshrate of the slowest monitor. Which in many cases is 60hz. That might be an area where AIR could be improved. It should check which display it is running on and then adjust. This way, when you go fullscreen on the oculus, it starts running in 75fps. The current solution is to buy a decent high framerate main monitor or set the rift as the only display which is highly impractical. According to Adobe, they have no framerate cap on AIR desktop, which means the 90Hz consumer version of the Oculus is already feasible: the world just needs hardware that refreshes at that frequency.

Which was your experience integrating Flare3D with Oculus Rift?

Flare’s api and the flsl language are perfect for the job but what is even better is the active community and a lively forum where you can go for help. The scriptable IDE is also great and allowed me to write an importer for the oculus demo scene. I’m really looking forward to the next version. People jumping in and creating fxaa shaders that can work together with the distortion shaders really gives you the energy to continue working on it.

Full example and Sources

The example, ANE, and source code are available on his Github repository here:

https://github.com/jonathanhart/oculus-ane

 

Thanks Tom! :-)


 

Tom Goethals is a multimedia developer currently employed at B·U·T (www.but.be).

Living in Belgium with his awesome wife and 2 kids. He worked on many award winning interactive campaigns, installations and websites.

Follow him on Twitter using @Fragilem17

 

 

Using AIR Gamepad in your Flare3D game

Thursday, August 28th, 2014

Walk through our deferred lighting demo using Adobe AIR Gamepad!

Walk through demo using Adobe AIR Gamepad

turning your mobile device into a joystick with Adobe AIR Gamepad

One of the latest features released with AIR was Adobe AIR Gamepad. Basically, if you have adobe AIR installed in your Android phone or tablet you can use it as a joystick in your game. The integration is really easy (check out Adobe’s tutorial here) and provides you with a lot of possibilities such as adding the joystick functionality for your game or else you can use it as a second screen for interactive applications.
To play the demo you must follow the following steps:
Important: Flash Player 14 (or higher) is required

  • Open the demo here
  • Launch Adobe AIR application in your phone or tablet.
  • Shake your device to enable AIR Gamepad.
    AIR Gamepad

    AIR Gamepad enabled in your device.

     

  • Type into the demo the code that appears in your device and press “connect”

    Type the code that appears in your device.

    Type the code that appears in your device.

  • Once you get connected your device will vibrate and you will see on the device screen the touch areas for walking and looking around into the demo.

The demo

This demo uses our “Deferred lightning” example. You will find the demo’s source code at Flare3D Labs in a new folder called “gamepad” which has been added into src.
The VirtualPad class receives a gamepad’s reference and handle the input in the same way. This class was made to detect traditional touch events, but with a few changes was adapted to work with AIR Gamepad. As a complementary information you can checkout AIR Gamepad docs here.

Download the demo

Interpreting the input

AIR Gamepad recognizes Multi Touch and gestures input and send them to your application. So you can catch the input as if your app would be running in the mobile device. Once the connection between the app and the device has been established you are able to skin the device’s screen sending an image. In our demo, we are sending an image that shows a reference indicating the touch areas on to the screen.

 

It’s time to play! :-)