How I optimized myshmup.com webgl rendering

A shmup screen is made of basic textures repeated several times for bullets, enemies and decors.

The webapp myshmup.com allow you to create shmup (shoot-em-up) games in the browser. You can use assets with creative common licenses or upload your own artworks and sounds. The created games can be published on the site. The platform doesn’t need coding, the configuration of the game objects is performed with the help of a user interface. The back-end has been developed using the Django framework. The editor UI is written in Javascript and uses REACT framework. The game is written in Typescript and calls the low level Webgl API for the rendering.

In this article, I will explain the optimization I used on the game part to ensure a fluid 60PS experience in most browser.

1 The webgl API

The Webgl (Web Graphics Library) API permits to uses modern GPU to render graphics inside the browser. In order to put the GPU to work, you need to provide two functions called shaders: a vertex shader and a fragment shader. The shaders are written in GLSL(GL Shader Language) which is similar to C++.

The vertex shader aims at computing the vertex position of a scene. The vertex shader’s output is then sent to the fragment shader who compute the color for all the pixels that are rendered. In myshmup.com, I used a simple pair of vertex and fragment shader. They handle only 2D rectangle as primitive shape…