Integrating Toxiclibs and GLGraphics   2 comments

A recent post in the Processing forum discussed the question of how to use GLGraphics to speed-up rendering of geometry created with the Toxiclibs libraries. Toxiclibs is an open-source collection of libraries for computational design, created by Karsten “toxi” Schmidt. It has been used to create really good work, check the community showreel for a compilation of projects made with it. So in this post I expand a little on this topic of integrating Toxiclibs and GLGraphics.

The situation where this integration makes more sense is when creating complex triangle meshes in Toxiclibs using the TriangleMesh class. The mesh data can then be passed over to a GLModel object from GLGraphics, in order to get fast rendering for meshes with large vertex counts.

  mesh.computeVertexNormals();
  float[] verts = mesh.getMeshAsVertexArray();
  int numV = verts.length / 4; // The vertices array from the mesh object has a spacing of 4.
  float[] norms = mesh.getVertexNormalsAsArray();

  GLModel glmesh = new GLModel(this, numV, TRIANGLES, GLModel.STATIC);
  glmesh.beginUpdateVertices();
  for (int i = 0; i < numV; i++) glmesh.updateVertex(i, verts[4 * i], verts[4 * i + 1], verts[4 * i + 2]);
  glmesh.endUpdateVertices(); 

  glmesh.initNormals();
  glmesh.beginUpdateNormals();
  for (int i = 0; i < numV; i++) glmesh.updateNormal(i, norms[4 * i], norms[4 * i + 1], norms[4 * i + 2]);
  glmesh.endUpdateNormals();

Since the arrays returned by the getMeshAsVertexArray() and getVertexNormalsAsArray() methods have 4 float values per vertex, we need to use a stride of 4 to copy the data into the GLModel object. After this, the model can be rendered normally in the draw() method of the sketch:

void draw() {
  GLGraphics renderer = (GLGraphics)g;
  renderer.beginGL();
  renderer.model(glmesh);
  renderer.endGL();
}

The full code of this example is included in the latest test release of GLGraphics, under the integration category.

One issue that can appear when rendering GLModel objects is how to properly setup the lights and materials to obtain the desired surface appearance.

toxiclibs

Sometimes, the lighting API provided by GLGraphics (lights(), pointLights(), lightSpecular(), etc.) is not enough to generate specific effects such as specular shining. One reason is that GLGraphics uses color tracking for the ambient and diffuse components of the materials. This means that both components are directly taken from the vertex color, and in particular, they cannot be different. In order to remove this limitation, using the OpenGL API directly to setup the lights and material properties is probably the best solution, at least for the time being. The following code snippet shows an example of calling OpenGL functions to create one light and specify material properties:

  GLGraphics renderer = (GLGraphics)g;
  renderer.beginGL();
  renderer.gl.glEnable(GL.GL_LIGHTING);
  renderer.gl.glDisable(GL.GL_COLOR_MATERIAL);
  renderer.gl.glEnable(GL.GL_LIGHT0);
  renderer.gl.glMaterialfv(GL.GL_FRONT_AND_BACK, GL.GL_AMBIENT, new float[]{0.1,0.1,0.1,1}, 0);
  renderer.gl.glMaterialfv(GL.GL_FRONT_AND_BACK, GL.GL_DIFFUSE, new float[]{1,0,0,1}, 0);
  renderer.gl.glLightfv(GL.GL_LIGHT0, GL.GL_POSITION, new float[] {-1000, 600, 2000, 0 }, 0);
  renderer.gl.glLightfv(GL.GL_LIGHT0, GL.GL_SPECULAR, new float[] { 1, 1, 1, 1 }, 0);
  renderer.model(surf);
  renderer.endGL();

Also, this tutorial provides a very clear overview of lighting in OpenGL and how color tracking works.

Advertisements

Posted March 28, 2011 by ac in Programming, Software

Tagged with , , , ,

2 responses to “Integrating Toxiclibs and GLGraphics

Subscribe to comments with RSS.

  1. guaw !
    excellent !
    :)

  2. found this:
    you should use:

    renderer.gl.glEnable(renderer.gl.GL_NORMALIZE); // normals are normalized
    renderer.scale(100); // or whatever

    before rendering model.

    hhugs !
    d

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: