Обновление текстур WebGL в WebAssembly из HTMLVideoElement - PullRequest
Новая
       34

Обновление текстур WebGL в WebAssembly из HTMLVideoElement

0 голосов
/ 12 марта 2019

У меня есть проект *, в котором я играю два видео, запускаю простой шейдер, который показывает края и смешивает их, и отображаю результат на холсте. Проект основан на этого урока . Цель, которую я пытаюсь достичь, состоит в том, чтобы понять, является ли работа на JS и WebAssembly быстрее, чем просто работа WebGL в JS, но в настоящий момент я переключаюсь между JS и WebAssembly в каждом фрейме, что кажется очень дорогим.

В каждом кадре код копирует содержимое каждого HTMLVideoElement в текстуру WebGL в JS: 

export function updateTexture(gl, texture, video) {
  const level = 0;
  const internalFormat = gl.RGBA;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(
    gl.TEXTURE_2D,
    level,
    internalFormat,
    srcFormat,
    srcType,
    video
  );
}

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

Есть ли способ скопировать текущий видеокадр в WASM, чтобы сохранить переход между JS и WASM? Единственный способ, который я вижу, - добавить использование кодеков, и я бы хотел продолжать использовать интерфейсы более высокого уровня.

* Если вы хотите запустить проект, вызовите 'grunt exec', 'npm run copy-assets', 'npm run dev'. Используйте ветку 'texture-copying'.

1 Ответ

0 голосов
/ 21 мая 2019

Я обнаружил, что компиляция в Asm.JS вместо WASM снижает стоимость переключений контекста, тем самым устраняя мою проблему. Это не идеальное решение, но оно все же обеспечивает лучшую производительность, чем JS.

...