Category: Uncategorized

Hey guys and gals.

Just a quick post to introduce something I have been working on in the teeny bits of free time I can find at the moment.
I have spend a good chunk of time working on 3d engines in the past and something that has always been a difficult part has been writing good parsers for the various formats out there, not only are there a huge array of formats but there are many versions of them and often there are discontinuities between the outputs from various 3d authoring tools.

So I decided to give myself (and you lot) a way round this, at least that is the plan.
I thought I would build an air app that runs on desktop and can be used as middle-ware to sit between your 3d authoring apps and your games/applications.
I know that there are alternatives out there already; away3d, alternativa and flare3d all can load various formats and do it well, but I am a sucker for reinventing the wheel, that said the approach I am taking will have some distinct advantages.

By preprocessing the data it can be stored much more efficiently and more ready for use, so that means much much shorter parsing times and much shorter upload times. I also plan to allow the users to choose how much data they wish to export from the tool, just want vertices for point rendering – no problems, want everything including animations, normals, tangents… you got it.

Another thing I would like to add would be to enable you to write custom exporters through your own swfs so you can really tailor the output to your needs, but this will happen further down the line and only if it is needed.

So at the moment I only have a prototype but it looks promising so far, it supports over 20 3d file formats and loads of texture formats including the following:
3d – 3ds, fbx, obj, md5, bvh, dea, b3d, x, and a few more too
image – jpeg, tif, png, bmp, tga, psd, and loads more

In terms of workflow the idea is this:
1. drag your 3d file into the app
2. check in renders ok in a basic view
3. export the scene in a binary file that is built for fast and easy usage in flash.
4. embed or load the binary file in your app
5. use a swc that will be bundled with the app to extract anything you need from the binary file
6. win at life

Here are some videos of the prototype, please ignore the crappy ui, it needs a fair bit of work but most the hard stuff is done I think.

Dragged in a 3ds file followed by a tga.

Dragged in an animated DAE file and the app auto-located the texture, the skeleton is rendered as an overlay

A zombie, because… well it’s a zombie.

So I aim to release a beta version of this as soon as poss, hopefully within a month so if you are interested let me know.
I would have found something like this invaluable not that long ago and I hope it will be useful to you.

Let me know your thoughts or if you have any questions just leave them below.

ps I may also include in the swc classes for generating shaders and maybe even rendering stuff too, but we shall see what the demand is like. I just want to get more folks playing with stage3d!

pps I may also combine this with my stage3d vector renderer, but I need to put some more thought into that so don’t hold your breath just yet.

ppps The app tries to convert older version of FBX files into newer ones under the hood to increase the changes of them loading where they might fail in other apps.

pppps I might look into generating ATF files too automatically from your input textures, which might save you some time, nice if you can just drag in a psd and then boom – auto converted to an ATF.

cheers,
b

Nothing exiting but made this a while back and though I would share, a simplistic demo but good at showcasing what flash is capable of.

On a decent machine I think it would run at 60 fps.
Mine starts to slow around the 75,000 mark.

So the demo will display up to 100,000 animated sprites on screen depending how brave you are.
It is mouse controlled, the further RIGHT you move it the more it will draw, the further DOWN you move it the bigger the sprites will be rendered.

This allows you to try out a bit of variety.

DEMO HERE (flash player 15 needed for this one)

I added the number of sprites drawn to the stats panel (sadly the stats cost a bit of performance and leaks memory too, but no everyone will be running scout so in it goes).

So see how it runs on your machine and let me know 🙂
Do remember that this is not a final product or a complete lib or anything like that, it is just a showcase of what you can achieve with flash, and quite easily at that. (The whole demo could be condensed into 300-400 lines of easy to follow code including all the Stage3D bits).

Sorry if any machines explode while trying to run it!

Also will try to start posting in here more frequently again soon.

(edit: video added, quality isn’t great but hey ho – best in “hd”)

update 27/03/2014

Latest version is on github, will add a few extra samples to go along with the source code later today.

Still have to move some more math onto the gpu but its working well at the moment :), need to do some more testing as the more that I shift to the gpu the smaller the batches become and the draw call savings get lessened 🙁

update 18/03/2014:

Latest version is a bit faster handling 50,000 objects in under 10 ms no sweat (about 6-7 ms on my upper-mid range machine).

Added the use of asc2 fast bytearrays and it speeds it up a little, but not a great deal so will leave that out I think to maximise compatibility.

Just want to move a bit more math onto the GPU (still have a few multiplications and divisions that can be moved over to save a few cycles).

Once that is done I will update on github. Next step is putting rotation back in and maybe an alpha multiplier.

————————-

You can find it on github here:

https://github.com/bwhiting/b2dLite

Current  features:

drawing textured quads of a given position and size, with option texture offsets and scales

Future features:

add rotation – reduces performance as it will add to the number of registers required per quad, 3 no longer 2 (but all math done on gpu so no big deal)

(knowing if there is demand for this will be useful)

add more texture methods, i.e. auto mip map generation and non power of 2 size fixing function

Potential features:

Colourization, and other advanced effects.

 

Please give it a test drive and feedback on anything that works well, or doesn’t, anything missing?

Will keep this updated as I change things. Will also add a few demos when time permits.

First demo:

http://bwhiting.co.uk/b3d/b2dLite/ <– 10,000 objects

Another demo courtesy of Peter Strømberg:

http://www.videometry.net/AGAL/bw/bw.html

 

Hey guys and gals,

Started playing with vectors on the GPU last year but it sort of ground to a halt really, I didn’t like the ugly aliasing and let face it vectors should look smooth as a peach. Anyway, skip forward until flash player 11.6 beta was released supporting new shader op codes (namely ddx and ddy) woo, now I had the ability to add in that sweet sweet anti aliasing by leveraging the screen space derivatives!

Cool so now that I was able to render filled triangles and bezier curves (and soooooo close to cubic curves too – need help on this one though), I thought it should be easy to tie it in to the new readGraphicsData command as seen here:
Query Graphics Data

Sadly not quite as straight forward as you might think!
The readGraphicsData method returns all the information to serialize the graphics of any object with graphics in it in flash! But there are still a few difficulties with parsing this data for use on the GPU.

Here are some of the issues:

• Determining if a bezier curve is concave or convex (this depends on what side of the closed region the curve is on)

(of the two curves on the left shape one is concave and one is convex, blue and red respectively and the shader needs tweaking dependant on which one it is)

• Determining if two curves overlap (i.e. in long sweeping thin curves… in this case the curve may need to be broken down into smaller curves)
• Gradients fills! A couple of problems here, 1 is reversing the gradient matrix and the other is to replicate it on the GPU. Simple gradient fills are possible but can get complex easily as you start added more than two colours (maybe at this point a 1×256 pixel texture could be used as a lookup) . That said I have not got round to this yet so might not be to bad.
• TRIANGULATION!!!!!! This is the real problem here… (at least to me it is). So from the output of the readGraphicsData we have extracted all the curves and along the way we have collected a series of points. These points make up the triangles that we use to fill the solid sections of the shape. Things get tricky however because these points do NOT automatically make up a nice sequence of triangles, you will get overlapping issues and a whole host of other problems. So this is where the triangulation comes in. At first I tried Delaunay triangulation but it was too greedy making triangles outside of the actual shape, so no good. Then I tried some ear clipping examples that I found but only 1 of the 3 I tried kind of worked and I say “kind of” because  it goes into a number of infinite loops that I had to hardcode exceptions for 🙁 and as such it misses a few triangles. (Also every now and again it would reject a complete path for no apparent reason). Not only that but the ear clipping algorithm is SLOW and doesn’t scale very well.

True vector graphics are great, they are something we love about the platform and will miss when the next major release of actionscript comes about. This is the reason why I though it would be great if we could emulate it on the GPU and I am sure it’s possible. It would however be 100 times easier if Adobe could extend their api to expose the result of the internal triangulation that they have already implemented in the player. That way they are still leaving it up to us to handle the rendering but we won’t have to spend an AGE trying to do work that they already have done a long time ago.

 

Anyway am bored of typing so I will post a small demo video (best viewed @ high resolution + full screen):

..Interactive demo coming soon.

 

 

If anyone wants to know more, discuss the topic, contribute, point me at an awesome triangulation library for as3, or anything else.. just drop me a message or reply to this post.

Related link(s) of justice:
http://www.bytearray.org/?p=5013

 

TODOs:

Use edge lists to enable anti aliasing on straight edges of standard (non curve) triangles.

Use edges to also determine if curve is convex or concave.

Look into cubic curve  – quadratic bezier curve conversion

 

UPDATE:

In an ideal world I would like this to become a small Open Source project. One that is not geared to any specific engine or renderer just a simple tool that can be used to generate the required data from any flash display object. If anyone is interested get in touch, I will be more than happy so share the code once its a bit more optimized and would love to see this become something useful not just for the developers of a particular engine but for all flash devs 🙂

Should run a bit faster across all machines.

 

update includes:

• faster matrix composition
• bare minimum uploads to GPU by combining the various techniques used in the material into one on the fly.
• added another material into the demo (normal mapped)
• added other meshes to you can try and identify where the limits are.. geometry bound or draw call bound

 

link to updated demo:

http://bwhiting.co.uk/b3d/stress2/

 

controls (as before but also):

p – turns of mouse look

n – changes the mesh being rendered

 

Quick tip, go full screen in your browser to maintain access to all the keyboard short-cuts. (click the title bar and hit F11 is the usual command I think)

As before any feedback on performance would be great, there is still room for gains but fir the time being I am happy. Would love to hear what someone with an i7 and a beast of a graphics card can achieve.

 

b