WebGL создать текстуру - PullRequest
Новая
       16

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

16 голосов
/ 28 января 2012

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

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 Ответ

33 голосов
/ 29 января 2012

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

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);
...