如何使用texSubImage2D在webgl中显示精灵？

Question

我可以用这个电话转给gl.texImage2D显示我的整个精灵（32x512）成功：

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

它的水平压扁，像我预期的，但至少呈现在屏幕上。我试图只显示工作表中的第一个32x32精灵，我假设我可以简单地使用gl.texSubImage2D来达到这个效果。我尝试用texSubImage2D（修改参数）简单替换texImage2D，但我只是在屏幕上显示一个黑框。下面是我使用的代码：

gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, image);

我失去了一些有关texSubImage2D的实施？我还有其他一些步骤吗？或者是texSubImage2D不是正确的方式来做精灵表？

Answer 1

texSubImage2D不是你想要的功能。您遇到三个问题：

1. texSubImage2D不会将image的子集复制到GL纹理中。它将GL纹理顶部的整个image复制到给定的偏移量。
2. texSubImage2D只能修改现有的纹理数据，并且会混乱起来，除非首先为GL纹理调用texImage2D。
3. 您用于texSubImage2D的调用样式需要像素阵列而不是HTMLImageElement。

有四种可能的签名这些方法：

// These two accept the normal HTMLImageElement, etc. for the last param. 

texImage2D(enum target, int level, enum internalformat, enum format, 
    enum type, Object object); 
texSubImage2D(enum target, int level, int xoffset, int yoffset, 
    enum format, enum type, Object object); 

// These two accept a Uint8Array[] of pixels as the last parameter, despite 
// being documented as wanting an ImageData object. The only reason these 
// have a width/height param is *because* they take a pixel array, and GL 
// doesn't know how large the image is. 

texImage2D(enum target, int level, enum internalformat, long width, 
    long height, int border, enum format, enum type, Object pixels); 
texSubImage2D(enum target, int level, int xoffset, int yoffset, 
    long width, long height, enum format, enum type, Object pixels); 

要使用图像的第一32×32像素创建纹理，做这样的事情，而不是：

var spriteCanvas = document.createElement('canvas'); 
spriteCanvas.width = 32; 
spriteCanvas.height = 32; 

var spriteContext = spriteCanvas.getContext('2d'); 
spriteContext.drawImage(image, 0, 0); 

gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, spriteCanvas);