artflow

KO | EN

gitlite — search

#ai #typescript #llm #golang #rust #linux #docker #macos #vue #pytorch #security #mcp #openai #open-source

(★ 21)

ArtFlow is a WebVR app where user can draw in VR

artflow Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> 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](https://www.tiltbrush.com/), and [A-Painter](https://github.com/aframevr/a-painter).

[![ArtFlow Video](https://user-images.githubusercontent.com/8783766/31792707-36e8d1b2-b51d-11e7-9dfc-9b411258deb0.png)
](https://www.youtube.com/watch?v=QtjKiANf6GY)

## Tutorial

The tutorial can be found in the [wiki](https://github.com/artflow-vr/artflow/wiki/Artflow-wiki).

## Art Gallery

![](https://user-images.githubusercontent.com/8783766/93022731-a2257800-f5e2-11ea-91f9-f70798480f7c.png)
![](https://user-images.githubusercontent.com/8783766/93022735-a6519580-f5e2-11ea-927d-bd1e2a9dcfd7.png)
![](https://user-images.githubusercontent.com/8783766/93022733-a5206880-f5e2-11ea-85ca-1dc8bb8c3d0b.png)

## Local Execution

### Dependencies
In order to use the application locally, you need to have a relatively new version of [Yarn](https://yarnpkg.com/lang/en/) or [npm](https://www.npmjs.com/) installed on your system.

ArtFlow is based upon the following packages:
* [threejs](https://www.npmjs.com/package/three)
* [VRUI](https://www.npmjs.com/package/vr-ui)

[VRUI](https://www.npmjs.com/package/vr-ui) 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:
```sh
$ cd path/to/artflow
$ yarn install
```

### Build
You can build the application by using the following npm command:
```sh
$ cd path/to/artflow
$ yarn run build
```
The output generated by [Webpack](https://webpack.github.io/) 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:
```sh
$ cd path/to/artflow
$ yarn run dev
```

The [webpack-dev-server](https://webpack.github.io/docs/webpack-dev-server.html) 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:
<p align="center">
  <img width="700" src="https://user-images.githubusercontent.com/8783766/29539020-85b4697e-86c8-11e7-91b2-bd6279604627.png">
</p>

### 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:
```javascript
this.localGroup.addTHREEObject(myObject);
```
or
```javascript
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:

```javascript

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
```javascript
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

artflow Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

artflow

artflow Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README