纹理压缩格式的使用

Eva.js 从1.2.0开始支持纹理压缩格式

纹理压缩格式是什么

常见的图片文件格式，比如PNG/JPG/Webp等，是为了存储图像信息的特殊编码方式，只能存在硬盘中或内存中，无法被GPU直接识别。

纹理压缩格式，是一种GPU能直接读取并显示的格式，使得图像无需解压即可进行渲染，节约大量的内存。

常见的纹理压缩格式有S3TC/PVRTC/ETC/ASTC，它们在特定的GPU中被支持。所以不同的设备会支持不同的纹理压缩格式。

使用

纹理压缩格式文件将会被使用在需要渲染的资源上，例如图片、骨骼动画、帧动画等等，使用时只需要在加载资源的时候添加对应的url，不需要在添加组件时做操作。

例如我们渲染使用纹理压缩格式的一张图片，需要在原本的image属性里添加texture字段，里面填写纹理压缩资源的类型和地址。

Eva.js 按照顺序选择当前设备支持的纹理压缩格式使用。

原本的资源加载方案

  1. // 添加图片资源
  2. resource.addResource([
  3.   {
  4.     name: 'imageName',
  5.     type: RESOURCE_TYPE.IMAGE,
  6.     src: {
  7.       image: {
  8.         type: 'png',
  9.         url: 'https://gw.alicdn.com/imgextra/i1/O1CN01376pu91tylcmKqXIt_!!6000000005971-2-tps-658-1152.png',
  10.       }
  11.     },
  12.     preload: true
  13.   }
  14. ])

使用压缩纹理的资源加载

  1. // 添加图片资源
  2. resource.addResource([
  3.   {
  4.     name: 'imageName',
  5.     type: RESOURCE_TYPE.IMAGE,
  6.     src: {
  7.       image: {
  8.         type: 'png',
  9.         url: 'https://gw.alicdn.com/imgextra/i1/O1CN01376pu91tylcmKqXIt_!!6000000005971-2-tps-658-1152.png',
  10.         texture: [{
  11.           type: 'astc',
  12.           url: 'https://g.alicdn.com/eva-assets/d56001c3aefd0d8b069b1f0c4f3d2aec/0.0.1/tmp/08056/image.astc.ktx'
  13.         },
  14.         {
  15.           type: 'pvrtc',
  16.           url: 'https://g.alicdn.com/eva-assets/7a2317b549332834a2bd491e9ce9324a/0.0.1/tmp/835e3/image.pvrtc.ktx'
  17.         }, {
  18.           type: 'etc',
  19.           url: 'https://g.alicdn.com/eva-assets/910246f8f31588bca8199896272b0767/0.0.1/tmp/371ff/image.etc.ktx'
  20.         }]
  21.       }
  22.     },
  23.     preload: true
  24.   }
  25. ])

因为 PVRTC 它要求纹理的高、宽必须都是2的整数次幂，最小为8，并且必须是正方形，所以在压缩时，通常会变化图片的尺寸。

在Spine/Dragonbone/Sprite/SpriteAnimation等资源中，里面使用了像素来描述图片所在图集中的位置的文件，在变化后的图片尺寸上使用，导致渲染出现问题，所以，在texture描述信息上添加图片原本的宽高来解决这个问题。

例如：

  1. resource.addResource([{
  2.   name: 'fruit',
  3.   type: RESOURCE_TYPE.SPRITE_ANIMATION,
  4.   src: {
  5.     image: {
  6.       type: 'png',
  7.       url: 'cut',
  8.       texture: [
  9.         {
  10.           type: 'pvrtc',
  11.           url: './cut.pvrtc.ktx',
  12.           size: {
  13.             width: 377,
  14.             height: 1070
  15.           }
  16.         },
  17.         {
  18.           type: 'astc',
  19.           url: './cut.astc.ktx'
  20.         },
  21.         {
  22.           type: 'etc',
  23.           url: './cut.etc.ktx'
  24.         },
  25.         {
  26.           type: 's3tc',
  27.           url: './cut.s3tc.ktx'
  28.         }
  29.       ]
  30.     },
  31.     json: {
  32.       type: 'json',
  33.       url: 'https://gw.alicdn.com/mt/TB1qCvumsyYBuNkSnfoXXcWgVXa.json',
  34.     },
  35.   },
  36.   preload: false,
  37. }])

压缩纹理生成

可以使用 Texture Compressor 生成压缩纹理。

注意，如果自行生成压缩纹理，需要使用alpha预乘的压缩纹理。

阿里巴巴内网用户可以使用EVAStore直接生成。