CodeChisel3DLive programming with three.js and webVR

Desktop demo

Oculus demo

Live demo

The usage section below has details about how to interact with CodeChisel3D.

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.