[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] Matrix objects in JavaScript



Number allocations aren't the same as allocating mutable objects. If you do it in JS the VMs will happily deal with immutables of determined type in a fairly efficient GC free manner. If you do it in native code, then there won't be any objects for them at all, they'll be native types, read out directly from the array backing store. The temporary I mean is what happens when you call "new MyMatrix" or start chaining things like rotate().translate().skew() etc.

If you do any of the following in JS (or by equivalent ref/derefing native code):
- new something()
- {}
- []
- function(){}

You will get a GCed object, which will need collecting, which will pause JS for anything between 60ms up to 200ms, which will make your smooth 60fps requestAnimationFrame skip over anything around 4 to 20 frames, which you will see as jittery animation. To be completely free of this effect you will have to guarantee that the GC is going to complete its job at most in one millisecond per frame (assuming you've got one or two other things to do than GCing per frame). This will never be the case.


On Thu, Mar 21, 2013 at 11:18 PM, Rik Cabanier <cabanier@gmail.com> wrote:


On Thu, Mar 21, 2013 at 2:40 PM, Florian Bösch <pyalot@gmail.com> wrote:
On Thu, Mar 21, 2013 at 10:16 PM, Rik Cabanier <cabanier@gmail.com> wrote:
Which one is faster:
element.style.transform = window.getComputedStyle(element).transformMatrix.rotateBy(45); // 1 temporary object. all calculations on c++ side
or
... make sure some js library is loaded
element.style.transform = new MyMatrix(window.getComputedStyle(element).transform).rotateBy(45).getFloatArray(); // 2 (or 3) temporary objects + 6 or 16 (12 or 32?) temporary floats + all calculations on js side

Neither, this one is faster:

mat4Rotate(window.getComputedStyle(element).transform, 45, element.style.transform)
                                                              ^ source    ^a                        ^ target

We're quite serious when we say temporaries/allocation is a serious problem, seriously, we're not joking. And lengthy discussions on the GC issue have been conducted with only one clear outcome, while things may get better, they will not get perfect.

You constructed 2 temporaries there as well as brought in at least 12 floats into the JS VM + you did all the math in js.

 If 'element.style.transform' returned a live object, you could just do 'element.style.transform.rotateBy(45)' and have only 1 temporary.