A-Painter: Paint in VR in your browser

Too impatient to read? Go to https://aframe.io/a-painter to start creating (Remember to install a webvr enabled browser — More info on https://webvr.info)

We are hardcore fans of Tilt Brush at Mozilla VR, it’s a wonderful example on the power of VR as an expressive medium. In the last few weeks we have been experimenting with our own web based interpretation of Tilt Brush. We wanted to show how easy is to produce and share your creations in the Web with no software installations in a multiplatform way.

To browse paintings you just need a browser with WebGL available, but to fulfil your artistic urges you need a system with hand tracked controllers. Unfortunately the only one available today is the HTC Vive on Windows machines (we hope this change soon!).

This is what you can do with a-painter today:

  • Paint in 3D using tracked controllers. Both hands paint!
  • Share drawings with the world just by copying and pasting an URL.
  • View 3D drawings anywhere with or without a headset.
  • Paint on top of other people’s drawings and make them your own.
  • Drag and drop images and OBJ models from your desktop to the browser, for a template or starting point to paint over.
  • Save and load local binary files of your drawings.
  • Over 30 brushes with a custom Brush API to easily create new ones.

How to play with it

It is easy: Go to the A-Painter website (https://aframe.io/a-painter) with a WebVR enabled browser (More info on https://webvr.info) and put on your HTC Vive headset on. Grab your controllers, hold the trigger button, and start painting!

Controls

  • Trigger: Hold down to paint (pressure sensitive)
  • Thumbpad: Slide up and down to change brush size
  • Grip: Squeeze to undo the latest stroke.
  • Menu Button: Press to toggle the main menu.

Once you open the main menu, you can modify the color, size, and brush type by pointing the other controller to the desired option and clicking using the trigger (and this controller pointing and clicking is the one receiving the new settings)

  • Color history: the latest seven colors used will be saved in these swatches
  • Clear: clears the painting. Use with care!
  • Save: the whole painting will be saved and uploaded to a server in binary format, and outside VR (in your browser) you will get a URL that opens it so you can share it and continue your work later.
  • Copy: if you click on it, the current brush settings (type, color and size) of the controller holding the menu will be transferred to the pointing controller.

A-Painter is extensible

To create a new brush, implement the following interface and register it by calling `registerBrush(brushName, definition, options)`

The only mandatory method to implement is addPoint. With addPoint, you should do something with the point, orientation and pressure data sent from the controller (e.g., create or modify a geometry) and return true if you’ve added something to the scene, false otherwise. If you want to add dynamic behaviour, implement the tick method, which will be called on every frame.

Here is code for a spheres brush:

Read more about creating custom brushes: https://github.com/aframevr/a-painter#brush-api.

Perhaps we could…

While developing this tool we got plenty of ideas to implement. The future of A-Painter depends on you and its general acceptance and feedback, but these are some stuff we would like to add:

  • More and better tools, like color picker and eraser
  • More and better brushes
  • Save screenshots and gif animations
  • Audio reactive brushes
  • Multiuser painters and spectators
  • Export to standard 3D file formats like OBJ
  • Dedicated website with users galler
  • Postprocessing filters
  • Brushes performance optimisations

And of course if you have an idea, issue or want to contribute directly to the code, please feel free to join us at http://github.com/aframevr/a-painter