以編程方式爲JavaScript中的WebGL生成紋理

我有以下代碼以編程方式爲C中的WebGL生成紋理。我需要在JavaScript中爲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); 
}

來源

2015-06-12 Andrew

不創建一個多維數組，你像這樣創建一個一維數組：

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。這需要 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);

來源

2015-06-13 02:05:00

以編程方式爲JavaScript中的WebGL生成紋理

回答

相關問題