Comments 136
Спасибо. Но демо не открывается.
0
Прошу прощения, в спешке забыл ссылку на индекс, да.
0
Подскажите, а нагрузка на CPU это вынужденная жертва?
Обратил внимание в FF нагрузка при открытии увеличивалась в «двое», для чистоты открыл IE (1 вкладка с Вашим примером), от старенького P8400 IE съело 48%-50%.
Обратил внимание в FF нагрузка при открытии увеличивалась в «двое», для чистоты открыл IE (1 вкладка с Вашим примером), от старенького P8400 IE съело 48%-50%.
+8
Открыл на MBP в сафари демку и начал говорить по телефону. Через минуту разговора бук гудел как пылесос. При видеообработке и на тяжелых играх такое не всегда проявляется. Решение, конечно, не плохое, но трудно соотносящееся с реальностью…
0
habrahabr.ru/post/163893/ посмотрите этот вариант)
+1
Посмотрел, по ссылке гораздо более глючный вариант, бесспорно, но он и менее ресурсоемкий (пол часа страница открыта, нагрузка на процессор почти не выросла). Вариант kibizoidus куда лучше, но тяжел для рендеринга.
0
Демо: File not found
0
У планет на внешней орбите окошко с описанием когда подходит к краю обрезается размером канваса:)
+13
Кстати, не хочу разводить холивар, но флеш уже приличное время умеет не «дёргаться» при движении, а у вас при наведении на планету её анимация, не смотря на её скорость, очень дёрганная и мерцающая. Это просто не учтено было при разработке или такая проблема присутствует?
+1
Дергаются в chrome на air.
0
А, и забавная фича — меню останавливает планету. После отпускания планета едет дальше.
В отрыве от того, что это типа модель, было бы ничего, но остановленный Марс это уже забавно.
В отрыве от того, что это типа модель, было бы ничего, но остановленный Марс это уже забавно.
-26
ТЗ же
При клике на планету выпадает меню. При наведении мыши на планету и при клике по ней анимация данной планеты останавливается, остальные планеты продолжают свое движение.
+12
Можно немного поподробнее про «дерганье» — какая версия браузера?
0
Там же подписаны названия планет. Нет там Марса.
+1
Если проскролить страничку вниз, то орбиты и планеты перестают выделяться ровно под курсором, а выделяются с некоторым смещением.
+10
Круто, под FF, ubuntu — отжирает столько же сколько и простенький флеш.
0
Ага, тоже заметил: планеты двигаются рывками + загрузка 4 ядер на 50%. При переключении вкладки — на уровне 2-3%.
0
Под Win7, с напрочь загруженным процессором (Vray рендеринг в 3dsmax, все 8 ядер забиты на 97-100% в диспетчере задач) работает на удивление гладко. Я, конечно, согласен, что тут не так много графики, но:
1 — Любые флеш банеры при такой нагрузке на процессор «тормозят»
2 — Вне зависимости от того, насколько прогружено видео в Youtube и какое качество видео выбрано — тормозит.
3 — Браузер в принципе меееедленно страницы открывает.
Не похвалы ради, просто на самом деле, при такой загруженности системы, делать что-либо параллельно не получается, даже видео посмотреть в интернете… приходится сидеть и тупить в монитор, а тут работает, будто система свободна.
Спасибо!
1 — Любые флеш банеры при такой нагрузке на процессор «тормозят»
2 — Вне зависимости от того, насколько прогружено видео в Youtube и какое качество видео выбрано — тормозит.
3 — Браузер в принципе меееедленно страницы открывает.
Не похвалы ради, просто на самом деле, при такой загруженности системы, делать что-либо параллельно не получается, даже видео посмотреть в интернете… приходится сидеть и тупить в монитор, а тут работает, будто система свободна.
Спасибо!
+1
Сделай размер браузера Chrome тамк что бы не все орбиты влазили на экран.
Поводи мышкой.
В общем у меня орбиты подсвечиваются со смещением + 1 примерно.
Да и то… курсор то между орбит.
Поводи мышкой.
В общем у меня орбиты подсвечиваются со смещением + 1 примерно.
Да и то… курсор то между орбит.
0
Может быт не помешает в ту ветвь комментариев добавить ссылку на эту статью? Довольно поучительно ведь получилось.
Хотелось бы уточнить детали:
Я все правильно понял насчет 5 fps (при том, что на моей машине отнимает > 100 % процессорного времени)? (Каюсь код просмотрел по диагонали, сильно не вникал).
Хотелось бы уточнить детали:
var PlanetController = new Planets({
fps: 5
});
Я все правильно понял насчет 5 fps (при том, что на моей машине отнимает > 100 % процессорного времени)? (Каюсь код просмотрел по диагонали, сильно не вникал).
0
Довольно-таки простенькая анимация — можно было бы и на SVG реализовать.
-4
С удовольствием сравнил бы решение на svg и текущее на canvas.
+2
На SVG там все не так просто. Chrome и Safari имеют очень ограниченную поддержку SVG. Так например не работают обработчики событий внутри тегов use. Да и вообще там много оказалось всяких косяков. Если интересно могу рассказать подробнее
+2
Eddy_Em
Так пишите ему ТЗ =))
Так пишите ему ТЗ =))
+1
«нетормозящее решение»? :) Intel Core i3-2100, последний FF, аддоны для верности отключил — загрузка процессора на полную
+3
Когда курсор перемещается по орбитам горизонтально от Солнца — всё ок.
По вертикали всё очень грустно: курсор уже в «космосе» (сошёл с последней орбиты), а подсвечена только 8я орбита.
Mac OS X 10.7.5, Chrome 23.0.1271.101
По вертикали всё очень грустно: курсор уже в «космосе» (сошёл с последней орбиты), а подсвечена только 8я орбита.
Mac OS X 10.7.5, Chrome 23.0.1271.101
0
Вы молодец. Вот просто взять и потратить кучу свободного времени, что бы доказать кому-то, что технология работает — это достойно похвалы.
А вот с какой задачкой я столкнулся и интересно ваше мнение — надо сделать как можно больше интерактивных (реагирующих на 3 события мышки) изображений (учитывать прозрачные области как неактивные). В районе 3К одинаковых изображений я еще норм держусь (MBA, Chrome), но как сделать еще больше? 10К?
А вот с какой задачкой я столкнулся и интересно ваше мнение — надо сделать как можно больше интерактивных (реагирующих на 3 события мышки) изображений (учитывать прозрачные области как неактивные). В районе 3К одинаковых изображений я еще норм держусь (MBA, Chrome), но как сделать еще больше? 10К?
+6
А Вы у каждой интерактив слушаете или используете bubbling?
0
Не совсем понял суть вопроса — в канвасе, как таковом нет событийной системы и объектов ее поддерживающих. То есть, при любом событии мышки я просто посылаю это событие обработчику канваса, который на основе полученных координат мышки решает, у какого из изображений (игровых объектов, например), отрисованных на канвасе вызываем событие-реакцию.
0
а, прошу прощения, не совсем правильно понимал событийную модель канваса)
0
Секундочку. Какоо размера canvas? Размеры изображений? Как расположены? Я сомневаюсь, что на одном экране влезет 3к изображений… В общем — лучше поподробнее рассказать, а еще лучше показать вашу задачу. Думаю — решение, все же, есть…
0
Соль в том, что бы сделать универсальное решение, по типу флеша. Что бы конечный пользователь-программист не задумывался, добавляя интерактивный объект к списку отображения. Из примеров — симуляция поверхости с терраморфингом, жидкости (в игре Крокодильчик Свомпи), или туча падающих снежинок, или просто все игровые объекты вместе с игровым полем, интерфейсом и партиклами.
А вот 3К интерактивных изображений — ссылка
А вот 3К интерактивных изображений — ссылка
0
Ну есть самые разные алгоритмы поиска. Оптимизировать надо) Тем же индексированием. Например, почитайте "Моделирование большого количества взаимодействующих друг с другом частиц". Там, конечно, про коллизии, но для мыши тоже отлично подойдёт. Я в своём примере на 10000 объектов просто анализирую в какую клетку кликнули и беру из неё объект. Это сделать легко, т.к. либа позволяет подключить свой класс для поиска элементов
+1
Ну с анализом клетки или даже изометрии просто, а вот именно перекрывающие друг друга полупрозрачные пнгшки — уже сложнее. Направление я понял, спасибо. Стоит оптимизировать область поиска, но пока не могу прийти к выводу как именно.
0
Пример как делать антипримеры на HTML5 :)
-10
Можно узнать, почему антипример? Все-таки интересно.
0
Багов многовато, абсолютно не показательно чем это круче чем флеш. Да живет, да работает, но с таким же успехом можно было бы и Java Applet написать — тоже работал бы.
-5
Из серьезных багов я вижу пока-что только скролл. Тем более вся эта работа — Proof of Concept, занявший несколько часов. И статья была о том, что при должно уровне вылизывания Canvas ничем не хуже флеша, нужно просто знать его ограничения и умело применять.
+3
Если уж на то пошло, можно было бы вообще в WebGL сделать ☺
Тормозов бы не было совершенно. А планеты можно было бы сделать «объемными», натянув текстуры на псевдошарики.
Тормозов бы не было совершенно. А планеты можно было бы сделать «объемными», натянув текстуры на псевдошарики.
+1
Кстати да… Почему-то в холиварах про канвас и флеш всегда забывают про существование такого могучего зверя как WebGL.
0
Который пока что нельзя использовать в продакшне, потому что в IE не поддерживается вовсе, а в Опере по умолчанию отключен.
0
Потому что пока что веб-разработчики зачем-то ориентируются на IE.
+3
Пока им будут пользоваться клиенты — его будут поддерживать. Причём доля IE8 всё ещё ощутима и его приходится саппортить.
0
Поддерживать это стоит лишь разработчикам всяких «социальных» сервисов (вроде gosuslugi), да IE-ориентированных сайтов. А если у вас нечто экспериментальное или же целевая аудитория — люди хотя бы немного умеющие работать на компьютере, можно про IE забыть.
+3
Потому что у флеша есть stage3D с коммерческими продуктами, которые уже зарабатывают миллионы.
0
А всё-таки, зачем тут несколько off-screen canvas? Смысл есть только чтобы закешировать разные элементы, но тут же ничего не кешируется.
0
1. Рисование в offscreen-канвасе значительно быстрее. Грубо говоря, рисунок в памяти обрабатывается лучше, чем рисунок на экране.
2. Удобно при рисовании композитных объектов оперировать канвасами как изображениями.
2. Удобно при рисовании композитных объектов оперировать канвасами как изображениями.
0
Вот чисто на глаз, мелкую планету рисуют на большом канвасе, чтобы этот большой канвас потом нарисовать на ещё большем. Имело бы смысл если бы там было очень много мелких деталей, и это можно было бы кешировать, а так это какая-то магия и надежда на неожиданный прирост производительности из-за offscreen рисования.
Если не лень — замерь профайлером время и сравни с прорисовкой на 1 канвас. Если так уж хочется использовать offscreen — используй 1 offscreen canvas.
Если не лень — замерь профайлером время и сравни с прорисовкой на 1 канвас. Если так уж хочется использовать offscreen — используй 1 offscreen canvas.
+1
Грубо говоря, рисунок в памяти обрабатывается лучше, чем рисунок на экране.
Насколько я понял это таки не имеет смысла — всё-равно браузер сначала отрисовывает в памяти, а только потом выводит на экран.
0
В ИЕ9 не работает выделение. Да и с масштабированием проблема.
Ну, и для сравнения загрузки процессора хотелось бы увидеть версию на флэше. Т.к. у меня эта анимация загружает процессор где-то на 50%.
Ну, и для сравнения загрузки процессора хотелось бы увидеть версию на флэше. Т.к. у меня эта анимация загружает процессор где-то на 50%.
0
Очень простенькая анимация, которая отжирает полностью одно ядро процессора. Что это по вашему доказывает?
0
Глядя на это дело подумалось, что по-хорошему, освещённость планет, а соответственно, и тени должны меняться вместе с изменением ориентации планет относительно солнца. Вот на такое было бы уже интересно посмотреть.
Хотя понимаю, что топик не об этом.
Хотя понимаю, что топик не об этом.
0
Рискую нарваться на минусы, но для сравнения: на AS3 решение будет в разы менее тормозным, плавным и красивым. Ко всему прочему и делать 20 минут от силы :-)
-5
Ко всему прочему и делать 20 минут от силы
вперёд ;)
+15
Ждём анологичного поста про Флэш. ТЗ есть, исходники картинок есть, образец есть. :)
+7
А вообще очень хотел бы почитать топик. Так, чтобы полный нуб мог повторить шаги и тоже сделать такое же. Я когда-то флешил, но это было давно и неправда.
0
Это вин :) В Yandex.Browser под макосью:
Flash версия сжирает ~70% CPU (скачет от 60 до 80)
JS версия сжирает не более 50% CPU (скачет от 30 до 50)
Flash версия сжирает ~70% CPU (скачет от 60 до 80)
JS версия сжирает не более 50% CPU (скачет от 30 до 50)
+1
UFO just landed and posted this here
Вы наверное имели ввиду простую анимацию в слоях и направляющих линиях без каких либо скриптов — это реально делать минут 30 с готовыми картинками.
Вот скрипт с нуля думаю подольше :)
Вот скрипт с нуля думаю подольше :)
0
Тоже самое, ну точнее совсем не тоже, но на CSS codepen.io/juliangarnier/pen/idhuG
+1
Я вообще когда читал ту ветку комментариев, то думал, что там будет тихий ужас в задании, а задание оказалось простецким вообще. Надо будет и самому такое замутить.
+1
Код можно форкнуть? Очень в тему :)
0
ТЗ странное. Зачем вместо известных каждому школьнику (по крайней мере в момент их преподавания) законов Кеплера выдумывать какие-то свои «двадцать секунд»?
0
можно внеплановый парад планет устроить =)
0
запилил за вечер на свг nin-jin.github.com.local/etc/planets/
в отличие от канваса не грузит проц практически
кто-нибудь знает как сделать чтобы в хроме не дрожали планетки и тексты?
в отличие от канваса не грузит проц практически
кто-нибудь знает как сделать чтобы в хроме не дрожали планетки и тексты?
+1
Из ссылки нужно удалить .local :-)
0
А почему только две планеты?)
Надо вырубить оптимизиацию. Не знаю, как это сделать в svg, но в canvas это можно сделать rotate'нув на 1 градус холст ;) попробуй что-то в этом духе.
upd: хотя с текстами такое врядли проканает. их стоит отрисовать в Канвас и двигать картинку)
кто-нибудь знает как сделать чтобы в хроме не дрожали планетки и тексты?
Надо вырубить оптимизиацию. Не знаю, как это сделать в svg, но в canvas это можно сделать rotate'нув на 1 градус холст ;) попробуй что-то в этом духе.
upd: хотя с текстами такое врядли проканает. их стоит отрисовать в Канвас и двигать картинку)
0
Позволю себе тоже вставить свои пять копеек. Под хромом и IE 10 идет довольно резво и ничего не грузит. Под Оперой безбожно тормозит.
(Disclaimer: к середине дня запал как-то поугас, поэтому от первоначального ТЗ несколько отличается, но думаю не сильно критично)
(Disclaimer: к середине дня запал как-то поугас, поэтому от первоначального ТЗ несколько отличается, но думаю не сильно критично)
0
1) Если горизонтальный скролл есть, то при наведении координаты мыши неверно определяются, не те орбиты подсвечиваются.
2) Анимация рывками идёт.
Но да, проц не грузит.
p.s. в FF последнем тестил
2) Анимация рывками идёт.
Но да, проц не грузит.
p.s. в FF последнем тестил
0
Да, там косяков куча, признаю, но увы работа не волк, в лес не убегает, поэтому пока переключился на нее. Почему там иногда рывки, я так до сих пор и не разобрался. В FF действительно проблемы со скролами, в других браузерах такого вроде нет.
0
При чём fps всегда 59+.
Иногда рисует по прошлой координате, потом уже по следующей, вот и дёрганья. Возможно что-то не то с округлением.
Иногда рисует по прошлой координате, потом уже по следующей, вот и дёрганья. Возможно что-то не то с округлением.
0
Похоже это какая-то общая проблема канвы. А так код конкретно этой карты здесь, а здесь код всего остального движка.
0
Почему? Разве libcanvas.github.com/games/solar/ идёт рывками?
0
Да. При чём не постоянно.
Порой может довольно продолжительный период плавно анимироваться, порой в течении относительно большого периода анимируется рывками.
Порой может довольно продолжительный период плавно анимироваться, порой в течении относительно большого периода анимируется рывками.
0
FF? Может ли быть проблема в том, что паралельно что-то загружает проц?
0
FF, да.
При запущенном libcanvas.github.com/games/solar/ нагрузка на проц в районе 10% суммарная по всем процессам.
При запущенном libcanvas.github.com/games/solar/ нагрузка на проц в районе 10% суммарная по всем процессам.
0
Семёрка 64
0
А можно попросить включить/отключить аппаратное ускорение в настройках (Настройки-Дополнительно-Использовать аппаратное ускорение, если возможно) и сказать, изменится ли ситуация?
0
Рывки еле заметны, но они есть) попробуйте вывести график FPS
0
При наведении на звезду тоже можно информацию выдавать, хоть и нет в ТЗ. А то она какая-то «неживая» получается. :)
0
Sign up to leave a comment.
История одного хабраспора