Какие данные принимает texImage2D?

Question

Я хочу разгрузить некоторые вычисления матрицы в шейдер фрагмента, используя WebGL.

Я пытаюсь отправить свою матрицу как 2D-текстуру RGB, используя texImage2D, но я не знаю, как эти данные должны быть сформированы.

Я попытался это (для квадратной матрицы 2х2):

var textureData = new Uint8Array([ 
    0, 0, 0, 1, 0, 0, 
    2, 0, 0, 3, 0, 0 
]); 
//... 
var texture = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, 
    textureData); 

Но я получаю следующее сообщение об ошибке:

Uncaught TypeError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': No function was found that matched the signature provided.

Answer 1

I'm trying to send my matrix as an RGB 2D texture

Боюсь, что UNSIGNED_BYTE не обеспечивает достаточной точности для этого вы можете использовать расширение OES_texture_float и вместо этого создать текстуру как текстуру с плавающей точкой.

I don't know how the data must be formated

Имеющаяся подписей texImage2D можно найти в spec:

void texImage2D(
    GLenum target, 
    GLint level, 
    GLint internalformat, 
    GLsizei width, 
    GLsizei height, 
    GLint border, 
    GLenum format, 
    GLenum type, 
    ArrayBufferView? pixels 
); 

void texImage2D(
    GLenum target, 
    GLint level, 
    GLint internalformat, 
    GLenum format, 
    GLenum type, 
    TexImageSource? source 
); 

Где TexImageSource имеет тип

ImageBitmap 
ImageData 
HTMLImageElement 
HTMLCanvasElement 
HTMLVideoElement 

Answer 2

Если вы хотите, чтобы загрузить данные из typearray как Uint8Array вы необходимо использовать версию texImage2D, которая принимает typedArray.

Это один

void texImage2D(
    GLenum target, 
    GLint level, 
    GLint internalformat, 
    GLsizei width, 
    GLsizei height, 
    GLint border, 
    GLenum format, 
    GLenum type, 
    ArrayBufferView? pixels 
); 

Кроме того, вы должны знать, что WebGL, как OpenGL по умолчанию имеет UNPACK_ALIGNMENT набор до 4 байтов, означающих каждый ряд пикселей/текселей должно быть кратно 4 байта. Вы можете изменить это на 1 байт, вызвав

gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); 

Я только воспитывать, потому что, так как вы загрузив RGB/UNSIGNED_BYTE текстуру, которая на 3 байта на пиксель, что означает, если вы загружаете 2х2 пикселя текстуры каждая строка 6 байт. WebGL поместит это до 8 байтов, поэтому ожидается, что буфер будет содержать 14 байтов (8 байтов для первой строки, где используются только первые 6 байтов и 6 для последней строки. Наплевать на последнюю строку не нужно. вы устанавливаете UNPACK_ALIGNMENT 1, то эта проблема уходит.

как в стороне вы могли бы сделать аргумент, он должен иметь только дефолт 1, но WebGL является следующим OpenGL и OpenGL это по умолчанию в 4.