Live programming with three.js and webVR

Desktop demo

Oculus demo

Live demo

CodeChisel3D is a 3D environment for live coding. It is based on three.js and can be used by visiting a web page with a WebGL-enabled browser. It can be used with a head-mounted display like the Oculus Rift when used with a browser supporting webVR.

Motivation

Currently, CodeChisel3D is a very early prototype. It was partly motivated by Brian Peiris great RiftSketch demo. More than that, however, it should become an experiment to find out how programming tools can utilize the third dimension to make programming more direct (and fun!) and to improve collaboration. Mixed-reality displays like the castAR could be the starting point to truly collaborative workspaces – coworkers could literally share a desk. CodeChisel3D wants to explore some of the technology and techniques required for building construction kits in this context.

Code editor support

A lot of development time of the first version went into the code editor support that enables to type, evaluate, and inspect source code. CodeChisel3D uses an adapted version of the ace editor. This means that features like syntax highlighting, multiple cursors, code completion and snippets are already available. Additionally, the editor integration does not require the three.js CSS3 renderer. Especially for webVR experiments this will hopefully avoid technical issues.

Code evaluation and runtime reflection

Code that is evaluated in CodeChisel3D uses the lively.vm module of the Lively Web construction kit. It enables to control the execution of JavaScript code much more than a simple eval usage. Code can be instrumented, and state injected and extracted.

Usage

Code evaluation

Select a snippet of code and evaluate it:

On MacOS you can use the Command instead of the Control key.

Evaluating without selection evaluates the code on the current line:

The stringified result can be inserted after the expression:

Instead of a printed representation via toString you can inspect the structure of objects:

Code completion

Code completion uses dynamic method and attribute lookup in objects. Just append a "." to the object you want to call a method on or access an attribute: