- Історія canvas
- Canvas
- критика
- Трохи про логіку canvas
- Тестування продуктивності Growing Crystals
- результати
- Що означають результати
- Тестування продуктивності від Kevin Roast
- результати
- пристрій тесту
- Що означають результати
- Підсумкові результати для копіювання в коментарі
Друзі, всім привіт! Нарешті знайшлося небагато часу для оглядової статті про одну з моїх улюблених технологій: Java Script + Canvas. У своєму дитинстві, в кінці 90-х, я міг тільки мріяти про щось подібне. Адже тоді так не вистачало простого інструменту для створення швидкої комп'ютерної графіки при розробці ігор, що тільки не довелося перепробувати щоб навчитися «швидкому» Рендер в ігрових додатках під Windows 98 написаних в середовищі Borland C ++ Builder. Благо, темні часи вже позаду і тепер будь-який школяр за 30 хвилин зможе написати абсолютно стабільний, без лагів і мерехтінь, графічне додаток навіть для веб-браузера. Школярі всієї планети за таку неймовірну можливість зобов'язані елементу HTML canvas.
Історія canvas
Все почалося більше 10 років тому, коли в 2004 в браузерному движку рендеру веб сторінок WebKit від компанії Apple з'явився елемент canvas. Буквально через рік, в 2005 canvas вже став підтримуватися движком Gecko (браузер Firefox). А ще через рік, у 2006 елемент став підтримуватися і браузерами Opera а також увійшов в нові специфікації майбутніх веб-технологій групи розвитку мережі Інтернет - Web Hypertext Application Technology Working Group (WHATWG). Але, по справжньому про canvas дізналися тільки в 2011, після того, як на його базі з'явилася повноцінна 3D графіка з апаратним прискоренням на GPU, мова, звичайно ж, про технології WebGL специфікації версії 1.0, яка вийшла в березні 2011. Пам'ятаю здивування людей в 2011 році в рекламних агентствах і всюди де ми демонстрували наші ( ART OF WEB ) Напрацювання браузерної 3D графіки, які показували прямо в браузері клієнтів без установки будь-яких плагінів.
З легкістю відображалися навіть складні великі моделі. Наприклад, модель в 52523 полігону відображалася без проблем обертаючись видаючи 60 FPS.
Переглядач 3D моделей до сі пір доступний на офіційному веб-сайті компанії ART OF WEB.
Мушу визнати, що влітку 2011 найкраще з WebGL працювали браузери Chrome і Filrefox.
Canvas
Повертаючись до огляду чистого canvas, потрібно відзначити не тільки його переваги, але і недоліки наявні на сьогоднішній день. Відповім на критику, зібрану в Wikipedia.
критика
- Навантажує процесор і оперативну пам'ять - true, адже Java Script виповнюється в RAM і використовує CPU.
- Через обмеження збирача сміття, немає можливості очистити пам'ять - true, це ж Java Script виконуваний в браузері з низкою своїх технологічних обмежень.
- Необхідно самому обробляти події з об'єктами - true, адже робота йде з контекстом і немає нічого дивного в тому, що потрібно ловити положення миші і обробляти його. Все те ж саме як і при роботі зі звичайним OpenGL.
- Доводиться вимальовувати окремо кожен елемент - true, знову ж таки, робота з контекстом дає швидкість за прямий доступ до інструментів малювання, а й накладає обмеження у вигляді необхідності повного управління процесом відтворення.
- Погана продуктивність при великому дозволі - залежить від потужності комп'ютера, не впевнений що проблема зараз актуальна. Саме сумнів в продуктивності і послужило приводом для написання даної статті і проведення замірів.
переваги
- На відміну від SVG набагато зручніше мати справу з великим числом елементів - погоджуся, але тільки для наступних випадків:
- за умови коли потрібно визначати по якому з елементів потрапляє миша, на SVG з мишею працювати зручніше
- за умови наявності великої кількості шарів складної форми з SVG простіше
Але якщо мова йде про складні анімаціях або кількості об'єктів більше 100, то єдиний інструмент це звичайно ж canvas;
- Має апаратне прискорення - true
- Можна маніпулювати кожним пікселем - true
- Можна застосовувати фільтри обробки зображень - true
- Є багато бібліотек - це безумовний плюс, але це різноманіття бібліотек межує з тим, що багато бібліотек зроблені любителями і не завжди задокументовані і зручні, а багато хто з них вже навіть не підтримуються, в будь-якому випадку, перед вибором бібліотеки потрібно провести ретельний аналіз. При розробці проекту Growing Crystals влітку 2014 я не менше двох тижнів присвятив вивченню фреймворків роботи з cavas і дуже рекомендую ознайомитися з результатами , Перш ніж рухатися далі.
Звертаю вашу увагу на те, щоб працювати з canvas, необхідно досить впевнене знання Java Script. Підбірка зібрана мною на тему Java Script + Canvas залишається актуальною і до цього дня.
Трохи про логіку canvas
Наведу простий приклад, взятий мною з вікіпедії, і злегка перероблений під мій улюблений «use strict» з замиканнями (завжди пишу JavaScript в Strict Mode )
HTML5 CANVAS
Не буду перевантажувати статтю інструкціями і поясненнями як програмувати canvas. Дам лише посилання на вихідний код прикладу з найдокладнішими коментарями. Завантажити pifagors-tree.js .
Детальніше про логіку програмування canvas можете ознайомитися на моєму досвіді в статтях Growing Crystals vol 4. картинка на клієнті і запити до сервера і Growing Crystals vol 10. Швидка анімація в грі на Canvas, requestAnimationFrame .
Тестування продуктивності Growing Crystals
Спочатку, коли я брався за розробку 2D гри у мене було багато сумнівів щодо технології та її продуктивності, але, як з'ясувалося згодом, canvas більш ніж ідеальний для реалізації браузерних ігор.
В якості демонстрації приведу фрагмент сцени з разарабативаемой нами з братом в 2014 році гри Growing Crystals.
Проводьте тестування в HTML5 сумісних браузерах: Chrome | FireFox | Safari | Opera | IE9 / 10 .
результати
Результати будуть доступні відразу після закінчення тесту
Що означають результати
Без сумніву, тест повинен видати понад 1000 очок і всю сцену тримати стабільні 60 FPS, хоча тут і частки (дим) і достатню кількість рухомих анімованих об'єктів. Але якщо у вас з якоїсь причини вийшло менше, буду вдячний за те, що напишете в коментарях скільки вийшло, яка у вас версія браузера і характеристики вашого комп'ютера.
Для визначення меж можливостей, необхідно провести більш функціонально повне тестування.
Тестування продуктивності від Kevin Roast
Вивчивши велику кількість тестів на не дуже потужному PC: Intel Core i5-2400, DDR3 8Gb, ATI Radeon HD 4850, буквально був здивований швидкістю і граничних можливостей технології - технологія містить величезний потенціал.
Представляю вам найбільш функціональний тест на проівзодітельний для canvas, розроблений Kevin Roast .
Тестування продуктивності рендеру HTML5 <canvas> на широко використовуваних ігрових графічних ефектах: спрайт на бітових картах, малювання в canvas, альфа-канал, перекриття полігонів, тіні і текстові функції.
Важливе зауваження для користувачів Windows + Chrome. Для отримання кращих результатів, потрібно відключити VSync. Якщо ви побачите що FPS раптово впав з 60 до 30, значить що працює обмеження Chrome на requestAnimationFrame ().
результати
Результати будуть доступні відразу після закінчення тесту
пристрій тесту
Кожен тест поступово збільшує навантаження поки FPS не впаде до 30. Навантаження збільшується за рахунок додаються в сцену об'єктів. Окуляри вважаються за часом поки браузер справляється з навантаженням (тримає вище 30 FPS) і окремо враховують складність кожного окремого тесту.
Що означають результати
Тест видає сумарні окуляри, які є комбінованим показником комплексної продуктивності комп'ютера. Для кращих результатів рекомендується відключити інші процеси, що навантажують CPU і GPU. Також тести дозволяють порівняти роботу canvas в різних браузерах.
Benchmark version 1.1 [25-03-2013]
Підсумкові результати для копіювання в коментарі
Буду радий обговорити отримані результати в коментарях.
CPU: вкажіть самостійно
RAM: вкажіть самостійно
GPU: вкажіть самостійно
<
