three-tiltloader

Custom three.js loader for the .tilt format used by Tilt Brush and Open Brush. The loader will inject the relevant shaders and textures for correct rendering of the file.

Adapted from the initial TiltLoader in three.js.

This project aims to provide a simple way to load and render raw .tilt files on the web, using the three.js library.

The loader is still a work in progress and subject to change. Please join the Discord to discuss the project!

If you would like to support our projects, we are on Open Collective!

Installation

The loader is designed to be used with three.js. The library has been tested against r128, but may work with other releases.

Important

You need to pass the loader a path to a folder containing all the relevant brushes and textures. This has been omitted to reduce package size and leave brush location up to the implementer. You can get a copy of the brushes folder in the root of this project's repository.

Install via npm

npm install --save three-tiltloader

Example Usage

import { TiltLoader } from 'three-tiltloader';
...

let loader = new TiltLoader();
loader.setPath('path/to/brush/folder');

loader.setBrushDirectory( 'path/to/brush/folder' );
loader.load( 'path/to/tilt/sketch.tilt', ( model ) => {
    scene.add( model );
});

Brush reference screenshots

Generate deterministic 1024×1024 browser renders using the same authored path, color, brush size, camera framing, black-environment lighting, and fixed shader time as Open Brush's UiScreenshotter:

The capture marks its generated packed geometry as Tilt input. Shader materials loaded for glTF remain in their default glTF input mode.

npm run screenshots:brushes

The default output is Support/Screenshots/brushes-postfx-disabled. To select the exact brush GUIDs and durable filenames from an Open Brush reference run, pass its mesh-fixture directory:

npm run screenshots:brushes -- --fixtures <open-brush-checkout>/Support/BrushFixtures

As in gallery-viewer, brush shaders and textures are supplied independently of this library. Point the capture at the brushes/ directory beneath the asset base URL or asset checkout:

npm run screenshots:brushes -- \
  --fixtures <open-brush-checkout>/Support/BrushFixtures \
  --assets <sketch-assets-checkout>/brushes

Use --brush Marker for a bounded single-brush run, --output <directory> to change the destination, or --headed to watch the capture in Chrome. Chrome is run with a temporary automation profile; normal browser profiles are not used.