textures - 如何使用 texSubImage2D 在 webgl 中显示 Sprite ?

标签 textures webgl sprite-sheet

通过调用 gl.texImage2D,我可以成功显示整个 Sprite (32x512):

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, 图像);

它被水平挤压,就像我预期的那样,但它至少在屏幕上呈现。我试图仅显示工作表中的第一个 32x32 Sprite ,并且我假设我可以简单地使用 gl.texSubImage2D 来实现此效果。我尝试用 texSubImage2D (修改参数)简单替换 texImage2D,但屏幕上只是出现一个黑框。这是我正在使用的代码:

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

我是否遗漏了有关 texSubImage2D 实现的某些内容?我还需要执行其他步骤吗?或者 texSubImage2D 不是制作 Sprite 表的正确方法?

最佳答案

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

  1. texSubImage2D 不会将 image 的子集复制到 GL 纹理中。它将整个图像复制到GL纹理顶部给定的偏移处。
  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);

要使用图像的前 32x32 像素创建纹理,请执行以下操作:

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);

关于textures - 如何使用 texSubImage2D 在 webgl 中显示 Sprite ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5314298/

相关文章:

javascript - 如何释放和垃圾收集 WebGL 上下文?

ios - 使用 TexturePacker 构建的 SpriteSheet 未加载到 CCSpriteFrameCache 中

ios - 多采样渲染到纹理

c++ - 从 2D 纹理上的位置 (x,y) 计算 .obj 文件中的 vt (u,v) 坐标

Android OpenGL ES 2.0 文本渲染

css - 如何使用 Google Material Design Sprite 图标..?

c++ - 纹理绑定(bind)的特殊参数?

javascript - 有没有办法在 three.js 中的纹理之间进行自定义转换

javascript - 三.js toDataUrl 空白