Lesson 1: Models, Appearances, Actors

Let's start with the very basics. Before anything else, You need to initialize Lux, by calling Lux.init:

Lux.init({
    clearColor: [0, 0, 0, 0.2]
});

In WebGL, pictures are created by drawing points, lines, triangles, etc. on the screen. With Lux, these are packaged in models, which are created with Lux.model. You create a model by choosing the type of primitive to draw (type), a list of vertex coordinates and their dimension (vertex), and the sequence in which these vertices are drawn (elements):

var square = Lux.model({
    type: "triangles",
    elements: [0, 1, 2, 0, 2, 3],
    vertex: [[-1,-1, 1,-1, 1,1, -1,1], 2]
}), triangle = Lux.model({
    type: "triangles",
    elements: 3, // this is equivalent to [0, 1, 2]
    vertex: [[0,1, -1,-1, 1,-1], 2]
});

To take the three-dimensional positions of the vertices and project them on the two-dimensional screen, use a camera class. A camera can be called like a function, and will return the transformed version of the passed parameter. In addition, we are also translating the models' vertices (the square to the right, the triangle to the left). We are also moving them into the scene by transforming translating them in the z direction:

var camera = Shade.Camera.perspective();
var square_position = camera(Shade.translation( 1.5, 0, -6)(square_model.vertex));
var triangle_position = camera(Shade.translation(-1.5, 0, -6)(triangle_model.vertex));

The variables square_position and triangle_position now store a value representing the transformed vertices of the square and triangle model, respectively. All that's left to do is to actually tell Lux to draw the models on the screen. A model can be drawn in the screen in many different ways: it can have different positions, it can be drawn with different colors, it might be semi-transparent, etc. Because of this, Lux needs to know how to associate an appearance with a particular model. A Lux actor is an object that combines a model and an appearance:

var square   = Lux.actor({ model: square_model,
                           appearance: { position: square_position }),
    triangle = Lux.actor({ model: triangle_model, 
                           appearance: { position: triangle_position }));

To tell Lux to draw actors, you simply add them to the Lux scene:

Lux.Scene.add(square);
Lux.Scene.add(triangle);

Voila!

---

Back to the index.