The original renderer, MilkDrop, was written using DirectX APIs for Windows. projectM was a reimplementation using OpenGL 1.0 so that the renderer could be used on all platforms, including Mac OS and Linux. I thought it was going to be straightforward to port this OpenGL code to WebGL, but unfortunately for me, WebGL implements a subset of OpenGL 2.0 called OpenGL ES 2.0.

It seems many new platforms are moving to OpenGL ES 2.0 instead of plain OpenGL 2.0, which has a lot of legacy support and is backwards compatible with OpenGL 1.0.  This list includes iOS, Android, and perhaps the next big Linux display sever/compositor, Wayland.  There are many reasons for this but I suppose the biggest is that devices like phones and tablets that don’t have a general purpose GPU have a Graphics Processor with more constrained resources, and it’s more cost effective for them to implement a single simpler graphics API.  And despite being a subset, OpenGL ES 2.0 is every bit as powerful as OpenGL 2.0.  I couldn’t find any resources on converting between the two, so here’s some basics that will save you a lot of frustration.

The biggest difference between the implementations is that OpenGL ES 2.0 replaces the fixed-function pipeline with programmable shaders.  With the fixed-function pipeline, we were basically given a simple shader program that allowed us to pass in vectors for vertices, colors, and textures, and basic operations to transform the matrices which project the 3D model to our eyes.  With programmable shaders, we can make any shader we want.  So the first step in porting is to emulate the old fixed-function pipeline with a shader of our own:

The Vertex Shader in GLSL:

    attribute vec4 a_position;
    attribute vec4 a_texCoord;
    varying vec4 v_texCoord;
    attribute vec4 a_color;
    uniform vec4 u_color;
    varying vec4 v_color;
    uniform bool enable_v_color;
    uniform float u_pointsize;
    uniform mat4 mvp_matrix;
    uniform mat4 tx_matrix;
    void main() {
        gl_Position = mvp_matrix * a_position;
        v_texCoord = tx_matrix * a_texCoord;
        if (enable_v_color)
            v_color = a_color;
        else
            v_color = u_color;
        gl_PointSize = u_pointsize;
    }

The Fragment Shader in GLSL:

    varying vec4 v_texCoord;
    uniform sampler2D s_texture;
    varying vec4 v_color;
    uniform bool enable_s_texture;
    void main() {
        if (enable_s_texture)
            gl_FragColor = v_color * texture2D(s_texture, v_texCoord.st);
        else
            gl_FragColor = v_color;
    }

So you can see we’ve emulated the basic aspects of the fixed-function pipeline in OpenGL Shader Language.  If you have more complex pieces to port, like fog or dynamic lighting, you will also have to convert those.

OpenGL ES 2.0 also doesn’t do our matrix homework for us, so we have to write all the linear algebra to get the modelview, projection, and texture matrices in a form we can pass to our programmed shader.  I won’t go into details on how to do this, but you can find most of the OpenGL 1.0 functions like glPushMatrix, glPopMatrix, glMultMatrix, glTranslatef, glRotatef, glOrthof, etc implemented in milkshake.js.