Есть очень много советов, как делать надо, и как — не надо.
Например, вы, возможно, рисуете по дробным координатам, или используете setInterval вместо requestAnimationFrame.
А ещё можно очищать не весь холст, а только часть, которая изменяется, а ещё — сохранять уже нарисованное в одну картинку, чтобы не рисовать заново.
Это если вкратце.
Лично я тестил Graphics2d.js на слабом Alcatel 993D (Android 4 с хвостиком на борту), вот эта демка: keyten.github.io/Graphics2D/examples/solarsystem/ шла вполне плавно и спокойно, правда, на нажатия реагировал не очень охотно (возможно, из-за отсутствия touch-событий в демке).
Может, можно как-нибудь извратиться с globalCompositeOperation… Впрочем, лучшим вариантом, я думаю, будет всё же отказаться от нативных треугольников.
Я переписал по-нормальному класс CanvasGL: если раньше любая точка вставлялась на canvas сразу же, то теперь функции изменяют лишь внутренний буфер класса, а функция put отдельно его вставляет.
Реализация на JS (первая часть):
1. jsfiddle.net/2wvyga24/8/ — простейшая заливка по z-координате.
2. jsfiddle.net/2wvyga24/15/ — свет. Очень долго не понимал, в чём проблема при рисовании, а, оказывается, при вычислении нормали использовал экранные координаты вместо мировых :)
С div просто задумался, видимо, и закрыл не тем, да, это уже заметил.
На производительность тестировал, нативные линии рисуются быстрее пиксельных Брезенхэма, но это из-за того, что каждая точка рисуется сразу же.
Экономично было бы создать массив цветовых координат (который createImageData), работать с ним, а по завершении его нарисовать. Но я пока рисую нативными, т.к. немного удобнее.
Правда, при заливке появляются пустые места, так что сделаю чуть позже.
Вот немного продолжение:
1. jsfiddle.net/2wvyga24/8/ — простейшая заливка по z-координате.
2. jsfiddle.net/2wvyga24/15/ — свет. Очень долго не понимал, в чём проблема при рисовании, а, оказывается, при вычислении нормали использовал экранные координаты вместо мировых :)
В вашей версии мне не совсем понятно использование EventEmitter и других библиотек :). Думаю, логичнее было бы подключить SylvesterJS, чтобы не писать матрицы и вектора заново.
Например, как в graphics2d: для изменения параметров используются методы (а не свойства) объекта, которые вызывают перерисовку.
// обычный подход: loop перерисует всё с другим значением параметра
object.x = 10;
// функция object.x изменяет параметр и вызывает одну перерисовку
object.x(10);
Вопрос не в том, чтобы перерисовывать часть объектов (это другой вопрос), а чтобы не перерисовывать, когда это не нужно. И вообще исключить любую обработку. Например, если ваша сцена меняется только при движении мыши, очевидно, перерисовка, когда мышь неподвижна, абсолютно бессмысленна. Но здесь она есть.
Обфускация, увы, зачастую замедляет код, что в WebGL (по крайней мере, сейчас) вряд ли приемлемо.
Если у вас какие-то секретные алгоритмы, не связанные с отрисовкой, проще всего их перенести на сервер.
Например, вы, возможно, рисуете по дробным координатам, или используете setInterval вместо requestAnimationFrame.
А ещё можно очищать не весь холст, а только часть, которая изменяется, а ещё — сохранять уже нарисованное в одну картинку, чтобы не рисовать заново.
Это если вкратце.
Лично я тестил Graphics2d.js на слабом Alcatel 993D (Android 4 с хвостиком на борту), вот эта демка: keyten.github.io/Graphics2D/examples/solarsystem/ шла вполне плавно и спокойно, правда, на нажатия реагировал не очень охотно (возможно, из-за отсутствия touch-событий в демке).
Есть полный перевод.
И да, это на самом деле оказалось быстрее, но треугольник получается с дырками.
С треугольниками ситуация та же:
Думаю, надо искать более подходящий алгоритм.
Ну либо производительностью придётся пожертвовать.
Я переписал по-нормальному класс CanvasGL: если раньше любая точка вставлялась на canvas сразу же, то теперь функции изменяют лишь внутренний буфер класса, а функция put отдельно его вставляет.
Результаты неплохие
(думаю, доп. тормозом был ранд, но тем не менее).
Оставил только плагины первой необходимости.
1. jsfiddle.net/2wvyga24/8/ — простейшая заливка по z-координате.
2. jsfiddle.net/2wvyga24/15/ — свет. Очень долго не понимал, в чём проблема при рисовании, а, оказывается, при вычислении нормали использовал экранные координаты вместо мировых :)
На производительность тестировал, нативные линии рисуются быстрее пиксельных Брезенхэма, но это из-за того, что каждая точка рисуется сразу же.
Экономично было бы создать массив цветовых координат (который createImageData), работать с ним, а по завершении его нарисовать. Но я пока рисую нативными, т.к. немного удобнее.
Правда, при заливке появляются пустые места, так что сделаю чуть позже.
Вот немного продолжение:
1. jsfiddle.net/2wvyga24/8/ — простейшая заливка по z-координате.
2. jsfiddle.net/2wvyga24/15/ — свет. Очень долго не понимал, в чём проблема при рисовании, а, оказывается, при вычислении нормали использовал экранные координаты вместо мировых :)
В вашей версии мне не совсем понятно использование EventEmitter и других библиотек :). Думаю, логичнее было бы подключить SylvesterJS, чтобы не писать матрицы и вектора заново.
jsfiddle.net/2wvyga24/3/
Ну это если сильно неймётся.
prntscr.com/5xrpqb
prntscr.com/5xrqxx
Вопрос не в том, чтобы перерисовывать часть объектов (это другой вопрос), а чтобы не перерисовывать, когда это не нужно. И вообще исключить любую обработку. Например, если ваша сцена меняется только при движении мыши, очевидно, перерисовка, когда мышь неподвижна, абсолютно бессмысленна. Но здесь она есть.
Если у вас какие-то секретные алгоритмы, не связанные с отрисовкой, проще всего их перенести на сервер.