WebGL - 当我从帧缓冲区读取像素数据时，图标失去透明度

Question

我有一个透明的图标图。 256x256

我使用这张图片创建了一个纹理。

    AddIconMap(imageUrl) {
        const image = new Image()
        const { gl } = this
        image.onload = () => {
            const iconMapTexture = gl.createTexture()
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false)
            gl.bindTexture(gl.TEXTURE_2D, iconMapTexture)
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)
            gl.generateMipmap(gl.TEXTURE_2D)

            gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR)
            gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
            gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
            gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
            this.mapTexture.push(iconMapTexture) 
            window.URL.revokeObjectURL(image.src)
        }
        image.crossOrigin = ''
        image.src = imageUrl
    }

然后，我想在此纹理中获取最后一个小图标并将其绘制在画布上。画布的高度和宽度为 256px。每个small的高宽都是32px。

     var frameBuffer = gl.createFramebuffer();
     gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.Sphere.mapTexture[0], 0)
     const pixel = new Uint8Array(4 * 32 * 32)
     gl.readPixels(224, 224, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, pixel)
     var imageData = this.ctx.createImageData(32, 32)
     imageData.data.set(pixel)
     this.ctx.putImageData(imageData, offset.x, offset.y, 0, 0, 32, 32)

我在画布上绘制了图标，但图标不透明。我想，也获取背景图片的像素，但我不想要这个。

有什么想法吗？我该怎么办？

Answer 1

检查

const gl = document.createElement('canvas').getContext('webgl');
const r = max => Math.random() * max;

class Foo {
  constructor(gl) {
    this.mapTexture = [];
    this.gl = gl;
  }
  AddIconMap(imageUrl) {
    const image = new Image()
    const {
      gl
    } = this
    image.onload = () => {
      const iconMapTexture = gl.createTexture()
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false)
      gl.bindTexture(gl.TEXTURE_2D, iconMapTexture)
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)
      gl.generateMipmap(gl.TEXTURE_2D)

      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR)
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
      gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
      this.mapTexture.push(iconMapTexture)
      window.URL.revokeObjectURL(image.src)
    }
    image.crossOrigin = ''
    image.src = imageUrl
  }
}

class Bar {
  constructor() {
    this.ctx = document.querySelector('canvas').getContext('2d');
    this.Sphere = new Foo(gl);
    this.Sphere.AddIconMap('https://i.imgur.com/1zS9of5.png');

  }
  drawInReallyStrangeWay(offset) {
    var frameBuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.Sphere.mapTexture[0], 0)
    const pixel = new Uint8Array(4 * 32 * 32)
    gl.readPixels(224, 224, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, pixel)
    var imageData = this.ctx.createImageData(32, 32)
    imageData.data.set(pixel)
    this.ctx.putImageData(imageData, offset.x, offset.y, 0, 0, 32, 32)
  }

}

const b = new Bar();
setInterval(() => {
  if (b.Sphere.mapTexture.length) {
    b.drawInReallyStrangeWay({
      x: r(300 - 32),
      y: r(150 - 32)
    });
  }
}, 200);

canvas {
  background-color: #C0C0C0;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

<canvas></canvas>

它对我有用。目前尚不清楚为什么要使用 WebGL 加载纹理，然后使用 readPixels 将数据从纹理中提取出来，并将其放入 2D 画布中而不是 drawing it with WebGL。但是，putImageData 替换了画布中的数据。它不混合。如果你想混合，那么你需要使用drawImage 在这种情况下使用 WebGL 根本没有意义，只需加载图像并绘制你想要的部分

const r = max => Math.random() * max;

class Foo {
  constructor() {
    this.mapTexture = [];
  }
  AddIconMap(imageUrl) {
    const image = new Image()
    image.onload = () => {
      this.mapTexture.push(image)
    }
    image.crossOrigin = ''
    image.src = imageUrl
  }
}

class Bar {
  constructor() {
    this.ctx = document.querySelector('canvas').getContext('2d');
    this.Sphere = new Foo();
    this.Sphere.AddIconMap('https://i.imgur.com/1zS9of5.png');

  }
  draw(offset) {
    const image = b.Sphere.mapTexture[0];
    this.ctx.drawImage(
        image, 
        224, 224, 32, 32,            // src rect
        offset.x, offset.y, 32, 32,  // dst rect
    );
  }
}

const b = new Bar();
setInterval(() => {
  if (b.Sphere.mapTexture.length) {
    b.draw({
      x: r(300 - 32),
      y: r(150 - 32)
    });
  }
}, 200);

canvas {
  background-color: #C0C0C0;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

<canvas></canvas>