在 JavaScript 中以编程方式为 WebGL 生成纹理

Question

我有以下代码以编程方式在 C 中为 WebGL 生成纹理。我需要在 JavaScript 中为 WebGL 做同样的事情。

如何正确创建 3 维棋盘矩阵？

GLubyte checkerboard[64][64][3];

如何设置值？

checkerboard[i][j][0] = (GLubyte) c;

如何在 WebGL 中使用生成的纹理正确调用 gl.texImage2D()？

gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, 64, 64, 0, gl.RGB, gl.UNSIGNED_INT, checkerboard);

这是 C 中的当前代码

void CreateTextures() {
    GLubyte checkerboard[64][64][3];
    int i, j, c;

    for (i=0; i<64; i++) {
        for (j=0; j<64; j++) {
            c = ((i & 8) ^ (j & 8))*255;
            checkerboard[i][j][0] = (GLubyte) c;
            checkerboard[i][j][1] = (GLubyte) c;
            checkerboard[i][j][2] = (GLubyte) c;
        }
    }

    glGenTextures( 1, &checkerboardTexture);
    glBindTexture(GL_TEXTURE_2D, checkerboardTexture);
    glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
    glTexImage2D( GL_TEXTURE_2D, 0, GL_RGB, 64, 64, 0, GL_RGB, GL_UNSIGNED_INT, checkerboard);
}

我认为结果函数在 JavaScript

中看起来像这样

function CreateTextures() {
    GLubyte checkerboard[64][64][3];
    int i, j, c;

    for (i=0; i<64; i++) {
        for (j=0; j<64; j++) {
            c = ((i & 8) ^ (j & 8))*255;
            checkerboard[i][j][0] = (GLubyte) c;
            checkerboard[i][j][1] = (GLubyte) c;
            checkerboard[i][j][2] = (GLubyte) c;
        }
    }

    var checkerboardTexture = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, checkerboardTexture);
    gl.texParameterf( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameterf( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, 64, 64, 0, gl.RGB, gl.UNSIGNED_INT, checkerboard);
}

Answer 1

您创建的不是多维数组，而是像这样的一维数组：

var checkerboard=[]

在纹理数组中，每个像素会占据4个元素：红、绿、蓝、和 alpha，按此顺序。下面是如何填充每个像素的示例：

// Width is 64 pixels
checkerboard[(i*64+j)*4] = c; // Red component
checkerboard[(i*64+j)*4+1] = c; // Green component
checkerboard[(i*64+j)*4+2] = c; // Blue component
checkerboard[(i*64+j)*4+3] = 0xff; // Alpha component

接下来，将数组转换为字节数组：

checkerboard=new Uint8Array(checkerboard);

最后，生成纹理。另请注意，您不能在 WebGL 中使用 gl.RGB，通常，而是 gl.RGBA。这需要每个像素一个额外的字节阿尔法分量：

gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 
   64, 64, 0, gl.RGBA, gl.UNSIGNED_BYTE, checkerboard);

还有一件事：WebGL 默认自上而下存储纹理，这可能与 OpenGL 不同。使用自下而上存储，添加以下命令before any texImage2D 命令：

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

在 JavaScript 中以编程方式为 WebGL 生成纹理

Programmatically generate texture for WebGL in JavaScript

javascript

textures

opengl-es

webgl