TrippyRainbowSpiral_featured

It’s a little late to show fireworks, but I thought I could share with you this Trippy-Rainbow-Spiral I’ve recently created! It’s built with a fresh new engine (on top of Stage3D) I’ve been designing during the holidays.

I’m planning to use it for future GameJams / LudumDare competitions, but for now it’s work in progress.

This area requires
Adobe FlashPlayer version 11.9 or above.
iOS Devices are not currently supported.

First, click on the SWF so it responds to your keyboard input.
A & D KEYS: Remove/Add more quads in the Spiral.
W & S KEYS: Increase/Decrease quad dimensions (by 1 pixel).
MOUSE-CLICK: Toggles visibility of odd numbered quads in the Spiral
(known bug: sometimes one quad will ‘stick’ in place and won’t update it’s color and position.)

You can play a bit with the controls to see how many Quads you can generate while maintaining 60fps.

While using Flash Player 11.9.900.170 (PPAPI release version) in Chrome, I was really surprised to see it outperform the NPAPI (although I may have been running the debug version… oops!).

I was able to crank-up the number of quads all the way up in the 10000s (ten THOUSANDS, yes!) and eventually every quads disappears due to exceeding the allowed / max number of vertices in the vertex-buffers. So it seems like Adobe and Google worked closely together to improve the performance of the player *APPLAUSE* Well done!

The real reason why I’m posting this experiment, is because I would like to…

Begin the new year with new Stage3D articles!

So this being my first article of the year 2014, I would like to start a new series (similar to the AGAL Experiment articles), but more focused around proper ways of using Stage3D. These of course will be my views on the topic based on my experience, but I invite any GPU savvy developer to correct me if I’m wrong on anything.

Here’s an outline of what I would like to cover:

Using VertexBuffers Objects in 2D: This will cover how VBOs are created, filled with data, and talk about some recommended Class design structures to hold their references.

Using IndexBuffers Objects in 2D: This will talk about what IBOs are responsible for, how to create them, fill them with data, and talk about ways to optimize the rendering phase by removing (culling) any unnecessary indices before drawing the triangles.

Brief comparison between Vector and ByteArray uploads: Based on some results posted by other Stage3D developers, this part will explain why one method of uploading data to the GPU is better than the other.

Using a Shader Program: This will demonstrate a short simple program to draw 2D objects to the screen. (May be very minimal, flat colored quads to start).

Writing a Shader and Compiling it: This will be a quick recap of AGAL, and some of the various alternative compilers that can be used out there to create your Shader program.

Deciding your 2D Engine requirements: Depending on your needs, it’s important to decide whether your project will need to take several aspects into account, such as blendmodes, multiple textures, custom polygon shapes, color multipliers / offsets, animated texture coordinates, etc.

Combining multiple GPU Resources together: This will assemble the knowledge of the previous topics to cover how to use multiple VertexBuffers, IndexBuffers, Shader Programs and other custom classes to glue the whole custom system in one piece.

I’ll stop this post here for now, hoping I will write the first part soonish (and have interesting demos to go along with each ones, of course!)

Oh and before I forget… Happy New Year!

:)