Nikita Sepi0l

Как зарендерить 100к пикселей на веб-сайте без лагов? 🧐 (WebGL)



Именно с такой задачей я столкнулся на этих выходных - зарендерить 100к пикселей которые в реал тайме будут апдейтится через веб сокеты с базой данных, звучит не так и сложно.



Сложность тут в том, чтобы можно было приближаться, двигаться по канвасу и красить пиксели абсолютно без лагов и с высоким FPS.



И как бы я не старался оптимизировать через разные react библиотеки и хуки, ничего не получалось.



Ночью вспоминая разговор с другом, о том на чем написаны танки онлайн, мне вспоминается такая технология как WebGL.



WebGL - это JavaScript API для рендеринга интерактивной 2D и 3D графики в веб-браузере. WebGL позволяет использовать возможность видеокарты или графического процессора прямо в браузере.



Такой подход не то что оптимизирует такие действия как в моей задаче, он меняет все полностью.



Вот пару преимуществ данной технологии 👇



1. Производительность - использование GPU для отображения графики и анимаций.

2. Кроссплатформенность - да, она работает во всех современных браузерах.

3. Широкие возможности - создание 3д, 2д игр и сложных анимаций с высокой производительностью.



Однако это довольно не простая технология и ее обучение может занять время. Она использует свой язык GLSL - специализированный язык для написания шейдеров.



Кусочек кода выглядит так 👇

precision mediump float;

uniform vec2 resolution;

uniform float time;



void main() {

    vec2 uv = gl_FragCoord.xy / resolution;

    vec3 color = vec3(uv.x, uv.y, abs(sin(time)));

    gl_FragColor = vec4(color, 1.0);

}

Самое интересное, что кусочки из GLSL кода ставятся прямо в код JavaScript в виде строки, смешиваясь с другой частью Джаваскриптерского WebGL кода 🙃



Переписав рендеринг пикселей и весь остальной функционал на WebGL, я получил такую производительность, какую бы никогда не смог достичь даже с современным реактом и библиотеками 💻



Если перед вами стоит что-то похожее, помните что WebGL существует 🫡



Пост навигатор 👩‍💻



nikitasepi0l ⬅ <Комьюнити />