3D transformation for 2D display objects

[bp74]

Hi guys,

 

Some of you may find this interesting. The Flash API provides 3D transformations for 2D display objects since Flash Player 10. As far as i know none of the popular 2D engines for HTML5 do implement the same feature. A few weeks ago the Starling Framework (a library for Stage3D in Flash) introduced a concept called Sprite3D which gives you mostly the same 3D transformation features. So all the kudos goes to the author of the Starling framework!

Over the last two years i was working on my own HTML5 2D render engine for Dart (a programming language from Google). This library is called StageXL and it is a 2D engine from the ground up (like PixiJS and the like) supporting Canvas and WebGL. Luckily, even iOS8 supports WebGL nowadays and it's time to add some cool features which are only supported with the WebGL renderer.

 

So long story short, here is a 2D display objects with a 3D transformation applied to it ...

Okay the sample may not be very useful, but you get the idea:
http://www.stagexl.org/samples/sprite_3d/index.html

 

[uPDATE]

The previous demo was replaced with a demo originally developed by the guys from the Starling framework which i ported to StageXL. The new demo is much nicer then the previous one.

[/uPDATE]

 

 

This is the code that makes the grass and the flowers rotate in 3D space:

var transition = new Transition(0.0, 1000.0, 600.0);  transition.delay = 2.0;transition.onUpdate = (value) {  sprite3D.rotationY = 0.8 * sin(value * 0.4);  sprite3D.rotationX = 0.8 * sin(value * 0.6);  sprite3D.offsetZ = 400 * (0.1 + sin(value));};juggler.add(transition);

So if you are using another library or you are the author of one of those libraries, it's not hard to add 3D transformations to existing 2D render engines and it's a very nice feature. 

 

Best Greetings,

Bernhard

 

PS: You are also welcome to check out some of the other samples and take a look at the Dart programming language in general. Most of you are probably JavaScript wizards but for some of us an alternative language like Dart is really great and brings a lot of fun.

 

http://www.stagexl.org/samples/