Flutter高性能图形渲染插件flutter_gpu_shaders的使用

Flutter高性能图形渲染插件flutter_gpu_shaders的使用

flutter_gpu_shaders 是一个用于Flutter GPU着色器捆绑包/库的构建工具。通过这个插件，你可以使用原生资产构建钩子来导入Flutter GPU着色器资产。下面是一个完整的示例，展示了如何使用 flutter_gpu_shaders 插件进行高性能图形渲染。

功能

• 使用原生资产构建钩子导入Flutter GPU着色器资产。

开始使用

1. 启用实验性功能

该插件需要启用实验性的“原生资产”功能。你可以通过以下命令启用它：

flutter config --enable-native-assets

2. 添加着色器文件

将一些Flutter GPU着色器文件添加到你的项目中。例如，我们假设存在两个着色器文件：shaders/my_cool_shader.vert 和 shaders/my_cool_shader.frag。

3. 创建着色器捆绑包清单文件

在项目中创建一个着色器捆绑包清单文件，文件名必须以 .shaderbundle.json 结尾。例如，我们将以下内容保存为 my_cool_bundle.shaderbundle.json：

{
    "CoolVertex": {
        "type": "vertex",
        "file": "shaders/my_cool_shader.vert"
    },
    "CoolFragment": {
        "type": "fragment",
        "file": "shaders/my_cool_shader.frag"
    }
}

4. 定义构建钩子

接下来，在项目中定义一个构建钩子，使用 buildShaderBundleJson 构建着色器捆绑包。构建钩子必须命名为 hook/build.dart，当启用了“原生资产”功能时，Flutter会自动调用此脚本：

import 'package:native_assets_cli/native_assets_cli.dart';
import 'package:flutter_gpu_shaders/build.dart';

void main(List<String> args) async {
  await build(args, (config, output) async {
    await buildShaderBundleJson(
        buildConfig: config,
        buildOutput: output,
        manifestFileName: 'my_cool_bundle.shaderbundle.json');
  });
}

5. 更新 pubspec.yaml

在项目的 pubspec.yaml 文件中，添加一个资产导入规则，以打包构建的着色器捆绑包（一旦“原生资产”支持 DataAsset，这将在未来的Flutter版本中变得不再必要）：

flutter:
  assets:
    - build/shaderbundles/*.shaderbundle.json

6. 导入并使用着色器库

现在你可以在项目中使用 gpu.ShaderLibrary.fromAsset 导入构建的着色器捆绑包作为库。例如：

import 'package:flutter_gpu/gpu.dart' as gpu;

final String _kBaseShaderBundlePath =
    'packages/my_project/build/shaderbundles/my_cool_bundle.shaderbundle';

gpu.ShaderLibrary? _baseShaderLibrary = null;

gpu.ShaderLibrary get baseShaderLibrary {
  if (_baseShaderLibrary != null) {
    return _baseShaderLibrary!;
  }
  _baseShaderLibrary = gpu.ShaderLibrary.fromAsset(_kBaseShaderBundlePath);
  if (_baseShaderLibrary != null) {
    return _baseShaderLibrary!;
  }

  throw Exception("Failed to load base shader bundle! ($_kBaseShaderBundlePath)");
}

完整示例代码

以下是一个完整的示例项目，展示了如何使用 flutter_gpu_shaders 插件进行高性能图形渲染。

项目结构

my_project/
├── lib/
│   └── main.dart
├── shaders/
│   ├── my_cool_shader.vert
│   └── my_cool_shader.frag
├── hook/
│   └── build.dart
├── build/
│   └── shaderbundles/
│       └── my_cool_bundle.shaderbundle.json
└── pubspec.yaml

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_gpu/gpu.dart' as gpu;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GPU Shaders Example')),
        body: Center(
          child: ShaderWidget(),
        ),
      ),
    );
  }
}

class ShaderWidget extends StatefulWidget {
  @override
  _ShaderWidgetState createState() => _ShaderWidgetState();
}

class _ShaderWidgetState extends State<ShaderWidget> {
  final String _kBaseShaderBundlePath =
      'packages/my_project/build/shaderbundles/my_cool_bundle.shaderbundle';

  gpu.ShaderLibrary? _baseShaderLibrary;

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

  Future<void> _loadShaderLibrary() async {
    try {
      _baseShaderLibrary = await gpu.ShaderLibrary.fromAsset(_kBaseShaderBundlePath);
      setState(() {});
    } catch (e) {
      print('Failed to load shader library: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_baseShaderLibrary == null) {
      return CircularProgressIndicator();
    }

    return CustomPaint(
      painter: ShaderPainter(_baseShaderLibrary!),
      size: Size.infinite,
    );
  }
}

class ShaderPainter extends CustomPainter {
  final gpu.ShaderLibrary shaderLibrary;

  ShaderPainter(this.shaderLibrary);

  @override
  void paint(Canvas canvas, Size size) {
    // Use the shader library to draw something on the canvas
    // For example, you can create a custom shader and apply it to a rectangle
    final Paint paint = Paint()
      ..shader = shaderLibrary.getShader('CoolFragment').createShader(Rect.fromLTWH(0, 0, size.width, size.height));

    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

shaders/my_cool_shader.vert

#version 300 es

layout(location = 0) in vec4 aPosition;
layout(location = 1) in vec2 aTextureCoord;

out vec2 vTextureCoord;

void main() {
  gl_Position = aPosition;
  vTextureCoord = aTextureCoord;
}

shaders/my_cool_shader.frag

#version 300 es
precision mediump float;

in vec2 vTextureCoord;
out vec4 fragColor;

void main() {
  fragColor = vec4(vTextureCoord, 0.0, 1.0);
}

hook/build.dart

import 'package:native_assets_cli/native_assets_cli.dart';
import 'package:flutter_gpu_shaders/build.dart';

void main(List<String> args) async {
  await build(args, (config, output) async {
    await buildShaderBundleJson(
        buildConfig: config,
        buildOutput: output,
        manifestFileName: 'my_cool_bundle.shaderbundle.json');
  });
}

pubspec.yaml

name: my_project
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_gpu: ^0.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  assets:
    - build/shaderbundles/*.shaderbundle.json