Go-flutter: Add support for external OpenGL textures

Created on 1 Apr 2019  路  13Comments  路  Source: go-flutter-desktop/go-flutter

The flutter engine ABI supports external OpenGL textures allowing the embedder to draw to OpenGL directly. engine#7087

It's needed to implement the VideoPlayer.

GLFW embedder engine enhancement

All 13 comments

Will also be useful for doing 3D graphics and webrtc.

@Drakirus @gedw99
I have done a texture patch on flutter/engine based on GLFW, it seems to work very well, but I don't know how to port to go-flutter, here is my Texture rendering code, maybe it will help you.
https://github.com/cloudwebrtc/flutter-engine/blob/texture_for_glfw/shell/platform/glfw/external_texture_gl.cc

@cloudwebrtc Is the EventChannel require for the Texture to work?

@Drakirus
I think EventChannel is needed, because when the video frame changes in size and aspect ratio, the flutter side needs to adjust the display scale or fit, EventChannel is used to send notifications to the flutter side.
In addition, if we want to adapt WebRTC.PeerConnection, or other plugins with many event sources, EventChannel is needed.

Hi @cloudwebrtc I'm seeing progress on flutter/engine about the textureAPI :+1:.
I'm trying to implement the textureAPI for go-flutter based your CPP code.

While implementing the API, I hit a wall.

My understanding was that you register a texture using: FlutterEngineRegisterExternalTexture, then mark a new frame with FlutterDesktopMarkExternalTextureFrameAvailable. At some point, in between or after those calls, the flutter-engine calls you back using the gl_external_texture_frame_callback. My issue is that gl_external_texture_frame_callback NEVER gets called.
Am my missing something?
Here is my progress on the implementation: commit

@Drakirus Sorry to reply so late, I see you in the code RegisterExternalTexture(textureId: 400), and after a while MarkExternalTextureFrameAvailable(textureId: 600), this place textureId should be a fixed value of int64_t when registering once, for example: textureId = 0, when your The plugin generates a new video frame, only need to execute MarkExternalTextureFrameAvailable(texture: 0), then the flutter engine will call GLExternalTextureFrameCallback(texture: 0, ...).

frameI := int64(0)
for !a.window.ShouldClose() {
    frameI++
    glfw.WaitEventsTimeout(0.016) // timeout to get 60fps-ish iterations            
    if frameI == 400 {
        print("REGISTER: ")
        print(a.engine.RegisterExternalTexture(frameI))
    }
    if frameI == 600 {
        print("New Frame: ")
        print(a.engine.MarkExternalTextureFrameAvailable(frameI))
    }

change to:

frameI := int64(0)
textureId := int64(0)
print(a.engine.RegisterExternalTexture(textureId))
for !a.window.ShouldClose() {
    frameI++
    glfw.WaitEventsTimeout(0.016) // timeout to get 60fps-ish iterations            
    print("New Frame: ")
    print(a.engine.MarkExternalTextureFrameAvailable(textureId))

@cloudwebrtc Thanks for your reply!
The testing code that I pushed was wrong, I've updated it: commit.

I'm still facing the same issue: gl_external_texture_frame_callback never gets called. :disappointed:

I've updated the code to use a bare C handler code, OnAcquireExternalTexture never get called.

The terminal output looks great:

[....]
Texture: register result: true
go-flutter: no handler found for channel flutter/isolate
Texture: New Frame result: true
Texture: New Frame result: true
Texture: New Frame result: true
Texture: New Frame result: true
Texture: New Frame result: true
Texture: New Frame result: true
Texture: New Frame result: true
Texture: New Frame result: true
Texture: New Frame result: true
Texture: New Frame result: true
Texture: New Frame result: true
go-flutter: closing application

@Drakirus Your changes are correct, just add Texture(textureId: 1) to flutter lib/main.dart.

            child: Container(
              color: Colors.lightBlueAccent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Texture(textureId: 1),
                  Text('You have pointed at this box this many times:'),
                  Text(
                    '$_enterCounter Entries\n$_exitCounter Exits',
                    style: Theme.of(context).textTheme.display1,
                  ),
                  Text(
                    'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
                  ),
                ],
              ),
            ),

I tested it under linux, OnAcquireExternalTexture is called.

[ERROR:flutter/shell/platform/embedder/embedder.cc(578)] Could not create external texture.
=== OnAcquireExternalTexture: 1
Unknown pixel config 0x0
[ERROR:flutter/shell/platform/embedder/embedder.cc(578)] Could not create external texture.
=== OnAcquireExternalTexture: 1
Unknown pixel config 0x0
[ERROR:flutter/shell/platform/embedder/embedder.cc(578)] Could not create external texture.
=== OnAcquireExternalTexture: 1
Unknown pixel config 0x0
[ERROR:flutter/shell/platform/embedder/embedder.cc(578)] Could not create external texture.
=== OnAcquireExternalTexture: 1
Unknown pixel config 0x0
[ERROR:flutter/shell/platform/embedder/embedder.cc(578)] Could not create external texture.
=== OnAcquireExternalTexture: 1
Unknown pixel config 0x0
[ERROR:flutter/shell/platform/embedder/embedder.cc(578)] Could not create external texture.
Texture: New Frame result: true
=== OnAcquireExternalTexture: 1
Unknown pixel config 0x0
[ERROR:flutter/shell/platform/embedder/embedder.cc(578)] Could not create external texture.
go-flutter: closing application

Texture(textureId: 1) that what I was missing, Thanks!!

Making progress:
2019-07-24_00-30

A demo is available at: https://github.com/go-flutter-desktop/examples/tree/feature/gl_texture/texture_tutorial, use hover run -b '@beta' to try it out.

@cloudwebrtc everything was implemented thanks to you, big thanks!

Wow, that's awesome.

2019-07-25_17-11
Updated the demo. Added an very simple videoplayer

fix taged in tag: v0.29.0

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Tokenyet picture Tokenyet  路  7Comments

GeertJohan picture GeertJohan  路  4Comments

pchampio picture pchampio  路  3Comments

Tcools picture Tcools  路  5Comments

ohsory1324 picture ohsory1324  路  4Comments