javascript - 当您从 DOM 图像加载 WebGL 纹理时，如何判断它是否具有 Alpha channel ？

Question

当直接从 DOM 图像加载 WebGL 纹理时，如何判断图像是否具有 Alpha channel ？除了根据文件名猜测之外，是否还有其他方法(例如“包含 .PNG 可能是 RGBA，否则是 RGB”)。 DOM 图像中有宽度和高度，但我看不到任何内容表明它是什么格式。即:

    const img = await loadDOMImage(url);
    const format = gl.RGBA; //Does this always need to be RGBA? I'm wasting space in most cases where its only RGB
    const internalFormat = gl.RGBA;
    const type = gl.UNSIGNED_BYTE; //This is guaranteed to be correct, right?  No HDR formats supported by the DOM?
    gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, format, type, img); 

我的加载函数看起来像这样 FWIW:

  async loadDOMImage(url) {
         return new Promise(
           (resolve, reject)=>{
             const img = new Image(); 
             img.crossOrigin = 'anonymous';
             img.addEventListener('load', function() {
               resolve(img);
             }, false);
             img.addEventListener('error', function(err) {
               reject(err);
             }, false);

             img.src = uri;

           }
         );
       }

Answer 1

how do you tell if the image has an alpha channel or not?

你不能。你只能猜测。

1. 您可以看到 URL 以 .png 结尾，并假设它具有 alpha。你可能错了

2. 您可以将图像绘制到 2D Canvas 中，然后调用 getImageData，读取所有 alpha 像素并查看其中是否有任何不是 255

const format = gl.RGBA; 

Does this always need to be RGBA? I'm wasting space in most cases where its only RGB

不太可能浪费空间。大多数 GPU 在使用 RGBA 值时效果最佳，因此即使您选择 RGB 也不太可能节省空间。

const type = gl.UNSIGNED_BYTE; 

This is guaranteed to be correct, right?

texImage2D 获取您传入的图像并将其转换为类型 和格式。然后，它将转换后的数据传递给 GPU。

No HDR formats supported by the DOM?

这是未定义的并且特定于浏览器。据我所知，没有任何浏览器支持 HDR 图像格式。浏览器支持什么图像格式取决于浏览器。例如，Firefox 和 Chrome 支持动画 webp，但 Safari 不支持。

<小时/>

一些开发人员的一个常见问题是他们想知道是否应该为特定纹理打开混合/透明度。有些人错误地认为，如果纹理具有 Alpha，那么他们就应该这样做，否则他们就不应该这样做。这是错误的。是否应使用混合/透明度与图像的格式完全独立，并且需要单独存储。

与图像相关的其他事物也是如此。将图像上传到 GPU 的格式取决于应用程序和用途，与图像文件本身的格式无关。