Flutter OHOS 如何使用 OpenGL 渲染的外接纹理？

Question

如题，如何在Flutter中使用OpenGL，我希望通过外接纹理的方式，在Flutter OHOS中使用OpenGL，在 iOS 平台，提供了 FlutterTexture 协议机制，只要将实现 FlutterTexture 协议对象注册进 Flutter，获取一个 Texture ID 传递给 Dart 层的 Texture 组件，就可以将 C++ 中OpenGL的渲染结果显示在 Flutter 中。

- (void)render:(FlutterResult)result {
    if(d_glRender != nil) {
        glBindFramebuffer(GL_FRAMEBUFFER, d_frameBuffer);
        glClearColor(0, 0, 0, 1);
        glClear(GL_COLOR_BUFFER_BIT);
        d_glRender->render();
        [d_textures textureFrameAvailable:d_flutterTetxture];
        result(@(1));
    } else {
        result(@(0));
    }
}

上述的 OBJC代码中，d_glRender 是一个进行 OpenGL 渲染的 C++对象，首先绑定创建的 Framebuffer，然后调用 d_glRender 的 render 函数就可以完成渲染到纹理的工作，然后调用d_textures 的 textureFrameAvailable 方法通知Flutter 更新显示纹理。这个机制在 iOS 上运行的很好，我想知道在Flutter OHOS中有没有类似的机制，我查看了Flutter 中test_camera、video_player_ohos、test_picture 三个例子的代码，都不涉及到对 OpenGL 纹理的使用，想请教一下有没有Flutter OHOS 使用OpenGL的渲染纹理作为外接纹理的例子。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

OHOS没有直接的外接纹理机制,但可以通过自定义插件和Native实现来模拟iOS的纹理渲染流程，这里写了个简单的demo，应该可以给你提供一点点实现思路，可以通过以下方式实现类似iOS的外接纹理机制:

// texture_renderer.cpp  
class TextureRenderer {  
public:  
    // 创建纹理  
    int32_t CreateTexture() {  
        // 使用OpenGL创建纹理  
        GLuint textureId;  
        glGenTextures(1, &textureId);  
        
        // 注册到Flutter纹理管理器  
        return RegisterTextureWithFlutter(textureId);  
    }  

    // 渲染纹理  
    void RenderTexture() {  
        // OpenGL渲染逻辑  
        glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer);  
        glClearColor(0, 0, 0, 1);  
        glClear(GL_COLOR_BUFFER_BIT);  

        // 执行渲染  
        RenderOpenGLContent();  

        // 通知Flutter更新纹理  
        NotifyTextureUpdate();  
    }  

private:  
    int32_t RegisterTextureWithFlutter(GLuint textureId) {  
        // 使用Flutter插件机制注册纹理  
        // 需要自定义插件实现  
        return textureId;  
    }  

    void NotifyTextureUpdate() {  
        // 通知Flutter更新纹理  
        // 需要实现跨语言通知机制  
    }  
};

// texture_plugin.dart  
class TexturePlugin {  
  static const MethodChannel _channel =   
    MethodChannel('opengl_texture_plugin');  

  // 创建外部纹理  
  Future<int> createTexture() async {  
    final int textureId = await _channel.invokeMethod('createTexture');  
    return textureId;  
  }  

  // 渲染纹理  
  Future<void> renderTexture(int textureId) async {  
    await _channel.invokeMethod('renderTexture', {'textureId': textureId});  
  }  
}  

// 使用示例  
class OpenGLTextureWidget extends StatefulWidget {  
  @override  
  _OpenGLTextureWidgetState createState() => _OpenGLTextureWidgetState();  
}  

class _OpenGLTextureWidgetState extends State<OpenGLTextureWidget> {  
  int? _textureId;  

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

  Future<void> _initTexture() async {  
    final textureId = await TexturePlugin().createTexture();  
    setState(() {  
      _textureId = textureId;  
    });  
  }  

  @override  
  Widget build(BuildContext context) {  
    return _textureId != null   
      ? Texture(textureId: _textureId!)   
      : Container();  
  }  
}

// texture_plugin.cpp  
class TexturePlugin : public FlutterPlugin {  
public:  
    // 创建纹理  
    int32_t CreateTexture() {  
        TextureRenderer renderer;  
        return renderer.CreateTexture();  
    }  

    // 渲染纹理  
    void RenderTexture(int32_t textureId) {  
        TextureRenderer renderer;  
        renderer.RenderTexture();  
    }  
};

或者可以参考Flutter OHOS外接纹理适配，参考链接：
https://gitee.com/openharmony-sig/flutter_samples/blob/master...