Lux Tutorial
This tutorial is a sequence of annotated examples, so you can see which parts of the Lux API are responsible for what behavior. If you've never used Lux before, you should at least skim through the lessons.
The lessons
Basics
In these lessons, you learn the very basics on how to setup basic objects for Lux to draw.
- Lesson 1: Models and Actors
- Lesson 2: Colors
- Lesson 3: Parameters, Lux expressions, and basic animation
- Lesson 3b: Parameters from UI widgets
3D graphics
Transforms and the Lux scene graph
As you've seen in the previous lessons, Lux actors are specified by matching models with appearances. One of the unique features in Lux is the way in which its scene graph works. The scene graph infrastructure in Lux extends the idea of transform nodes (and the related matrix stacks) you might have seen in OpenGL or in other scene graph libraries like OpenSceneGraph. Specifically, a transform node in a Lux scene graph applies an arbitrary transformation to an appearance. It can be a multiplication by a matrix (giving the matrix stack), it can be a more complicated coordinate transform (eg map projections), or even more. By providing Lux with richer information about the transformations your code is specifying, Lux in turn can give you nicer things (like automatic unprojecting).
The following examples illustrate some of the possibilities by iteratively creating a simple interactive geographical visualization, and iteratively refactoring the program so it better reflects the structure of the different pieces.
Dynamic data
Sometimes your program needs to use data that changes dynamically. Typically you do not want to create new actors very often, since this requires compiling a Lux appearance into a WebGL shader. The solution is to use Lux's attribute buffers.
Acknowledgments
Some lessons in this tutorial are based on the venerable neHe OpenGL examples, the babiest in OpenGL baby steps. There are WebGL equivalents you can use to compare to as well.