Pull to refresh

Comments 136

Прошу прощения, в спешке забыл ссылку на индекс, да.
Подскажите, а нагрузка на CPU это вынужденная жертва?
Обратил внимание в FF нагрузка при открытии увеличивалась в «двое», для чистоты открыл IE (1 вкладка с Вашим примером), от старенького P8400 IE съело 48%-50%.
Открыл на MBP в сафари демку и начал говорить по телефону. Через минуту разговора бук гудел как пылесос. При видеообработке и на тяжелых играх такое не всегда проявляется. Решение, конечно, не плохое, но трудно соотносящееся с реальностью…
Посмотрел, по ссылке гораздо более глючный вариант, бесспорно, но он и менее ресурсоемкий (пол часа страница открыта, нагрузка на процессор почти не выросла). Вариант kibizoidus куда лучше, но тяжел для рендеринга.
Что значит?
гораздо более глючный вариант
Какой браузер и как это проявляется?
Safari
Версия 6.0.2 (8536.26.17)
OS X 10.8.2

Раз в пару секунд картинка замирает на долю секунды.
Поправил. Забыл ссылку на индекс, прошу прощения.
У планет на внешней орбите окошко с описанием когда подходит к краю обрезается размером канваса:)
Кстати, не хочу разводить холивар, но флеш уже приличное время умеет не «дёргаться» при движении, а у вас при наведении на планету её анимация, не смотря на её скорость, очень дёрганная и мерцающая. Это просто не учтено было при разработке или такая проблема присутствует?
Это просто не учтено, да. Субпиксельное сглаживание, я за него просто забыл, прошу прощения. Постараюсь попозже поправить.
А, и забавная фича — меню останавливает планету. После отпускания планета едет дальше.
В отрыве от того, что это типа модель, было бы ничего, но остановленный Марс это уже забавно.
ТЗ же
При клике на планету выпадает меню. При наведении мыши на планету и при клике по ней анимация данной планеты останавливается, остальные планеты продолжают свое движение.
UFO just landed and posted this here
Огаму видел? Там вообще планеты в виде таблицы описаны — и ничего)
UFO just landed and posted this here
Везде нужен баланс. И вот где кончается реалистичность и начинается казуальность пусть решает гейм-дизайнер ;)
UFO just landed and posted this here
Иногда в маразме вся суть ;)
UFO just landed and posted this here
Можно немного поподробнее про «дерганье» — какая версия браузера?
Тоже дёргаются. Safari 6. Повторить так: подвести к орбите, оставить мышу в покое, сидеть смотреть. Примерно каждые 5..10 секунд притормаживает.
Там же подписаны названия планет. Нет там Марса.
Очевидно же, что дело не в названии, а в божественности происходящего на экране.
Названия выбираются путем божественного рандома из списка ^_^
Если проскролить страничку вниз, то орбиты и планеты перестают выделяться ровно под курсором, а выделяются с некоторым смещением.
Аналогичная проблема, хром.
Нужно бы дополнить пример сдвигом при скролле. Сейчас что-нибудь придумаю. Спасибо.
Поправил. Попробуйте еще раз.
Теперь все оки!
Хвалю, не слушай никого )
Круто, под FF, ubuntu — отжирает столько же сколько и простенький флеш.
Ага, тоже заметил: планеты двигаются рывками + загрузка 4 ядер на 50%. При переключении вкладки — на уровне 2-3%.
Под Win7, с напрочь загруженным процессором (Vray рендеринг в 3dsmax, все 8 ядер забиты на 97-100% в диспетчере задач) работает на удивление гладко. Я, конечно, согласен, что тут не так много графики, но:
1 — Любые флеш банеры при такой нагрузке на процессор «тормозят»
2 — Вне зависимости от того, насколько прогружено видео в Youtube и какое качество видео выбрано — тормозит.
3 — Браузер в принципе меееедленно страницы открывает.

Не похвалы ради, просто на самом деле, при такой загруженности системы, делать что-либо параллельно не получается, даже видео посмотреть в интернете… приходится сидеть и тупить в монитор, а тут работает, будто система свободна.

Спасибо!
Сделай размер браузера Chrome тамк что бы не все орбиты влазили на экран.
Поводи мышкой.

В общем у меня орбиты подсвечиваются со смещением + 1 примерно.
Да и то… курсор то между орбит.
Может быт не помешает в ту ветвь комментариев добавить ссылку на эту статью? Довольно поучительно ведь получилось.

Хотелось бы уточнить детали:
var PlanetController = new Planets({
    fps: 5
});

Я все правильно понял насчет 5 fps (при том, что на моей машине отнимает > 100 % процессорного времени)? (Каюсь код просмотрел по диагонали, сильно не вникал).
Нет. Этот параметр сейчас «для отвода глаз». Он не используется.
На слабенькой машине около 40 fps в Хроме, съедая одно ядро на ~90%.
Довольно-таки простенькая анимация — можно было бы и на SVG реализовать.
С удовольствием сравнил бы решение на svg и текущее на canvas.
На SVG там все не так просто. Chrome и Safari имеют очень ограниченную поддержку SVG. Так например не работают обработчики событий внутри тегов use. Да и вообще там много оказалось всяких косяков. Если интересно могу рассказать подробнее
Тьфу ты, да. Я и забыл, что в хроме плохо с SVG: сам же делал псевдо-3D на SVG, в огнелисе работало без заметных тормозов, а в хроме через одно место.
Eddy_Em

Так пишите ему ТЗ =))
Да ладно: SVG — уже почти что устаревшая штука. Но при этом до сих пор не поддерживается одинаково всеми браузерами.
«нетормозящее решение»? :) Intel Core i3-2100, последний FF, аддоны для верности отключил — загрузка процессора на полную
image
Старенький е8600, проц скачет от 2 до 7 процентов. Ubuntu, Chromium 22.0.1229.94.
Celeron 575, ff17, linux: загрузка в 20%
Celeron B815, debian, свежий iceweasel — по ощущениям что-то около 0,33 fps, и серьезные фризы в работе браузера. Печаль.
Когда курсор перемещается по орбитам горизонтально от Солнца — всё ок.
По вертикали всё очень грустно: курсор уже в «космосе» (сошёл с последней орбиты), а подсвечена только 8я орбита.
Mac OS X 10.7.5, Chrome 23.0.1271.101
Страница чуть промотана по вертикали, обработчик мыши этого не учитывает.
В последнем фиксе пару минут назад это исправлено, проверьте, пожалуйста, еще раз.
Нормализовалось в FF :) Если мышку пошевелить — 7-10%, если в покое — 4-5% процессора
Вы молодец. Вот просто взять и потратить кучу свободного времени, что бы доказать кому-то, что технология работает — это достойно похвалы.
А вот с какой задачкой я столкнулся и интересно ваше мнение — надо сделать как можно больше интерактивных (реагирующих на 3 события мышки) изображений (учитывать прозрачные области как неактивные). В районе 3К одинаковых изображений я еще норм держусь (MBA, Chrome), но как сделать еще больше? 10К?
А Вы у каждой интерактив слушаете или используете bubbling?
Не совсем понял суть вопроса — в канвасе, как таковом нет событийной системы и объектов ее поддерживающих. То есть, при любом событии мышки я просто посылаю это событие обработчику канваса, который на основе полученных координат мышки решает, у какого из изображений (игровых объектов, например), отрисованных на канвасе вызываем событие-реакцию.
а, прошу прощения, не совсем правильно понимал событийную модель канваса)
Секундочку. Какоо размера canvas? Размеры изображений? Как расположены? Я сомневаюсь, что на одном экране влезет 3к изображений… В общем — лучше поподробнее рассказать, а еще лучше показать вашу задачу. Думаю — решение, все же, есть…
Соль в том, что бы сделать универсальное решение, по типу флеша. Что бы конечный пользователь-программист не задумывался, добавляя интерактивный объект к списку отображения. Из примеров — симуляция поверхости с терраморфингом, жидкости (в игре Крокодильчик Свомпи), или туча падающих снежинок, или просто все игровые объекты вместе с игровым полем, интерфейсом и партиклами.
А вот 3К интерактивных изображений — ссылка
Ну есть самые разные алгоритмы поиска. Оптимизировать надо) Тем же индексированием. Например, почитайте "Моделирование большого количества взаимодействующих друг с другом частиц". Там, конечно, про коллизии, но для мыши тоже отлично подойдёт. Я в своём примере на 10000 объектов просто анализирую в какую клетку кликнули и беру из неё объект. Это сделать легко, т.к. либа позволяет подключить свой класс для поиска элементов
Ну с анализом клетки или даже изометрии просто, а вот именно перекрывающие друг друга полупрозрачные пнгшки — уже сложнее. Направление я понял, спасибо. Стоит оптимизировать область поиска, но пока не могу прийти к выводу как именно.
Сначала находим все пнгшни по ректанглу. Эта оптимизация простая. Потом из них (а их будет не так много, ну допустим десяток-два) без оптимизаций отсекаем лишние.
Пример как делать антипримеры на HTML5 :)
Можно узнать, почему антипример? Все-таки интересно.
Багов многовато, абсолютно не показательно чем это круче чем флеш. Да живет, да работает, но с таким же успехом можно было бы и Java Applet написать — тоже работал бы.
Из серьезных багов я вижу пока-что только скролл. Тем более вся эта работа — Proof of Concept, занявший несколько часов. И статья была о том, что при должно уровне вылизывания Canvas ничем не хуже флеша, нужно просто знать его ограничения и умело применять.
Еще бажог — если открыть и закрыть GDT то попап на планете не открывается.
GDT? Можно расшифровку? Я еще не спал и слегка туплю ^_^
Если уж на то пошло, можно было бы вообще в WebGL сделать ☺
Тормозов бы не было совершенно. А планеты можно было бы сделать «объемными», натянув текстуры на псевдошарики.
Кстати да… Почему-то в холиварах про канвас и флеш всегда забывают про существование такого могучего зверя как WebGL.
Который пока что нельзя использовать в продакшне, потому что в IE не поддерживается вовсе, а в Опере по умолчанию отключен.
Потому что пока что веб-разработчики зачем-то ориентируются на IE.
Пока им будут пользоваться клиенты — его будут поддерживать. Причём доля IE8 всё ещё ощутима и его приходится саппортить.
Поддерживать это стоит лишь разработчикам всяких «социальных» сервисов (вроде gosuslugi), да IE-ориентированных сайтов. А если у вас нечто экспериментальное или же целевая аудитория — люди хотя бы немного умеющие работать на компьютере, можно про IE забыть.
IE в Windows 8 довольно таки юзабелен, даже желания не возникает ставить фокс или хром.
Потому что у флеша есть stage3D с коммерческими продуктами, которые уже зарабатывают миллионы.
А всё-таки, зачем тут несколько off-screen canvas? Смысл есть только чтобы закешировать разные элементы, но тут же ничего не кешируется.
1. Рисование в offscreen-канвасе значительно быстрее. Грубо говоря, рисунок в памяти обрабатывается лучше, чем рисунок на экране.
2. Удобно при рисовании композитных объектов оперировать канвасами как изображениями.
Вот чисто на глаз, мелкую планету рисуют на большом канвасе, чтобы этот большой канвас потом нарисовать на ещё большем. Имело бы смысл если бы там было очень много мелких деталей, и это можно было бы кешировать, а так это какая-то магия и надежда на неожиданный прирост производительности из-за offscreen рисования.

Если не лень — замерь профайлером время и сравни с прорисовкой на 1 канвас. Если так уж хочется использовать offscreen — используй 1 offscreen canvas.
Грубо говоря, рисунок в памяти обрабатывается лучше, чем рисунок на экране.

Насколько я понял это таки не имеет смысла — всё-равно браузер сначала отрисовывает в памяти, а только потом выводит на экран.
Не раз пытался проверить ваше утверждение о скрытом канвасе. Вот прямо сейчас скрытый канвас (back buffer) дает мне +30% FPS.
А можете показать пример? В моих приложение удаление back-buffer дало значительный прирост производительности. А потом дополнительные оптимизации, которые вообще не имели бы смысла, если бы использовал два холста.
Отписал в личку
В ИЕ9 не работает выделение. Да и с масштабированием проблема.
Ну, и для сравнения загрузки процессора хотелось бы увидеть версию на флэше. Т.к. у меня эта анимация загружает процессор где-то на 50%.
Очень простенькая анимация, которая отжирает полностью одно ядро процессора. Что это по вашему доказывает?
Что есть куда оптимизировать;)
Глядя на это дело подумалось, что по-хорошему, освещённость планет, а соответственно, и тени должны меняться вместе с изменением ориентации планет относительно солнца. Вот на такое было бы уже интересно посмотреть.

Хотя понимаю, что топик не об этом.
Рискую нарваться на минусы, но для сравнения: на AS3 решение будет в разы менее тормозным, плавным и красивым. Ко всему прочему и делать 20 минут от силы :-)
Ко всему прочему и делать 20 минут от силы

вперёд ;)
Ждём анологичного поста про Флэш. ТЗ есть, исходники картинок есть, образец есть. :)
А вообще очень хотел бы почитать топик. Так, чтобы полный нуб мог повторить шаги и тоже сделать такое же. Я когда-то флешил, но это было давно и неправда.
А стоит ли? С либканвасом цель была другая, а то, что это и во флеше можно сделать, и так понятно. Разве что если использовать stage3d и прочую дребедень.
Это вин :) В Yandex.Browser под макосью:

Flash версия сжирает ~70% CPU (скачет от 60 до 80)

JS версия сжирает не более 50% CPU (скачет от 30 до 50)
UFO just landed and posted this here
Вы наверное имели ввиду простую анимацию в слоях и направляющих линиях без каких либо скриптов — это реально делать минут 30 с готовыми картинками.

Вот скрипт с нуля думаю подольше :)
Я вообще когда читал ту ветку комментариев, то думал, что там будет тихий ужас в задании, а задание оказалось простецким вообще. Надо будет и самому такое замутить.
Я знал! Я знал, что ты не сможешь пройти мимо! Сенсей в моем топике, я рад! ^_^
Можем посоревноваться в оптимизации, хех.
Ох, что ты со мной делаешь! Окей, я постараюсь намутить что-то до конца недели, но ничего не обещаю. Можешь кинуть на shocksilien@gmail.com ресурсы, пожалуйста?)

пс. ну как я мог пройти мимо?

ппс. но топик таки зачётный, спасибо)
Ждем еще один вариант!
Код можно форкнуть? Очень в тему :)
ТЗ странное. Зачем вместо известных каждому школьнику (по крайней мере в момент их преподавания) законов Кеплера выдумывать какие-то свои «двадцать секунд»?
Требуется только видимость реалистичности, причём зрелищность и юзабельность куда важнее достоверности, особенно если достоверность потребует заметно больших вычислительных ресурсов. А то так можно дойти до, хотя бы, взаимного влияния планет на орбиты друг друга.
можно внеплановый парад планет устроить =)
запилил за вечер на свг nin-jin.github.com.local/etc/planets/
в отличие от канваса не грузит проц практически
кто-нибудь знает как сделать чтобы в хроме не дрожали планетки и тексты?
Из ссылки нужно удалить .local :-)
А почему только две планеты?)

кто-нибудь знает как сделать чтобы в хроме не дрожали планетки и тексты?

Надо вырубить оптимизиацию. Не знаю, как это сделать в svg, но в canvas это можно сделать rotate'нув на 1 градус холст ;) попробуй что-то в этом духе.

upd: хотя с текстами такое врядли проканает. их стоит отрисовать в Канвас и двигать картинку)
Позволю себе тоже вставить свои пять копеек. Под хромом и IE 10 идет довольно резво и ничего не грузит. Под Оперой безбожно тормозит.

(Disclaimer: к середине дня запал как-то поугас, поэтому от первоначального ТЗ несколько отличается, но думаю не сильно критично)
1) Если горизонтальный скролл есть, то при наведении координаты мыши неверно определяются, не те орбиты подсвечиваются.
2) Анимация рывками идёт.

Но да, проц не грузит.

p.s. в FF последнем тестил
Да, там косяков куча, признаю, но увы работа не волк, в лес не убегает, поэтому пока переключился на нее. Почему там иногда рывки, я так до сих пор и не разобрался. В FF действительно проблемы со скролами, в других браузерах такого вроде нет.
При чём fps всегда 59+.
Иногда рисует по прошлой координате, потом уже по следующей, вот и дёрганья. Возможно что-то не то с округлением.
Да. При чём не постоянно.
Порой может довольно продолжительный период плавно анимироваться, порой в течении относительно большого периода анимируется рывками.
FF? Может ли быть проблема в том, что паралельно что-то загружает проц?
FF, да.
При запущенном libcanvas.github.com/games/solar/ нагрузка на проц в районе 10% суммарная по всем процессам.
А можно попросить включить/отключить аппаратное ускорение в настройках (Настройки-Дополнительно-Использовать аппаратное ускорение, если возможно) и сказать, изменится ли ситуация?
Да вроде не замечаю особой разницы от выключения аппаратного ускорения.

Я машину свою уже несколько суток не выключал, может дело в этом)
А просто перезапустить браузер?
Не помогло.
Быть может у меня от недосыпа уже зрение шалит.

Было б неплохо сделать возможность ведения лога. Скажем, чтобы текущий fps писался. Или хотя бы, чтобы минимальное значение fps выводилось.
Рывки еле заметны, но они есть) попробуйте вывести график FPS
При наведении на звезду тоже можно информацию выдавать, хоть и нет в ТЗ. А то она какая-то «неживая» получается. :)
Хотя с другой стороны, если звезда никак не используется, это к лучшему.
Sign up to leave a comment.

Articles