WebGL 纹理压缩

www.jiazhengblog.com/blog/2017/0…

• 浏览器从服务端加载这样一张图片时，其格式通常为JPEG，文件尺寸只有166KB
• WebGL中texImage2D接口处理图片,GPU中按照位图处理,1024x1024x8x3x1.333,接近4M
• 未使用纹理压缩,一张纹理的数据储存
  • 
• 使用了纹理压缩,一张纹理的数据储存
  • 
• 常见的纹理压缩格式
  • S3TC/DXTn/BCn：桌面计算机常见的压缩格式。名字虽然有不同叫法，但都是指同一种压缩方式。通常以DDS文件格式保存。
  • PVRTC/PVRTC2：iOS设备上使用的压缩纹式。
  • ETC/ETC2：随着OpenGL ES 2.0 出现。
  • ASTC：2012年出现的一种新压缩格式。
  • ATC：Adreno GPU支持的一种压缩格式，Android手机上常用。
• 查看所提供的扩展

  •   var availableExtensions = gl.getSupportedExtensions();
      for (var i = 0; i < availableExtensions.length; i++) {
          if (availableExtensions[i].indexOf('texture') >= 0
              && availableExtensions[i].indexOf('compressed') >= 0) {
              // show in console
              console.log(availableExtensions[i]);
          }
      }
    复制代码

  复制代码

• 查看所支持的扩展
  • formats是一个数组，可以看到里面有四个数值：[33776, 33777, 33778, 33779]
  • extension会打印如下信息
    • COMPRESSED_RGB_S3TC_DXT1_EXT 33776 0x83f0
    • COMPRESSED_RGBA_S3TC_DXT1_EXT 33777 0x83f1
    • COMPRESSED_RGBA_S3TC_DXT3_EXT 33778 0x83f2
    • COMPRESSED_RGBA_S3TC_DXT5_EXT 33779 0x83f3

  •   var compressedTextureType = ['s3tc', 'etc1', 'pvrtc'];
      var currentCompressedTextureType = null;
    
      function getSupportedCompressedTextureType() {
          var availableExtensions = gl.getSupportedExtensions();
          for (var i = 0; i < availableExtensions.length; i++) {
              for (var j = 0; j < compressedTextureType.length; j++) {
                  if (availableExtensions[i].indexOf(compressedTextureType[j]) > 0) {
                      var extension = gl.getExtension(availableExtensions[i]);
                      // 下面这句话必须在getExtension之后调用
                      var formats = gl.getParameter(gl.COMPRESSED_TEXTURE_FORMATS);
                      console.log(formats);
                      for (var key in extension) {
                          console.log(key, extension[key], '0x' + extension[key].toString(16));
                      }
                      return {
                          type: compressedTextureType[j],
                          extension: extension,
                          formats: formats
                      };
                  }
              }
          }
      }
    复制代码

  复制代码

• gl.compressedTexImage2D 替换 gl.texImage2D
  • type 是前面通过extension获取到的那些常量
  • source就是压缩纹理的数据

  •   gl.compressedTexImage2D(gl.TEXTURE_2D, 0, type, width, height, 0, source);
    复制代码

  复制代码