myshmup.com позволяет создавать игры-шутеры (стрелялки) в браузере. Мы можем использовать ресурсы с общей лицензией Creative или загружать собственные изображения и звуки. Созданные игры можно публиковать на сайте. Платформа не требует кодирования, настройка игровых объектов осуществляется с помощью пользовательского интерфейса, бэкенд разработан с использованием фреймворка Django, пользовательский интерфейс редактора написан на Javascript и использует фреймворк REACT, игра написана на Typescript и вызывает низкоуровневые API Webgl для рендеринга .
Далее я объясню оптимизацию, которую я использовал в разделе игр, чтобы обеспечить плавную работу при 60PS в большинстве браузеров.
1, Вебгл API
API Webgl (библиотека веб-графики) позволяет отображать графику внутри браузера с использованием современных графических процессоров, и для работы графического процессора необходимо предоставить две функции, называемые шейдерами: вершинный шейдер и фрагментный шейдер. Шейдеры написаны на C++-подобном GLSL (GL Shader Language).
Вершинные шейдеры предназначены для расчета положения вершин сцены. Выходные данные вершинного шейдера затем отправляются во фрагментный шейдер, который вычисляет цвет всех отображаемых пикселей. На myshmup.com я использую простую пару вершинных и фрагментных шейдеров. Они рассматривают двумерные прямоугольники только как примитивные формы, каждая из которых имеет собственную текстуру, которую нужно нарисовать на поверхности. Цвет текстуры можно настроить, чтобы включить эффект мерцания. Большая часть работы по рендерингу включает в себя подачу в шейдеры данных, которые им нужны для каждого кадра.