STATUS: Discontinued.

Artflow

ArtFlow is a frontend VR 3D software, in which you can draw your own world using VR controllers.

ArtFlow is greatly influenced by Tilt Brush, and A-Painter.

Tutorial

The tutorial can be found in the wiki.

Art Gallery

Local Execution

Dependencies

In order to use the application locally, you need to have a relatively new version of Yarn or npm installed on your system.

ArtFlow is based upon the following packages:

• threejs
• VRUI

VRUI is our custom library for creating UI in VR. We are trying to maintain it as much as possible, feel free to contribute!

Installing dependency is as simple as:

$ cd path/to/artflow
$ yarn install

Build

You can build the application by using the following npm command:

$ cd path/to/artflow
$ yarn run build

The output generated by Webpack is located in the build/ folder.

Development Environment

If you want to modify the application, you can use the development environment we created. You first have to launch the development server, by running:

$ cd path/to/artflow
$ yarn run dev

The webpack-dev-server will watch for changes and you can directly modify the code.

Integrate you own code

In order for you to dive easily into the existing code, you can see below a draft of how the code flows in the application:

Create my own tool

Extending the AbstractTool

You first need to create a tool extending the AbstractTool prototype. You have to implement every method you need (such as update() for instance), and the tool will be instanciated later. One thing you have to notice, in our design, the tool instance takes care of the data it adds in the Three.js scene-graph. We did this on purpose, in order to let you have a huge control when creating a tool. You can create meshes, spline, etc that you can add to two Three.js Group. You can add your data either by doing:

this.localGroup.addTHREEObject(myObject);

or

this.worldGroup.addTHREEObject(myObject);

The first is used to add objects that will be in the VR room-scale frame. So, basically, if you want to make an object follow the controllers, you will add it to this group. The second is a bit more complex. Whenever you move by using the keyboard, or the teleportation, everything inside the worldGroup will be offseted. So, basically, you want to add everything that should have a world position in worlsGroup. For instance, the brush shapes, the water planes are all added to the worldGroup.

Run my own code

Creating my tool

The tool system is quite high level, and you can easily plug your own tool into without going through our code. For now, we do not have a complete tutorial, but you can simply follow this interface to create your own tool:

export default class MyTool extends AbstractTool {

    constructor( options ) {
        super( options );
        
        // If you want the `update' to be called.
        this.dynamic = true;

        // Adds your world objects to the below group.
        // e.g: drawing, fixed objects, etc...
        this.worldGroup.addTHREEObject( myObject );
        
        // Adds your local objects to the below group.
        // e.g: markers, controller, etc...
        this.localGroup.addTHREEObject( myObject );

        ////
        // Registers events coming from controllers
        // events: 'interact', 'undo', 'thumbpad'
        ////
        this.registerEvent( 'interact', {
            trigger: /* callback when trigger is down */,
            use: /* callback when trigger is used */,
            release: /* callback when trigger is released */
        } );

        this.registerEvent( 'axisChanged', {
            trigger: /* callback when finger is down on thumbpad */,
            use: /* callback when finger moves on thumbpad */,
            release: /* callback when finger is left up from thumbpad */
        } );
    }

    update( data ) {
      // data:
      // {
      //   delta: float,
      //   controllers: []
      // }

      // This code is always called if your Tool is dynamic.
    }
    
    onEnter() {
      // Called when tool is selected.
    }
    
    onExit() {
      // Called when tool is dropped.
    }

}

Using my created tool

import ArtflowMain from './main';
import MyTool from './mytool';

let customInit = function() {

  // Put your initialization here.
   ArtflowMain.modules.ToolModule.register( 'Brush', {
    uiTexture: /* Icon of the tool in the UI */,
    preview: /* Puts a 3D model displayed on the controller when selected */,
    Tool: MyTool
} );

};

window.onload = function () {

    let w = window.innerWidth;
    let h = window.innerHeight;

    ArtflowMain.init( w, h, customInit );

    // Registers global events
    window.addEventListener( 'resize', function () {

        ArtflowMain.resize( window.innerWidth, window.innerHeight );

    }, false );

};