文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么在gl.texImage2D中将格式设置为gl.LUMINANCE而不是gl.RGB使由画布制成的blob在文件大小上仅小5%？

问为什么在gl.texImage2D中将格式设置为gl.LUMINANCE而不是gl.RGB使由画布制成的blob在文件大小上仅小5%？
EN

Stack Overflow用户

提问于 2019-06-03 15:28:29

回答 1查看 500关注 0票数 1

在探索javascript时，我遇到了一个相当令人费解的问题。前言是:我将不同mime类型的图像(主要是pngs/jpgs)转换为具有ImageBitmap接口的位图，然后将它们转换为在单独线程中转换为blob(为此，我首先将它们绘制到屏幕外画布上下文中)，然后保存到IDB中，而主线程继续加载新的映像。在这样做的同时，为了拓宽视野，我决定在画布中使用webgl2呈现上下文，因为GL是我从未接触过的东西。

要将位图应用于画布，我使用了texImage2D函数，这一点我似乎不明白。在那里，我可以指定存储在内存中的数据格式，并显示给GLSL (应该是rgb(对吗？)由于位图的创建没有alpha预乘)，内部格式和类型。由于格式/内部格式/类型的组合是由规范指定的，因此我试图利用它们的多样性，为我的目的选择最好的(质量-/文件大小)。由于正在转换成位图的图像大多是黑白的，所以我认为亮度是我所需要的。但首先我使用了标准的RGB格式：

gl.texImage2D(
    gl.TEXTURE_2D, 0, gl.RGB, bitmap.width, bitmap.height, 0, gl.RGB, gl.UNSIGNED_BYTE, bitmap
);

然后，我使用RGB565与UNSIGNED_SHORT_5_6_5数据类型，没有看到任何质量损失，而blob的大小比RGB减少了30%。我的理解是，它减少了，因为RGB565是每个像素两个无符号的短字节，对吗？然后我使用了UNSIGNED_SHORT_5_5_5_1 RGBA和blob文件大小，与标准RGB相比减少了43%。甚至比RGB565还少！但是图像上的渐变变得不稳定了，所以我没有5551 images。5551RGBA和RGB565在大小上的巨大差异是我不明白的。更令人困惑的是，当使用亮度按照等级库类型/格式/内部格式组合时，与标准RGB相比下降仅为5%。为什么RGB565会减少30%的大小，而luma只会减少5%呢？

为此，我在碎片着色器中使用了相同的浮点采样器：

 #version 300 es
 precision mediump float;
 precision mediump sampler2D;

 uniform sampler2D sampler;
 uniform vec2 dimensions;

 out vec4 color;

 void main(){
      color = texture(sampler, vec2(gl_FragCoord.x/dimensions.x, 1.0 - (gl_FragCoord.y/dimensions.y)));
 }

同样的pixelStorei和texParameteri：

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

如下面的片段所示，如果图像是黑白的，luma不会更改blob的文件大小，而如果显示为黑色，则会明显减少，尽管比RGBA4还要小。考虑到RGBA4每像素有2个字节，而LUMA-1，这是非常违反直觉的.

(async() => {
function createImage(src) {
	return new Promise((rs, rj) => {
		var img = new Image();
		img.crossOrigin = 'anonymous';
		img.src = src;
		img.onload = () => rs(img);
		img.onerror = e => rj(e);
    });
};

var jpeg = await createImage('https://upload.wikimedia.org/wikipedia/commons/a/aa/5inchHowitzerFiringGallipoli1915.jpeg');

var png = await createImage('https://upload.wikimedia.org/wikipedia/commons/2/2c/6.d%C3%ADl_html_m2fdede78.png');

var jpgClr = await createImage('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/%22Good_bye%2C_sweetheart%22%2C_tobacco_label%2C_ca._1865.jpg/117px-%22Good_bye%2C_sweetheart%22%2C_tobacco_label%2C_ca._1865.jpg');


var format = {
    standard: {
        internalFormat: 'RGB8',
        format: 'RGB',
        type: 'UNSIGNED_BYTE',
    },
    rgb565: {
        internalFormat: 'RGB565',
        format: 'RGB',
        type: 'UNSIGNED_SHORT_5_6_5',
    },
    rgb9e5: {
        internalFormat: 'RGB9_E5',
        format: 'RGB',
        type: 'FLOAT',
    },
    srgb: {
        internalFormat: 'SRGB8',
        format: 'RGB',
        type: 'UNSIGNED_BYTE',
    },
    rgba32f: {
        internalFormat: 'RGB32F',
        format: 'RGB',
        type: 'FLOAT',
    },
    rgba4: {
        internalFormat: 'RGBA4',
        format: 'RGBA',
        type: 'UNSIGNED_SHORT_4_4_4_4',
    },
    rgb5a1: {
        internalFormat: 'RGB5_A1',
        format: 'RGBA',
        type: 'UNSIGNED_SHORT_5_5_5_1',
    },
    luma: {
        internalFormat: 'LUMINANCE',
        format: 'LUMINANCE',
        type: 'UNSIGNED_BYTE',
    },
};


function compareFormatSize(image) {
    return new Promise((r, _) => {
		createImageBitmap(image, {
            premultiplyAlpha: 'none',
            colorSpaceConversion: 'none',
        }).then(async bitmap => {
var text = String(image.src.match(/(?<=\.)\w{3,4}$/)).toUpperCase();
            console.log(`${text === 'JPG' ? 'Colored jpg' : text}:`);
            for (let val of Object.values(format)) {
                await logBlobSize(bitmap, val);
				        if(val.format === 'LUMINANCE') r();
            }
        }).catch(console.warn);
    });
};

compareFormatSize(jpeg).then(_ => compareFormatSize(png)).then(_ => compareFormatSize(jpgClr));


function logBlobSize(bitmap, { internalFormat, format, type }) {
  return new Promise(r => {
    drawCanvas(bitmap, internalFormat, format, type).convertToBlob({
      type: `image/webp`
    }).then(blob => { console.log(`Blob from ${internalFormat} is ${blob.size}b`); r(); });
  })
}


function drawCanvas(bitmap, internalFormat, format, type) {
    const gl = (new OffscreenCanvas(bitmap.width, bitmap.height)).getContext("webgl2", {
        antialias: false,
        alpha: false,
        depth: false,
    });

    function createShader(gl, type, glsl) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, glsl)
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.error(gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
            return;
        }
        return shader;
    }


    const vs = createShader(
        gl,
        gl.VERTEX_SHADER,
        `#version 300 es
        #define POSITION_LOCATION 0
        layout(location = POSITION_LOCATION) in vec2 position;

        void main()
        {
            gl_Position = vec4(position, 0.0, 1.0);
        }`,
    );

    const fs = createShader(
        gl,
        gl.FRAGMENT_SHADER,
        `#version 300 es
        precision mediump float;
        precision mediump sampler2D;

        uniform sampler2D sampler;
        uniform vec2 dimensions;

        out vec4 color;

        void main()
        {
            color = texture(sampler, vec2(gl_FragCoord.x/dimensions.x, 1.0 - (gl_FragCoord.y/dimensions.y)));
        }`,
    );

    const program = gl.createProgram();
    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);

    const sampler = gl.getUniformLocation(program, 'sampler');
    const dimensions = gl.getUniformLocation(program, 'dimensions');
    const position = 0; // GLSL location


    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);
    gl.enableVertexAttribArray(position);
    const vxBuffer = gl.createBuffer();
    const vertices = new Float32Array([
        -1.0,-1.0,
         1.0,-1.0,
        -1.0, 1.0,
         1.0, 1.0,
    ]);
    gl.bindBuffer(gl.ARRAY_BUFFER, vxBuffer);
    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    const texture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl[internalFormat],
        bitmap.width,
        bitmap.height,
        0,
        gl[format],
        gl[type],
        bitmap
    );

    gl.useProgram(program);
    gl.uniform1i(sampler, 0);
    gl.uniform2f(dimensions, gl.canvas.width, gl.canvas.height);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    gl.deleteTexture(texture);
    gl.deleteVertexArray(vao);
    gl.deleteBuffer(vxBuffer);
    gl.deleteProgram(program);

	return gl.canvas;
}
})()

提前感谢！

webgl

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-04 03:12:46

画布总是RGBA 8位(32位颜色)。有讨论增加选项，有一个更深的画布，以支持高清彩色显示，但这还没有推出。

因此，调用canvas.converToBlob总是会给您一个RGBA32bit png (或jpeg)。您创建一个LUMIANCE纹理将给您一个黑白纹理，但它会被绘制到一个RGBA 32位画布。没有选择获得一个1通道PNG。

至于RGB565、RGBA5551等，这些格式可能或不被硬件直接支持，规范允许驱动程序选择分辨率更高的格式，我猜大多数桌面在上传数据时都会将数据扩展到RGBA8中，这样就不会节省任何内存。

另一方面，上传为RGB565或RGBA5551的WebGL规范要求，当您传递图像时，该图像首先转换为该格式，因此浏览器将获取您的图像，并将其有效量化到这些颜色深度，这意味着您正在丢失颜色。然后，您将量化的图像绘制回画布并保存下来，当然，由于有更多相似的颜色，它可能会压缩得更好。

从WebGL规范中获取接受ImageBitmap的texImage2D版本。

源图像数据首先从概念上转换为由格式和类型参数指定的数据类型和格式，然后传输到WebGL实现。格式转换根据下表执行。如果指定了压缩像素格式，这意味着图像数据的精度损失，则必须发生这种精度损失。

让我们在没有WebGL的情况下试试

(async() => {
  function createImage(src) {
    return new Promise((rs, rj) => {
      const img = new Image();
      img.crossOrigin = 'anonymous';
      img.src = src;
      img.onload = () => rs(img);
      img.onerror = rj;
    });
  };

  const jpeg = await createImage('https://upload.wikimedia.org/wikipedia/commons/a/aa/5inchHowitzerFiringGallipoli1915.jpeg');

  const png = await createImage('https://upload.wikimedia.org/wikipedia/commons/2/2c/6.d%C3%ADl_html_m2fdede78.png');

  const jpgClr = await createImage('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/%22Good_bye%2C_sweetheart%22%2C_tobacco_label%2C_ca._1865.jpg/117px-%22Good_bye%2C_sweetheart%22%2C_tobacco_label%2C_ca._1865.jpg');


  const format = {
    standard: {
      internalFormat: 'RGB8',
      format: 'RGB',
      type: 'UNSIGNED_BYTE',
      fn: p => [p[0], p[1], p[2], 255],
    },
    rgb565: {
      internalFormat: 'RGB565',
      format: 'RGB',
      type: 'UNSIGNED_SHORT_5_6_5',
      fn: p => [
        (p[0] >> 3) * 255 / 31,
        (p[1] >> 2) * 255 / 63,
        (p[2] >> 3) * 255 / 31,
        255,
      ],
    },
    rgba4: {
      internalFormat: 'RGBA4',
      format: 'RGBA',
      type: 'UNSIGNED_SHORT_4_4_4_4',
      fn: p => [
        (p[0] >> 4) * 255 / 15,
        (p[1] >> 4) * 255 / 15,
        (p[2] >> 4) * 255 / 15,
        (p[3] >> 4) * 255 / 15,
      ],
    },
    rgb5a1: {
      internalFormat: 'RGB5_A1',
      format: 'RGBA',
      type: 'UNSIGNED_SHORT_5_5_5_1',
      fn: p => [
        (p[0] >> 3) * 255 / 31,
        (p[1] >> 3) * 255 / 31,
        (p[2] >> 3) * 255 / 31,
        (p[3] >> 7) * 255 / 1,
      ],
    },
    luma: {
      internalFormat: 'LUMINANCE',
      format: 'LUMINANCE',
      type: 'UNSIGNED_BYTE',
      fn: p => [p[0], p[0], p[0], 255],
    },
  };


  async function compareFormatSize(image) {
    const bitmap = await createImageBitmap(image, {
      premultiplyAlpha: 'none',
      colorSpaceConversion: 'none',
    });
    const text = String(image.src.match(/(?<=\.)\w{3,4}$/)).toUpperCase();
    log(`${text === 'JPG' ? 'Colored jpg' : text}:`);
    for (const val of Object.values(format)) {
      await logBlobSize(bitmap, val);
    }
  };

  await compareFormatSize(jpeg);
  await compareFormatSize(png);
  await compareFormatSize(jpgClr);

  async function logBlobSize(bitmap, {
    internalFormat,
    format,
    type,
    fn,
  }) {
    const canvas = drawCanvas(bitmap, internalFormat, format, type);
    const blob = await canvas.convertToBlob({
      type: `image/webp`
    });
    const canvas2 = drawFn(bitmap, fn);
    const blob2 = await canvas2.convertToBlob({
      type: `image/webp`
    });
    log(`Blob from ${internalFormat} is ${blob.size}b(webgl) vs ${blob2.size}b(code)`);
    if (false) {
      const img = new Image();
      img.src = URL.createObjectURL(blob);
      document.body.appendChild(img);
      const img2 = new Image();
      img2.src = URL.createObjectURL(blob2);
      document.body.appendChild(img2);
    }
  }

  function drawFn(bitmap, fn) {
    const ctx = (new OffscreenCanvas(bitmap.width, bitmap.height)).getContext("2d");
    ctx.drawImage(bitmap, 0, 0);
    const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
    const pixels = imageData.data;
    for (let i = 0; i < pixels.length; i += 4) {
      const n = fn(pixels.subarray(i, i + 4));
      pixels.set(n, i);
    }
    ctx.putImageData(imageData, 0, 0);
    return ctx.canvas;
  }

  function drawCanvas(bitmap, internalFormat, format, type) {
    const gl = (new OffscreenCanvas(bitmap.width, bitmap.height)).getContext("webgl2", {
      antialias: false,
      alpha: false,
      depth: false,
    });

    function createShader(gl, type, glsl) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, glsl)
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return;
      }
      return shader;
    }


    const vs = createShader(
      gl,
      gl.VERTEX_SHADER,
      `#version 300 es
        #define POSITION_LOCATION 0
        layout(location = POSITION_LOCATION) in vec2 position;

        void main()
        {
            gl_Position = vec4(position, 0.0, 1.0);
        }`,
    );

    const fs = createShader(
      gl,
      gl.FRAGMENT_SHADER,
      `#version 300 es
        precision mediump float;
        precision mediump sampler2D;

        uniform sampler2D sampler;
        uniform vec2 dimensions;

        out vec4 color;

        void main()
        {
            color = texture(sampler, vec2(gl_FragCoord.x/dimensions.x, 1.0 - (gl_FragCoord.y/dimensions.y)));
        }`,
    );

    const program = gl.createProgram();
    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);

    const sampler = gl.getUniformLocation(program, 'sampler');
    const dimensions = gl.getUniformLocation(program, 'dimensions');
    const position = 0; // GLSL location


    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);
    gl.enableVertexAttribArray(position);
    const vxBuffer = gl.createBuffer();
    const vertices = new Float32Array([-1.0, -1.0,
      1.0, -1.0, -1.0, 1.0,
      1.0, 1.0,
    ]);
    gl.bindBuffer(gl.ARRAY_BUFFER, vxBuffer);
    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    const texture = gl.createTexture();
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(
      gl.TEXTURE_2D,
      0,
      gl[internalFormat],
      bitmap.width,
      bitmap.height,
      0,
      gl[format],
      gl[type],
      bitmap
    );

    gl.useProgram(program);
    gl.uniform1i(sampler, 0);
    gl.uniform2f(dimensions, gl.canvas.width, gl.canvas.height);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    gl.deleteTexture(texture);
    gl.deleteVertexArray(vao);
    gl.deleteBuffer(vxBuffer);
    gl.deleteProgram(program);

    return gl.canvas;
  }
})()

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

pre { margin: 0; }

为什么在gl.texImage2D中将格式设置为gl.LUMINANCE而不是gl.RGB使由画布制成的blob在文件大小上仅小5%？

我没看到这些结果。在您的示例中，黑白图像与RGB和LUMIANCE保持相同的大小。彩色图像大小为1/2。当然，这取决于压缩算法，黑白32位图像是否比彩色32位图像要小，因为在所有情况下，调用convertToBlob时画布都是32位。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56430401

复制

相似问题

问为什么在gl.texImage2D中将格式设置为gl.LUMINANCE而不是gl.RGB使由画布制成的blob在文件大小上仅小5%？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么在gl.texImage2D中将格式设置为gl.LUMINANCE而不是gl.RGB使由画布制成的blob在文件大小上仅小5%？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么在gl.texImage2D中将格式设置为gl.LUMINANCE而不是gl.RGB使由画布制成的blob在文件大小上仅小5%？
EN