Flutter OpenGL渲染插件flutter_opengl_view的使用

Flutter OpenGL渲染插件flutter_opengl_view的使用

使用

添加插件到pubspec.yaml

# pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  flutter_opengl_view: ^0.0.1

在Flutter代码中添加插件

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

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // 如果你的渲染是基于原生iOS/Android代码（objc/Java），可以将`cPlusPlusPointer`设置为0。
    // 如果使用C++代码，你需要传递一个指向C++对象的指针。
    int myCppPointer = 0; 

    FlutterOpenglView openGlView = const FlutterOpenglView(
      cPlusPlusPointer: myCppPointer,
      useTextureView: true // 默认使用TextureView
    );

    return MaterialApp(
      home: Scaffold(
        body: SizedBox(
          width: 300.0,
          height: 300.0,
          child: openGlView // 将openGL插件添加到任意部分的widget树中
        ),
      ),
    );
  }
}

• cPlusPlusPointer: 如果你的渲染是基于原生iOS/Android代码（objc/Java），可以将其设置为0。如果使用C++代码，你需要传递一个指向C++对象的指针。
• useTextureView = true（默认）使用Android上的TextureView，而useTextureView = false则使用GLSurfaceView。GLSurfaceView不能旋转，但性能更高，并且不允许与其他视图或小部件正确重叠。

自定义C++类

要使用自己的C++ OpenGL代码，你必须扩展FlutterOpenGL类：

// MyFlutterOpenGL的头文件

class MyFlutterOpenGL : public FlutterOpenGL {

public:
    MyFlutterOpenGL();

    virtual ~FlutterOpenGL();

    void init(int width, int height);

    void stopDrawFrame();

    void onDrawFrame();

    bool isReady();
};

• onDrawFrame()由OpenGL线程持续调用。
• init()也由OpenGL线程调用，可以用来初始化资源并配置OpenGL。

C++/Dart接口示例

C++部分

在C++代码中，你需要获得一个指向FlutterOpenGL实例的指针：

#include <cstdint>

#if __cplusplus

#if defined(_WIN32)
#define DART_EXPORT extern "C" __declspec(dllexport)
#else
#define DART_EXPORT                                                            \
  extern "C" __attribute__((visibility("default"))) __attribute((used))
#endif

// 返回一个指向FlutterOpenGL对象的指针，转换为int64_t类型。
DART_EXPORT int64_t getFlutterOpenGL() {
  MyFlutterOpenGL* flutterOpenGl = new MyFlutterOpenGL();
  
  int64_t flutterOpenGlReference = reinterpret_cast<int64_t>(flutterOpenGl);
  return flutterOpenGlReference;
}

#endif  // __cplusplus

Dart部分

Dart从C++获取指针（之前转换为Int64）并将它传递给构造函数：

final DynamicLibrary myFfiLibrary = Platform.isAndroid
    ? DynamicLibrary.open("myFfiLibrary.so")    // 同名的so文件
    : DynamicLibrary.process();

/// 返回一个指向FlutterOpenGL对象的指针，并可以传递给Dart构造函数FlutterOpenglView()。
final int Function() getFlutterOpenGL = myFfiLibrary
    .lookup<NativeFunction<Int64 Function()>>("getFlutterOpenGL")
    .asFunction();

更多信息

在Android中使用C++代码

在自己的插件或应用中，将C++源代码目录添加到build.gradle文件中。详细信息请查看Flutter c-interop页面。

在Xcode中为iOS使用C++

• 在Xcode中选择编译器设置中的Compile Source As变量，并将其值设置为Objective-C++。
• 将Obj-C文件后缀改为.mm。
• 在Xcode中添加C++源代码：Runner -> Target -> Build Phases。

详细信息请查看Flutter c-interop页面。

从另一个插件中使用

• 创建一个包含C++ OpenGL代码的Flutter插件

  flutter create -a java -i objc --template=plugin