Как мне написать одну текстуру на другую в определенном месте в webGL? - PullRequest
Новая
       0

Как мне написать одну текстуру на другую в определенном месте в webGL?

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

Я хочу сделать что-то, что кажется довольно простым, но я новичок с webgl и с трудом нахожу учебник, чтобы просто сделать это. Допустим, у меня есть две текстуры webgl, готовые к работе с моим контекстом рендеринга webgl2. Я просто хочу написать texture1 на texture2 с координатами x, y. Как можно это настроить?

1 Ответ

1 голос
/ 13 мая 2019

Для рендеринга из одной текстуры в другую требуется прикрепить текстуру, в которую вы хотите записать (целевую текстуру), к кадровому буферу 

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb):
const attachmentPoint = gl.COLOR_ATTACHMENT0;
const textureType = gl.TEXTURE_2D;
const mipLevel = 0;  // must be 0 on WebGL1
gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, 
                        textureType, someTexture, mipLevel);

После этого для рендеринга в текстуру используйте 

gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.viewport(0, 0, widthOfTexture, heightOfTexture);

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

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

См. https://webglfundamentals.org/webgl/lessons/webgl-render-to-texture.html

Обратите внимание, что в WebGL1 гарантированно будет работать только 1 формат текстур.internalFormat = gl.RGBA, формат = gl.RGBA, тип = gl.UNSIGNED_BYTE.В WebGL2 есть таблица.См. Стр. 5 справочного руководства

В противном случае нет никакой разницы между рендерингом на холст и рендерингом для текстуры.Точно так же, как вы рендерили бы что-то в определенное место на холсте, точно так же, как вы рендерили бы в определенное место на текстуре.Вы настраиваете геометрию, атрибуты, униформу, выполняете любую необходимую математику в зависимости от размера того, что вы рисуете, и рисуете.Если вы не знаете, как это сделать , в этой статье показан код, который отображает прямоугольник . В этой статье показано, как визуализировать что-либо в любой позиции . В этой статье показано, как использовать матрицы для большей гибкости .

Визуализация исходной текстуры ничем не отличается от визуализации некоторых текстурированных треугольников / геометрии / и т. Д. На холсте.Вы объявляете единый сэмплер в своем шейдере, привязываете текстуру к текстурному блоку и рисуете. В этой статье показано, как использовать текстуры .

Эта статья объединяет все эти уроки, чтобы нарисовать текстурированный квад в любом месте, используя любую часть текстуры .

...