Comments 41
Фон ваш съел глаза, а сам пример не грузится. Х-эффект?
Рановато для эффекта. Оно все грузится просто подмерзает на время сборки (5-10 сек). Я тестировал на Мозилле и Хроме. Про другие браузеры могу только сказать что ИЕ лучше не трогайте.
Ад, если честно. После апгрейда посмотрю.
Ад какого рода? Фон или код? Намекните на лучший вариант — я поменяю неудачное решение на более правильное. Я же не настоящий сварщик, это хобби ))
Исключительно в плане производительности на моей машинке.
Всё остальное — дело вкуса и воспитания. )
Всё остальное — дело вкуса и воспитания. )
У вас есть предложения по искоренению? Да, канва жрет память соответственно размеру картинок, это так. Сами объекты Image() надо полагать тоже. Я бы очень хотел найти способ избежать этого и так чтобы тянуть пару больших фалов вместо полтысячи маленьких. Но как? Быть может стоит работать с канвой размером в один кадр?
Да даже не сколько в памяти вопрос, но во времени. За это время я в HD с ётюба сиськи начну смотреть с первой секунды начала загрузки без пауз. А тут, даже после будущего апргрейда, даже если 250 секунд станут 25-ю секундами (что в 10 раз шустрее) — вопрос останется открытым.
Что делать — не скажу. Пока применять такое решение очень накладно выходит. Не представляю, кто сможет дождаться начала анимации. И это не критика, а всего лишь фидбэк. «Знал бы прикуп».
Что делать — не скажу. Пока применять такое решение очень накладно выходит. Не представляю, кто сможет дождаться начала анимации. И это не критика, а всего лишь фидбэк. «Знал бы прикуп».
На Opera работает.
Я смотрел в IE 10 (это который пока только в Win8), нормально показывает.
Не удивительно.
Вы у браузера просите очень много памяти. По 64мб, как вы сами посчитали, для двух изображений. По 64мб для каждого из двух вспомогательных канвасов. По 64мб для imagedata. 64мб для хранения фреймов. Итого по скромным оценкам 7*64 = 448мб. При этом после генерации кадров было бы не плохо хотя бы обнулить ссылки на вспомогательные канвасы, image data, и изображения, что позволит вернуть системе большую часть памяти 6*64мб. Сама она не освободится т.к. в вашей функции ставится интервальный таймер с функцией, которая создает замыкание. Кстати круто когда для анимации используется requestAnimationFrame.
Вообще было бы разумней выделить канвасы размером в кадр, и генерировать пакадрово. К тому же можно обойтись одним канвасом. Это позволит избежать выделение большого количества памяти.
И возможно не стоит генерировать все кадры на старте. Можно сгенерировать 48кадров, а остальные догенерировать по таймеру во время проигрывания. Исходя из вашего описания 10с подвисания может означать что кадр генерируется ~40ms (для 5сек получаем 20ms, а использование ментшего кол-ва памяти скорей всего еще улучшит ситуацию), что соотвествует ~25кадров/сек. А если еще и web worker задействовать, для тех браузеров, которые поддерживают, то точно можно генерировать (для первого показа) кадры в реалтайме в параллельном потоке.
Вы у браузера просите очень много памяти. По 64мб, как вы сами посчитали, для двух изображений. По 64мб для каждого из двух вспомогательных канвасов. По 64мб для imagedata. 64мб для хранения фреймов. Итого по скромным оценкам 7*64 = 448мб. При этом после генерации кадров было бы не плохо хотя бы обнулить ссылки на вспомогательные канвасы, image data, и изображения, что позволит вернуть системе большую часть памяти 6*64мб. Сама она не освободится т.к. в вашей функции ставится интервальный таймер с функцией, которая создает замыкание. Кстати круто когда для анимации используется requestAnimationFrame.
Вообще было бы разумней выделить канвасы размером в кадр, и генерировать пакадрово. К тому же можно обойтись одним канвасом. Это позволит избежать выделение большого количества памяти.
И возможно не стоит генерировать все кадры на старте. Можно сгенерировать 48кадров, а остальные догенерировать по таймеру во время проигрывания. Исходя из вашего описания 10с подвисания может означать что кадр генерируется ~40ms (для 5сек получаем 20ms, а использование ментшего кол-ва памяти скорей всего еще улучшит ситуацию), что соотвествует ~25кадров/сек. А если еще и web worker задействовать, для тех браузеров, которые поддерживают, то точно можно генерировать (для первого показа) кадры в реалтайме в параллельном потоке.
Дык я ж не настоящий сварщик :) Я сам только начинаю осваивать все это скриптообразие. Это была попытка отдать браузеру альфаканал под jpeg-сжатием. А то что расплачиваться за такой финт придется — увы тут нет сомнений. Все что вы описали — я тоже тестирую, ищу пути и оптимизирую. Думаю скоро наступит время для статьи в которой большая часть этого кошмара будет устранена. Я не так чтобы мощный программист в яваскрипте, поэтому многие вещи вообще впервые вижу. Например я так и не понял как отследить момент освобождения памяти. Мой таскменеджер показывает что хоть в лоб хоть по лбу все равно память одинаково тратится. Хоть чищу кучу хоть не чищу. Кто бы подсказал какие инструменты специальные для вдумчивой отладки. Про воркеры вообще позавчера впервые услышал, и чуствую что в них сила.
Интересная реализация, спасибо.
PS aep-шку можно в публичном или в приватном порядке для поковырять? :) Ну или на словах рассказать как делался пункт «лохматое», ибо у меня подозрение только на Fractal Noise + Turbulent Displace.
PS aep-шку можно в публичном или в приватном порядке для поковырять? :) Ну или на словах рассказать как делался пункт «лохматое», ибо у меня подозрение только на Fractal Noise + Turbulent Displace.
Да солнышко приличное, дайте плз аешечку.
Про анимацию… Финальная хороша, но звезды прыгают в движении. Реально поправить?
>> Как сжимать с малой потерей качества…
Я делаю так (Photoshop): File->Save for Web & Device
JPEG -> Low
Quality -> Bilinear
Ваша картинка ужалась в 700Кб (цвет с черным фоном) + альфа 600Кб = 1,3 Мб
Само солнышко не велико, по этому пиксилизация почти не видна, так что, можете его еще немного ужать. Вот сами картинки: img_rgb, img_alpha
Про анимацию… Финальная хороша, но звезды прыгают в движении. Реально поправить?
>> Как сжимать с малой потерей качества…
Я делаю так (Photoshop): File->Save for Web & Device
JPEG -> Low
Quality -> Bilinear
Ваша картинка ужалась в 700Кб (цвет с черным фоном) + альфа 600Кб = 1,3 Мб
Само солнышко не велико, по этому пиксилизация почти не видна, так что, можете его еще немного ужать. Вот сами картинки: img_rgb, img_alpha
sergej-hof.de/tutors/alpha2.zip
только турбулетнные искажения без фракталов. Так получилось что я много лет уже не запускал АЕ и поэтому рисование отчасти протекало в припадке настольгии — от нежелания покупать или скачивать полную версию АЕ, я стянул портабельную, но она говорит на моей винде только на языке Гете. Предупреждаю, ощущения специфические.
только турбулетнные искажения без фракталов. Так получилось что я много лет уже не запускал АЕ и поэтому рисование отчасти протекало в припадке настольгии — от нежелания покупать или скачивать полную версию АЕ, я стянул портабельную, но она говорит на моей винде только на языке Гете. Предупреждаю, ощущения специфические.
Лохматое солнце, лохматый песок,
Лохматые губы, воды бы глоток,
В лохматой пустыне не видно следа,
Скажи, караванщик, когдаааа же водаааа?
Лохматые губы, воды бы глоток,
В лохматой пустыне не видно следа,
Скажи, караванщик, когдаааа же водаааа?
Улыбнуло:
alert('Та-а-а-а-а, насяльника… та-а-а-а, канва, насяльника');
Спасибо за идею, тоже попробую.
Кстати, чтобы Хром смог открыть локальные файлы, его надо запустить с ключом --disable-web-security.
alert('Та-а-а-а-а, насяльника… та-а-а-а, канва, насяльника');
Спасибо за идею, тоже попробую.
Кстати, чтобы Хром смог открыть локальные файлы, его надо запустить с ключом --disable-web-security.
На IPad Safari не сработало, даже фон не показался.
Firefox 15.0.1 Windows 7.
Думает мучительно секунд 20, показывает фон и всё виснет. firefox просит остановить сценарий. Без этого вообще заглухает намертво.
Думает мучительно секунд 20, показывает фон и всё виснет. firefox просит остановить сценарий. Без этого вообще заглухает намертво.
Увы. Я описал такой недостаток, сейчас думаю как же можно сделать безболезненно.
У меня минуты 3 Firefox открывал и выдал 4 предупреждения о том, что страница слишком долго не отвечает… И ничего, это же пример. Тут главное идея и старание! И еще, большое спасибо за ае-шку. Сейчас протестирую на сжатие в Афтере и отпишусь.
Как-то странно вы пользуетесь точками. У вас 1.067KB означает одну тысячу Кб, а 18.6MB — восемнадцать Мб.
В Хроме все загрузисось и работает, но движение по орбитам происходит рывками, как будто оба солнца трясёт изнутри. Спрайтовая же анимация весьма плавная.
Firefox запросил пощады
Интересно сравнить производительность с drawImage(context, canvas_rgb, координаты);
И без сглаживания оно какое-то дёрганное, мне так кажется.
И без сглаживания оно какое-то дёрганное, мне так кажется.
Мда, веб- технологиям пока далеко даже до качества анимации в игровых приставках двадцатилетней давности.
— Залипания кадров;
— Отсутсвие обратной строчной синхронизации;
— Отсутсвие субпиксельного рендеринга, от чего движение дёрганное а не плавное.
Я вот понять не могу, опыт предыдущих поколений никого ничему не учит?
— Залипания кадров;
— Отсутсвие обратной строчной синхронизации;
— Отсутсвие субпиксельного рендеринга, от чего движение дёрганное а не плавное.
Я вот понять не могу, опыт предыдущих поколений никого ничему не учит?
Ок, первое и третье понятно, это всё исправляется довольно просто.
А второе это что?
А второе это что?
Сейчас, после этого вопроса, сюда очень хорошо вписался бы комментарий о том, что «вот и выросло поколение» и «теперь не умеют кодить».
А мне и третье не ясно — как связан субпиксельный рендеринг с плавностью анимации будучи инструментом расширенного анти-алиасинга. Мягкое vs теплое. Но в целом да, проблемы с производительностью скрипта и бедноватый набор функций налицо. Уверен что со временем эти детские болезни будут побеждены и надеюсь что это время придет скоро.
> А мне и третье не ясно — как связан субпиксельный рендеринг с плавностью анимации будучи инструментом расширенного анти-алиасинга.
Здесь на хабре пару лет назад уже была статья как на Flash делали плавное движение автомобиля с субпиксельным рендерингом, ибо движение по точкам выглядит дёрганным. Заказчику не понравилось такое дерганное движение, и им пришлось делать 4 кадра автомобиля с анимацией движения на расстоянии в 1 пиксель (по 1/4 пикселя на кадр). К сожеланию, не могу найти эту статью.
Здесь на хабре пару лет назад уже была статья как на Flash делали плавное движение автомобиля с субпиксельным рендерингом, ибо движение по точкам выглядит дёрганным. Заказчику не понравилось такое дерганное движение, и им пришлось делать 4 кадра автомобиля с анимацией движения на расстоянии в 1 пиксель (по 1/4 пикселя на кадр). К сожеланию, не могу найти эту статью.
«265 кадров это тоже не так чтобы много...» — вы уже сами запутались. Не 265, а 256.
Sign up to leave a comment.
JPG, прозрачность, Canvas, анимация