@gtkx/react / GtkGLArea

Variable: GtkGLArea

const GtkGLArea: "GtkGLArea"

Defined in: packages/react/src/generated/jsx.ts:13064

Allows drawing with OpenGL.

GtkGLArea sets up its own Gdk.GLContext, and creates a custom GL framebuffer that the widget will do GL rendering onto. It also ensures that this framebuffer is the default GL rendering target when rendering. The completed rendering is integrated into the larger GTK scene graph as a texture.

In order to draw, you have to connect to the Gtk.GLArea.:render signal, or subclass GtkGLArea and override the GtkGLAreaClass.render virtual function.

The GtkGLArea widget ensures that the GdkGLContext is associated with the widget's drawing area, and it is kept updated when the size and position of the drawing area changes.

Drawing with GtkGLArea

The simplest way to draw using OpenGL commands in a GtkGLArea is to create a widget instance and connect to the Gtk.GLArea.:render signal:

The render() function will be called when the GtkGLArea is ready for you to draw its content:

The initial contents of the framebuffer are transparent.

static gboolean
render (GtkGLArea *area, GdkGLContext *context)
{
  // inside this function it's safe to use GL; the given
  // GdkGLContext has been made current to the drawable
  // surface used by the `GtkGLArea` and the viewport has
  // already been set to be the size of the allocation

  // we can start by clearing the buffer
  glClearColor (0, 0, 0, 0);
  glClear (GL_COLOR_BUFFER_BIT);

  // record the active framebuffer ID, so we can return to it
  // with `glBindFramebuffer (GL_FRAMEBUFFER, screen_fb)` should
  // we, for instance, intend on utilizing the results of an
  // intermediate render texture pass
  GLuint screen_fb = 0;
  glGetIntegerv (GL_FRAMEBUFFER_BINDING, &screen_fb);

  // draw your object
  // draw_an_object ();

  // we completed our drawing; the draw commands will be
  // flushed at the end of the signal emission chain, and
  // the buffers will be drawn on the window
  return TRUE;
}

void setup_glarea (void)
{
  // create a GtkGLArea instance
  GtkWidget *gl_area = gtk_gl_area_new ();

  // connect to the "render" signal
  g_signal_connect (gl_area, "render", G_CALLBACK (render), NULL);
}

If you need to initialize OpenGL state, e.g. buffer objects or shaders, you should use the Gtk.Widget.:realize signal; you can use the Gtk.Widget.:unrealize signal to clean up. Since the GdkGLContext creation and initialization may fail, you will need to check for errors, using Gtk.GLArea.get_error.

An example of how to safely initialize the GL state is:

static void
on_realize (GtkGLArea *area)
{
  // We need to make the context current if we want to
  // call GL API
  gtk_gl_area_make_current (area);

  // If there were errors during the initialization or
  // when trying to make the context current, this
  // function will return a GError for you to catch
  if (gtk_gl_area_get_error (area) != NULL)
    return;

  // You can also use gtk_gl_area_set_error() in order
  // to show eventual initialization errors on the
  // GtkGLArea widget itself
  GError *internal_error = NULL;
  init_buffer_objects (&error);
  if (error != NULL)
    {
      gtk_gl_area_set_error (area, error);
      g_error_free (error);
      return;
    }

  init_shaders (&error);
  if (error != NULL)
    {
      gtk_gl_area_set_error (area, error);
      g_error_free (error);
      return;
    }
}

If you need to change the options for creating the GdkGLContext you should use the Gtk.GLArea.:create-context signal.