A GeometryBuilder is a builder that you can use to procedurally generate Geometries.

Overview

• Implements the Builder pattern.
• Helps us improve WebGL performance by combining many shapes into the same Geometries, thus reducing the number of draw calls.
• A plain JavaScript class, ie. not a xeogl Component subclass.

Examples

• Generating a 3D sine wave from boxes

Usage

• Works by accumulating additions to an internal buffer of geometry vertex and index arrays.
• Call setShape() to set its current mesh, and setMatrix() to set its current modelling transform.
• Then, whenever you call addShape(), it appends the shape, transformed by the matrix, to its internal buffer.
• Finally, call build() to dump its buffer into a target Geometry.
• Retains its buffer so that you can call build() again, to dump its buffer into other Geometries as needed.
• Call reset() to empty its buffer.

In the example below we'll use a GeometryBuilder to create something like the screen capture shown above.

// Intatiate a GeometryBuilder; note that it's a
// plain JavaScript object, not a xeogl Component subtype
var geometryBuilder = new xeogl.GeometryBuilder();

// Set the current shape we'll be adding to our GeometryBuilder;
// this can be a Geometry, or just an object containing vertex and indices arrays.
geometryBuilder.setShape(new xeogl.BoxGeometry());

// Now add that shape many times, each time setting a different modelling matrix
// on the GeometryBuilder. As we do this, we are accumulating geometry in a buffer
// within the GeometryBuilder.

var matrix = xeogl.math.mat4();
var height = 3;
var height2 = height * 2;
var x;
var y;
var z;
var size = 200;

for (x = -size; x <= size; x += 2) {
    for (z = -size; z <= size; z += 2) {

       y = ((Math.sin(x * 0.05) * height + Math.sin(z * 0.05) * height)) + height2;

       xeogl.math.identityMat4(matrix);            // Fresh matrix
       xeogl.math.scaleMat4c(.90, y, .90, matrix); // Post-concatenate scaling
       xeogl.math.translateMat4c(x, y, z, matrix); // Post-concatenate translation

       geometryBuilder.setMatrix(matrix);          // Set the current modeling transform matrix

       geometryBuilder.addShape();                 // Add current shape to the buffer, transformed by the matrix
    }
}

var geometry = new xeogl.Geometry();               // Dump the buffer into a Geometry component

geometryBuilder.build(geometry);

var mesh = new xeogl.Mesh({                    // Create an Mesh with our Geometry attached
   geometry: geometry,
   material: new xeogl.PhongMaterial({
       diffuse: [0.6, 0.6, 0.7]
   })
});

mesh.scene.camera.eye = [-200, 50, -200];   // Set initial Camera position

new xeogl.CameraControl();                         // Allow camera interaction