Matrix3D html5. not working

I’m experiencing some issues with the openfl.geom.matrix3D.
If I were to create a bitmap and set it’s bitmapdata to some asset and I add it to stage, I would get this:

And now I’d like to change it’s perspective like this:



I pass this simple code:

var w = bitmap.width;
var h = bitmap.height;
matrix3d.appendTranslation( -w*0.5, -h*0.5, 0);
matrix3d.appendRotation( -55, Vector3D.X_AXIS);
matrix3d.appendTranslation(w*0.5, h*0.5, 0);
bitmap.transform.matrix3D = matrix3d;

I get the results that I wanted.

All good so far, I compile to flash and it’s another good day!
BUT, I have a feeling that flash won’t be around for a while, but not biggies I can quickly compile to html5.

Obviously it’s not the way I wanted it to be and I’m probably missing something. The questions is, what am I missing?

Bonus question: Can I do this without matrix3D, maybe just matrix?


OpenFL does not support rotationX or rotationY, currently. That is why bitmap.transform.matrix3D is only applying a two-dimensional matrix transformation to the object, but it would be interesting if we did perform some perspective projection to try and create an equivalent value.

I forget, is it possible to do a keystone transform on a 3x3 matrix? Does anyone know?

I tried working with perspective projection but I can’t make it work.

var pp = new PerspectiveProjection();
pp.fieldOfView = 90;
pp.focalLength = 100;
pp.projectionCenter = new Point(0, 300);
bitmap.transform.matrix3D = pp.toMatrix3D();

Is this the correct way of applying it? I can’t find another way.
In as3 the transform has a perspectiveProjection property but it doesn’t seem to exist in openfl.

Yeah, it’s maybe only possible to make a skew, rotation, scale or translation with a 3x3 homography matrix.

We do support 3D in Stage3D, and an OpenGLView type, but don’t have this supported in our base DisplayObject class. I’m open to the idea of supporting it, though, if we could figure out what projection Flash Player uses

EDIT: The only problem with using 3D matrices, though, would be that bitmapData.draw and our software renderers would still not support them

Any progress on supporting the z coordinate and rotationX, rotationY and rotationZ for a Sprite that works in html5?

I have not worked on it, but I’d be willing to work with someone interested in adding this