概要

Three.js と (Three.js 未使用の) WebGL と OpenGL ES で三角形を描いて、違いを比較してみた、という話です。

以下のサンプルの WebGL、 OpenGL ES は PVRSDK から拝借しました。コードの構成が似ていて比較しやすいためです。

動機

概念としては Three.js, WebGL, OpenGL ES の違いは、
「WebGL は OpenGL ES のバインディングでしょ、Three.js は WebGL のラッパーでしょ、知ってるよそれくらい」
と理解したつもりになっていたが、コードレベルで何がどの程度違うのか知りたいなーと。

Three.js

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'> 
  <script src="three.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script>
    $(document).ready( function() {
      // Rendererを用意
      renderer = new THREE.WebGLRenderer( { 'canvas' : $('#canvas')[0] } );

      // 背景色を指定
      renderer.setClearColor( new THREE.Color(0x99ccff) );

      renderer.setSize(600, 500);

      // Cameraを用意
      camera = new THREE.PerspectiveCamera();
      camera.position.z = 500;

      // Sceneを用意
      scene = new THREE.Scene();
      scene.add( camera );

      // 三角を作る
      var material = new THREE.MeshBasicMaterial( { color: 0xffffa8 } );
      var shape = new THREE.Shape();
      shape.moveTo(  0, 100 );
      shape.lineTo(  100, -50 );
      shape.lineTo( -100, -50 );
      shape.lineTo(  0, 100 );
      var geometry = new THREE.ShapeGeometry( shape );
      scene.add( new THREE.Mesh( geometry, material ) );

      // 描画
      renderer.render( scene, camera );
    } );
  </script>
</head>

<body>
  <canvas id="canvas" style="border:solid 1px; margin: 30px;"></canvas>
</body>

実行結果

WebGL

<html>

<head>
<title>WebGLHelloAPI</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="WebGLHelloAPI.js">
</script>


</head>

<body onload="main()">
    <canvas id="helloapicanvas" style="border: none;" width="800" height="600"></canvas>
</body>

</html>

var gl;

function testGLError(functionLastCalled) {
    /*
        gl.getError returns the last error that occurred using WebGL, not necessarily the status of the last called function. The user
        has to check after every single WebGL call or at least once every frame. Usually this would be for debugging only, but for this
        example is is enabled always.
    */

    var lastError = gl.getError();

    if (lastError != gl.NO_ERROR) {
        alert(functionLastCalled + " failed (" + lastError + ")");
        return false;
    }

    return true;
}

function initialiseGL(canvas) {
    try {
        // Try to grab the standard context. If it fails, fallback to experimental
        gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        gl.viewport(0, 0, canvas.width, canvas.height);
    }
    catch (e) {
    }

    if (!gl) {
        alert("Unable to initialise WebGL. Your browser may not support it");
        return false;
    }

    return true;
}

var shaderProgram;

function initialiseBuffer() {
    /*  Concept: Vertices
        When rendering a polygon or model to screen, WebGL has to be told where to draw the object, and more fundamentally what shape 
        it is. The data used to do this is referred to as vertices, points in 3D space which are usually collected into groups of three 
        to render as triangles. Fundamentally, any advanced 3D shape in WebGL is constructed from a series of these vertices - each 
        vertex representing one corner of a polygon.
    */
    /*  Concept: Buffer Objects
        To operate on any data, WebGL first needs to be able to access it. The GPU maintains a separate pool of memory it uses independent
        of the CPU. Whilst on many embedded systems these are in the same physical memory, the distinction exists so that they can use and
        allocate memory without having to worry about synchronising with any other processors in the device.
        To this end, data needs to be uploaded into buffers, which are essentially a reserved bit of memory for the GPU to use. By creating
        a buffer and giving it some data we can tell the GPU how to render a triangle.
    */

    var vertexData = [
        -0.4, -0.4, 0.0, // Bottom left
         0.4, -0.4, 0.0, // Bottom right
         0.0, 0.4, 0.0  // Top middle
    ];

    // Generate a buffer object
    gl.vertexBuffer = gl.createBuffer();

    // Bind buffer as a vertex buffer so we can fill it with data
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);

    /*
        Set the buffer's size, data and usage
        Note the last argument - gl.STATIC_DRAW. This tells the driver that we intend to read from the buffer on the GPU, and don't intend
        to modify the data until we've done with it.
    */
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);

    return testGLError("initialiseBuffers");
}

function initialiseShaders() {
    /*  Concept: Shaders
        WebGL uses what are known as shaders to determine how to draw objects on the screen. Instead of the fixed function
        pipeline in early OpenGL or OpenGL ES 1.x, users can now programmatically define how vertices are transformed on screen, what
        data is used where, and how each pixel on the screen is coloured.
        These shaders are written in GL Shading Language ES: http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf
        which is usually abbreviated to simply "GLSL ES".
        Each shader is compiled on-device and then linked into a shader program, which combines a vertex and fragment shader into a form 
        that the OpenGL ES implementation can execute.
    */

    /*  Concept: Fragment Shaders
        In a final buffer of image data, each individual point is referred to as a pixel. Fragment shaders are the part of the pipeline
        which determine how these final pixels are coloured when drawn to the framebuffer. When data is passed through here, the positions
        of these pixels is already set, all that's left to do is set the final colour based on any defined inputs.
        The reason these are called "fragment" shaders instead of "pixel" shaders is due to a small technical difference between the two
        concepts. When you colour a fragment, it may not be the final colour which ends up on screen. This is particularly true when 
        performing blending, where multiple fragments can contribute to the final pixel colour.
    */

    var fragmentShaderSource = '\
            void main(void) \
            { \
                gl_FragColor = vec4(1.0, 1.0, 0.66, 1.0); \
            }';

    // Create the fragment shader object
    gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);

    // Load the source code into it
    gl.shaderSource(gl.fragShader, fragmentShaderSource);

    // Compile the source code
    gl.compileShader(gl.fragShader);

    // Check if compilation succeeded
    if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
        // It didn't. Display the info log as to why
        alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
        return false;
    }

    /*  Concept: Vertex Shaders
        Vertex shaders primarily exist to allow a developer to express how to orient vertices in 3D space, through transformations like 
        Scaling, Translation or Rotation. Using the same basic layout and structure as a fragment shader, these take in vertex data and 
        output a fully transformed set of positions. Other inputs are also able to be used such as normals or texture coordinates, and can 
        also be transformed and output alongside the position data.
    */

    // Vertex shader code
    var vertexShaderSource = '\
            attribute highp vec4 myVertex; \
            uniform mediump mat4 transformationMatrix; \
            void main(void)  \
            { \
                gl_Position = transformationMatrix * myVertex; \
            }';

    // Create the vertex shader object
    gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);

    // Load the source code into it
    gl.shaderSource(gl.vertexShader, vertexShaderSource);

    // Compile the source code
    gl.compileShader(gl.vertexShader);

    // Check if compilation succeeded
    if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
        // It didn't. Display the info log as to why
        alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
        return false;
    }

    // Create the shader program
    gl.programObject = gl.createProgram();

    // Attach the fragment and vertex shaders to it
    gl.attachShader(gl.programObject, gl.fragShader);
    gl.attachShader(gl.programObject, gl.vertexShader);

    // Bind the custom vertex attribute "myVertex" to location 0
    gl.bindAttribLocation(gl.programObject, 0, "myVertex");

    // Link the program
    gl.linkProgram(gl.programObject);

    // Check if linking succeeded in a similar way we checked for compilation errors
    if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
        alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
        return false;
    }

    /*  Use the Program
        Calling gl.useProgram tells WebGL that the application intends to use this program for rendering. Now that it's installed into
        the current state, any further gl.draw* calls will use the shaders contained within it to process scene data. Only one program can
        be active at once, so in a multi-program application this function would be called in the render loop. Since this application only
        uses one program it can be installed in the current state and left there.
    */
    gl.useProgram(gl.programObject);

    return testGLError("initialiseShaders");
}

function renderScene() {
    /*
        Set the clear colour
        At the start of a frame, generally you clear the image to tell WebGL that you're done with whatever was there before and want to
        draw a new frame. In order to do that gowever, WebGL needs to know what colour to set in the image's place. gl.clearColor
        sets this value as 4 floating point values between 0.0 and 1.0, as the Red, Green, Blue and Alpha channels. Each value represents
        the intensity of the particular channel, with all 0.0 being transparent black, and all 1.0 being opaque white. Subsequent calls to
        gl.clear with the colour bit will clear the framebuffer to this vlaue.
        The functions gl.clearDepth and gl.clearStencil allow an application to do the same with depth and stencil values respectively.
    */
    gl.clearColor(0.6, 0.8, 1.0, 1.0);

    /*
        Clear the colour buffer
        gl.clear is used here with the colour buffer to clear the colour. It can also be used to clear the depth or stencil buffer using
        gl.DEPTH_BUFFER_BIT or gl.STENCIL_BUFFER_BIT, respectively.
    */

    gl.clear(gl.COLOR_BUFFER_BIT);

    // Get the location of the transformation matrix in the shader using its name
    var matrixLocation = gl.getUniformLocation(gl.programObject, "transformationMatrix");

    // Matrix used to specify the orientation of the triangle on screen
    var transformationMatrix = [
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.0, 0.0, 0.0, 1.0
    ];

    // Pass the identity transformation matrix to the shader using its location
    gl.uniformMatrix4fv(matrixLocation, gl.FALSE, transformationMatrix);

    if (!testGLError("gl.uniformMatrix4fv")) {
        return false;
    }

    // Enable the user-defined vertex array
    gl.enableVertexAttribArray(0);

    // Set the vertex data to this attribute index, with the number of floats in each position
    gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, 0);

    if (!testGLError("gl.vertexAttribPointer")) {
        return false;
    }

    /*
        Draw the triangle
        gl.drawArrays is a draw call, and executes the shader program using the vertices and other state set by the user. Draw calls are the
        functions which tell WebGL when to actually draw something to the framebuffer gived the current state.
        gl.drawArrays causes the vertices to be submitted sequentially from the position given by the "first" argument until it has processed
        "count" vertices. Other draw calls exist, notably gl.drawElements which also accepts index data to allow the user to specify that 
        some vertices are accessed multiple times, without copying the vertex multiple times.
        Others include versions of the above that allow the user to draw the same ovhect multiple times with slightly different data, and
        a version of gl.drawElements which allows a user to restrict the actuial indices accessed.
    */
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    if (!testGLError("gl.drawArrays")) {
        return false;
    }

    return true;
}

function main() {
    var canvas = document.getElementById("helloapicanvas");

    if (!initialiseGL(canvas)) {
        return;
    }

    if (!initialiseBuffer()) {
        return;
    }

    if (!initialiseShaders()) {
        return;
    }

    // Render loop
    requestAnimFrame = (function () {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000, 60);
            };
    })();

    (function renderLoop() {
        if (renderScene()) {
            // Everything was successful, request that we redraw our scene again in the future
            requestAnimFrame(renderLoop);
        }
    })();
}

実行結果

OpenGL ES

コード

/*******************************************************************************************************************************************

 @File         OGLES2HelloAPI_LinuxX11.cpp

 @Title        OpenGL ES 2.0 HelloAPI Tutorial

 @Version      

 @Copyright    Copyright (c) Imagination Technologies Limited.

 @Platform     

 @Description  Basic Tutorial that shows step-by-step how to initialize OpenGL ES 2.0, use it for drawing a triangle and terminate it.
               Entry Point: main

*******************************************************************************************************************************************/
/*******************************************************************************************************************************************
 Include Files
*******************************************************************************************************************************************/
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include "X11/Xlib.h"
#include "X11/Xutil.h"

#include <EGL/egl.h>
#include <GLES2/gl2.h>

/*******************************************************************************************************************************************
 Defines
*******************************************************************************************************************************************/
// Name of the application
#define APPLICATION_NAME "HelloAPI"

// Width and height of the window
#define WINDOW_WIDTH    800
#define WINDOW_HEIGHT   600

// Index to bind the attributes to vertex shaders
#define VERTEX_ARRAY    0

/*******************************************************************************************************************************************
 Helper Functions
*******************************************************************************************************************************************/

/*!*****************************************************************************************************************************************
 @Function      TestEGLError
 @Input         functionLastCalled          Function which triggered the error
 @Return        True if no EGL error was detected
 @Description   Tests for an EGL error and prints it.
*******************************************************************************************************************************************/
bool TestEGLError(const char* functionLastCalled)
{
    /*  eglGetError returns the last error that occurred using EGL, not necessarily the status of the last called function. The user has to
        check after every single EGL call or at least once every frame. Usually this would be for debugging only, but for this example
        it is enabled always.
    */
    EGLint lastError = eglGetError();
    if (lastError != EGL_SUCCESS)
    {
        printf("%s failed (%x).\n", functionLastCalled, lastError);
        return false;
    }

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      HandleX11Errors
 @Input         nativeDisplay               Handle to the display
 @Input         error                       The error event to handle
 @Return        Result code to send to the X window system
 @Description   Processes event messages for the main window
*******************************************************************************************************************************************/
int HandleX11Errors(Display *nativeDisplay, XErrorEvent *error)
{
    // Get the X Error
    char errorStringBuffer[256];
    XGetErrorText(nativeDisplay, error->error_code, errorStringBuffer, 256);

    // Print the error
    printf("%s", errorStringBuffer);

    // Exit the application
    exit(-1);

    return 0;
}

/*!*****************************************************************************************************************************************
 @Function      TestGLError
 @Input         functionLastCalled          Function which triggered the error
 @Return        True if no GL error was detected
 @Description   Tests for an GL error and prints it in a message box.
*******************************************************************************************************************************************/
bool TestGLError(const char* functionLastCalled)
{
    /*  glGetError returns the last error that occurred using OpenGL ES, not necessarily the status of the last called function. The user 
        has to check after every single OpenGL ES call or at least once every frame. Usually this would be for debugging only, but for this
        example it is enabled always
    */
    GLenum lastError = glGetError();
    if (lastError != GL_NO_ERROR)
    {
        printf("%s failed (%x).\n", functionLastCalled, lastError);
        return false;
    }

    return true;
}

/*******************************************************************************************************************************************
 Application Functions
*******************************************************************************************************************************************/

/*!*****************************************************************************************************************************************
 @Function      CreateNativeDisplay
 @Output        nativeDisplay               Native display to create
 @Return        Whether the function succeeded or not.
 @Description   Creates a native isplay for the application to render into.
*******************************************************************************************************************************************/
bool CreateNativeDisplay(Display** nativeDisplay) 
{
    // Check for a valid display
    if (!nativeDisplay)
    {
        return false;
    }

    // Open the display
    *nativeDisplay = XOpenDisplay( 0 );
    if (!*nativeDisplay)
    {
        printf("Error: Unable to open X display\n");
        return false;
    }

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      CreateNativeWindow
 @Input         nativeDisplay               Native display used by the application
 @Output        nativeWindow                Native window type to create
 @Return        Whether the function succeeded or not.
 @Description   Creates a native window for the application to render into.
*******************************************************************************************************************************************/
bool CreateNativeWindow(Display* nativeDisplay, Window* nativeWindow) 
{
    // Get the default screen for the display
    int defaultScreen = XDefaultScreen(nativeDisplay);

    // Get the default depth of the display
    int defaultDepth = DefaultDepth(nativeDisplay, defaultScreen);

    // Select a visual info
    XVisualInfo* visualInfo = new XVisualInfo;
    XMatchVisualInfo( nativeDisplay, defaultScreen, defaultDepth, TrueColor, visualInfo);
    if (!visualInfo)
    {
        printf("Error: Unable to acquire visual\n");
        return false;
    }

    // Get the root window for the display and default screen
    Window rootWindow = RootWindow(nativeDisplay, defaultScreen);

    // Create a colour map from the display, root window and visual info
    Colormap colourMap = XCreateColormap(nativeDisplay, rootWindow, visualInfo->visual, AllocNone);

    // Now setup the final window by specifying some attributes
    XSetWindowAttributes windowAttributes;

    // Set the colour map that was just created
    windowAttributes.colormap = colourMap;

    // Set events that will be handled by the app, add to these for other events.
    windowAttributes.event_mask = StructureNotifyMask | ExposureMask | ButtonPressMask;

    // Create the window
    *nativeWindow =XCreateWindow(nativeDisplay,               // The display used to create the window
                                 rootWindow,                   // The parent (root) window - the desktop
                                 0,                            // The horizontal (x) origin of the window
                                 0,                            // The vertical (y) origin of the window
                                 WINDOW_WIDTH,                 // The width of the window
                                 WINDOW_HEIGHT,                // The height of the window
                                 0,                            // Border size - set it to zero
                                 visualInfo->depth,            // Depth from the visual info
                                 InputOutput,                  // Window type - this specifies InputOutput.
                                 visualInfo->visual,           // Visual to use
                                 CWEventMask | CWColormap,     // Mask specifying these have been defined in the window attributes
                                 &windowAttributes);           // Pointer to the window attribute structure

    // Make the window viewable by mapping it to the display
    XMapWindow(nativeDisplay, *nativeWindow);

    // Set the window title
    XStoreName(nativeDisplay, *nativeWindow, APPLICATION_NAME);

    // Setup the window manager protocols to handle window deletion events
    Atom windowManagerDelete = XInternAtom(nativeDisplay, "WM_DELETE_WINDOW", True);
    XSetWMProtocols(nativeDisplay, *nativeWindow, &windowManagerDelete , 1);

    // Delete the visual info
    delete visualInfo;

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      CreateEGLDisplay
 @Input         nativeDisplay               The native display used by the application
 @Output        eglDisplay                  EGLDisplay created from nativeDisplay
 @Return        Whether the function succeeded or not.
 @Description   Creates an EGLDisplay from a native native display, and initialises it.
*******************************************************************************************************************************************/
bool CreateEGLDisplay( Display* nativeDisplay, EGLDisplay &eglDisplay ) 
{
    /*  Get an EGL display.
        EGL uses the concept of a "display" which in most environments corresponds to a single physical screen. After creating a native
        display for a given windowing system, EGL can use this handle to get a corresponding EGLDisplay handle to it for use in rendering.
        Should this fail, EGL is usually able to provide access to a default display.
    */
    eglDisplay = eglGetDisplay((EGLNativeDisplayType)nativeDisplay);
    // If a display couldn't be obtained, return an error.
    if (eglDisplay == EGL_NO_DISPLAY)
    {
        printf("Failed to get an EGLDisplay");
        return false;
    }

    /*  Initialize EGL.
        EGL has to be initialized with the display obtained in the previous step. All EGL functions other than eglGetDisplay 
        and eglGetError need an initialised EGLDisplay. 
        If an application is not interested in the EGL version number it can just pass NULL for the second and third parameters, but they 
        are queried here for illustration purposes.
    */
    EGLint eglMajorVersion, eglMinorVersion;
    if (!eglInitialize(eglDisplay, &eglMajorVersion, &eglMinorVersion))
    {
        printf("Failed to initialise the EGLDisplay");
        return false;
    }

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      ChooseEGLConfig
 @Input         eglDisplay                  The EGLDisplay used by the application
 @Output        eglConfig                   The EGLConfig chosen by the function
 @Return        Whether the function succeeded or not.
 @Description   Chooses an appropriate EGLConfig and return it.
*******************************************************************************************************************************************/
bool ChooseEGLConfig( EGLDisplay eglDisplay, EGLConfig& eglConfig ) 
{
    /*  Specify the required configuration attributes.
        An EGL "configuration" describes the capabilities an application requires and the type of surfaces that can be used for drawing.
        Each implementation exposes a number of different configurations, and an application needs to describe to EGL what capabilities it
        requires so that an appropriate one can be chosen. The first step in doing this is to create an attribute list, which is an array
        of key/value pairs which describe particular capabilities requested. In this application nothing special is required so we can query
        the minimum of needing it to render to a window, and being OpenGL ES 2.0 capable.
    */
    const EGLint configurationAttributes[] =
    {
        EGL_SURFACE_TYPE,       EGL_WINDOW_BIT,
        EGL_RENDERABLE_TYPE,    EGL_OPENGL_ES2_BIT,
        EGL_NONE
    };

    /*  Find a suitable EGLConfig
        eglChooseConfig is provided by EGL to provide an easy way to select an appropriate configuration. It takes in the capabilities
        specified in the attribute list, and returns a list of available configurations that match or exceed the capabilities requested.
        Details of all the possible attributes and how they are selected for by this function are available in the EGL reference pages here:
        http://www.khronos.org/registry/egl/sdk/docs/man/xhtml/eglChooseConfig.html
        It is also possible to simply get the entire list of configurations and use a custom algorithm to choose a suitable one, as many
        advanced applications choose to do. For this application however, taking the first EGLConfig that the function returns suits
        its needs perfectly, so we limit it to returning a single EGLConfig.
    */
    EGLint configsReturned;
    if (!eglChooseConfig(eglDisplay, configurationAttributes, &eglConfig, 1, &configsReturned) || (configsReturned != 1))
    {
        printf("Failed to choose a suitable config.");
        return false;
    }

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      CreateEGLSurface
 @Input         nativeWindow                A native window that's been created
 @Input         eglDisplay                  The EGLDisplay used by the application
 @Input         eglConfig                   An EGLConfig chosen by the application
 @Output        eglSurface                  The EGLSurface created from the native window.
 @Return        Whether the function succeeds or not.
 @Description   Creates an EGLSurface from a native window
*******************************************************************************************************************************************/
bool CreateEGLSurface( Window nativeWindow, EGLDisplay eglDisplay, EGLConfig eglConfig, EGLSurface& eglSurface) 
{
    /*  Create an EGLSurface for rendering.
        Using a native window created earlier and a suitable eglConfig, a surface is created that can be used to render OpenGL ES calls to.
        There are three main surface types in EGL, which can all be used in the same way once created but work slightly differently:
         - Window Surfaces  - These are created from a native window and are drawn to the screen.
         - Pixmap Surfaces  - These are created from a native windowing system as well, but are offscreen and are not displayed to the user.
         - PBuffer Surfaces - These are created directly within EGL, and like Pixmap Surfaces are offscreen and thus not displayed.
        The offscreen surfaces are useful for non-rendering contexts and in certain other scenarios, but for most applications the main
        surface used will be a window surface as performed below.
    */
    eglSurface = eglCreateWindowSurface(eglDisplay, eglConfig, (EGLNativeWindowType)nativeWindow, NULL);
    if (!TestEGLError("eglCreateWindowSurface"))
    {
        return false;
    }

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      SetupEGLContext
 @Input         eglDisplay                  The EGLDisplay used by the application
 @Input         eglConfig                   An EGLConfig chosen by the application
 @Input         eglSurface                  The EGLSurface created from the native window.
 @Output        eglContext                  The EGLContext created by this function
 @Input         nativeWindow                A native window, used to display error messages
 @Return        Whether the function succeeds or not.
 @Description   Sets up the EGLContext, creating it and then installing it to the current thread.
*******************************************************************************************************************************************/
bool SetupEGLContext( EGLDisplay eglDisplay, EGLConfig eglConfig, EGLSurface eglSurface, EGLContext& eglContext ) 
{
    /*  Make OpenGL ES the current API.
     EGL needs a way to know that any subsequent EGL calls are going to be affecting OpenGL ES,
     rather than any other API (such as OpenVG).
     */
    eglBindAPI(EGL_OPENGL_ES_API);
    if (!TestEGLError("eglBindAPI"))
    {
        return false;
    }

    /*  Create a context.
        EGL has to create what is known as a context for OpenGL ES. The concept of a context is OpenGL ES's way of encapsulating any
        resources and state. What appear to be "global" functions in OpenGL actually only operate on the current context. A context
        is required for any operations in OpenGL ES.
        Similar to an EGLConfig, a context takes in a list of attributes specifying some of its capabilities. However in most cases this
        is limited to just requiring the version of the OpenGL ES context required - In this case, OpenGL ES 2.0.
    */
    EGLint contextAttributes[] = 
    {
        EGL_CONTEXT_CLIENT_VERSION, 2, 
        EGL_NONE
    };

    // Create the context with the context attributes supplied
    eglContext = eglCreateContext(eglDisplay, eglConfig, NULL, contextAttributes);
    if (!TestEGLError("eglCreateContext"))
    {
        return false;
    }

    /*  Bind the context to the current thread.
        Due to the way OpenGL uses global functions, contexts need to be made current so that any function call can operate on the correct
        context. Specifically, make current will bind the context to the thread it's called from, and unbind it from any others. To use
        multiple contexts at the same time, users should use multiple threads and synchronise between them.
    */
    eglMakeCurrent(eglDisplay, eglSurface, eglSurface, eglContext);
    if (!TestEGLError("eglMakeCurrent"))
    {
        return false;
    }

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      InitialiseBuffer
 @Output        vertexBuffer                Handle to a vertex buffer object
 @Return        Whether the function succeeds or not.
 @Description   Initialises shaders, buffers and other state required to begin rendering with OpenGL ES
*******************************************************************************************************************************************/
bool InitialiseBuffer(GLuint &vertexBuffer) 
{
    /*  Concept: Vertices
        When rendering a polygon or model to screen, OpenGL ES has to be told where to draw the object, and more fundamentally what shape 
        it is. The data used to do this is referred to as vertices, points in 3D space which are usually collected into groups of three 
        to render as triangles. Fundamentally, any advanced 3D shape in OpenGL ES is constructed from a series of these vertices - each 
        vertex representing one corner of a polygon.
    */

    /*  Concept: Buffer Objects
        To operate on any data, OpenGL first needs to be able to access it. The GPU maintains a separate pool of memory it uses independent
        of the CPU. Whilst on many embedded systems these are in the same physical memory, the distinction exists so that they can use and
        allocate memory without having to worry about synchronising with any other processors in the device.
        To this end, data needs to be uploaded into buffers, which are essentially a reserved bit of memory for the GPU to use. By creating
        a buffer and giving it some data we can tell the GPU how to render a triangle.
    */

    // Vertex data containing the positions of each point of the triangle
    GLfloat vertexData[] = {-0.4f,-0.4f, 0.0f,  // Bottom Left
                             0.4f,-0.4f, 0.0f,  // Bottom Right
                             0.0f, 0.4f, 0.0f}; // Top Middle

    // Generate a buffer object
    glGenBuffers(1, &vertexBuffer);

    // Bind buffer as an vertex buffer so we can fill it with data
    glBindBuffer(GL_ARRAY_BUFFER, vertexBuffer);

    /*  Set the buffer's size, data and usage
        Note the last argument - GL_STATIC_DRAW. This tells the driver that we intend to read from the buffer on the GPU, and don't intend
        to modify the data until we're done with it.        
    */
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);

    if (!TestGLError("glBufferData"))
    {
        return false;
    }

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      InitialiseShaders
 @Output        fragmentShader              Handle to a fragment shader
 @Output        vertexShader                Handle to a vertex shader
 @Output        shaderProgram               Handle to a shader program containing the fragment and vertex shader
 @Return        Whether the function succeeds or not.
 @Description   Initialises shaders, buffers and other state required to begin rendering with OpenGL ES
*******************************************************************************************************************************************/
bool InitialiseShaders( GLuint &fragmentShader, GLuint &vertexShader, GLuint &shaderProgram) 
{
    /*  Concept: Shaders
        OpenGL ES 2.0 uses what are known as shaders to determine how to draw objects on the screen. Instead of the fixed function
        pipeline in early OpenGL or OpenGL ES 1.x, users can now programmatically define how vertices are transformed on screen, what
        data is used where, and how each pixel on the screen is coloured.
        These shaders are written in GL Shading Language ES: http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf
        which is usually abbreviated to simply "GLSL ES".
        Each shader is compiled on-device and then linked into a shader program, which combines a vertex and fragment shader into a form 
        that the OpenGL ES implementation can execute.
    */

    /*  Concept: Fragment Shaders
        In a final buffer of image data, each individual point is referred to as a pixel. Fragment shaders are the part of the pipeline
        which determine how these final pixels are coloured when drawn to the framebuffer. When data is passed through here, the positions
        of these pixels is already set, all that's left to do is set the final colour based on any defined inputs.
        The reason these are called "fragment" shaders instead of "pixel" shaders is due to a small technical difference between the two
        concepts. When you colour a fragment, it may not be the final colour which ends up on screen. This is particularly true when 
        performing blending, where multiple fragments can contribute to the final pixel colour.
    */
    const char* const fragmentShaderSource = "\
                                             void main (void)\
                                             {\
                                             gl_FragColor = vec4(1.0, 1.0, 0.66 ,1.0);\
                                             }";

    // Create a fragment shader object
    fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);

    // Load the source code into it
    glShaderSource(fragmentShader, 1, (const char**)&fragmentShaderSource, NULL);

    // Compile the source code
    glCompileShader(fragmentShader);

    // Check that the shader compiled
    GLint isShaderCompiled;
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &isShaderCompiled);
    if (!isShaderCompiled)
    {
        // If an error happened, first retrieve the length of the log message
        int infoLogLength, charactersWritten;
        glGetShaderiv(fragmentShader, GL_INFO_LOG_LENGTH, &infoLogLength);

        // Allocate enough space for the message and retrieve it
        char* infoLog = new char[infoLogLength];
        glGetShaderInfoLog(fragmentShader, infoLogLength, &charactersWritten, infoLog);

        // Display the error in a dialog box
        infoLogLength>1 ? printf("%s", infoLog) : printf("Failed to compile fragment shader.");

        delete[] infoLog;
        return false;
    }

    /*  Concept: Vertex Shaders
        Vertex shaders primarily exist to allow a developer to express how to orient vertices in 3D space, through transformations like 
        Scaling, Translation or Rotation. Using the same basic layout and structure as a fragment shader, these take in vertex data and 
        output a fully transformed set of positions. Other inputs are also able to be used such as normals or texture coordinates, and can 
        also be transformed and output alongside the position data.
    */
    // Vertex shader code
    const char* const vertexShaderSource = "\
                                           attribute highp vec4 myVertex;\
                                           uniform mediump mat4 transformationMatrix;\
                                           void main(void)\
                                           {\
                                           gl_Position = transformationMatrix * myVertex;\
                                           }";

    // Create a vertex shader object
    vertexShader = glCreateShader(GL_VERTEX_SHADER);

    // Load the source code into the shader
    glShaderSource(vertexShader, 1, (const char**)&vertexShaderSource, NULL);

    // Compile the shader
    glCompileShader(vertexShader);

    // Check the shader has compiled
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &isShaderCompiled);
    if (!isShaderCompiled)
    {
        // If an error happened, first retrieve the length of the log message
        int infoLogLength, charactersWritten;
        glGetShaderiv(vertexShader, GL_INFO_LOG_LENGTH, &infoLogLength);

        // Allocate enough space for the message and retrieve it
        char* infoLog = new char[infoLogLength];
        glGetShaderInfoLog(vertexShader, infoLogLength, &charactersWritten, infoLog);

        // Display the error in a dialog box
        infoLogLength>1 ? printf("%s", infoLog) : printf("Failed to compile vertex shader.");

        delete[] infoLog;
        return false;
    }

    // Create the shader program
    shaderProgram = glCreateProgram();

    // Attach the fragment and vertex shaders to it
    glAttachShader(shaderProgram, fragmentShader);
    glAttachShader(shaderProgram, vertexShader);

    // Bind the vertex attribute "myVertex" to location VERTEX_ARRAY (0)
    glBindAttribLocation(shaderProgram, VERTEX_ARRAY, "myVertex");

    // Link the program
    glLinkProgram(shaderProgram);

    // Check if linking succeeded in the same way we checked for compilation success
    GLint isLinked;
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &isLinked);
    if (!isLinked)
    {
        // If an error happened, first retrieve the length of the log message
        int infoLogLength, charactersWritten;
        glGetProgramiv(shaderProgram, GL_INFO_LOG_LENGTH, &infoLogLength);

        // Allocate enough space for the message and retrieve it
        char* infoLog = new char[infoLogLength];
        glGetProgramInfoLog(shaderProgram, infoLogLength, &charactersWritten, infoLog);

        // Display the error in a dialog box
        infoLogLength>1 ? printf("%s", infoLog) : printf("Failed to link shader program.");

        delete[] infoLog;
        return false;
    }

    /*  Use the Program
        Calling glUseProgram tells OpenGL ES that the application intends to use this program for rendering. Now that it's installed into
        the current state, any further glDraw* calls will use the shaders contained within it to process scene data. Only one program can
        be active at once, so in a multi-program application this function would be called in the render loop. Since this application only
        uses one program it can be installed in the current state and left there.
    */
    glUseProgram(shaderProgram);

    if (!TestGLError("glUseProgram"))
    {
        return false;
    }

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      RenderScene
 @Input         shaderProgram               The shader program used to render the scene
 @Input         eglDisplay                  The EGLDisplay used by the application
 @Input         eglSurface                  The EGLSurface created from the native window.
 @Input         nativeDisplay               The native display used by the application
 @Return        Whether the function succeeds or not.
 @Description   Renders the scene to the framebuffer. Usually called within a loop.
*******************************************************************************************************************************************/
bool RenderScene( GLuint shaderProgram, EGLDisplay eglDisplay, EGLSurface eglSurface, Display* nativeDisplay ) 
{
    /*  Set the clear color
        At the start of a frame, generally you clear the image to tell OpenGL ES that you're done with whatever was there before and want to
        draw a new frame. In order to do that however, OpenGL ES needs to know what colour to set in the image's place. glClearColor
        sets this value as 4 floating point values between 0.0 and 1.0, as the Red, Green, Blue and Alpha channels. Each value represents
        the intensity of the particular channel, with all 0.0 being transparent black, and all 1.0 being opaque white. Subsequent calls to
        glClear with the colour bit will clear the frame buffer to this value.
        The functions glClearDepth and glClearStencil allow an application to do the same with depth and stencil values respectively.
    */
    glClearColor(0.6f, 0.8f, 1.0f, 1.0f);

    /*  Clears the color buffer.
        glClear is used here with the Colour Buffer to clear the colour. It can also be used to clear the depth or stencil buffer using 
        GL_DEPTH_BUFFER_BIT or GL_STENCIL_BUFFER_BIT, respectively.
    */
    glClear(GL_COLOR_BUFFER_BIT);

    // Get the location of the transformation matrix in the shader using its name
    int matrixLocation = glGetUniformLocation(shaderProgram, "transformationMatrix");

    // Matrix used to specify the orientation of the triangle on screen.
    const float transformationMatrix[] =
    {
        1.0f,0.0f,0.0f,0.0f,
        0.0f,1.0f,0.0f,0.0f,
        0.0f,0.0f,1.0f,0.0f,
        0.0f,0.0f,0.0f,1.0f
    };

    // Pass the transformationMatrix to the shader using its location
    glUniformMatrix4fv( matrixLocation, 1, GL_FALSE, transformationMatrix);
    if (!TestGLError("glUniformMatrix4fv"))
    {
        return false;
    }

    // Enable the user-defined vertex array
    glEnableVertexAttribArray(VERTEX_ARRAY);

    // Sets the vertex data to this attribute index, with the number of floats in each position
    glVertexAttribPointer(VERTEX_ARRAY, 3, GL_FLOAT, GL_FALSE, 0, 0);
    if (!TestGLError("glVertexAttribPointer"))
    {
        return false;
    }

    /*  Draw the triangle
        glDrawArrays is a draw call, and executes the shader program using the vertices and other state set by the user. Draw calls are the
        functions which tell OpenGL ES when to actually draw something to the framebuffer given the current state.
        glDrawArrays causes the vertices to be submitted sequentially from the position given by the "first" argument until it has processed
        "count" vertices. Other draw calls exist, notably glDrawElements which also accepts index data to allow the user to specify that
        some vertices are accessed multiple times, without copying the vertex multiple times.
        Others include versions of the above that allow the user to draw the same object multiple times with slightly different data, and
        a version of glDrawElements which allows a user to restrict the actual indices accessed.
    */
    glDrawArrays(GL_TRIANGLES, 0, 3);
    if (!TestGLError("glDrawArrays"))
    {
        return false;
    }

    /*  Present the display data to the screen.
        When rendering to a Window surface, OpenGL ES is double buffered. This means that OpenGL ES renders directly to one frame buffer, 
        known as the back buffer, whilst the display reads from another - the front buffer. eglSwapBuffers signals to the windowing system
        that OpenGL ES 2.0 has finished rendering a scene, and that the display should now draw to the screen from the new data. At the same
        time, the front buffer is made available for OpenGL ES 2.0 to start rendering to. In effect, this call swaps the front and back 
        buffers.
    */
    if (!eglSwapBuffers(eglDisplay, eglSurface) )
    {
        TestEGLError("eglSwapBuffers");
        return false;
    }

    // Check for messages from the windowing system.
    int numberOfMessages = XPending(nativeDisplay);
    for( int i = 0; i < numberOfMessages; i++ )
    {
        XEvent event;
        XNextEvent(nativeDisplay, &event);

        switch( event.type )
        {
            // Exit on window close
        case ClientMessage:
            // Exit on mouse click
        case ButtonPress:
        case DestroyNotify:
            return false;
        default:
            break;
        }
    }

    return true;
}

/*!*****************************************************************************************************************************************
 @Function      DeInitialiseGLState
 @Input         fragmentShader              Handle to a fragment shader
 @Input         vertexShader                Handle to a vertex shader
 @Input         shaderProgram               Handle to a shader program containing the fragment and vertex shader
 @Input         vertexBuffer                Handle to a vertex buffer object
 @Description   Releases the resources created by "InitialiseGLState"
*******************************************************************************************************************************************/
void DeInitialiseGLState( GLuint fragmentShader, GLuint vertexShader, GLuint shaderProgram, GLuint vertexBuffer ) 
{
    // Frees the OpenGL handles for the program and the 2 shaders
    glDeleteShader(fragmentShader);
    glDeleteShader(vertexShader);
    glDeleteProgram(shaderProgram);

    // Delete the VBO as it is no longer needed
    glDeleteBuffers(1, &vertexBuffer);
}

/*!*****************************************************************************************************************************************
 @Function      ReleaseEGLState
 @Input         eglDisplay                   The EGLDisplay used by the application
 @Description   Releases all resources allocated by EGL
*******************************************************************************************************************************************/
void ReleaseEGLState(EGLDisplay eglDisplay) 
{
    if(eglDisplay != NULL)
    {
        // To release the resources in the context, first the context has to be released from its binding with the current thread.
        eglMakeCurrent(eglDisplay, EGL_NO_SURFACE, EGL_NO_SURFACE, EGL_NO_CONTEXT);

        // Terminate the display, and any resources associated with it (including the EGLContext)
        eglTerminate(eglDisplay);
    }
}

/*!*****************************************************************************************************************************************
 @Function      ReleaseWindowAndDisplay
 @Input         nativeDisplay               The native display to release
 @Input         nativeWindow                The native window to destroy
 @Description   Releases all resources allocated by the windowing system
*******************************************************************************************************************************************/
void ReleaseNativeResources(Display* nativeDisplay, Window nativeWindow) 
{
    // Destroy the window
    if (nativeWindow)
    {
        XDestroyWindow(nativeDisplay, nativeWindow);
    }

    // Release the display.
    if (nativeDisplay)
    {
        XCloseDisplay(nativeDisplay);
    }
}

/*!*****************************************************************************************************************************************
 @Function      main
 @Input         argc                        Number of arguments passed to the application, ignored.
 @Input         argv           Command line strings passed to the application, ignored.
 @Return        Result code to send to the Operating System
 @Description   Main function of the program, executes other functions.
*******************************************************************************************************************************************/
int main(int /*argc*/, char **/*argv*/)
{
    // X11 variables
    Display* nativeDisplay = NULL;
    Window nativeWindow = 0;

    // EGL variables
    EGLDisplay          eglDisplay = NULL;
    EGLConfig           eglConfig = NULL;
    EGLSurface          eglSurface = NULL;
    EGLContext          eglContext = NULL;

    // Handles for the two shaders used to draw the triangle, and the program handle which combines them.
    GLuint fragmentShader = 0, vertexShader = 0;
    GLuint shaderProgram = 0;

    // A vertex buffer object to store our model data.
    GLuint vertexBuffer = 0;

    // Get access to a native display
    if (!CreateNativeDisplay(&nativeDisplay))
    {
        goto cleanup;
    }

    // Setup the windowing system, create a window
    if (!CreateNativeWindow(nativeDisplay, &nativeWindow))
    {
        goto cleanup;
    }

    // Create and Initialise an EGLDisplay from the native display
    if (!CreateEGLDisplay(nativeDisplay, eglDisplay))
    {
        goto cleanup;
    }

    // Choose an EGLConfig for the application, used when setting up the rendering surface and EGLContext
    if (!ChooseEGLConfig(eglDisplay, eglConfig))
    {
        goto cleanup;
    }

    // Create an EGLSurface for rendering from the native window
    if (!CreateEGLSurface(nativeWindow, eglDisplay, eglConfig, eglSurface))
    {
        goto cleanup;
    }

    // Setup the EGL Context from the other EGL constructs created so far, so that the application is ready to submit OpenGL ES commands
    if (!SetupEGLContext(eglDisplay, eglConfig, eglSurface, eglContext))
    {
        goto cleanup;
    }

    // Initialise the vertex data in the application
    if (!InitialiseBuffer(vertexBuffer))
    {
        goto cleanup;
    }   

    // Initialise the fragment and vertex shaders used in the application
    if (!InitialiseShaders(fragmentShader, vertexShader, shaderProgram))
    {
        goto cleanup;
    }

    // Renders a triangle for 800 frames using the state setup in the previous function
    for (int i = 0; i < 800; ++i)
    {
        if (!RenderScene(shaderProgram, eglDisplay, eglSurface, nativeDisplay))
        {
            break;
        }
    }

    // Release any resources we created in the Initialise functions
    DeInitialiseGLState(fragmentShader, vertexShader, shaderProgram, vertexBuffer);

cleanup:
    // Release the EGL State
    ReleaseEGLState(eglDisplay);

    // Release the windowing system resources
    ReleaseNativeResources(nativeDisplay, nativeWindow);

    // Destroy the eglWindow
    return 0;
}

/*******************************************************************************************************************************************
 End of file (OGLES2HelloAPI_LinuxX11.cpp)
*******************************************************************************************************************************************/

ビルド&実行

$ g++ OGLES2HelloAPI_LinuxX11.cpp -o OGLES2HelloAPI_LinuxX11 -lEGL -lGLESv2 -lX11
$ ./OGLES2HelloAPI_LinuxX11

環境: Ubuntu 12.04

実行結果

比較

三者の比較をします。
私が思う簡単な順は Three.js -> WebGL -> OpenGL ES なので、その逆の

「OpenGL ES と WebGL」
「WebGL と Three.js」

の順に比較します。

OpenGL ES と WebGL

一番大きな違いは、初期化部分（三角形を描く前まで、特に描画領域を作るまで）が WebGL の方が簡単、ということでしょうか。

OpenGL ES: X や EGL を使用し Display を取得したり Window を生成したり、 Surface を生成したり。
WebGL: 基本的には Canvas タグ一個作るのみ

Native であればウインドウは何で作られているか環境依存ですが、 WebGL であれば実行環境は広い意味のブラウザ1つのみなので、Canvas タグで一発、ということですね。

という訳で早くお絵描き出来るようになりました。
その後の GL API の呼び出しはざっくり大きくは変わりません。

WebGL と Three.js

WebGL と Three.js の違いは、使用する GL API の数が Three.js の方が少ない、というところでしょうか。
WebGL で絵を描くときにお決まりのように GL API を複数呼び出し初期化しますが、Three.js はその部分をラップし、お作法部分を肩代わりしてくれます。

WebGL だと、gl.createBuffer で Buffer オブジェクトを作り、gl.bindBuffer し、gl.createShader と gl.shaderSource でシェーダを作り、 gl.compileShader して、 gl.createProgram, gl.attachShader, gl.linkProgram でシェーダプログラムを作り、、、あれ、三角形描きたいだけなのにまだ描き始められない、、、
というところが、Three.js だと「Renderer 作って camera 作って scene 作って、はい三角形かけるよ！」となり簡単です。