Если вам нужно использовать `новое изображение` для рендеринга изображения в WebGL - PullRequest
Новая
       29

Если вам нужно использовать `новое изображение` для рендеринга изображения в WebGL

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

Во всех примерах рисования изображений WebGL используется объект DOM Image: 

var image = new Image();
image.src = "resources/f-texture.png";
image.addEventListener('load', function() {
  // Now that the image has loaded make copy it to the texture.
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,gl.UNSIGNED_BYTE, image);
  gl.generateMipmap(gl.TEXTURE_2D);
});

Хотите знать, есть ли способ добавить пиксели в ArrayBuffer или что-то еще, вместо использования объекта Image, а затем нарисовать его как изображение? Если это так, интересно, как правило, код выглядит для достижения этой цели. Это было бы здорово, потому что тогда я мог бы использовать данные пикселей для других целей, поэтому не нужно дублировать загрузку данных пикселей изображения.

1 Ответ

1 голос
/ 14 марта 2019

Вероятно, вам следует прочитать некоторые учебные пособия по WebGL

Да, вы можете загрузить данные в текстуру из ArrayBuffer 

gl.bindTexure(gl.TEXTURE_2D, tex);
const data = new Uint32Array([
   255, 0, 0, 255, // red
   0, 255, 0, 255, // green
   0, 0, 255, 255, // blue
   255, 255, 0, 255, // yellow
]);
const level = 0;
const internalFormat = gl.RGBA;
const width = 2;
const height = 2;
const border = 0;
const format = gl.RGBA;
const type = gl.UNSIGNED_BYTE
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border,
              format, type, data);
gl.generateMipmap(gl.TEXTURE_2D);
...