Pull to refresh

Comments 147

Вы меня конечно все извините, но у Канваса есть одна большая беда по сравнению с тем же Флешем. Отсутвтие GUI для создания подобных даже галактик. На рисование всего этого ушло около часа — неплохой результат, но… Вот дизайнер просто не сможет этого создать — он ЯП обычно не изучает, тогда как во Флеше сможет скорее всего накидать.

Пока такая сложность создания таких вот вещей сохранится, Флеш будет на коне…
боюсь, что галактику даже на флеше хрен кто «накидает»
Зря вы такое пишите. В отличие от html5 во flash уже есть нативный движок с иерархическим дисплей-листом и нужными функциями отрисовки. Из-за этого кода будет минимум, а производительность будет не хуже чем в html5.
Из-за этого кода будет минимум, а производительность будет не хуже чем в html5.

Ну где же код? Почему все так любят чесать языками, но не любят давать никаких пруфов? Только virtualtoy показал хоть какой-то результат, но он не соответствует тому, что вы утверждаете. Просто тут в комметах Флешу прям чудеса приписывают. Вообще проц не грузит, описанное в топике за 20 минут реализуется мышкой через GUI и так далее, а как доходит до дела — так куча подводных камней.
К сожалению, лично я сейчас работаю. И не могу все бросить ради доказательства. Но как появится свободное время обязательно сделаю пример. Через GUI можно сделать, но с минимумом кода и максимум графических элементов.
Вот только, надеюсь, мы увидим именно галактику, а то меня уж очень зацепило ваше «Зря вы такое пишите» и поэтому невероятно сильно хочется посмотреть на результат работы нативного движка с иерархическим дисплей-листом при отрисовке такого количества объектов.
Меня тоже задело:

хрен кто

Так что пример будет.
Вы, кажется, не поняли шутку gmist

Evengard сказал:
Отсутвтие GUI для создания подобных даже галактик


На что gmist ответил:
боюсь, что галактику даже на флеше хрен кто «накидает»


В галактике миллионы объектов, потому и хочется посмотреть на результат.
Вы имеете ввиду что-то вроде конструктора, когда мышкой накликал и оно заработало? Да, согласен, без этого Html5 Canvas будет доступен только для программистов, как бы ужасно это ни звучало ;)
Да появится все это — уже есть подобные он-лайн инструменты (Canvas — HTML5 — анимация и все дела).
Значит, распространение всего этого дело времени не более того.
Ну лично я и не сомневаюсь ;)
Дизайнер сделает этот GUI на HTML+CSS :) А если нужен жестокий realtime то и во флеше и тут придётся поработать кодеру.
Советую вам посмотреть наработки Виктора Брата по данному вопросу, флеш там просто нервно курит в сторонке.
Это просто потрясающе, спасибо вам за эту ссылку.
Посмотрите в сторону Adobe Edge
UFO just landed and posted this here
Дивами, чтоли?) А орбиты рисовать картинками?
Зачем картинками? border-radius же )
Ждём на чистом CSS, что уж там! :)
А дырку под планету — как?)
Я думаю, можно что-нибудь придумать )
Не, там дырки под планету в орбите нету ведь,
Чит ведь) Но он не решит главной проблемы — рисуем орбиту, на неё накладываем этот объект, но орбита остаётся внутри дырки. В топике это решается в этом отрывке:
Сначала отрисовываем орбиту. Потом стираем shape планеты, а потом обводим shape планеты
У меня в дырке то звёздочки просматриваются ;)
image

Но ладно, всё-равно решение прикольное)
Я уж думал вы забросили свой проект, к счастью ошибся :)

Кстати, помнится вы упоминали про игру на libCanvas
Уже есть какое-нибудь демо?
Я уж думал вы забросили свой проект, к счастью ошибся :)

Ни в коем случае) Развивается и очень активно. Просто пока без публикаций. Надо исправить)

Кстати, помнится вы упоминали про игру на libCanvas
Уже есть какое-нибудь демо?

Ну люди уже играют, но пока закрыто. Обещает быть шедевром)

Можете, кстати, глянуть видео Berserk: Rebirth, тоже на LibCanvas игрушка (ещё на прошлой версии). Я сам в разработке участие не принимал, но консультировал. Сильная команда делала.
www.casus-belli.com/ru интересно на чем написан. сама по себе она не очень интересная, интересен тот факт, что она на js.
Даешь больше топиков про канвас, хороших и разных!
И да, это решение жрет значительно меньше ресурсов.
Кстати, кто-то там обещал решение на флеше?)
Кстати, кто-то там обещал решение на флеше?)

Ща, погодите, пока у них билдер запустится, пока проект создадут, пока поймут как делать. Может, к завтрашнему дню кто-то и осилит) Это ведь вам не комменты в топики по html5 писать.
Ну в топике ни слова про флеш. Но от комментов просто уже устал. Обязательно в любом топике про Canvas появится что-то в духе: «ууу, html5 — фигня, на флеше это сделать значительно проще». Да вот, посмотрите хоть прям этот топик и первый коммент. Хоть кто-то бы сделал, да выложил, да описал. И без закидонов в сторону html5, а просто так, чтобы люди поучились, да и я сам с удовольствием вспомнил бы, как это делается.

Ещё раз обратите внимание — я в топике сухо рассказал о технологии, не акцентируя внимания ни на каких альтернативах, но всё-равно первый коммент был про флеш.
Эмм… «пока у них билдер запустится, пока проект создадут, пока поймут как делать. Может, к завтрашнему дню кто-то и осилит» — ваши слова? :) Если бы я был флешом — я бы обиделся :) Пойду билдер открывать…
Ну как без лёгкой иронии в комментах? Тем более, про флеш уже вспомнили, а примеров так и не показали ;)
Просто тут уже грозились, ещё в прошлом топике, что типа на флэше такое наваять — 30 минут. Да что-то результатов до сих пор не видно.
Готово, заняло 1 час 10 минут. Не бейте за них, пожалуйста. Сейчас выложу куда-нибудь
Смотрится хорошо. За одинаковое время почти так же, как на LibCanvas. Но… на одном и том же компе:





27% загрузка проца от флеша и 2% загрузка проца от канваса. Где ж обещанная производительность? ;)
Попросили добавить сравнение с SVG вариантом.
На том же железе — 7% загрузка проца при 36 fps

Если сравнивать этот флешевый клип с реализацией из статьи про Хабраспор, то на моем FF 10 c Celeron B815 работает в стопятьсот раз адекватнее — можно двигать курсором мыши, переключаться по вкладкам, заниматься любыми делами без 100% загрузки процессора (что характерно, при тесте на HTML-канве FF потреблял не более 40% процессора, но зато неожиданно X-сервер стал кушать всё оставшееся). Ваш вариант, к моей бурной радости (хе-хе), работает ничуть не хуже, чем вариант на flash. Браво!
Быстродействие не впечатлило. Как-то так:

Browser   CPU
Opera     100%
IE 8       70%
Chrome    100%
FF        100%
Да, скачет примерно 35-50% в опере 12.11. Ноут HP pavilion dv6000. 2 гб озу, core2duo 2.2, видео geforce 8400m gs
А хром флеш опустил, да-да :)
Ну опера вообще относительно тормозная, да( Она скорее исключение. Даже в Фоксе вменяемая производительность.
Правда. Жаль, а я так люблю оперу :(
Попробую подвести итог.
1. флешевый вариант сделан с нуля, не использовано никаких движков (сознаюсь, стырил где-то функцию для рисования дуги), оптимизация никакая (TheShock, низкий вам поклон, вы сколько либканвас разрабатываете и оптимизируете?). Возможно, что вариант с использованием bitmapdata и блиттинга был бы производительнее.
2. не все поняли, зачем было сделано демо: задели слова «пока у них билдер запустится, пока проект создадут, пока поймут как делать Может, к завтрашнему дню кто-то и осилит». Извините, иронию не заметил.
3. флеш не защищаю, у него, как и у html5 свои плюсы и минусы. Кричать «flash, die!», равно как «html5 sucks!» неразумно.
1. Ну Флеш ведь сам по себе движок. Вы ведь не юзаете там прямую отрисовку в холст, события как-то к элементам цепляете ;) LibCanvas'у уже почти 3 года.
2. Ну просто во всех топиках кричат, что на флеше это за 15 минут делается, да ещё и не тормозит в сравнении с html5) А как сделать — то никого)
3. Это да) Но на туториалы по Флешу html'щики не набегают с криками «Canvas! Только Canvas!»
1. подловили
2. я не кричал, а сделал
3. :)
извините, не смог успокоиться (совершенно забыл о bitmapcaching):
04703929-a-62cb3a1a-s-sites.googlegroups.com/site/virtualtoy/solar-system/solar_system_v3.swf
теперь в хроме флеш жрет 15-25%, а канвас 13-18%
вот такие как я и дискредитировали флеш *посыпаю голову пеплом*
2. Вы молодец, не спорю)
3. Во, теперь загрузка 5%, это уже результат, спасибо)
К слову, у меня на одном из компов ваш пример скачет в пределах 40-50% CPU при 60 FPS. Вчерашний пример — 86% :) (Chrome 23)

А по статье — пример бы более интересной задачи с приостановкой движения планеты на время наведения и открытия менюшки.
А что за комп? И какой FPS на каждом из вариантов? (fpsможно смотреть по shift-esc)

А по статье — пример бы более интересной задачи с приостановкой движения планеты на время наведения и открытия менюшки.

Ну это просто к рендеру мало относилось, потому его отрезал с чистой совестью, чтобы вписаться в доступное время.
TheShock, запускай WebGL-2d покажем этим флэшерам, что такое перфоманс!
Stage3d тоже интересная штука. Подскажите, пожалуйста, canvas аппаратно ускорен?
На сколько я понимаю только композитинг слоёв
Все же что-то, наверное, добавляет. Флешевый пример — полностью софтовый (писал я его в flash cs3, которому уже лет 6). Вариант с каким-нибудь современным starling framework'ом будет бегать не медленнее канваса, хотя, видимо, придется поизвращаться с векторными линиями
Как у вас во флеше всё сложно ;)
В той или иной мере да. Для Opera, Chrome можно посмотреть тут about:gpu
Core2Duo E7400 Ubuntu 12.04.

По FPS: 59-60 ваш пример, 34-36 вчерашний пример.

P.S. solar_system_v3.swf от virtualtoy выдает 65% CPU.

P.P.S. WebGL Aquarium на 1000 рыб тянет все те же 30FPS. Это к вопросу про производительность в целом.
Ноут? Случайно не от батареи работает сейчас?
Нет, десктоп.

Другой десктоп (i5 750, система и браузер те же):
  • ваш пример — 40%
  • вчерашний — 82%
  • флеш — 51%
Очень странная нагрузка для такого мощного проца. Но относительно всё равно результат радует)
Может дело в этом:
* Canvas: Software only, hardware acceleration unavailable
* Accelerated 2d canvas is unstable in Linux at the moment.
Угу, примерно такая же картинка под 12.10 у меня (с поправкой на более слабый проц). Этот пример около 50, вчерашний и флэш около 90.
у меня везде скачет с 43 до 60 — т.е. на полсекунды тормоз с определенной периодичностью.
Может кто-то частотой процессора балуется, меняя уровни?
Шок, вы, конечно, молодец, но флеш опускаете зря.

Зря? — Лично я последнее время очень ненавижу(раньше просто не любил его) флеш потому что у меня из за него падает хром.
П.с Мне кажется что флешу пора на пенсию с его багами и дырками в безопасности…
Отключите его. А мне иногда приятно в флешевые игрушки поиграть. И не только мне.
Он у меня в основном отключен(уже больше года), но иногда приходиться включать что бы видео по смотреть, и бывает через пару минут падает хром или флеш.
Какие милые масштабы орбит и размеров планет!
Согласно первоначальному условию, это ведь всего лишь модель)
В реальном масштабе она не то что в монитор, в комнату не уместится.
А если вместится — то мелких планет будет не разглядеть.
Но равномерные радиусы идеально круглых орбит и одинаковый размер планет — это совсем уж картонно :)
А можно узнать технические параметры «слабого ноута»?

И насчёт освещения планет — не пробовал делать тени путём наложения тени поверх целого изображения планеты? Чтобы сама планета не вращалась, а смещалась тень?
И насчёт освещения планет — не пробовал делать тени путём наложения тени поверх целого изображения планеты? Чтобы сама планета не вращалась, а смещалась тень?

Вообще это не проблема. Берём прозрачно-чёрный градиент от солнца и накладываем его поверх планеты с globalCompositeOperation, если не ошибаюсь, source-in. Но я решил сделать поближе к оригиналу.

А можно узнать технические параметры «слабого ноута»?

на самом деле «слабый» — это образно. Проц i5, но в энергосберегающем режиме да на старой версии браузера. У меня сейчас на том же проце на стационарнике 1-2% загрузка проца, так что как абсолютный результат не пойдёт — только в качестве сравнения.
Планеты качаются влево-вправо, аж укачивает
Объясните? Не вижу такого эффекта
сейчас попробую описать (в предыдущем примере от другого автора такого не было) а у вас происходит колебание планеты влево-вправо (помимо движения его по орбите)
Такое впечатление, будто координаты планет только целые числа. В предыдущем варианте видимо вещественная арифметика была и движение плавнее выглядит.

UPD это зависит от браузера, в FF оба варианта плавные
UPD2 в «стандартных» браузерах (FF, Opera, Chromium) оба варианта плавные. В нестандартных (я использую Konqueror), варант от kibizoidus — плавные изменения координат, вариант TheShock — прыгают картинки по целым позициям.
Посмотрел в rekonq. Вижу дрожание, да
Это недостатки торопливой нарезки)
Спасибо за топик! Только это не галактическая система, а звездная система
Вы правы, вечером исправлю)
Господа, это ТЗ заразно. Мне тоже пришлось выпилить свой вариант. На мой взгляд чудес никто не продемонстрировал (если не считать, что Вы так быстро и классно написали статью с готовой демкой). Хром и IE 10 ожидаемо лучше всех, Опера и FF плетутся в конце.
выпилить

таки «Запилить». «Выпилить» — это «уничтожить» ;)

быстро и классно

ну так в том то и дело, что это работает быстро и оптимизированно) и работает у меня хорошо даже в iPad ;)
Не могу понять почему, но движение рывками. У меня в игре тоже подобная ситуация происходит.
Кажется проблема найдена) И называется она requestAnimationFrame. Попробуйте все таки рендерлуп поместить в таймаут, чисто для проверки.
Вероятно, оно не может 62 кадра в секунду вытягивать постоянно, от того и рывки. Что бы не было рывков, график кадров в секунду должен быть ровный, как поверхность зеркала на хаббле:)
Ну проц ведь не перегружён, даже с запасом. Или ты о том, что надо ставить ровно 60?)
Хотя я рывков не вижу, правда)
хз, надо поглядеть на график FPS. вот я искуственно понизил до комфортных 31 FPS, рывков не наблюдаю и график выглядит вот так:
image
А дайте ка эту мерялку fps, пожалуйста)
Орбиты неправильно выделяются в ff17
Смотрится невероятно, конечно. Но WebGL ведь)
Айфон 5, айпад 2 не намного отстает — что-то в районе 15 кадров
*приготовил попкорн*
А кто возьмется на сильверлайте? =) Думаю, производительность у него будет в минусе, а простота написания наобротот в плюсе.
Это на который даже сам MS забил?
не знаю даже, кто там на кого забил, но сделать на нем такую штуку можно элементарно.
но это не олимпиада и мне не 15 лет, чтобы бросаться делать «за час» — я бы предпочел посмотреть на такую реализацию от настоящих специалистов сильверлайта :)
не знаю даже, кто там на кого забил, но сделать на нем такую штуку можно элементарно.

О! Ещё и Сильверлайтеры подтянулись с «языкочесательством». Я не бросался «успеть за час». Я просто ограничил время для себя, чтобы не тратить излишне много. Что успел — то успел.
в том и суть, что я не сильверлайтер, так бы уже рвал и метал, утверждал, что мой подход лучше и всякое такое :)
но как минимум пробовал писать под эту штуку и теперь хочу сравнить производительность, удобство и пр.
Не очень понятно почему Вы утверждаете, что там это сделать элементарно. Я по работе немного пользую WPF (как сервелат, только лучше :)) и не сказал бы, что там это сделать прямо уж так просто. По крайней мере мне это так не кажется.
Вращение планет, орбиты и тултипы делаются элементарно. Накодил в перерывах между растапливанием печки и чисткой снега :)
Выделение делается относительно сложно и заняло чуть ли не в два раза больше времени, с рисованием ArcSegment через задницу и затем вращением его через Transform.
runserver.net/temp/SolarSystem.html

Что я не делал, так это выделение орбиты по Mouse Hover.
В тестах процессор жрется как бешеный, правда у меня Chrome + Mac, но на винде наверное так же.

К плюсам этой технологии можно отнести программинг на C#, относительную простоту реализации базовых вещей (ArcSegment — не базовая, потому и сложности), к минусам — прожорливость плагина, его слабую распостраненность.

Имхо, единственное, ради чего есть смысл использовать Silverlight, так это для реюзабельности кода на других платформах: программу за минимум времени сделать десктопной WPF, мобильной для WP 7-8, или за чуть большее время Metro/Modern приложением для Windows Store. Если же отделить бизнес-логику от интерфейса, то ее можно использовать на iOS и Android в MonoTouch/MonoDroid. Собственно, так я и делаю при портировании своих проектов по цепочке Android -> iOS (MonoTouch) -> Mac OS X (MonoMac) -> Win 8.
А сколько времени ушло на этот пример? В винде проц жрётся не очень. Где-то так же, как html5 в Опере. А почему не сделали выделение орбиты по hover?
пол-часа на базовую часть вчера вечером, час сегодня утром на выделение.
изредка приходилось гуглить, потому как с Path до этого в Silverlight не работал — я далеко не гуру по этой технологии, да и вообще не гуру и не из Бобруйска :)

Выделение изначально орбиты по hover не сделал, потому, что используется встроенный ToolTipService — он связывает объект ToolTip с объектом на Canvas и привязывается к видимой части объекта. У орбит видимая часть очень тонкая, потому наводиться будет очень тяжело.

Выложил обновленную версию, в ней я добавляю еще одну «невидимую» орбиту с толщиной в 20 пикселей и к ней привязываю другой тултип, без надписи. Ссылка та же:
runserver.net/temp/SolarSystem.html
Кстати, оно часто или вообще не реагирует на мышь или реагирует на мышь с существенной задержкой. Винда 7, 64 бита.
Ага, у системных тултипов есть базовая задержка. Чтобы ее не было, надо все переделывать на MouseOver и пр.
Вообще, все хоть чуточку нестандартное в винляндии делается через задницу с горой дополнительного кода… Потому я и поставил крест на 5ти годах работок для AD и ушел программить на Mac, чего и всем желаю :)
У меня отъедает 3% на 2x2 ядрах. Значит где-то 12% на ядро. Пока это одно из самых производительных решений. Кстати небольшие рывки все равно заметны и здесь. Из минусов — сначала ИЕ мне предложил установить сервелат, потом сказал, что его версия устарела и предложил установить новую версию :). И только после этого все завелось.
У меня в маке жрет намного больше, но ни о каких рывках и речи нет.
Может это глаз реагирует на фиксированные 33 FPS? Или рывки видны, когда выбрана какая-то орбита?
Может это глаз реагирует на фиксированные 33 FPS
Причин не знаю, но без всяких мышкодвижений и выделений орбит наблюдаются небольшие мелкие рывки.
Microsoft Silverlight x64 5.1.10411.0 на Windows 7 prof sp1 x64 на Core i3-2100 3.1 GHz, 8 Gb, GeForce GT 520.
окей, посмотрю на досуге, почему такое может быть. все-таки там копеечные отрисовки, не должно дергаться.
Если не сложно, проверьте, будет ли дергаться карта при перетаскивании вот тут:
runserver.net/temp/sol/Solitaire.webTestPage.html
Технология одна и та же, но в планетах движение по таймеру, а тут по событию мыши.
Дергается даже сильнее. Сужу по тому, что если смотреть на перемещающийся курсор, то относительно него карта заметно подрагивает. Если перемещать окна со включенным Aero, то ничего подобного не наблюдается.
Значит какие-то баги с акселерацией Silverlight в этом браузере, или вообще на этой ОС :)
Окей, спасибо за тесты!
В сервелате писать смысла большого не вижу, лучше уж флеш использовать — он хоть большим числом платформ поддерживается.
Вот на что и вправду было бы интересно взглянуть, так это на решение на CSS3.
Да, очень круто! Я как-то пропустил, спасибо. Правда, нормально только в Хроме заработало, Opera, FF и IE 10 дружно пасуют. Что касается загрузки CPU, то цифры сопоставимы с оптимизированным JS + Canvas или тем же flash. Мне кажется, что это говорит о том, что сами по себе ни JS ни Canvas особых тормозов не вносят, тормозит именно отрисовка самим браузером.
Спасибо вам за отличную статью! И отдельное спасибо всем, кто делал разные версии.
Теперь бы ещё на Fabric.js версию… Может, kangax сделает?..

P.S. Как вам «Хоббит»? :)
Пожалуйста)
Ждём kangax, отписался ему в Скайп)
Хоббит просто прелестный. До сих пор аж тепло в груди от просмотра.
С удовольствием схожу на него ещё раз.
Наконец нашёл пару свободных минут, вот пожалуйста — fabricjs.com/solar-system/

Заняло где-то 2 часа. По размеру получается приблизительно также как и LibCanvas. Хотя сама Fabric весит меньше :P

Было бы хорошо подробно написать о том как реализовал всё это, но нет времени. В двух словах:

— В принципе всё было более менее очевидно
— В Fabric нет hover событий (не хотел добавлять из-за производительности), поэтому пришлось сделать небольшой «monkey-patching» одного из методов, чтобы это событие симулировать (~20 линий)
— В Fabric нет ничего для работы со спрайтами (так как мы на игры, например, сильно не ориентируемся), поэтому тоже пришлось вручную. Рендерил спрайт прямо на маленький канвас в памяти, с отступом, потом читая через data-url создавал картинки (~15 линий)
— Архитектурой не занимался. Можно было бы создать специальный класс для планеты с подсветкой, но я сделал всё тупо и линейно. Подсветка вокруг планеты — просто круг который показываем в нужном месте или прячем за холстом. Ну и всё остальное тоже как отдельные простые объекты — планеты как картинки (fabric.Image), орбиты как круги (fabric.Circle), текст как текст (fabric.Text). Всё создаём, добавляем на холст, запускаем анимацию вокруг центра, и следим за hover событиями. Вот и всё.

Недостаток по сравнению с LibCanvas в том что рендерим всё на одном слое, поэтому производительность скорее всего хуже. И ещё иногда вижу какой-то глюк с разпознанием планет. Иногде не подсвечиваются кажется; не уверен в чём проблема, буду разбираться как будет время.

Ну а так в общем всё вроде более менее работает.
Ещё иногда МаусАут не срабатывает, если быстро двигать(


Ну и в Фоксе проверь, пожалуйста.
Ох… Только добрался до комментариев.
Чувствуется — вывел мой топик холивары на новый уровень — не просто между Canvas vs Flash, а уже Canvas Native vs Canvas Libraries. И, думается мне, это далеко не конец.
По поводу примеров выше на Flash… Да, возможно — удобнее, но, прежде всего, только потому, что многие решения Flash-плеера решают и оптимизируют за программиста. Это, конечно же, хорошо, но теряется непосредственная связь между программистом и объектом программирования.
В общем и целом, пример показателен. По большей части в том, что мне есть куда стремиться и оптимизация и доведение до «товарного вида» важна не меньше, чем реализация концепта. И я за это благодарен всем присутствующим.
To be continued. Soon ^_~
А ещё лучше — присоединяйся ко мне! Буду рад тебя видеть в команде LibCanvas)
4% проца. Хм. Есть к чему стремиться!
А LibCanvas-версия сколько?

Пс. stage3d-based версия очень зависима от окружения:




250-280% загрузка проца на свежем Линуксе.
Попробовал LibCanvas-версию на недавнем приобретении — WP8 смарте. Работает лучше и плавнее, чем на iPad! Один косяк — при тапе канвас выделяется серым, выделение исчезает само примерно через полсекунды.
Sign up to leave a comment.

Articles