发布于 由admin

Flutter 纹理压缩（Texture Compression）：ETC1/ASTC 格式在 GPU 上传中的应用

Flutter 纹理压缩：ETC1/ASTC 格式在 GPU 上传中的应用

大家好，今天我们来深入探讨 Flutter 中纹理压缩技术的应用，重点关注 ETC1 和 ASTC 格式，以及它们在 GPU 上传过程中的作用。在移动应用开发中，纹理是不可或缺的资源，但未经压缩的纹理会占用大量的存储空间和带宽，严重影响应用的性能和用户体验。纹理压缩技术能够有效地减小纹理文件的大小，从而提升应用的加载速度、降低内存占用和减少 GPU 渲染压力。

纹理压缩的必要性

移动设备上的纹理资源，特别是高清纹理，往往体积庞大。未经压缩的纹理直接上传到 GPU 会带来以下问题：

  • 存储空间占用高： 大尺寸纹理会显著增加应用安装包的大小，占用用户的存储空间。
  • 内存占用高： GPU 需要将纹理数据加载到显存中，占用宝贵的内存资源。
  • 带宽消耗大： 在纹理上传过程中，需要传输大量数据，消耗网络带宽和电池电量。
  • 渲染性能下降： GPU 处理未经压缩的纹理需要更多的时间和资源，导致渲染帧率下降，影响用户体验。

因此，纹理压缩是优化移动应用性能的关键步骤。通过使用合适的纹理压缩格式，可以显著减小纹理文件的大小，从而解决上述问题。

常见的纹理压缩格式

目前，业界存在多种纹理压缩格式，每种格式都有其优缺点，适用于不同的场景。在移动平台，ETC1 和 ASTC 是两种非常流行的纹理压缩格式。

压缩格式 优点 缺点 平台支持
ETC1 兼容性好，几乎所有支持 OpenGL ES 2.0 及以上版本的设备都支持 ETC1 格式。压缩速度快，解压速度也快。 不支持 Alpha 通道。压缩比相对较低，在相同视觉质量下，文件大小可能大于其他压缩格式。 Android (广泛支持), iOS (通过转换), WebGL (通过扩展)
ASTC 支持 Alpha 通道。压缩比高，可以在保证视觉质量的前提下，显著减小纹理文件的大小。支持多种 block size，可以根据不同的纹理内容和需求选择合适的 block size，从而优化压缩效果。 解压速度相对较慢，对 GPU 的性能要求较高。兼容性不如 ETC1，需要 OpenGL ES 3.0 及以上版本或者 Vulkan 的支持。 Android (广泛支持), iOS (广泛支持), WebGL (通过扩展), Vulkan (广泛支持)
PVRTC 压缩比高，解压速度快。 仅支持 PowerVR 芯片的设备。 iOS (PowerVR 芯片), 部分 Android 设备 (PowerVR 芯片)
S3TC/DXT 压缩比高，支持 Alpha 通道。 专利问题较多，在某些平台上使用需要支付许可费。 桌面平台 (Windows, Linux), 部分 Android 设备
ATC 支持 Alpha 通道，压缩比适中。 质量一般，部分设备支持不好。 部分 Android 设备

ETC1 格式详解与应用

ETC1 (Ericsson Texture Compression 1) 是一种基于块的纹理压缩格式，每个块的大小为 4×4 像素。它通过两个 48 位的 RGB565 颜色值来表示一个颜色块，并使用差值来表示块内像素的颜色。ETC1 格式的主要优点是兼容性好，几乎所有支持 OpenGL ES 2.0 及以上版本的设备都支持 ETC1 格式。然而，ETC1 格式不支持 Alpha 通道，这限制了它在某些场景下的应用。

ETC1 格式的压缩原理：

  1. 块划分： 将纹理图像划分为 4×4 像素的块。
  2. 颜色选择： 为每个块选择两个代表性的 RGB565 颜色值（color0 和 color1）。
  3. 差值计算： 计算 color0 和 color1 之间的颜色差值。
  4. 索引编码： 为每个像素分配一个 2 位的索引，表示该像素的颜色是 color0，color1，或者 color0 和 color1 之间插值的两个颜色之一。

在 Flutter 中使用 ETC1 格式：

虽然 Flutter 本身并没有直接提供 ETC1 编码/解码的 API，但我们可以使用第三方库或原生插件来实现 ETC1 纹理的加载和使用。

示例代码（使用原生插件加载 ETC1 纹理）：

首先，创建一个原生插件（例如 Android 的 Kotlin 或 Java 代码，或者 iOS 的 Swift 或 Objective-C 代码），用于加载 ETC1 纹理并将其转换为 Flutter 可以使用的 ui.Image 对象。

Android (Kotlin):

import android.content.Context
import android.graphics.BitmapFactory
import android.opengl.ETC1Util
import android.opengl.ETC1Util.ETC1Texture
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugin.common.PluginRegistry.Registrar
import java.nio.ByteBuffer

class Etco1Plugin(private val context: Context) : MethodCallHandler {

    companion object {
        @JvmStatic
        fun registerWith(registrar: Registrar) {
            val channel = MethodChannel(registrar.messenger(), "etco1_plugin")
            channel.setMethodCallHandler(Etco1Plugin(registrar.context()))
        }
    }

    override fun onMethodCall(call: MethodCall, result: Result) {
        when (call.method) {
            "decodeEtc1" -> {
                val assetPath = call.argument<String>("assetPath")
                if (assetPath != null) {
                    try {
                        val assetManager = context.assets
                        val inputStream = assetManager.open(assetPath)
                        val buffer = inputStream.readBytes()
                        inputStream.close()

                        val etc1Texture = ETC1Util.createTexture(ByteBuffer.wrap(buffer), 0)
                        val bitmap = ETC1Util.decodeTexture(etc1Texture)

                        // Convert Bitmap to byte array for Flutter
                        val stream = java.io.ByteArrayOutputStream()
                        bitmap.compress(android.graphics.Bitmap.CompressFormat.PNG, 100, stream)
                        val byteArray = stream.toByteArray()
                        bitmap.recycle()

                        result.success(byteArray)

                    } catch (e: Exception) {
                        result.error("DECODE_ERROR", "Failed to decode ETC1 texture: ${e.message}", null)
                    }
                } else {
                    result.error("INVALID_ARGUMENT", "Asset path is required", null)
                }
            }
            else -> {
                result.notImplemented()
            }
        }
    }
}

iOS (Swift):

由于 iOS 平台上并没有内置的 ETC1 解码器，通常需要借助第三方库，例如 libETC1，或者通过 OpenGL ES 的扩展来支持 ETC1 解码。 以下代码只提供框架，需要集成 libETC1 或者 OpenGL ES 扩展实现。

import Flutter
import UIKit

public class Etco1Plugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: "etco1_plugin", binaryMessenger: registrar.messenger())
    let instance = Etco1Plugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    switch call.method {
    case "decodeEtc1":
      guard let args = call.arguments as? [String: Any],
            let assetPath = args["assetPath"] as? String else {
        result(FlutterError(code: "INVALID_ARGUMENT", message: "Asset path is required", details: nil))
        return
      }

        // TODO: Implement ETC1 decoding using libETC1 or OpenGL ES extension
        // Example (placeholder - needs actual ETC1 decoding logic):
        // let imageData = decodeETC1(assetPath: assetPath)
        // if let imageData = imageData {
        //     result(imageData)
        // } else {
        //     result(FlutterError(code: "DECODE_ERROR", message: "Failed to decode ETC1 texture", details: nil))
        // }
       result(FlutterError(code: "NOT_IMPLEMENTED", message: "ETC1 decoding not implemented yet", details: nil))

    default:
      result(FlutterMethodNotImplemented)
    }
  }

  // Placeholder function - replace with actual ETC1 decoding logic
  private func decodeETC1(assetPath: String) -> Data? {
    // Load asset data
    guard let imageURL = Bundle.main.url(forResource: assetPath, withExtension: nil) else {
        return nil
    }
    guard let imageData = try? Data(contentsOf: imageURL) else {
       return nil
    }

    // Decode ETC1 data (using libETC1 or OpenGL ES extension)
    // ...

    return imageData
  }
}

然后，在 Flutter 代码中调用原生插件来加载 ETC1 纹理：

import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Etco1Image extends StatefulWidget {
  final String assetPath;

  const Etco1Image({Key? key, required this.assetPath}) : super(key: key);

  @override
  _Etco1ImageState createState() => _Etco1ImageState();
}

class _Etco1ImageState extends State<Etco1Image> {
  ui.Image? _image;
  bool _isLoading = true;

  static const MethodChannel _channel = MethodChannel('etco1_plugin');

  @override
  void initState() {
    super.initState();
    _loadImage();
  }

  Future<void> _loadImage() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final Uint8List? imageData = await _channel.invokeMethod('decodeEtc1', {'assetPath': widget.assetPath});

      if (imageData != null) {
        final ui.Codec codec = await ui.instantiateImageCodec(imageData);
        final ui.FrameInfo frameInfo = await codec.getNextFrame();
        setState(() {
          _image = frameInfo.image;
          _isLoading = false;
        });
      } else {
        print('Failed to load ETC1 image: Image data is null');
      }
    } on PlatformException catch (e) {
      print('Failed to load ETC1 image: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return _isLoading
        ? const CircularProgressIndicator()
        : _image != null
            ? RawImage(image: _image!)
            : const Text('Failed to load image');
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ETC1 Image Example'),
        ),
        body: Center(
          child: Etco1Image(assetPath: 'assets/my_etc1_texture.pkm'), // Replace with your ETC1 asset path
        ),
      ),
    ),
  );
}

注意事项：

  • 确保 ETC1 纹理文件位于 Flutter 项目的 assets 目录下，并在 pubspec.yaml 文件中声明。
  • 原生插件需要根据具体的平台进行实现，并处理 ETC1 纹理的解码和转换。
  • 由于 ETC1 格式不支持 Alpha 通道，如果需要透明效果，可以考虑使用其他支持 Alpha 通道的纹理压缩格式，例如 ASTC。
  • my_etc1_texture.pkm 是一个占位符，需要替换为你的实际 ETC1 纹理文件路径。
  • decodeETC1 函数在 iOS 插件中是占位符，需要使用 libETC1 或 OpenGL ES 扩展实现。

ASTC 格式详解与应用

ASTC (Adaptive Scalable Texture Compression) 是一种先进的纹理压缩格式，它能够提供更高的压缩比和更好的图像质量。ASTC 格式支持 Alpha 通道，并且允许使用不同的 block size，可以根据不同的纹理内容和需求选择合适的 block size，从而优化压缩效果。ASTC 格式的主要缺点是解压速度相对较慢，对 GPU 的性能要求较高。

ASTC 格式的压缩原理：

ASTC 是一种基于块的纹理压缩格式，它将纹理图像划分为固定大小的块（例如 4×4, 5×5, 6×6, 8×8, 10×10, 12×12 等），然后对每个块进行独立压缩。ASTC 格式使用一种复杂的算法来选择最佳的颜色表示和权重值，从而在保证图像质量的前提下，尽可能地减小文件大小。

ASTC 格式的关键特性：

  • 可变 Block Size： ASTC 格式支持多种 block size，可以根据纹理的细节程度和压缩需求选择合适的 block size。较小的 block size 适用于细节丰富的纹理，可以更好地保留图像细节；较大的 block size 适用于平滑的纹理，可以提供更高的压缩比。
  • 支持 Alpha 通道： ASTC 格式支持 Alpha 通道，可以用于存储透明度信息。
  • 高压缩比： ASTC 格式能够提供比 ETC1 格式更高的压缩比，可以在保证视觉质量的前提下，显著减小纹理文件的大小。
  • 良好的图像质量： ASTC 格式使用一种复杂的算法来优化颜色表示和权重值，从而提供良好的图像质量。

在 Flutter 中使用 ASTC 格式：

与 ETC1 格式类似，Flutter 本身并没有直接提供 ASTC 编码/解码的 API。我们可以使用第三方库或原生插件来实现 ASTC 纹理的加载和使用。

示例代码（使用原生插件加载 ASTC 纹理）：

Android (Kotlin):

import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugin.common.PluginRegistry.Registrar
import java.io.ByteArrayOutputStream
import java.io.InputStream

class AstcPlugin(private val context: Context) : MethodCallHandler {

    companion object {
        @JvmStatic
        fun registerWith(registrar: Registrar) {
            val channel = MethodChannel(registrar.messenger(), "astc_plugin")
            channel.setMethodCallHandler(AstcPlugin(registrar.context()))
        }
    }

    override fun onMethodCall(call: MethodCall, result: Result) {
        when (call.method) {
            "decodeAstc" -> {
                val assetPath = call.argument<String>("assetPath")
                if (assetPath != null) {
                    try {
                        val assetManager = context.assets
                        val inputStream: InputStream = assetManager.open(assetPath)

                        // Decode ASTC using a native library (e.g., libktx or similar)
                        // This is a placeholder.  Replace with actual ASTC decoding logic.
                        // For example, you could use the libktx library to decode ASTC.
                        // The decoded data should be a byte array representing the uncompressed RGBA image data.
                        val decodedData: ByteArray? = decodeAstcNative(inputStream)  // Native function call

                        if (decodedData != null) {
                            val bitmap = BitmapFactory.decodeByteArray(decodedData, 0, decodedData.size)

                            val stream = ByteArrayOutputStream()
                            bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream)
                            val byteArray = stream.toByteArray()
                            bitmap.recycle()

                            result.success(byteArray)
                        } else {
                            result.error("DECODE_ERROR", "Failed to decode ASTC texture", null)
                        }
                        inputStream.close()
                    } catch (e: Exception) {
                        result.error("DECODE_ERROR", "Failed to decode ASTC texture: ${e.message}", null)
                    }
                } else {
                    result.error("INVALID_ARGUMENT", "Asset path is required", null)
                }
            }
            else -> {
                result.notImplemented()
            }
        }
    }

    // Placeholder for native ASTC decoding function
    private external fun decodeAstcNative(inputStream: InputStream): ByteArray?
}

你需要创建一个 C/C++ 库 (例如 libastc.so) 并使用 JNI 来调用。 这需要编译 libktx 或者类似的 ASTC 解码库。

iOS (Swift):

与 ETC1 类似，iOS 平台上并没有内置的 ASTC 解码器，需要借助第三方库，例如 libktx，或者通过 OpenGL ES 的扩展来支持 ASTC 解码。 以下代码只提供框架，需要集成 libktx 或者 OpenGL ES 扩展实现。

import Flutter
import UIKit

public class AstcPlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: "astc_plugin", binaryMessenger: registrar.messenger())
    let instance = AstcPlugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    switch call.method {
    case "decodeAstc":
      guard let args = call.arguments as? [String: Any],
            let assetPath = args["assetPath"] as? String else {
        result(FlutterError(code: "INVALID_ARGUMENT", message: "Asset path is required", details: nil))
        return
      }

        // TODO: Implement ASTC decoding using libktx or OpenGL ES extension
        // Example (placeholder - needs actual ASTC decoding logic):
        // let imageData = decodeASTC(assetPath: assetPath)
        // if let imageData = imageData {
        //     result(imageData)
        // } else {
        //     result(FlutterError(code: "DECODE_ERROR", message: "Failed to decode ASTC texture", details: nil))
        // }
       result(FlutterError(code: "NOT_IMPLEMENTED", message: "ASTC decoding not implemented yet", details: nil))

    default:
      result(FlutterMethodNotImplemented)
    }
  }

  // Placeholder function - replace with actual ASTC decoding logic
  private func decodeASTC(assetPath: String) -> Data? {
    // Load asset data
    guard let imageURL = Bundle.main.url(forResource: assetPath, withExtension: nil) else {
        return nil
    }
    guard let imageData = try? Data(contentsOf: imageURL) else {
       return nil
    }

    // Decode ASTC data (using libktx or OpenGL ES extension)
    // ...

    return imageData
  }
}

然后，在 Flutter 代码中调用原生插件来加载 ASTC 纹理 (与 ETC1 类似，只需要修改 channel 名称和方法名称)：

import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class AstcImage extends StatefulWidget {
  final String assetPath;

  const AstcImage({Key? key, required this.assetPath}) : super(key: key);

  @override
  _AstcImageState createState() => _AstcImageState();
}

class _AstcImageState extends State<AstcImage> {
  ui.Image? _image;
  bool _isLoading = true;

  static const MethodChannel _channel = MethodChannel('astc_plugin');

  @override
  void initState() {
    super.initState();
    _loadImage();
  }

  Future<void> _loadImage() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final Uint8List? imageData = await _channel.invokeMethod('decodeAstc', {'assetPath': widget.assetPath});

      if (imageData != null) {
        final ui.Codec codec = await ui.instantiateImageCodec(imageData);
        final ui.FrameInfo frameInfo = await codec.getNextFrame();
        setState(() {
          _image = frameInfo.image;
          _isLoading = false;
        });
      } else {
        print('Failed to load ASTC image: Image data is null');
      }
    } on PlatformException catch (e) {
      print('Failed to load ASTC image: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return _isLoading
        ? const CircularProgressIndicator()
        : _image != null
            ? RawImage(image: _image!)
            : const Text('Failed to load image');
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ASTC Image Example'),
        ),
        body: Center(
          child: AstcImage(assetPath: 'assets/my_astc_texture.astc'), // Replace with your ASTC asset path
        ),
      ),
    ),
  );
}

注意事项：

  • 确保 ASTC 纹理文件位于 Flutter 项目的 assets 目录下，并在 pubspec.yaml 文件中声明。
  • 原生插件需要根据具体的平台进行实现，并处理 ASTC 纹理的解码和转换。
  • ASTC 的解码比 ETC1 更加复杂，通常需要使用专门的库（例如 libktx）来实现。
  • 选择合适的 block size 可以优化压缩效果，需要根据纹理的内容和需求进行调整。
  • my_astc_texture.astc 是一个占位符，需要替换为你的实际 ASTC 纹理文件路径。
  • decodeASTC 函数在 iOS 插件中是占位符，需要使用 libktx 或 OpenGL ES 扩展实现。

GPU 上传过程中的优化

无论使用哪种纹理压缩格式，在将纹理数据上传到 GPU 的过程中，都可以进行一些优化，以提高性能。

  • 异步上传： 将纹理上传操作放在后台线程中进行，避免阻塞主线程，从而提高应用的响应速度。
  • Mipmap 生成： 为纹理生成 Mipmap，可以提高渲染性能，并减少纹理锯齿。Mipmap 是一系列逐渐缩小的纹理图像，用于在不同的距离上渲染纹理。
  • 纹理缓存： 将常用的纹理缓存到内存中，避免重复加载，从而提高性能。
  • 使用 OpenGL ES 或 Vulkan API： 直接使用底层的 OpenGL ES 或 Vulkan API 可以更精细地控制纹理上传过程，并进行更高级的优化。虽然 Flutter 封装了渲染层，但可以通过自定义渲染对象和 shader 来实现更底层的控制。

纹理压缩格式的选择

选择合适的纹理压缩格式需要综合考虑以下因素：

  • 平台兼容性： 确保所选的纹理压缩格式在目标平台上得到支持。
  • 图像质量： 根据应用的视觉需求选择合适的压缩格式，权衡压缩比和图像质量。
  • 解压速度： 根据 GPU 的性能和应用的性能要求选择合适的压缩格式。
  • 是否需要 Alpha 通道： 如果需要透明效果，必须选择支持 Alpha 通道的纹理压缩格式。

一般来说，ASTC 格式是更好的选择，因为它提供了更高的压缩比和更好的图像质量，并且支持 Alpha 通道。然而，ASTC 格式的解压速度相对较慢，对 GPU 的性能要求较高。如果需要兼容性更好，或者对解压速度有更高的要求，可以考虑使用 ETC1 格式。

纹理压缩是提升 Flutter 应用性能的关键

纹理压缩是优化 Flutter 应用性能的关键步骤。通过使用合适的纹理压缩格式（例如 ETC1 或 ASTC），可以显著减小纹理文件的大小，从而提升应用的加载速度、降低内存占用和减少 GPU 渲染压力。在实际开发中，需要根据具体的应用场景和需求选择合适的纹理压缩格式，并进行相应的优化，以达到最佳的性能和用户体验。通过原生插件，我们可以将经过压缩的纹理加载到 Flutter 应用中，并在 GPU 上进行渲染，从而充分利用纹理压缩带来的优势。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注