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