Make a VR Paintbrush in a-painter!

A-painter is an open sourced version of the very amazing VR Painting app TiltBrush by the killer team at @mozillavr. If you know (or want to learn) ThreeJS, you can create any kind of virtual reality super power, quickly, in the browser.

A brush is simply a part of a ThreeJS scene. You can create brushes with sphere primitives, custom geometry, WebGL Shaders, point clouds, or anything else you can do in ThreeJS. A-painter will give you a Three.Object3D, and whatever you want to put in there is up to you.

Get Set Up

Clone and set up the repository. The project is set up pretty cleanly so you shouldn’t have any issues npm installing and npm starting.

Add your brush file.

Here’s the skeleton of your code, added in src/brushes. Also make sure to require this file in src/index.js. You can start by copying one of the brush files mentioned below.

/* globals AFRAME THREE */
AFRAME.registerBrush('your-brush-name', {
init: function (color, brushSize) {
// Set up anything you'll need here.
// The a-frame component has a ThreeJS object3D property that
// you can add things to.
var mesh = ... create some threejs obj you'll modify later ...
this.object3D.add(mesh);
},

addPoint: function (position, orientation, pointerPosition, pressure, timestamp) {
// Modify your mesh, or add new meshes based on the new points drawn
},

tick: function(timeOffset, delta) {
// Do any animation, such as updating the time uniform in a shader,
// or moving your mesh around over time.
}
},
{
thumbnail:'brushes/your-icon.png',
maxPoints: 3000
});

Start building your brush

The easiest way to build a brush is to not do it in VR. I use a pre-made sketch (which you can get ) and have it open on each load. It will show you your brush in various shapes and colors without having to put on the helmet and draw it each time.

  • Download the sketch here and place it in your a-painter root directory.
  • Modify the json to use the name of your brush from above, replacing flat in the brushes array.
  • Add the urljson param to your url and get cracking! http://localhost:8080/?urljson=sketch.json

Starting points

  • Shaders! If you want to create a simple shader based brush, you can copy the rainbow brush and modify the shaders at the top of the file.
  • Stamp based brushes: Check out stamp.js to create a stamping brush.
  • Mesh brushes: sphere.js shows how to add copies of threejs primitives, and animate them over time. The rainbow brush above also shows how to generate geometry as you draw.