Lesson 2

We start with the very basics. First, we set up some scaffolding:

var gl = Lux.init(document.getElementById("webgl"), {
    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. Each model is created by specifying the type of primitive being drawn (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 put them in the two-dimensional screen, we use a camera class. A camera can be called like a function, and will return the transformed version of the parameter. Here, we are also translating the models (the square to the right, and the triangle to the left):

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. We bake the model's positions into batches, and add them into the Lux scene:

var square = Lux.bake(square_model, { position: square_position }),
    triangle = Lux.bake(triangle_model, { position: triangle_position });
Lux.Scene.add(square);
Lux.Scene.add(triangle);

Voila!

Back to the index.