[js] Vec2 (двумерный вектор)

[moka]

Двумерный Вектор (Vec2), на JavaScript.

Весьма "грубое" решение расширить Float32Array, т.к. IE9 не держит их, лечиться правда очень просто - условием что если Float32Array нету, присваиваем к нему Array, и всё работает даже на древних платформах.

Исходники: https://gist.github.com/Maksims/8464888

Список поддерживаемых методов:

new, delete, clone
equal, equalS, equalXY,
set, setS, setR, setXY,
add, addS, addXY,
lerp, lerpS, lerpXY,
sub, subS, subXY,
mul, mulS, mulXY,
div, divS, divXY,
len,
dist, distXY,
dot, dotXY,
norm,
radians,
rot, rotR, rotXY,
sat,
floor, round, ceil 


Метод без приставки обычно принимает другой вектор.
Приставка S - метод принимает один аргумент - число.
Приставка R - принимает один аргумент - угол в radians.
Приставка XY - принимает два аргумента, x и y.

Вот пример реализации 2д камеры pick (координаты экрана курсора преобразуем в координаты мира), с учётом - позиции, поворота и приближения камеры:

Camera.prototype.pick = function(viewport, v) {
    return v.clone()                    // копируем точку клика
        .sub(viewport.middle)           // централизуем на центр области обзора
        .rotS(-this.rotation.radians()) // поворачиваем
        .divS(this.zoom)                // приближаем
        .mulXY(1, -1)                   // реверсия Y координаты
        .add(this.position)             // сдвигаем
};

// ...

var pointInWorld = camera.pick(Vec2.new(mouseX, mouseY)); 


Бенчмарк с glMatrix (больше - лучше), как видим с кешем мы в 11 раз шустрее, без кеша почти вдвое.

[ABTOMAT]

Изобрёл велосипед, не поискав готовых решений.

http://glmatrix.net/docs/2.2.0/

mat2
mat2d
mat3
mat4
quat
vec2
vec3
vec4

Уже давно есть и работает везде.

[moka]

Я давно вкурсе про glMatrix ещё до имплементации данной библиотеки.
Но если ты работал с glMatrix, то ты отметишь для себя что данная библиотека не поддерживает chaining, а имеено то что я указал в примере, т.к. классы (по факту объекты) - лишь имеют функции а не методы над данными (не прототип над массивом).

Следственно твой аргумент не уместен по причине отличия решений, и по факту невозможность chain'ить мат. выражения - является первопричиной разработки своей библиотеки.
Также не имеет никакого "прозрачного" кеша для тебя, что прийдётся расширять библиотеку и переписывать методы копирования, инициализации и т.п.

Моё решение решает только одну задачу: vec2, то что мне требуется.
Да и моя библиотека рвёт glMatrix по производительности в клочья.

[ABTOMAT]

Сообщение от moka

Да и моя библиотека рвёт glMatrix по производительности в клочья.

Проводились тесты?

[moka]

Коментарии излишни...
(больше - лучше)
http://jsperf.com/glmatrix-vec2-vs-vec2


Даже без кеша, выийгрывает почти вдвое, с кешем, выйгрывает в 11+ раз.
Я уже не говорю о разнице того как код выглядит...

glMatrix:

Camera_g.prototype.pick = function(point) {
    point = vec2.clone(point);
    vec2.sub(point, point, this.middle);
    
    // there is no rotate vector methods in glMatrix vec2,
    // alternative would be to use matrix for such operation,
    // but that would be overkill, and would reduce performance even more
    var rotVec = vec2.clone(this.rotation);
    vec2.normalize(rotVec, rotVec);
    var t = point[0] * rotVec[0] - point[1] * rotVec[1];
    point[1] = point[1] * rotVec[0] + point[0] * rotVec[1];
    point[0] = t;

    vec2.div(point, point, vec2.fromValues(this.zoom, this.zoom));

    point[1] *= -1;

    vec2.add(point, point, this.position);

    return point;
}; 


Моё решение:

Camera.prototype.pick = function(point) {
    return point.clone()
        .sub(this.middle)
        .rot(this.rotation)
        .divS(this.zoom)
        .mulXY(1, -1)
        .add(this.position)
}; 


Далее, я использую уже библиотеку не в первом проекте, следственно она доказала свою стабильность и удобство на самом деле реально выше в разы.

Честно сказать это было и до тестов очевидно, если ты заглядывал в то как glMatrix работает и в моё решение, а не задавал бы подобных вопросов.

И ещё факт того что я написал данную либу - позволило мне изучить как на самом деле работает математика каждой функции при работе с 2D векторами, и я считаю это огромный бенефит.

[johnk]

что понимается под кэшированием вектора?

[SBJoker]

не хватает сравнения с кешироваными матрицами.

[moka]

Сообщение от johnk

что понимается под кэшированием вектора?

В JS есть свой сборщик мусора, но стоимость создания Float32Array - обычно более 50% всей стоимости работы с векторами. Следственно заместо отдачи вектора на сборку мусорщиком, мы храним уже не использованный вектор в отдельном массиве (cache), и когда создаём новый вектор, проверяем если в кеше есть не используемый вектор, если есть, переиспользуем.
Тем самым мы экономим огромное количество производительности.

SBJoker, угу, там разница была бы ещё в разы круче. Но данная библиотека имплиментирует только 2ух мерный вектор, и матриц в ней нету.