从DOM图像加载WebGL纹理时,如何判断它是否具有Alpha通道?

当直接从DOM图像加载WebGL纹理时,如何判断该图像是否具有Alpha通道?无论如何,除了根据文件名猜测外(例如“包含.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,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;

           }
         );
       }
xin5232823 回答:从DOM图像加载WebGL纹理时,如何判断它是否具有Alpha通道?

  

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

不能。你只能猜。

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

  2. 您可以将图像绘制到2D画布中,然后调用getImageData,读取所有Alpha像素,看看是否有任何非255

const format = gl.RGBA; 
     

是否始终需要使用RGBA?在大多数情况下,我在浪费空间,因为它只有RGB

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

const type = gl.UNSIGNED_BYTE; 
     

这肯定是正确的,对吗?

texImage2D拍摄您传入的图像,并将其转换为typeformat。然后,它将转换后的数据传递给GPU。

  

DOM是否不支持HDR格式?

这是未定义的,且特定于浏览器。我知道没有任何浏览器支持HDR图像格式。浏览器支持哪种图像格式取决于浏览器。例如,Firefox和Chrome支持动画Webp,而Safari不支持。


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

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

本文链接:https://www.f2er.com/3163184.html

大家都在问