Хочу в браузере показывать 2D графику, нужно всё контролировать попиксельно (т.е. есть двумерный массив цветов, который нужно изменять программно и выводить пиксель в пиксель). Вроде есть canvas, с ним всё более-менее понятно. Но хочется максимальную скорость. Кроме canvas есть webgl и webgpu. Оно вроде для 3D графики, но пишут, что и для 2D будет быстрей. Хотя я не очень представляю, как можно рисовать 2D попиксельно, используя 3D API. Наверное рисовать каждый пиксель двумя треугольниками, подогнанными под координатную сетку это бред.

Здравствуйте, vsb, Вы писали:

vsb>Хочу в браузере показывать 2D графику, нужно всё контролировать попиксельно (т.е. есть двумерный массив цветов, который нужно изменять программно и выводить пиксель в пиксель). Вроде есть canvas, с ним всё более-менее понятно. Но хочется максимальную скорость. Кроме canvas есть webgl и webgpu. Оно вроде для 3D графики, но пишут, что и для 2D будет быстрей. Хотя я не очень представляю, как можно рисовать 2D попиксельно, используя 3D API. Наверное рисовать каждый пиксель двумя треугольниками, подогнанными под координатную сетку это бред.

Быстрее всего видюхой. Используй шейдеры.
https://habr.com/ru/post/501080/
https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html
https://webgl2fundamentals.org/webgl/lessons/webgl-how-it-works.html

vsb>Наверное рисовать каждый пиксель двумя треугольниками, подогнанными под координатную сетку это бред.

да обычное дело

Здравствуйте, Je suis Mamut, Вы писали:

vsb>>Наверное рисовать каждый пиксель двумя треугольниками, подогнанными под координатную сетку это бред.

JSM>да обычное дело

Т.е. это норма? Каждый кадр отправлять на видеокарту 16 миллионов треугольников для 4K разрешения? Если каждый треугольник описывается тремя трехмерными координатами, то это 36 байтов на каждый треугольник или 597 мегабайтов трафика на каждый кадр или 35 гигабайтов в секунду для 60 FPS. PCI-E 3.0 x16 дает 15.75 ГБ/с. В общем не бьются цифры.

vsb>>>Наверное рисовать каждый пиксель двумя треугольниками, подогнанными под координатную сетку это бред.

JSM>>да обычное дело

vsb>Т.е. это норма? Каждый кадр отправлять на видеокарту 16 миллионов треугольников для 4K разрешения? Если каждый треугольник описывается тремя трехмерными координатами, то это 36 байтов на каждый треугольник или 597 мегабайтов трафика на каждый кадр или 35 гигабайтов в секунду для 60 FPS. PCI-E 3.0 x16 дает 15.75 ГБ/с. В общем не бьются цифры.

падажжжи
норма — это покрыть экран парой треугольников и рисовать твое два дэ шейдером
а не каждый пиксель отдельным треугольником

Здравствуйте, Je suis Mamut, Вы писали:

JSM>падажжжи
JSM>норма — это покрыть экран парой треугольников и рисовать твое два дэ шейдером
JSM>а не каждый пиксель отдельным треугольником

Не понимаю, как мне нарисовать шейдером заданный массив пикселов из оперативной памяти, который каждый кадр может меняться.

vsb>Не понимаю, как мне нарисовать шейдером заданный массив пикселов из оперативной памяти, который каждый кадр может меняться.

ты вроде хотел быстрее? тогда не надо из памяти, надо все в шейдер запихнуть

Здравствуйте, Je suis Mamut, Вы писали:

vsb>>Не понимаю, как мне нарисовать шейдером заданный массив пикселов из оперативной памяти, который каждый кадр может меняться.
JSM>ты вроде хотел быстрее? тогда не надо из памяти, надо все в шейдер запихнуть
Т.е. новый шейдер на каждый кадр? Жирновато. Если есть что сказать, объясни уже по человечески.

Здравствуйте, vsb, Вы писали:

vsb>Не понимаю, как мне нарисовать шейдером заданный массив пикселов из оперативной памяти, который каждый кадр может меняться.

тебе нужен WebGL computer shader (не знаю, реализован ли он уже в WebGL 2.0 или как то "эмулируется") — чтобы все расчёты производились на GPGPU, т.к. гонять кучу данных туда сюда (CPU->GPU) не вариант ..

	Скрытый текст

WebGL 2.0 Compute shader Demos
https://github.com/9ballsyndrome/WebGL_Compute_shader

Здравствуйте, vsb, Вы писали:

vsb>Хочу в браузере показывать 2D графику, нужно всё контролировать попиксельно (т.е. есть двумерный массив цветов, который нужно изменять программно и выводить пиксель в пиксель). Вроде есть canvas, с ним всё более-менее понятно. Но хочется максимальную скорость. Кроме canvas есть webgl и webgpu. Оно вроде для 3D графики, но пишут, что и для 2D будет быстрей. Хотя я не очень представляю, как можно рисовать 2D попиксельно, используя 3D API. Наверное рисовать каждый пиксель двумя треугольниками, подогнанными под координатную сетку это бред.

Быстрее всего в твоем случае использовать ImageData что есть Uint8ClampedArray.

Далее

canvasCtx.putImageData(imageData, 0, 0);

См. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

canvas отправится на GPU когда время придет.

Шкйдеры тебе в попиксельном рисовании не помогут — объем данных CPU -> GPU будет таким же если не больше.

Как упрешься в производительность, или надоест греть PCI-E шину, конечно же переходи на WebGL.
А как именно сделать, зависит от задачи.
Общий принцип: загоняешь все что надо в видеопамять и потом присылаешь,
либо только изменения картинки, либо информацию о том как изменить картинку.
А может вообще видюха будет все вычислять сама.
Присылать придется похоже только цвет. Если RGB то 24 байта на пиксель (вершину),
если с альфа-каналом (RGBA) то 32 байта на пиксель (вершину).
Либо вычислять прям на видюхе, хоть обычными шейдерами, хоть вычислительными.
А может вообще рендер в текстуру. В общем вангуем по задаче как можем.

canvasCtx.putImageData(imageData, 0, 0); будет гонять всю картинку CPU-GPU.