Clutter is a discontinued GObject-based graphics library for creating hardware-accelerated user interfaces. Clutter is an OpenGL-based 'interactive canvas' library and does not contain any graphical control elements. It relies upon OpenGL (1.4+) or OpenGL ES (1.1 or 2.0) for rendering,. It also supports media playback using GStreamer and 2D graphics rendering using Cairo.^[4]

Clutter was authored by OpenedHand Ltd, now part of Intel. Clutter is free and open-source software, subject to the requirements of the GNU Lesser General Public License (LGPL), version 2.1.^[3]

In February 2022, the development team announced that the project would be discontinued. No more versions will be released and developers using Clutter are encouraged to port their applications to GTK 4 and libadwaita.^[5]

Adoption

Popular programs that adopt Clutter are GNOME Videos (a.k.a. Totem), GNOME Shell, Pitivi, Cinnamon Desktop and GNOME Ease.

Mx is a widget toolkit based on Clutter originally designed for the graphical shell of Moblin/MeeGo netbook, but evolved into an independent project.

The widget toolkits Netbook Toolkit (nbtk) and Mx are based on Clutter.^[6] Often Clutter is seen analogous to GTK but this is inaccurate. Only Clutter together with Mx or Nbtk can match the extent of the GTK. This is also the reason why Clutter is required to be used along with GTK.

Clutter supports multi-touch gestures.

• Clayland is a Wayland compositor utilizing Clutter.^[7]
• Snappy is a lightweight media player based on Clutter and GStreamer.
• Pinpoint is a simple light-weight presentation program.
• GNOME Maps uses ClutterActor
• Proof of concept casual video games PillPopper (a Pac-Man clone) and HappyWombats (an Angry Birds clone) use Clutter.

GTK Scene Graph Kit (GSK) was initially released as part of GTK+ 3.90 in March 2017 and is meant for GTK-based applications that wish to replace Clutter for their UI.

Software architecture

GDK contains back-ends to X11, Wayland, Broadway (HTTP), Quartz and GDI and relies on Cairo for the rendering. Its new SceneGraph (GSK) is work-in-progress, Clutter's SceneGraph can be used.

Clutter is a scene graph-based canvas working in retained mode. Every object on the scene is usually a 2D surface inside a 3D space.

Clutter abstracts the native windowing environment behind a backend, which is also responsible for creating the main container for the scene graph; this top level container is called the stage. Items on the stage are called actors.

Instead of operating on matrices, as does OpenGL, the Clutter developer changes properties of each actor. Clutter will then notice the changes, and render the scene accordingly.

Clutter is currently being developed by OpenedHand to provide visually rich graphical user interfaces on desktop and embedded hardware. The main target are media center-like applications, small devices UIs and base drawing API for GL- and GL/ES-based UI toolkits. Clutter uses Pango for text rendering (with a special GL/GLES renderer) and GdkPixbuf for loading images into GL textures. Interaction with other GNOME platform libraries is done through multiple integration libraries, e.g.: clutter-gst (GStreamer), clutter-gtk (for embedding the stage into a GTK application), clutter-cairo (for using cairo to draw into a texture). It's API and ABI are kept stable within micro releases, but can break API during minor releases—until it reaches 1.0, then it will be API and ABI stable until the following major release.

// Retrieve the default stage, which will contain all the actors on the scene.
ClutterActor *stage = clutter_stage_get_default ();

// Create a new label, using the Sans font 32 pixels high, and with the "Hello, world" text,
// and will place it into the stage.
ClutterActor *label = clutter_text_new_with_text ("Sans 32px", "Hello, world");
clutter_container_add_actor (CLUTTER_CONTAINER (stage), label);

// Position the label at the center of the stage, taking into account the stage and the label size.
float x = (clutter_actor_get_width (stage) - clutter_actor_get_width (label)) / 2;
float y = (clutter_actor_get_height (stage) - clutter_actor_get_height (label)) / 2;
clutter_actor_set_position (label, x, y);

// Show the stage. All actors in Clutter are visible unless explicitly hidden, except for the stage;
// thus showing the stage will
// automatically display all of its visible children.
clutter_actor_show (stage);

{
    "id": "main-stage",
    "type": "ClutterStage",
    "color": "white",
    "width": 800,
    "height": 600,
    "title": "Script demo",
    "children": [{
        "id": "hello-label",
        "type": "ClutterText",
        "x": 400,
        "y": 300,
        "text": "Hello, world!",
        "color": "black",
        "font-name": "Sans 48px"
    }],
    "signals": [{
        "name": "destroy",
        "handler": "clutter_main_quit"
    }]
}

ClutterScript *script = clutter_script_new ();
GError *error = NULL;
clutter_script_load_from_data (script, description, -1, &error);
if (error)
{
    g_warning ("Unable to load UI description: %s", error->message);
    g_error_free (error);
}
else
{
    GObject *stage;

    clutter_script_connect_signals (script, NULL); /* connect the signal handlers */
    stage = clutter_script_get_object (script, "main-stage"); /* get the "main-stage" object */
    clutter_actor_show (CLUTTER_ACTOR (stage));
}

ClutterTimeline *timeline = clutter_timeline_new (2000);
ClutterAlpha *alpha = clutter_alpha_new_full (timeline, CLUTTER_LINEAR);
ClutterBehaviour *behaviour = clutter_behaviour_scale_new (alpha,
                                                           1.0, 1.0, /* initial scaling factors */
                                                           2.0, 2.0  /* final scaling factors */ );
clutter_behaviour_apply (behaviour, label);

clutter_actor_animate (label,          /* the actor to animate */
                       CLUTTER_LINEAR, /* the easing mode */
                       2000,           /* the duration of the animation */
                       "scale-x", 2.0, /* final horizontal scaling factor */
                       "scale-y", 2.0, /* final vertical scaling factor */
                       NULL);

COGL

Cogl is a small open source software library for using 3D graphics hardware to draw pretty pictures.^[21] The API departs from the flat state machine style of OpenGL and is designed to make it easy to write orthogonal components that can render without stepping on each other's toes. Cogl currently supports OpenGL ES 1.1/2.0 and OpenGL > 1.3 (or 1.2 if you have the GL_ARB_multitexture extension), and having Gallium3D or D3D back-ends are options for the future.

libchamplain

libchamplain is a C library providing a ClutterActor to display maps. It also provides a GTK widget to display maps in GTK applications. libchamplain is named after Samuel de Champlain, a French navigator, explorer and cartographer.

See also

• Core Animation – data visualization API used by Mac OS X 10.5 and later
• Qt Quick – a similar application framework based on Qt and QML

References

External links

• Clutter homepage