Когда Intel поставил перед небольшой командой разработчиков задачу создать приложение с открытым кодом, они создали Dev Story/*HACK THE CODE*/— последовательность задач на темы цикла разработки игр.
Шейдеры в HTML5 с использованием PIXI.js
Одна из лучших новых возможностей, которой могут воспользоваться разработчики Javascript как для настольных ПК, так и для мобильных устройств – это создание шейдеров. Мы часто пользовались ими при разработке Dev Story/*Hack the Code’*/. Они доступны нам благодаря WebGL и, если платформа, на которой вы работаете, ее поддерживает, имеется большое количество библиотек, которые позволят вам воспользоваться ими.
Для тех, кто не знает, шейдеры – это маленькие программы, которые являются частью программируемого конвейера, исполняемого непосредственно на графическом процессоре. Они пишутся на языке, похожем на язык С, под названием GLSL, но могут быть использованы в оболочке Javascript при помощи таких библиотек, как PIXI.js
Существуют различные виды шейдеров, самые известные из них - это vertex и fragment. Для разработки 2D вам, скорее всего, пригодится последний, но оба они предлагают мощные возможности аппаратного ускорения при обработке пиксельной графики. Они используются в основном для осуществления таких видео эффектов постобработки как размытие, виньетирование, цвето- и светокоррекция, но, поскольку они легко программируются, ваша фантазия — часто единственное ограничение.
Для тех, кто не хочет связываться напрямую с WebGL, многие библиотеки предоставляют уже готовые шейдеры, которые можно использовать в javascript коде. Если вам захочется написать свои собственные шейдеры, то многие ресурсы помогут вам в этом. На то, чтобы понять особенности программирования на GPU вам может потребоваться немного времени (отсутствие случайной функции и невозможность хранить переменные для последующего использования при обновлениях фрейма, не прописывая их в texture (!), поставило меня в тупик на какое то время), но усилия того стоят.
Ознакомьтесь с сайтом www.shadertoy.com, чтобы узнать о некоторых возможностях. Но будьте внимательны, некоторый код, которые вы можете найти здесь, предназначен для опытных разработчиков, но если вы хотите просто понять, к чему может привести работа с шейдерами, то тогда это самое подходящее место, чтобы начать работу.
* http://caniuse.com/#feat=webgl
(Примечание: поддержка iOS появится для iOS 8)