WebGL: creating a plane

function initQuadBuffer(){
triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    var vertices = initPlaneArray(1, 1, 10, 10);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 3; // (x, y, z)
    triangleVertexPositionBuffer.numItems = 6*10*10; // number of vertices
}
function initPlaneArray(w, h, rows, cols){
var vertices = new Array();
var dx = w / cols;
var dy = h / rows;
var idx = 0;
var x = 0, y = 0;
for(var k = 0; k < rows; k++){
x = 0;
for(var i = 0; i<cols; i++){

vertices[idx] = x;  vertices[idx+1] = y;  vertices[idx+2] = 0.0;
vertices[idx+3] = x+dx;  vertices[idx+4] = y+dy;  vertices[idx+5] = 0.0;
vertices[idx+6] = x;  vertices[idx+7] = y+dy;  vertices[idx+8] = 0.0;

vertices[idx+9] = x;  vertices[idx+10] = y;  vertices[idx+11] = 0.0;
vertices[idx+12] = x+dx;  vertices[idx+13] = y;  vertices[idx+14] = 0.0;
vertices[idx+15] = x+dx;  vertices[idx+16] = y+dy;  vertices[idx+17] = 0.0;

idx += 18;
x += dx;
}
y += dy;
}

return vertices;
}

Mac OS X: pyglet

installed pyglet
tried a simple app and run, get the following error:

OSError: dlopen(/System/Library/Frameworks/QuickTime.framework/QuickTime, 6): no suitable image found.  Did find:
 /System/Library/Frameworks/QuickTime.framework/QuickTime: mach-o, but wrong architecture
 /System/Library/Frameworks/QuickTime.framework/QuickTime: mach-o, but wrong architecture

found a link: https://groups.google.com/forum/?fromgroups=#!topic/pyglet-users/mvvIo7NotBo

so run the command in Terminal: "defaults write com.apple.versioner.python Prefer-32-Bit -bool yes"
to set python to run in 32 bit mode
and then compile app again. no problem.

WebGL start

Reference: http://learningwebgl.com/blog/?p=28

download js matrix library: https://github.com/toji/gl-matrix/downloads

write the shader source code in a <script></script> tags

<script id="shader-fs" type="x-shader/x-fragment">
  precision mediump float;

  void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
  }
</script>

variables needed in the javascript code

var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;
var gl;
var shaderProgram;
var mvMatrix = mat4.create();
var pMatrix = mat4.create();

function webGLStart() {

    var canvas = document.getElementById("mycanvas");

    initGL(canvas);

    initShaders();

    initBuffers();

    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    gl.enable(gl.DEPTH_TEST);

    drawScene();

}

function initGL(canvas) {

  try {

    gl = canvas.getContext("experimental-webgl");

    gl.viewportWidth = canvas.width;

    gl.viewportHeight = canvas.height;

  } catch(e) {

  }

  if (!gl) {

    alert("Could not initialise WebGL, sorry :-(");

  }

}

function initShaders() {

  var fragmentShader = getShader(gl, "shader-fs");

  var vertexShader = getShader(gl, "shader-vs");

  shaderProgram = gl.createProgram();

  gl.attachShader(shaderProgram, vertexShader);

  gl.attachShader(shaderProgram, fragmentShader);

  gl.linkProgram(shaderProgram);

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

    alert("Could not initialise shaders");

  }

  gl.useProgram(shaderProgram);

  

  shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");

  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

  

  shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");

  shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");

}

function getShader(gl, id) {

    var shaderScript = document.getElementById(id);

    if (!shaderScript) {

        return null;

    }

    var str = "";

    var k = shaderScript.firstChild;

    while (k) {

        if (k.nodeType == 3)

            str += k.textContent;

        k = k.nextSibling;

    }

    var shader;

    if (shaderScript.type == "x-shader/x-fragment") {

        shader = gl.createShader(gl.FRAGMENT_SHADER);

    } else if (shaderScript.type == "x-shader/x-vertex") {

        shader = gl.createShader(gl.VERTEX_SHADER);

    } else {

        return null;

    }

    gl.shaderSource(shader, str);

    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

        alert(gl.getShaderInfoLog(shader));

        return null;

    }

    return shader;

}

function initBuffers() {

    triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    var vertices = [
                    0.0,  1.0,  0.0,
                   -1.0, -1.0,  0.0,
                    1.0, -1.0,  0.0
               ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 3; // number of component to represent a vertex = 3; (x, y, z)
    triangleVertexPositionBuffer.numItems = 3; // number of vertices

}

function drawScene() {

gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [0, 0.0, -5.0]); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

}

function setMatrixUniforms() {

    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);

    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);

}

HTML
<body onload="webGLStart()">
<canvas id="mycanvas" style="border: none;" width="500" height="500"></canvas>
</body>

PyQT - OpenGL - Timer

import sys
from OpenGL.GL import *
from OpenGL.GLU import *
from OpenGL.GLUT import *
from PyQt4.QtGui import *
from PyQt4.QtCore import *
from PyQt4.QtOpenGL import *
from PyQt4 import uic

class MyOGLWidget(QGLWidget):
    def __init__(self, parent=None):      
        QGLWidget.__init__(self, parent)
        self.spin = 0
             

    def initializeGL(self):
        print "init GL"
        glClearColor(0.0, 0.0, 0.0, 0.0);
        glShadeModel (GL_FLAT)
        self.timer = QTimer(self)
        self.timer.timeout.connect(self.spinDisplay)
        self.timer.start(40)
        print self.timer
     

    def resizeGL(self, w, h):
        print "resize: " + str(w ) + " x " +str(h)
        glViewport(0, 0, w, h);
        glMatrixMode(GL_PROJECTION);
        glLoadIdentity();
        glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0);

    def paintGL(self):
        print "paint GL"
        glClear (GL_COLOR_BUFFER_BIT );
        glPushMatrix()
        glRotatef(self.spin, 0, 0, 1)
        glColor3f (1.0, 1.0, 1.0);
        glRectf(-25.0, -25.0, 25.0, 25.0);
        glPopMatrix()
        glFlush();
     
    def spinDisplay(self):
        # print "spin display"
        self.spin = self.spin + 2
        self.spin = self.spin % 360
        # print self.spin
        #glutSwapBuffers()
        self.updateGL()
   
app = QApplication(sys.argv)
window = MyOGLWidget()
window.resize(300, 300)
window.setWindowTitle("Testing OpenGL in PyQT")
window.show()

sys.exit(app.exec_())

PyQt - OpenGL

install PyOpenGL - http://pyopengl.sourceforge.net/
install QT - http://qt-project.org/downloads
install PyQT- http://www.riverbankcomputing.com/software/pyqt/download
for Mac OS X, install PyQTX - http://sourceforge.net/projects/pyqtx/files/

import sys
from OpenGL.GL import *
from OpenGL.GLU import *
from PyQt4.QtGui import *
from PyQt4.QtOpenGL import *
from PyQt4 import uic

class MyOGLWidget(QGLWidget):
    def __init__(self, parent=None):
        QGLWidget.__init__(self, parent)      
 
    def initializeGL(self):
        print "init GL"
        glClearColor(0.0, 0.0, 0.0, 0.0);
        glShadeModel (GL_FLAT)
 
    def resizeGL(self, w, h):
        print "resize: " + str(w ) + " x " +str(h)
        glViewport(0, 0, w, h);
        glMatrixMode(GL_PROJECTION);
        glLoadIdentity();
        glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0);
 
    def paintGL(self):
        print "paint GL"
        glClear (GL_COLOR_BUFFER_BIT );
        glColor3f (1.0, 1.0, 1.0);
        glRectf(-25.0, -25.0, 25.0, 25.0);
        glFlush();
     
app = QApplication(sys.argv)
window = MyOGLWidget()
window.resize(300, 300)
window.setWindowTitle("Testing OpenGL in PyQT")
window.show()

sys.exit(app.exec_())

OpenGL: intro program

first program from red book chapter 1

create a new empty project in VS C++
download the GLUT headers + binaries. http://www.xmission.com/~nate/glut.html

#include <Windows.h>
#include <GL/gl.h>
#include <GL/glu.h>
#include "glut.h"
#include <stdlib.h>

static GLfloat spin = 0.0;

void init(void) 
{
   glClearColor (0.0, 0.0, 0.0, 0.0);
   glShadeModel (GL_FLAT);
}

void display(void)
{
   glClear(GL_COLOR_BUFFER_BIT);
   glPushMatrix();
   glRotatef(spin, 0.0, 0.0, 1.0);
   glColor3f(1.0, 1.0, 1.0);
   glRectf(-25.0, -25.0, 25.0, 25.0);
   glPopMatrix();
   glutSwapBuffers();
}

void spinDisplay(void)
{
   spin = spin + 2.0;
   if (spin > 360.0)
      spin = spin - 360.0;
   glutPostRedisplay();
}

void reshape(int w, int h)
{
   glViewport (0, 0, (GLsizei) w, (GLsizei) h);
   glMatrixMode(GL_PROJECTION);
   glLoadIdentity();
   glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0);
   glMatrixMode(GL_MODELVIEW);
   glLoadIdentity();
}

void mouse(int button, int state, int x, int y) 
{
   switch (button) {
      case GLUT_LEFT_BUTTON:
         if (state == GLUT_DOWN)
            glutIdleFunc(spinDisplay);
         break;
      case GLUT_MIDDLE_BUTTON:
         if (state == GLUT_DOWN)
            glutIdleFunc(NULL);
         break;
      default:
         break;
   }
}

/* 
 *  Request double buffer display mode.
 *  Register mouse input callback functions
 */
int main(int argc, char** argv)
{
   glutInit(&argc, argv);
   glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
   glutInitWindowSize (400, 400); 
   glutInitWindowPosition (100, 100);
   glutCreateWindow (argv[0]);
   init ();
   glutDisplayFunc(display); 
   glutReshapeFunc(reshape); 
   glutMouseFunc(mouse);
   glutMainLoop();
   return 0;
}