two

c++ toolkit for rapid development of live graphical apps and games

1467

C++

libtwo

CI	Community	Support

two is an all-purpose c++ app prototyping library, focused towards live graphical apps and games.
two contains all the essential building blocks to develop lean c++ apps from scratch, providing reflection and low level generic algorithms, an immediate ui paradigm, and an immediate minimalistic and flexible graphics renderer.

two aims to provide the quickest idioms to build functional and lightweight c++ graphical applications. It wagers that the future of application and game coding lies in small, self-contained, reusable and shared libraries, and not in gigantic tightly coupled engines of hundreds thousands of lines of code. It tackles the problem of the code you don’t want to write, and should not have to write when prototyping an app.

two provides two main APIs, two low-level application building blocks which you can use just as well from native C++ as from higher-level language bindings:

a stable API for mid-level graphics rendering (think scenes, shapes, meshes, models, lights, materials, passes, post-processing, etc).
a stable API for fully auto-layout, stylable, declarative/immediate mode UI (with a large set of widgets, docking, tabs, nodes, text editors, inputs, curves etc).

Each of those layers are also their own libraries, available as twfx and twui, which can be used independently: they are not tied to one another.

two is open-source, and published under the zlib license: as such it is looking for sponsors, funding, and your support through patreon.

live coding

As a demonstration of the features and API of two, you can try this live-coding environment, which allows you to browse and edit (in real-time) any of the 35 examples we ported from three.js

building

two is built with GENie build system, which is based on premake and consists of a bunch of lua scripts. The GENie binaries needed by two for windows and linux are included for convenience in the bin folder.
To get a headstart and build two you should clone this repository, and run GENie which will generate projects for two libraries and for the examples.

The build instructions for linux and gcc look like:

git clone https://github.com/hugoam/bx
git clone https://github.com/hugoam/bimg
git clone https://github.com/hugoam/bgfx
git clone --recursive https://github.com/hugoam/two
cd two
for linux (make):
- bin/linux/genie --gcc=linux-gcc gmake
- cd build/projects/gmake-linux
- make config=debug64 -j8
for osx (make): bin/darwin/genie --gcc=osx gmake
for osx (xcode): bin/darwin/genie --xcode=osx xcode9
for windows (visual studio): bin/windows/genie vs2017

quickstart

This is the minimal sample code you need to run a two application

#include <two/two.h>

using namespace two;

bool pump(Shell& app)
{
    // ui code goes here
    return app.pump();
}

int main(int argc, char *argv[])
{
    Shell app(RESOURCE_PATH);
    app.run(pump);
}

Add some UI code or some graphics code in the body of the function to get started using two.
Don’t hesitate to have a look at the examples!

samples

ui

two ui uses a novel paradigm that sits halfway between immediate (like dear imgui) and retained ui (like Qt) : its API looks and feels exactly like an immediate ui library, except not much is actually done immediately. As such, we prefer to refer to it as a declarative ui.
The final tree of widgets will look exactly like the tree of the declarations that is traversed on any given frame. however, events are processed, and rendering is done in a separate step.

Once you have setup a window and called the begin() function on the root widget on each iteration, you can freely declare/draw all your widgets:

Widget& window = ui::window(uroot, "My Window");
ui::label(window, "Welcome to two ui");
if(ui::button(window, "Click me !"))
    printf("Button clicked !\n");
ui::color_edit(window, Colour(1.f, 0.34f, 0.73f));

The styles of all widgets are entirely customizable, through style sheets declared in the json format
styles govern literally all aspects of :

the layout of the widgets
the appearance of the widgets

By switching between style sheets on the fly, you can instantly change the whole appearance of the ui

You can also specify styles on a per-widget basis, by passing in a style parameter

Style style = {};
ui::button(parent, style, "Click me!");

An extensive UI example demonstrates the usage in a way no documentation ever could: have a look at the code.

graphics

two gfx library uses the same immediate paradigm as the ui. instead of nesting ui nodes (widgets) calls, you nest graphics nodes calls. as such it is perfect for quickly setting up some debug graphics rendering.

// create a viewer to render into
SceneViewer& viewer = ui::scene_viewer(uroot);
Gnode& groot = viewer.m_scene.m_graph.begin();

// draw a node, which transform applies to children of this node
Gnode& gnode gfx::node(root, {}, vec3(0.f, 15.f, 7.5f));

// draw a cube shape item as a child of node
gfx::shape(gnode, Symbol(Colour::White), Cube());

// draw a 3d model item as a child of node
Item& item = gfx::model(gnode, "my_3d_model.obj");

// animate a model
Animated& animated = gfx::animated(gnode, item);
animated.play("walk");

A collection of 35 examples ported from three.js demonstrate most usages of the API: check them out to get familiar with how to use two.