我有以下代码,可以在 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);
}
最佳答案
您不是创建一个多维数组,而是创建一个 像这样的一维数组:
var checkerboard=[]
在纹理数组中,每个像素会占据4个元素:红、绿、蓝、 和阿尔法,按这个顺序。以下是如何填充每个像素的示例:
// 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
。这需要每个像素一个额外的字节
alpha 分量:
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA,
64, 64, 0, gl.RGBA, gl.UNSIGNED_BYTE, checkerboard);
还有一件事:WebGL 默认情况下自上而下存储纹理,这
可能与 OpenGL 不同。使用自下而下
存储,在任何texImage2D
之前添加以下命令
命令:
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
关于javascript - 在 JavaScript 中以编程方式为 WebGL 生成纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30813487/