"use strict"; var elt; var canvas; var gl; var program; var numPositions = 36; var positionsArray = []; var normalsArray = []; var framebuffer; var flag = false; var color = new Uint8Array(4); var vertices = [ vec4(-0.5, -0.5, 0.5, 1.0), vec4(-0.5, 0.5, 0.5, 1.0), vec4(0.5, 0.5, 0.5, 1.0), vec4(0.5, -0.5, 0.5, 1.0), vec4(-0.5, -0.5, -0.5, 1.0), vec4(-0.5, 0.5, -0.5, 1.0), vec4(0.5, 0.5, -0.5, 1.0), vec4(0.5, -0.5, -0.5, 1.0), ]; var lightPosition = vec4(1.0, 1.0, 1.0, 0.0 ); var lightAmbient = vec4(0.2, 0.2, 0.2, 1.0 ); var lightDiffuse = vec4( 1.0, 1.0, 1.0, 1.0 ); var lightSpecular = vec4( 1.0, 1.0, 1.0, 1.0 ); var materialAmbient = vec4( 1.0, 0.0, 1.0, 1.0 ); var materialDiffuse = vec4( 1.0, 0.8, 0.0, 1.0); var materialSpecular = vec4( 1.0, 0.8, 0.0, 1.0 ); var materialShininess = 100.0; var ctm; var ambientColor, diffuseColor, specularColor; var modelViewMatrix, projectionMatrix; var viewerPos; var program; var xAxis = 0; var yAxis = 1; var zAxis = 2; var axis = xAxis; var theta = vec3(45.0, 45.0, 45.0); var thetaLoc; var Index = 0; function quad(a, b, c, d) { var t1 = subtract(vertices[b], vertices[a]); var t2 = subtract(vertices[c], vertices[b]); var normal = cross(t1, t2); normal = normalize(normal); positionsArray.push(vertices[a]); normalsArray.push(normal); positionsArray.push(vertices[b]); normalsArray.push(normal); positionsArray.push(vertices[c]); normalsArray.push(normal); positionsArray.push(vertices[a]); normalsArray.push(normal); positionsArray.push(vertices[c]); normalsArray.push(normal); positionsArray.push(vertices[d]); normalsArray.push(normal); } function colorCube() { quad(1, 0, 3, 2); quad(2, 3, 7, 6); quad(3, 0, 4, 7); quad(6, 5, 1, 2); quad(4, 5, 6, 7); quad(5, 4, 0, 1); } window.onload = function init() { canvas = document.getElementById("gl-canvas"); gl = canvas.getContext('webgl2'); if (!gl) alert("WebGL isn't available"); elt = document.getElementById("test"); gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0.5, 0.5, 0.5, 1.0); gl.enable(gl.CULL_FACE); var texture = gl.createTexture(); gl.bindTexture( gl.TEXTURE_2D, texture ); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.generateMipmap(gl.TEXTURE_2D); // Allocate a frame buffer object framebuffer = gl.createFramebuffer(); gl.bindFramebuffer( gl.FRAMEBUFFER, framebuffer); // Attach color buffer gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); // // Load shaders and initialize attribute buffers // program = initShaders(gl, "vertex-shader", "fragment-shader"); gl.useProgram(program); colorCube(); var nBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, nBuffer); gl.bufferData(gl.ARRAY_BUFFER, flatten(normalsArray), gl.STATIC_DRAW); var normalLoc =gl.getAttribLocation( program, "aNormal"); gl.vertexAttribPointer(normalLoc, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(normalLoc); var vBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer); gl.bufferData(gl.ARRAY_BUFFER, flatten(positionsArray), gl.STATIC_DRAW); var positionLoc = gl.getAttribLocation(program, "aPosition"); gl.vertexAttribPointer(positionLoc, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(positionLoc); //thetaLoc = gl.getUniformLocation(program, "theta"); viewerPos = vec3(0.0, 0.0, -20.0 ); projectionMatrix = ortho(-1, 1, -1, 1, -100, 100); var ambientProduct = mult(lightAmbient, materialAmbient); var diffuseProduct = mult(lightDiffuse, materialDiffuse); var specularProduct = mult(lightSpecular, materialSpecular); document.getElementById("ButtonX").onclick = function(){axis = xAxis;}; document.getElementById("ButtonY").onclick = function(){axis = yAxis;}; document.getElementById("ButtonZ").onclick = function(){axis = zAxis;}; document.getElementById("ButtonT").onclick = function(){flag = !flag}; gl.uniform4fv(gl.getUniformLocation(program, "uAmbientProduct"), ambientProduct); gl.uniform4fv(gl.getUniformLocation(program, "uDiffuseProduct"), diffuseProduct ); gl.uniform4fv(gl.getUniformLocation(program, "uSpecularProduct"), specularProduct ); gl.uniform4fv(gl.getUniformLocation(program, "uLightPosition"), lightPosition ); gl.uniform1f(gl.getUniformLocation(program, "uShininess"),materialShininess); gl.uniformMatrix4fv( gl.getUniformLocation(program, "uProjectionMatrix"), false, flatten(projectionMatrix) ); canvas.addEventListener("mousedown", function(event){ gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.clear( gl.COLOR_BUFFER_BIT); //gl.uniform3fv(thetaLoc, theta); for(var i=0; i<6; i++) { gl.uniform1i(gl.getUniformLocation(program, "uColorIndex"), i+1); gl.drawArrays( gl.TRIANGLES, 6*i, 6 ); } var x = event.clientX; var y = canvas.height -event.clientY; gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, color); if(color[0]==255) if(color[1]==255) elt.innerHTML = "