Можете ли вы / как использовать текстуры размером больше MAX_TEXTURE_SIZE? - PullRequest
Новая
       13

Можете ли вы / как использовать текстуры размером больше MAX_TEXTURE_SIZE?

0 голосов
/ 26 апреля 2018

У меня есть файл PNG, сгенерированный на сервере, 1536 на 47616 пикселей. PNG имеет палитру и имеет 20 записей. Размер PNG составляет 2,5 МБ - я не понимаю, почему память может быть проблемой для графического процессора.

Этот большой файл изображения в основном содержит комбинацию множества маленьких текстур. Каждая текстура внутри этого большого файла имеет ширину 128px и высоту 512px. Это означает, что в основном это большое изображение содержит 3 * 372 = 1116 изображений (1536/512 = 3 изображения в каждой строке, 47616/128 = 372 в каждом столбце)

Я поместил их в одно и то же изображение, потому что в противном случае конечному пользователю потребуется запросить 1116 изображений отдельно, а с запросом и обработкой заголовков - это много изображений для обработки. Намного быстрее запросить одно большое изображение. 

gl.getParameter(gl.MAX_TEXTURE_SIZE);  // this gives me 16384 for my browser. My texture's height of 47616 is a lot higher than this.

В настоящее время я пытаюсь привязать текстуру к буферу как: 

this.texture_image = new Image();
var parent = this;
this.texture_image.addEventListener("load", function(e) {
        parent.tinfo.width = parent.texture_image.width;
        parent.tinfo.height = parent.texture_image.height;
        parent.gl.bindTexture(parent.gl.TEXTURE_2D, parent.tinfo.texture);
        parent.gl.texImage2D(parent.gl.TEXTURE_2D, 0, parent.gl.RGB, parent.gl.RGB, parent.gl.UNSIGNED_BYTE, parent.texture_image);
});
this.texture_image.src= texture_image_url;

Однако это приводит к жалобам в Google Chrome: 

main.js:5118 WebGL: INVALID_VALUE: texImage2D: width or height out of range

Что, очевидно, имеет место, поскольку мой рост далеко за пределами диапазона MAX_TEXTURE_SIZE.

Итак, есть ли на клиенте какой-нибудь способ, которым я могу ссылаться на меньшие части изображения? Может быть, сделать мои собственные меньшие объекты Image из большого this.texture_image объекта Image?

Полагаю, я могу использовать Canvas и drawImage, но предпочел бы решение на основе WebGL. Поскольку я буду делать некоторые другие эффекты с WebGL позже.

Спасибо.

1 Ответ

0 голосов
/ 26 апреля 2018

Размер PNG составляет 2,5 МБ - я не понимаю, почему память может быть проблемой для графического процессора

PNG - это сжатый формат файла, не оптимизированный для произвольного доступа в реальном времени, графические процессоры не поддерживают подобные кодировки, без использования каких-либо расширений графические процессоры поддерживают только необработанные пиксельные данные, таким образом, ваше изображение будет расширено до WIDTHxHEIGHTx4 => 1536x47616x4 = 292552704 Байты размером 292,553 мегабайта, даже с использованием расширений, вы будете привязаны к схемам кодирования блоков фиксированной ширины. Это говорит о том, что MAX_TEXTURE_SIZE не столько о памяти, сколько об ее адресности, в WebGL нет никакого способа, ваш единственный вариант - использовать 2D-холст, чтобы разбить атлас текстуры на подходящие куски.

...