diff --git a/RotatingCube/RotatingCube.html b/RotatingCube/RotatingCube.html index 8c2051e..a581241 100644 --- a/RotatingCube/RotatingCube.html +++ b/RotatingCube/RotatingCube.html @@ -1,19 +1,25 @@ - - - Draw cube with specification of face color - - - + + + Draw cube with specification of face color + + + + Please use a browser that supports "canvas" - + +

+ + +

- - - - - - - + + + + + + + + \ No newline at end of file diff --git a/RotatingCube/RotatingCube.js b/RotatingCube/RotatingCube.js index a3c9933..ef485d8 100644 --- a/RotatingCube/RotatingCube.js +++ b/RotatingCube/RotatingCube.js @@ -25,49 +25,57 @@ const fragment_shader = ` gl_FragColor = v_Color; } `; -function main() -{ +var gl, n; +var v_rotate = {x: 0, y:0, z:0}; + +function main() { // Retrieve element var canvas = document.getElementById('webgl'); // Get the rendering context for WebGL - var gl = getWebGLContext(canvas); - if (!gl) - { + gl = getWebGLContext(canvas); + if (!gl) { console.log('Failed to get the rendering context for WebGL'); return; } // Initialize shaders - if (!initShaders(gl, vertex_shader, fragment_shader)) - { + if (!initShaders(gl, vertex_shader, fragment_shader)) { console.log('Failed to intialize shaders.'); return; } // Set the vertex information - var n = initVertexBuffers(gl); - if (n < 0) - { + n = initVertexBuffers(gl); + if (n < 0) { console.log('Failed to set the vertex information'); return; } + draw(gl); +} +function draw(gl) { // Set the clear color and enable the depth test gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); // Get the storage location of u_MvpMatrix var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); - if (!u_MvpMatrix) - { + if (!u_MvpMatrix) { console.log('Failed to get the storage location of u_MvpMatrix'); return; } // Set the eye point and the viewing volume var mvpMatrix = new Matrix4(); - mvpMatrix.setOrtho(-2, 2, -2, 2, -2, 2); + // The longest measure of a cube is the furthest corner diagonal, with a size of sqrt(3) + // Here, we take the root of 3, and add a little extra, to make sure it doesn't clip + const root_three = Math.sqrt(3) + 0.01; + // Then, we define the ortho projection to use this value as the coordinate of each clipping plane. + mvpMatrix.setOrtho(-root_three, root_three, -root_three, root_three, -root_three, root_three); + // From there, we rotate + mvpMatrix.rotate(v_rotate.x, 1, 0, 0).rotate(v_rotate.y, 0, 1, 0).rotate(v_rotate.z, 0, 0, 1); + // Pass the model view projection matrix to u_MvpMatrix gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); @@ -79,8 +87,7 @@ function main() gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); } -function initVertexBuffers(gl) -{ +function initVertexBuffers(gl) { // Create a cube // v6----- v5 // /| /| @@ -91,30 +98,30 @@ function initVertexBuffers(gl) // v2------v3 var vertices = new Float32Array([ // Vertex coordinates - 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0,-1.0, 1.0, 1.0,-1.0, 1.0, // v0-v1-v2-v3 front - 1.0, 1.0, 1.0, 1.0,-1.0, 1.0, 1.0,-1.0,-1.0, 1.0, 1.0,-1.0, // v0-v3-v4-v5 right - 1.0, 1.0, 1.0, 1.0, 1.0,-1.0, -1.0, 1.0,-1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up - -1.0, 1.0, 1.0, -1.0, 1.0,-1.0, -1.0,-1.0,-1.0, -1.0,-1.0, 1.0, // v1-v6-v7-v2 left - -1.0,-1.0,-1.0, 1.0,-1.0,-1.0, 1.0,-1.0, 1.0, -1.0,-1.0, 1.0, // v7-v4-v3-v2 down - 1.0,-1.0,-1.0, -1.0,-1.0,-1.0, -1.0, 1.0,-1.0, 1.0, 1.0,-1.0 // v4-v7-v6-v5 back + 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front + 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right + 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up + -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left + -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down + 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0 // v4-v7-v6-v5 back ]); var colors = new Float32Array([ // Colors - 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, // v0-v1-v2-v3 front(blue) - 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, // v0-v3-v4-v5 right(green) - 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, // v0-v5-v6-v1 up(red) - 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, // v1-v6-v7-v2 left - 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v7-v4-v3-v2 down - 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0 // v4-v7-v6-v5 back + 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, // v0-v1-v2-v3 front(blue) + 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, // v0-v3-v4-v5 right(green) + 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, // v0-v5-v6-v1 up(red) + 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, // v1-v6-v7-v2 left + 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v7-v4-v3-v2 down + 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0 // v4-v7-v6-v5 back ]); var indices = new Uint8Array([ // Indices of the vertices - 0, 1, 2, 0, 2, 3, // front - 4, 5, 6, 4, 6, 7, // right - 8, 9,10, 8,10,11, // up - 12,13,14, 12,14,15, // left - 16,17,18, 16,18,19, // down - 20,21,22, 20,22,23 // back + 0, 1, 2, 0, 2, 3, // front + 4, 5, 6, 4, 6, 7, // right + 8, 9, 10, 8, 10, 11, // up + 12, 13, 14, 12, 14, 15, // left + 16, 17, 18, 16, 18, 19, // down + 20, 21, 22, 20, 22, 23 // back ]); // Create a buffer object @@ -136,11 +143,9 @@ function initVertexBuffers(gl) return indices.length; } -function initArrayBuffer(gl, data, num, type, attribute) -{ +function initArrayBuffer(gl, data, num, type, attribute) { var buffer = gl.createBuffer(); // Create a buffer object - if (!buffer) - { + if (!buffer) { console.log('Failed to create the buffer object'); return false; } @@ -151,8 +156,7 @@ function initArrayBuffer(gl, data, num, type, attribute) // Assign the buffer object to the attribute variable var a_attribute = gl.getAttribLocation(gl.program, attribute); - if (a_attribute < 0) - { + if (a_attribute < 0) { console.log('Failed to get the storage location of ' + attribute); return false; } @@ -164,3 +168,13 @@ function initArrayBuffer(gl, data, num, type, attribute) return true; } + +function rotate(axis) { + if (axis in v_rotate) { + v_rotate[axis] += 15.0; + v_rotate[axis] %= 360; // bound to [0, 360) + + console.log(`${axis} = ${v_rotate[axis]}`); + } + draw(gl); +}