Building on my experience with threeJS and simple simulations, I decided to do a tutorial on Canvas 3D using threeJS and webGL as a demonstration of new web technologies. The basic star field simulations I had completed before had given me a general understanding of the procedure for creating objects in Canvas 3D, and I decided to work with the other primitives as well as do basic physics. I decided that the deliverable would be a basic foundation for the Crazy Leap Pong game that I developed. It would serve as an ideal introduction to integrating threeJS, leapJS (for LEAP motion controller) and Node.JS.

The Crazy Leap Pong article addresses the programming that began with the scene created by the tutorial. This article aims to address the creation of the tutorial itself.

Outline

Tutorial: First Steps
Scripting
Silverback: Recording the Action
Editing
Presentation
Video
Github

Tutorial: First Steps

One of the first things I realized when creating the tutorial was that it was best to have a working prototype of the technology I wanted to demonstrate before I began recording. One of the worst things that can happen to any live demo is to have the end result fail (sometimes spectacularly). The same goes for a recorded demo; it would be an unnecessary loss of time to record a demo and then have the final threeJS simulation fail to perform according to expectations. I decided that the demo must work flawlessly before any recording could be done, and this was accomplished with little to no problems

Scripting

My initial tests with recording the tutorial demonstrated the need for me to have a script prepared beforehand. Attempting to do the demo in real time resulting in a lot of stumbling that would complicate the editing of the final product. Since I had already completed the code that would be presented during the tutorial, I decided that preparing all of my instructions and comments about the code would be prudent. The code was broken down into small pieces that I could record as inpidual segments which would then be edited together to make the final tutorial.

 

Silverback: Recording the Action

For screen recording, I decided to use an application for Mac OS X called Silverback. It is intended for user experience testing, capturing both the screen and the camera image. It does allow the export of footage without the user camera capture, which made it suitable for documenting the tutorial. One feature that I found beneficial was the mouse click point highlighting which helped keep track of actions of the screen during the presentation.

Editing

Given that my target length for the tutorial was approximately 10 minutes, it was inevitable that there was going to have to be a fair amount of footage needing to be cut after I finished recording. I ended up with 14 segments of footage in total with almost 12 minutes of length. Carefully reviewing my audio, I eliminated any unnecessarily long gaps in speech and anything else that would not adversely impact the understanding of the tutorial.

Presentation

Given that the text in the tutorial would have to be legible, it was necessary to encode at a fairly high bit rate and at a sufficient size. Uploading to Youtube, I ensured that the tutorial would have the option of being presented at 720p and full screen. In the near future, I would like to add captions to the video which will require examining the script and all the remarks in the video where the script was not followed word for word.

Tutorial Video

The tutorial is featured below and can be found on Youtube using this link

Github

The Github repository with the latest version of this project can be found here.