artflow-vr/artflow

ArtFlow is a WebVR app where user can draw in VR

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 );

};

artflow's Issues

Create brush tool

The Brush tool should:

• Handle options such as thickness, different material, etc
• The brush tool should keep track of all strokes (I think we should say that one stroke is equal to one material)
• We should remove axisLock and controllerOrientation as the Tool Module is now working

We should also improve the stroke rendering, maybe by starting using an emissive material?

Proper initialization of brush tool

The super class members may not be initialized properly in the brush-tool. Why passing null to super() ?

Add wrapper for all managers

User wanting to improve artflow should have the opportunity to wrap their code inside ours, without needing to really dive into it.

• We should allow them to wrap their initialization, and update code.
• We should allow them to change the addPoint method for brush

Create tree system

The tree tool should:

• Separate the logic from the data using a model ;
• Support several options such as growingSpeed, etc... ;
• Have a dependency on the Brush Tool for drawing.

Migrate simple Brush system to an unique module

Create simple particle module

• Create simple particle module accessible from a debug key
• Make particle module update the different sources
• Create sources and track them
• Do not add collision yet, it is for the next step

Create UI

UI should:

• Be displayed on only one hand at once;
• Display registered tool with their associated texture;
• Display tool options when tool is selected.

404 on the Art Gallery images in README.md

The images in the "Art Gallery" section of the README refer to resources previously hosted on your GitHub page 😢

Create tool module

It should:

• Registers new tool. A tool is described by a controller, a UI element, and maybe some additional information.
• Updates the two selected tools.
• Keeps track of operations made with tools. Maybe we can also add this part to each tool.

We should also add these mandatory tools:

• Picking;
• Rotation;
• Translation;
• Scale.