OpenGL command from the Flutter App work

Author: escamoteur

example/lib/main.dart

@@ -1,5 +1,7 @@
 import 'dart:async';
+import 'dart:ffi';
 
+import 'package:ffi/ffi.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_web_gl/flutter_web_gl.dart';
@@ -28,19 +30,18 @@ class _MyAppState extends State<MyApp> {
     String platformVersion;
     // Platform messages may fail, so we use a try/catch PlatformException.
     try {
-      platformVersion = await FlutterWebGl.platformVersion;
+      platformVersion = await FlutterWebGL.platformVersion;
     } on PlatformException {
       platformVersion = 'Failed to get platform version.';
     }
+    FlutterWebGL.initOpenGL();
 
     try {
-      textureId = await FlutterWebGl.createTexture(200, 100);
+      textureId = await FlutterWebGL.createTexture(200, 100);
     } on PlatformException {
       print("failed to get texture id");
     }
 
-    FlutterWebGl.initOpenGL();
-
     // If the widget was removed from the tree while the asynchronous platform
     // message was in flight, we want to discard the reply rather than calling
     // setState to update our non-existent appearance.
@@ -55,19 +56,95 @@ class _MyAppState extends State<MyApp> {
   Widget build(BuildContext context) {
     return MaterialApp(
       home: Scaffold(
+        backgroundColor: Colors.red,
         appBar: AppBar(
           title: const Text('Plugin example app'),
         ),
         body: Center(
           child: Column(
             children: [
               Text('Running on: $_platformVersion\n'),
-              SizedBox(
-                  width: 200, height: 100, child: Texture(textureId: textureId))
+              SizedBox(width: 600, height: 400, child: Texture(textureId: textureId)),
+              MaterialButton(
+                onPressed: draw,
+                color: Colors.grey,
+                child: Text('Draw'),
+              ),
             ],
           ),
         ),
       ),
     );
   }
+
+  void draw() async {
+    final gl = FlutterWebGL.rawOpenGl;
+    gl.glClearColor(0, 0, 60, 255);
+    gl.glClear(GL_COLOR_BUFFER_BIT);
+
+    final points = [-0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.0, 0.5, 0.0];
+
+    Pointer<Uint32> vbo = allocate();
+    gl.glGenBuffers(1, vbo);
+    gl.glBindBuffer(GL_ARRAY_BUFFER, vbo.address);
+    gl.glBufferData(GL_ARRAY_BUFFER, points.length, floatListToArrayPointer(points).cast(), GL_STATIC_DRAW);
+
+    int vertexShader = gl.glCreateShader(GL_VERTEX_SHADER);
+    gl.glShaderSource(
+        vertexShader, 1, Pointer<Void>.fromAddress(Utf8.toUtf8(vertexShaderSource).cast().address).cast(), nullptr);
+    gl.glCompileShader(vertexShader);
+    Pointer<Uint32> success = allocate();
+    gl.glGetShaderiv(vertexShader, GL_COMPILE_STATUS, success.cast());
+    print(success.value);
+
+    int fragmentShader = gl.glCreateShader(GL_FRAGMENT_SHADER);
+    gl.glShaderSource(
+        fragmentShader, 1, Pointer<Pointer<Int8>>.fromAddress(Utf8.toUtf8(fragmentShaderSource).address), nullptr);
+    gl.glCompileShader(fragmentShader);
+    gl.glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, success.cast());
+    print(success.value);
+
+    final shaderProgram = gl.glCreateProgram();
+    gl.glAttachShader(shaderProgram, vertexShader);
+    gl.glAttachShader(shaderProgram, fragmentShader);
+    gl.glLinkProgram(shaderProgram);
+    gl.glGetProgramiv(shaderProgram, GL_LINK_STATUS, success.cast());
+    print(success.value);
+
+    gl.glUseProgram(shaderProgram);
+
+    gl.glDeleteShader(vertexShader);
+    gl.glDeleteShader(fragmentShader);
+    gl.glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * 4, nullptr); //this was in original (void*)0
+    gl.glEnableVertexAttribArray(0);
+    gl.glDrawArrays(GL_TRIANGLES, 0, 3);
+
+    await FlutterWebGL.updateTexture(textureId);
+  }
+}
+
+const vertexShaderSource = //
+    '#version 330 core\n' //
+    'layout (location = 0) in vec3 aPos;\n' //
+    '\n' //
+    'void main()\n' //
+    '{\n' //
+    '    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n' //
+    '}\n'; //
+
+const fragmentShaderSource = //
+    '#version 330 core\n' //
+    'out vec4 FragColor;\n' //
+    '\n' //
+    'void main()\n' //
+    '{\n' //
+    '    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n' //
+    '} \n'; //
+
+Pointer<Float> floatListToArrayPointer(List<double> list) {
+  final ptr = allocate<Float>(count: list.length);
+  for (var i = 0; i < list.length; i++) {
+    ptr.elementAt(i).value = list[i];
+  }
+  return ptr;
 }

example/pubspec.lock

@@ -65,7 +65,7 @@ packages:
     source: hosted
     version: "1.2.0-nullsafety.3"
   ffi:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: ffi
       url: "https://pub.dartlang.org"

example/pubspec.yaml

@@ -9,6 +9,7 @@ environment:
   sdk: ">=2.12.0-0 <3.0.0"
 
 dependencies:
+  ffi: 0.2.0-nullsafety.1
   flutter:
     sdk: flutter
 

lib/flutter_web_gl.dart

@@ -1,40 +1,51 @@
 import 'dart:async';
-import 'dart:ffi' as ffi;
+import 'dart:ffi';
 
 import 'package:dylib/dylib.dart';
+import 'package:ffi/ffi.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_web_gl/lib_egl.dart';
 import 'package:opengl_es_bindings/opengl_es_bindings.dart';
 
 export 'package:opengl_es_bindings/opengl_es_bindings.dart';
 
-class FlutterWebGl {
+class FlutterWebGL {
   static const MethodChannel _channel = const MethodChannel('flutter_web_gl');
 
   static LibOpenGLES? _libOpenGLES;
+  static Pointer<Void> _display = nullptr;
+  static late Pointer<Void> _config;
+  static late Pointer<Void> _baseAppContext;
+  static late Pointer<Void> _pluginContext;
+  static late Pointer<Void> _dummySurface;
+
   static LibOpenGLES get rawOpenGl {
     final libPath = resolveDylibPath(
       'libGLESv2',
     );
-    return _libOpenGLES ??= LibOpenGLES(ffi.DynamicLibrary.open(libPath));
+    return _libOpenGLES ??= LibOpenGLES(DynamicLibrary.open(libPath));
   }
 
   static Future<String> get platformVersion async {
     final String version = await _channel.invokeMethod('getPlatformVersion');
     return version;
   }
 
-  static void initOpenGL() {
-    final display = eglGetDisplay();
-    final initializeResult = eglInitialize(display);
+  static void initOpenGL() async {
+    /// make sure we don't call this twice
+    if (_display != nullptr) {
+      return;
+    }
+    _display = eglGetDisplay();
+    final initializeResult = eglInitialize(_display);
 
     debugPrint('EGL version: $initializeResult');
 
     final chooseConfigResult = eglChooseConfig(
-      display,
+      _display,
       attributes: {
-        EglConfigAttribute.renderableType: EglValue.openglEs2Bit.toIntValue(),
+        EglConfigAttribute.renderableType: EglValue.openglEs3Bit.toIntValue(),
         EglConfigAttribute.redSize: 8,
         EglConfigAttribute.greenSize: 8,
         EglConfigAttribute.blueSize: 8,
@@ -44,24 +55,55 @@ class FlutterWebGl {
       maxConfigs: 1,
     );
 
-    final config = chooseConfigResult[0];
+    _config = chooseConfigResult[0];
 
-    final context = eglCreateContext(
-      display,
-      config,
-      contextClientVersion: 2,
+    _baseAppContext = eglCreateContext(
+      _display,
+      _config,
+      contextClientVersion: 3,
+    );
+    _pluginContext = eglCreateContext(
+      _display,
+      _config,
+      shareContext: _baseAppContext,
+      contextClientVersion: 3,
     );
 
-    final surface = eglCreatePbufferSurface(display, config, attributes: {
+    /// to make a context current you have to provide some texture even if you don't use it afterwards
+    _dummySurface = eglCreatePbufferSurface(_display, _config, attributes: {
       EglSurfaceAttributes.width: 16,
       EglSurfaceAttributes.height: 16,
     });
-    eglMakeCurrent(display, surface, surface, context);
+    eglMakeCurrent(_display, _dummySurface, _dummySurface, _baseAppContext);
+
+    // The plugin makes sure that it doesn't matter if this is called multiple times
+    await _channel
+        .invokeMethod('initOpenGL', {'openGLContext': _pluginContext.address});
+    // final p = FlutterWebGl.rawOpenGl.glGetString(GL_VENDOR);
+    // String str = Utf8.fromUtf8(p.cast());
   }
 
   static Future<int> createTexture(int width, int height) async {
     final result =
         await _channel.invokeMethod('createTexture', [width, height]);
+
+    Pointer<Uint32> fbo = allocate();
+    rawOpenGl.glGenFramebuffers(1, fbo);
+    rawOpenGl.glBindFramebuffer(GL_FRAMEBUFFER, fbo.value);
+
+    final rbo = result['rbo'] as int;
+    rawOpenGl.glBindRenderbuffer(GL_RENDERBUFFER, rbo);
+
+    rawOpenGl.glFramebufferRenderbuffer(
+        GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, rbo);
+    final frameBufferCheck = rawOpenGl.glCheckFramebufferStatus(GL_FRAMEBUFFER);
+    print(frameBufferCheck);
+    // final p = rawOpenGl.glGetString(GL_VENDOR);
+    // String str = Utf8.fromUtf8(p.cast());
     return result["textureId"];
   }
+
+  static Future<void> updateTexture(int textureId) async {
+    await _channel.invokeMethod('updateTexture', {"textureId": textureId});
+  }
 }

lib/lib_egl.dart

@@ -99,13 +99,20 @@ List<Pointer<Void>> eglChooseConfig(
 Pointer<Void> eglCreateContext(
   Pointer<Void> display,
   Pointer<Void> config, {
-  int contextClientVersion = 1,
+  int contextClientVersion = 3,
   Pointer<Void>? shareContext,
+  bool isDebugContext = false,
 }) {
-  final attributeList = allocate<Int32>(count: 3);
+  final attributeList = allocate<Int32>(count: 5);
   attributeList[0] = EGL_CONTEXT_CLIENT_VERSION;
   attributeList[1] = contextClientVersion;
-  attributeList[2] = EglValue.none.toIntValue();
+  if (isDebugContext) {
+    attributeList[2] = EglValue.none.toIntValue();
+  } else {
+    attributeList[2] = EGL_CONTEXT_OPENGL_DEBUG;
+    attributeList[3] = EGL_TRUE;
+    attributeList[4] = EglValue.none.toIntValue();
+  }
 
   final nativeCallResult = _libEGL.eglCreateContext(
       display, config, shareContext ?? nullptr, attributeList);
@@ -778,6 +785,7 @@ enum EglValue {
 
   /// EGL_OPENGL_ES2_BIT
   openglEs2Bit,
+  openglEs3Bit,
 }
 
 extension EglValueExtension on EglValue {
@@ -787,6 +795,8 @@ extension EglValueExtension on EglValue {
         return EGL_NONE;
       case EglValue.openglEs2Bit:
         return EGL_OPENGL_ES2_BIT;
+      case EglValue.openglEs3Bit:
+        return EGL_OPENGL_ES3_BIT;
       default:
         throw UnsupportedError('Unsupported value: $this');
     }

pubspec.lock

@@ -93,7 +93,7 @@ packages:
     description:
       path: "."
       ref: HEAD
-      resolved-ref: c429ec4f118242ac6b42a38f26b9264e8e34a9b0
+      resolved-ref: "45053cea3e4f3c13d1acfb6a42b5b80123189e67"
       url: "https://github.com/FlutterGL/opengl_es_bindings"
     source: git
     version: "1.0.0"

test/flutter_web_gl_test.dart

@@ -18,6 +18,6 @@ void main() {
   });
 
   test('getPlatformVersion', () async {
-    expect(await FlutterWebGl.platformVersion, '42');
+    expect(await FlutterWebGL.platformVersion, '42');
   });
 }

windows/CMakeLists.txt

@@ -15,19 +15,20 @@ set_target_properties(${PLUGIN_NAME} PROPERTIES
 target_compile_definitions(${PLUGIN_NAME} PRIVATE FLUTTER_PLUGIN_IMPL)
 target_include_directories(${PLUGIN_NAME} INTERFACE
   "${CMAKE_CURRENT_SOURCE_DIR}/include")
-target_link_libraries(${PLUGIN_NAME} PRIVATE flutter flutter_wrapper_plugin)
-
-set(LIB_GLES_NAME "libGLESv2.dll")
-set(LIB_EGL_NAME "libEGL.dll")
-set(ZLIB_NAME "zlib.dll")
-set(ANGLE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/angle")
-set(OPENGL_ARCH ${MSVC_CXX_ARCHITECTURE_ID})
-set(OPENGL_BUILD_TYPE "$<$<CONFIG:Debug>:debug>$<$<CONFIG:Release>:release>")
-set(OPENGL_LIB_DIR "${ANGLE_DIR}/${OPENGL_ARCH}/${OPENGL_BUILD_TYPE}")
-set(OPENGL_LIB "${OPENGL_LIB_DIR}/${LIB_GLES_NAME}")
-set(EGL_LIB "${OPENGL_LIB_DIR}/${LIB_EGL_NAME}")
-set(ZLIB_LIB "${OPENGL_LIB_DIR}/${ZLIB_NAME}")
-
+  
+  set(LIB_GLES_NAME "libGLESv2.dll")
+  set(LIB_EGL_NAME "libEGL.dll")
+  set(ZLIB_NAME "zlib.dll")
+  set(ANGLE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/angle")
+  set(OPENGL_ARCH ${MSVC_CXX_ARCHITECTURE_ID})
+  set(OPENGL_BUILD_TYPE "$<$<CONFIG:Debug>:debug>$<$<CONFIG:Release>:release>")
+  set(OPENGL_LIB_DIR "${ANGLE_DIR}/${OPENGL_ARCH}/${OPENGL_BUILD_TYPE}")
+  set(OPENGL_LIB "${OPENGL_LIB_DIR}/${LIB_GLES_NAME}")
+  set(EGL_LIB "${OPENGL_LIB_DIR}/${LIB_EGL_NAME}")
+  set(ZLIB_LIB "${OPENGL_LIB_DIR}/${ZLIB_NAME}")
+  
+  target_link_directories(${PLUGIN_NAME} PUBLIC ${OPENGL_LIB_DIR} )
+  target_link_libraries(${PLUGIN_NAME} PRIVATE flutter flutter_wrapper_plugin ${LIB_GLES_NAME}.lib ${LIB_EGL_NAME}.lib)
 # List of absolute paths to libraries that should be bundled with the plugin
 set(flutter_web_gl_bundled_libraries
   "${OPENGL_LIB}"