WebGL создает текстуру

Я успешно создал текстуру WebGL из изображения и нарисовал ее в элемент холста.

function initTexture(src) {
  texture = gl.createTexture();
  texture.image = new Image();
  texture.image.onload = function() {
    handleLoadedTexture(texture)
  }

  texture.image.src = src;
}

Я также попытался создать текстуру из одного из этих типов данных, но безуспешно.

  • [объект ImageData]
  • [объект CanvasPixelArray]
  • [объект CanvasRenderingContext2D]

Можно ли создать текстуру только с изображением пиксельного массива? Или, другими словами: возможно ли создать объект JS Image из массива пикселей?

Edit:

Массив пикселей выглядит как [r,g,b,a,r,g,b,a,r,g,b,a,...], и каждое значение находится в диапазоне от {0..255}. Я хочу создать текстуру с пикселями в данном массиве.

ОТВЕТЫ

Ответ 1

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

function createSolidTexture(gl, r, g, b, a) {
    var data = new Uint8Array([r, g, b, a]);
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    return texture;
}

РЕДАКТИРОВАТЬ: Чтобы экстраполировать это немного дальше, большинство из того, что вам нужно знать, находится в вызове gl.texImage2d. Чтобы создать текстуру из необработанных данных RGB (A), вам нужен массив значений без знака байта, вам нужно указать WebGL, что представляют данные (RGB или RGBA), и вам нужно знать размеры текстуры. Более обобщенная функция будет выглядеть так:

function textureFromPixelArray(gl, dataArray, type, width, height) {
    var dataTypedArray = new Uint8Array(dataArray); // Don't need to do this if the data is already in a typed array
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, type, width, height, 0, type, gl.UNSIGNED_BYTE, dataTypedArray);
    // Other texture setup here, like filter modes and mipmap generation
    return texture;
}

// RGB Texture:
// For a 16x16 texture the array must have at least 768 values in it (16x16x3)
var rgbTex = textureFromPixelArray(gl, [r,g,b,r,g,b...], gl.RGB, 16, 16);

// RGBA Texture:
// For a 16x16 texture the array must have at least 1024 values in it (16x16x4)
var rgbaTex = textureFromPixelArray(gl, [r,g,b,a,r,g,b,a...], gl.RGBA, 16, 16);