diff --git a/T05.js b/T05.js new file mode 100644 index 0000000000000000000000000000000000000000..8930f3ab9d0e0dc818d351f4eda3ef3019a38a01 --- /dev/null +++ b/T05.js @@ -0,0 +1,290 @@ +var gl; + +function testGLError(functionLastCalled) { + + 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 cube(sx, sy, sz) +{ + vertexData = [ + + -sx/2.0, -sy/2.0, sz/2.0, 0.0, 1.0, 0.0, 1.0, // Choose color randomly + sx/2.0, -sy/2.0, sz/2.0, 0.0, 0.0, 1.0, 1.0, /// TOP + sx/2.0, sy/2.0, sz/2.0, 1.0, 0.0, 0.0, 1.0, + -sx/2.0, -sy/2.0, sz/2.0, 0.2, 0.3, 0.0, 1.0, + sx/2.0, sy/2.0, sz/2.0, 0.6, 0.0, 0.1, 1.0, + -sx/2.0, sy/2.0, sz/2.0, 0.6, 1.0, 0.1, 1.0, + + -sx/2.0, -sy/2.0, sz/2.0, 0.0, 1.0, 1.0, 1.0, // Choose color randomly + -sx/2.0, sy/2.0, sz/2.0, 0.3, 0.0, 0.1, 1.0, /// Left + -sx/2.0, sy/2.0, -sz/2.0, 1.0, 0.5, 0.0, 1.0, + -sx/2.0, -sy/2.0, sz/2.0, 0.2, 0.3, 0.0, 1.0, + -sx/2.0, -sy/2.0, -sz/2.0, 0.6, 0.4, 0.1, 1.0, + -sx/2.0, sy/2.0, -sz/2.0, 0.6, 1.0, 0.1, 1.0, + + -sx/2.0, sy/2.0, -sz/2.0, 0.0, 1.0, 0.7, 1.0, // Choose color randomly + -sx/2.0, sy/2.0, sz/2.0, 0.8, 0.0, 0.6, 1.0, /// front + sx/2.0, sy/2.0, sz/2.0, 1.0, 0.0, 0.5, 1.0, + -sx/2.0, sy/2.0, -sz/2.0, 0.2, 0.3, 0.0, 1.0, + sx/2.0, sy/2.0, -sz/2.0, 0.6, 0.1, 0.1, 1.0, + sx/2.0, sy/2.0, sz/2.0, 0.6, 1.0, 0.3, 1.0, + + sx/2.0, sy/2.0, sz/2.0, 0.0, 1.0, 0.3, 1.0, // Choose color randomly + sx/2.0, sy/2.0, -sz/2.0, 0.5, 0.0, 1.0, 1.0, /// Right + sx/2.0, -sy/2.0, -sz/2.0, 0.8, 0.0, 0.0, 1.0, + sx/2.0, sy/2.0, sz/2.0, 0.2, 0.3, 0.0, 1.0, + sx/2.0, -sy/2.0, sz/2.0, 0.6, 0.0, 0.1, 1.0, + sx/2.0, -sy/2.0, -sz/2.0, 0.6, 1.0, 0.1, 1.0, + + sx/2.0, -sy/2.0, -sz/2.0, 0.7, 1.0, 0.0, 1.0, // Choose color randomly + sx/2.0, -sy/2.0, sz/2.0, 0.3, 0.0, 1.0, 1.0, /// Back + -sx/2.0, -sy/2.0, sz/2.0, 1.0, 0.7, 0.0, 1.0, + sx/2.0, -sy/2.0, -sz/2.0, 0.2, 0.3, 0.0, 1.0, + -sx/2.0, -sy/2.0, sz/2.0, 0.4, 0.2, 0.1, 1.0, + -sx/2.0, -sy/2.0, -sz/2.0, 0.6, 1.0, 0.1, 1.0, + + -sx/2.0, -sy/2.0, -sz/2.0, 0.0, 1.0, 0.0, 1.0, // Choose color randomly + -sx/2.0, sy/2.0, -sz/2.0, 0.7, 0.0, 1.0, 1.0, /// Bottom + sx/2.0, sy/2.0, -sz/2.0, 0.9, 0.0, 0.0, 1.0, + -sx/2.0, -sy/2.0, -sz/2.0, 0.2, 0.3, 0.0, 1.0, + sx/2.0, sy/2.0, -sz/2.0, 0.5, 0.0, 0.1, 1.0, + sx/2.0, -sy/2.0, -sz/2.0, 0.4, 1.0, 0.1, 1.0 + // Make alll 36 vertices + + ]; + return vertexData; +} + +// Change initialiseBuffer() + +function initialiseBuffer() { + + vertexData = cube(1.0, 1.0, 1.0); + // Generate a buffer object + gl.vertexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); + return testGLError("initialiseBuffers"); +} + +function initialiseShaders() { + + var fragmentShaderSource = ` + varying highp vec4 col; + void main(void) + { + // gl_FragColor = vec4(1.0, 1.0, 0.66, 1.0); + gl_FragColor = col; + } + `; + gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(gl.fragShader, fragmentShaderSource); + 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; + } + + // Vertex shader code + var vertexShaderSource = ` + + attribute highp vec4 myVertex; + attribute highp vec4 myColor; + varying highp vec4 col; + uniform mediump mat4 transformationMatrix; + void main(void) + { + gl_Position = transformationMatrix * myVertex; + col = myColor; + } + + `; + gl.vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(gl.vertexShader, vertexShaderSource); + 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"); + gl.bindAttribLocation(gl.programObject, 1, "myColor"); + + // 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; + } + + gl.useProgram(gl.programObject); + + return testGLError("initialiseShaders"); +} +var r_x =0.0; +var r_z =0.0; + +function multMat4(out, a, b) { + var a00 = a[0], + a01 = a[1], + a02 = a[2], + a03 = a[3]; + out[0] = 0; + + /* Program Here */ + var b00=b[0], + b01=b[1], + b02=b[2], + b03=b[3]; + + out[0] = a[0]*b[0] + a[4]*b[1] + a[8]*b[2] + a[12]*b[3]; + out[1] = a[1]*b[0] + a[5]*b[1] + a[9]*b[2] + a[13]*b[3]; + out[2] = a[2]*b[0] + a[6]*b[1] + a[10]*b[2] + a[14]*b[3]; + out[3] = a[3]*b[0] + a[7]*b[1] + a[11]*b[2] + a[15]*b[3]; + out[4] = a[0]*b[4] + a[4]*b[5] + a[8]*b[6] + a[12]*b[7]; + out[5] = a[1]*b[4] + a[5]*b[5] + a[9]*b[6] + a[13]*b[7]; + out[6] = a[2]*b[4] + a[6]*b[5] + a[10]*b[6] + a[14]*b[7]; + out[7] = a[3]*b[4] + a[7]*b[5] + a[11]*b[6] + a[15]*b[7]; + out[8] = a[0]*b[8] + a[4]*b[9] + a[8]*b[10] + a[12]*b[11]; + out[9] = a[1]*b[8] + a[5]*b[9] + a[9]*b[10] + a[13]*b[11]; + out[10] = a[2]*b[8] + a[6]*b[9] + a[10]*b[10] + a[14]*b[11]; + out[11] = a[3]*b[8] + a[7]*b[9] + a[11]*b[10] + a[15]*b[11]; + out[12] = a[0]*b[12] + a[4]*b[13] + a[8]*b[14] + a[12]*b[15]; + out[13] = a[1]*b[12] + a[5]*b[13] + a[9]*b[14] + a[13]*b[15]; + out[14] = a[2]*b[12] + a[6]*b[13] + a[10]*b[14] + a[14]*b[15]; + out[15] = a[3]*b[12] + a[7]*b[13] + a[11]*b[14] + a[15]*b[15]; + + return out; + } + + +function renderScene() { + + gl.clearColor(0.0, 0.0, 0.0, 1.0); + 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"); + + r_x=r_x + 0.01; + r_z=r_z + 0.01; + // Matrix used to specify the orientation of the triangle on screen + var transformationMatrix1 = [ + 1.0, 0.0, 0.0, 0.0, + 0.0, Math.cos(r_x), -Math.sin(r_x), 0.0, + 0.0, Math.sin(r_x), Math.cos(r_x), 0.0, + 0.0, 0.0, 0.0, 1.0 + ]; + + var transformationMatrix2 = [ + Math.cos(r_x),-Math.sin(r_x), 0.0, 0.0, + Math.sin(r_x),Math.cos(r_x), 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, + 0.0, 0.0, 0.0, 1.0 + ]; + + var transformationMatrix=[]; + + multMat4(transformationMatrix, transformationMatrix1, transformationMatrix2); + + // 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); + gl.enableVertexAttribArray(1); + + // Set the vertex data to this attribute index, with the number of floats in each position + gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0); + gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 28, 12); + + if (!testGLError("gl.vertexAttribPointer")) { + return false; + } + + gl.drawArrays(gl.TRIANGLES, 0, 36); + + 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); + } + })(); +}