Javascript 从DOM图像加载WebGL纹理时，如何判断它是否具有alpha通道？_Javascript_Dom_Webgl

Javascript 从DOM图像加载WebGL纹理时，如何判断它是否具有alpha通道？

javascript dom webgl

Javascript 从DOM图像加载WebGL纹理时，如何判断它是否具有alpha通道？,javascript,dom,webgl,Javascript,Dom,Webgl,当直接从DOM图像加载WebGL纹理时，如何判断图像是否具有alpha通道？除了根据文件名猜测之外，是否还有其他原因（例如，“contains.PNG可能是RGBA，否则为RGB”）。DOM图像中有宽度和高度，但我看不出它是什么格式。i、 e: const img = await loadDOMImage(url); const format = gl.RGBA; //Does this always need to be RGBA? I'm wasting space in m

当直接从DOM图像加载WebGL纹理时，如何判断图像是否具有alpha通道？除了根据文件名猜测之外，是否还有其他原因（例如，“contains.PNG可能是RGBA，否则为RGB”）。DOM图像中有宽度和高度，但我看不出它是什么格式。i、 e:

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

我的加载函数如下所示：

  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;

           }
         );
       }

如何判断图像是否具有alpha通道

你不能。你只能猜测

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

您可以将图像绘制到2D画布中，然后调用getImageData，读取所有alpha像素并查看其中是否有非255像素

这总是需要RGBA吗？在大多数情况下，我是在浪费空间，因为只有RGB

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

这保证是正确的，对吗

texImage2D

获取传入的图像，并将其转换为

类型

和

格式

。然后，它将转换后的数据传递给GPU

DOM不支持HDR格式

未定义且特定于浏览器的。我知道任何浏览器都不支持HDR图像格式。浏览器支持的图像格式取决于浏览器。例如，Firefox和Chrome支持动画webp，但Safari不支持

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

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