<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;

attribute vec4 vColor;

varying vec4 fColor;

uniform vec3 theta;

vec3 angles = radians( theta );

vec4 multq(vec4 a, vec4 b)

return(vec4(a.x*b.x - dot(a.yzw, b.yzw), a.x*b.yzw+b.x*a.yzw+cross(b.yzw, a.yzw)));

vec4 invq(vec4 a)

return(vec4(a.x, -a.yzw)/dot(a,a));

void main()

vec4 r;

vec4 p;

vec4 rx, ry, rz;

vec3 c = cos(angles/2.0);

vec3 s = sin(angles/2.0);

rx = vec4(c.x, -s.x, 0.0, 0.0); // x rotation quaternion

ry = vec4(c.y, 0.0, s.y, 0.0); // y rotation quaternion

rz = vec4(c.z, 0.0, 0.0, s.z); // z rotation quaternion

r = multq(rx, multq(ry, rz)); // rotation quaternion

p = vec4(0.0, vPosition.xyz); // input point quaternion

p = multq(r, multq(p, invq(r))); // rotated point quaternion

gl_Position = vec4( p.yzw, 1.0); // convert back to homogeneous coordinates

gl_Position.z = -gl_Position.z;

fColor = vColor;

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;

gl_FragColor = fColor;

<script type="text/javascript" src="../Common/webgl-utils.js"></script>

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

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

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

<canvas id="gl-canvas" width="512"" height="512">

Oops ... your browser doesn't support the HTML5 canvas element

<button id= "xButton">Rotate X</button>

<button id= "yButton">Rotate Y</button>

<button id= "zButton">Rotate Z</button>