bandarra.me

OpenGL SuperBible in Java: Your first triangle

On the last tutorials, there was a lot of code that we used to build a framework and encapsulate the complexity of the shaders. Today, it's time for that work to start paying off and getting something actually drawn on our screen!

Besides using the code on OpenGL Superbible, the code in this article was inspired by the tutorials on LWJGL's wiki page and a few other searches on Google, to figure out the LWJGL specific parts, like initalizing screen and etc.

Again, all the code is available on http://code.google.com/p/opengl-superbible-java/

First, i won't cover the details on LWJGL's implementation. The code is fairly simple and their wiki and docs should clear any doubts.

Taking out the LWJGL initialization code, the example turns out to be very short. There are two instance variables that are important to our example in the Triangle class. The triangleBatch and shader instances. The first is a GLBatch which has the responsability of drawing our triangle. The second is shader used to draw this triangle.

Those variables are initialized on the initGL method. Heres a transcription of the code:

public void initGL() {
    glClearColor(0.0f,0.0f,0.0f,0.0f);

    shader = GLShaderFactory.getIdentityShader();
    triangleBatch = new SimpleGLBatch(GL11.GL_TRIANGLES,
            new float[]{ 0.0f, 0.5f, 0.0f, 1.0f, //vertex 1
                        -0.5f, -0.5f, 0.0f, 1.0f, //vertex 2
                          0.5f, -0.5f, 0.0f, 1.0f}, //vertex 3
            new short[]{0, 1, 2});
}

The glClearColor call specifies which color to using when clearing the color buffers. You can get more details here.

The shader initialization just uses the default Identity Shader from GLShaderFactory. This shader does not make any transformation on the vertex.

The next line initializes the GLBatch informing that it should use GL_TRIANGLES to draw the vertices, the vertices values. Each vertex has 4 float values. x, y, z and scale, and, at last, the indexes of the vertices.

The next important line of code is:

public void resizeGL() {
    glViewport(0,0,DISPLAY_WIDTH ,DISPLAY_HEIGHT);
}

This code simply resizes the OpenGL viewport when the window size is changed.

Now, we have to actually draw the triangle on the screen, and thats what the render method does:

public void render() {
    glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
    shader.useShader();
    shader.setUniform4("vColor", 1.0f, 0.0f, 0.0f, 1.0f);
    triangleBatch.draw(shader.getAttributeLocations());
    Display.update();
}

The first step is clearing the screen, with a call to glClear. Then, we tell the shader we want to use it, with shader.useShader(). The next step is telling the shader which color we want to paint our triangle. The identity shader user a uniform called vColor to do that. The, we can draw the triangleBatch and ask LWJGL to swap the screen buffer with Display.update(). Thats it, we got a triangle on our screen.

A red triangle

You may notice that if you change the screen size, the triangle will change its shape. That's because we are using the identity shader, which maps the viewport to coordinates between -1.0 and 1.0. On the next tutorials, we will see how to draw our triangle without losing the proportion.