WebGL на Android не может отображать текстуру из-за возможной проблемы с округлением ⇐ Android

[Anonymous]

В настоящее время я работаю над WebGL, чтобы выполнить постобработку 2D-изображения. Проблема возникает, когда я пытаюсь использовать API copyTexImage2D для отправки исходной текстуры во фрагментный шейдер с использованием размеров дисплея устройства, в результате чего получается сплошная черная текстура, если я искусственно не добавляю какое-либо положительное число, превышающее единицу, что заставляет меня полагать, что проблема возникла из-за какого-то какая-то проблема с округлением. Интересная часть проблемы: она эксклюзивна для платформы Android и не воспроизводится на платформах iOS, OSX, Windows в разных браузерах.
Вот фрагмент моего кода, который копирует пришедшую сцену. из MapLibre в переменную renderTexture.

Код: Выделить всё

            // render-to-texture
gl.bindTexture(gl.TEXTURE_2D, this.renderTexture!);
let w = gl.canvas.width;
let h = gl.canvas.height;
gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, w, h, 0); // Solid black texture sent to fragment shader
// gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, w + 1, h, 0); // Texture correctly sent to fragment shader
// gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, w + 1, h - 1, 0); // Also works vice versa
// gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, w - 1, h, 0); // Doesn't work

getDeviceDimensions();

gl.useProgram(this.program!);

gl.uniform1i(this.sharpenLoc!, this.sharpen ? 1 : 0);
gl.uniform1i(this.lookupLoc!, this.lookup ? 1 : 0);
gl.uniform1i(this.grainLoc!, this.grain ? 1 : 0);

const { lat, lng } = map.getCenter();
gl.uniform2f(this.mapCoordsLoc!, lat, lng);

gl.uniform2f(this.resolutionLoc!, gl.canvas.width, gl.canvas.height);

// Pass texture
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.renderTexture!);
gl.uniform1i(this.renderTexLoc!, 0);

// Pass LUT
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, this.lutTexture!);
gl.uniform1i(this.lutTexLoc!, 1);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

Вот как я инициализирую renderTexture

Код: Выделить всё

            this.renderTexture = gl.createTexture()!;
gl.bindTexture(gl.TEXTURE_2D, this.renderTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.canvas.width, gl.canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

Дополнительный контекст

• Размеры не всегда имеют степень 2, но их округление не решает проблему.
• Размеры gl.canvas.width и gl.canvas.height совпадают с целевым HTML-элементом.
• Проблема может быть воспроизведена как в WebGL 1, так и в WebGL 2 в Android.
• Использование gl.viewPort с дополнительным размером в один пиксель не повлияет на проблему.
• Функция текстуры фрагментного шейдера (...) возвращает черный цвет при использовании renderTexture в качестве входных данных

Устройство: Google Pixel 5
Разрешение: 1080x2340, масштабный коэффициент 2,75
Браузер: Google Chrome 103.0.5060.71

Подробнее здесь: https://stackoverflow.com/questions/781 ... ding-issue