Portable OpenGL ES 2.0 Widget for Flutter #

THIS PROJECT IS AN EXPERIMENTAL WORK IN PROGRESS

The aim of this project is to provide an easy and familiar way to use OpenGL ES 2.0 in your application. This is not the first library to attempt this but the approach is different; all of the code is in pure Dart and doesn't rely on any platform specific code. On Android and Linux native libEGL and libGLESv2 are used, on Apple platforms and Windows we instead ship ANGLE libraries (extracted from the CEF project builds).

Here are the goals of the project:

• Provide an OpenGLESWidget() which can be used like any other Flutter widget to provide you an OpenGL ES context
• Provide customised GLES Dart bindings so that you can render using the OpenGL API in the same way that you would in C for example
• Use EGL for all OpenGL context creation
• Use Dart + FFI code whereever possible, only falling back to native where it's necessary

On platforms that don't support EGL, we will fallback to shipping and using ANGLE instead.

[Image showing a wooden crate]

Current Status #

• OpenGLESWidget creates a valid OpenGL context on platforms that support EGL
• Basic OpenGL ES bindings are available to use
• The framebuffer is transferred from EGL using glReadPixels. This may be a performance bottleneck.
• MacOS builds of ANGLE are included in the repo but not yet used

Platform Support #

• ✅ Android
• ✅ Linux
• ❌ MacOS
• ❌ iOS
• ✅ Windows
• ❌ Web

TODO #

• Improve the GLES bindings (return types are all dynamic, some arguments don't make sense in Dart)
  • Ideally the generator would be smarter. Currently we have to manually override bindings to make them more Dart friendly, but there are common patterns we could detect (e.g. Pointer
• Implement support for MacOS and iOS
• Consider swapping to using Flutter's Texture() if glReadPixels hurts performance (requires native code)
• Make work on Web
• When autorender is disabled, allow a way to trigger a re-draw manually

Using the OpenGL ES 2 API #

The OpenGL bindings follow the native OpenGL API as much as possible. Only deviating in the following cases:

• Any pointer arguments are instead passed as a list which is filled with the output (e.g. glGetShaderiv)
• const char* arguments are converted to take a String. Unnecessary length arguments are then removed
• Occasionally a function that returns void natively but takes an "output" parameter, will return the parameter directly (e.g. getShaderInfoLog will return a String instead of passing it out as a List

The bindings are not complete. There are still many cases where ffi types are used in the function signatures. Patches welcome!

Example #

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
          child: Container(
              width: 640,
              height: 480,
              child: OpenGLESWidget(
                onInit: () {
                  // Called when the widget state is created
                  glEnable(GL_DEPTH_TEST);
                },
                onResize: (w, h) {
                  // Called whenever the widget resizes
                  glViewport(0, 0, w, h);
                },
                onRender: () {
                  // Called 60 times per second
                  glClearColor(1.0, 0.0, 0.0, 1.0);
                  glClear(GL_COLOR_BUFFER_BIT);
                },
              ))),
    );
  }
}