diff --git a/script_final.txt b/script_final.txt new file mode 100644 index 0000000000000000000000000000000000000000..aff3b877d217829edd8b86dd4cfe7e6000159459 --- /dev/null +++ b/script_final.txt @@ -0,0 +1,251 @@ +var gl; + +var shaderProgram; + +function initialStep(canvas) { + + try { + gl = canvas.getContext("webgl") + if (!gl) { + gl = canvas.getContext("experimental-webgl"); + } + gl.viewport(0, 0, canvas.width, canvas.height); + } + + catch (e) { + } + + var drag=false; + + var original_x, original_y; + + var Downward=function(e) { + + drag=true; + original_x = e.pageX; + original_y = e.pageY; + e.preventDefault(); + + }; + + var Upward=function(e){ + drag=false; + }; + + var Moving=function(e) { + if (!drag) return false; + + var gap_x = e.pageX - original_x; + var gap_y = e.pageY - original_y; + + y_rad += gap_x*3/canvas.width; + x_rad += gap_y*3/canvas.height; + + original_x = e.pageX; + original_y = e.pageY; + + e.preventDefault(); + }; + + canvas.addEventListener("mousedown", Downward, false); + canvas.addEventListener("mouseup", Upward, false); + canvas.addEventListener("mouseout", Upward, false); + canvas.addEventListener("mousemove", Moving, false); + +} + +function createCubePos(sx, sy, sz){ + var x = sx/2; + var y = sy/2; + var z = sz/2; + +/* +square vertex value (x,y,z,R,G,B,alpha) upper: yellow +1 -x, -y, -z 7 -------- 6 +2 x, y, -z /| /| back: orange +3 -x, y, -z 3/_|_____ 2/ | +4 x, -y, -z | | | | right: red +5 -x, -y, z left: green | | (O) | | +6 x, y, z | /(5)----|-/8 +7 -x, y, z front: purple |/_______ |/ +8 x, -y, z 1 4 + below: blue +*/ + var vertexArray = [ + -x, -y, -z, 0.37, 0, 1, 1, // vertex 1,2,3 + x, y, -z, 0.37, 0, 1, 1, // color: purple + -x, y, -z, 0.37, 0, 1, 1, // front square #1 triangle vertex + // --------------------------------------- + -x, -y, -z, 0.37, 0, 1, 1, // vertex 1,4,2 + x, -y, -z, 0.37, 0, 1, 1, // color: purple + x, y, -z, 0.37, 0, 1, 1, // front square #2 triangle vertex + // --------------------------------------- + -x, y, z, 1, 0.37, 0, 1, // vertex 7,6,5 + x, y, z, 1, 0.37, 0, 1, // color: orange + -x, -y, z, 1, 0.37, 0, 1, // back square #1 triangle vertex + // --------------------------------------- + x, y, z, 1, 0.37, 0, 1, // vertex 6,8,5 + x, -y, z, 1, 0.37, 0, 1, // color: orange + -x, -y, z, 1, 0.37, 0, 1, // back square #2 triangle vertex + // --------------------------------------- + x, y, -z, 0.11, 0.86, 0.09, 1, // vertex 2,4,6 + x, -y, -z, 0.11, 0.86, 0.09, 1, // color: red + x, y, z, 0.11, 0.86, 0.09, 1, // right square #1 triangle vertex + // --------------------------------------- + x, -y, -z, 0.11, 0.86, 0.09, 1, // vertex 4,8,6 + x, -y, z, 0.11, 0.86, 0.09, 1, // color: red + x, y, z, 0.11, 0.86, 0.09, 1, // right square #2 triangle vertex + // --------------------------------------- + x, y, -z, 1, 0.89, 0, 1, // vertex 2,6,3 + x, y, z, 1, 0.89, 0, 1, // color: yellow + -x, y, -z, 1, 0.89, 0, 1, // upper square #1 triangle vertex + // --------------------------------------- + -x, y, -z, 1, 0.89, 0, 1, // vertex 3,6,7 + x, y, z, 1, 0.89, 0, 1, // color: yellow + -x, y, z, 1, 0.89, 0, 1, // upper square #2 triangle vertex + // --------------------------------------- + -x, -y, -z, 1, 0, 0, 1, // vertex 1,5,7 + -x, -y, z, 1, 0, 0, 1, // color: green + -x, y, z, 1, 0, 0, 1, // left square #1 trianlge vertex + // --------------------------------------- + -x, -y, -z, 1, 0, 0, 1, // vertex 1,7,3 + -x, y, z, 1, 0, 0, 1, // color: green + -x, y, -z, 1, 0, 0, 1, // left square #2 triangle vertex + // --------------------------------------- + -x, -y, -z, 0, 0.85, 1, 1, // vertex 1,4,8 + x, -y, -z, 0, 0.85, 1, 1, // color: blue + x, -y, z, 0, 0.85, 1, 1, // lower square #1 triangle vertex + // --------------------------------------- + -x, -y, -z, 0, 0.85, 1, 1, // vertex 1,8,5 + x, -y, z, 0, 0.85, 1, 1, // color: blue + -x, -y, z, 0, 0.85, 1, 1 // lower square #2 triangle vertex + ]; + + return vertexArray; +} + + +function getBuffer() { + + gl.vertexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer); + vertexData = createCubePos(1.5, 1.5, 1.5); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); +} + +function getShaders() { + + var vertexShaderSourceText = '\ + attribute highp vec4 vertexPosition; \ + attribute highp vec4 vertexColor; \ + uniform mediump mat4 wldmat; \ + uniform mediump mat4 viwmat;\ + uniform mediump mat4 prjmat;\ + varying highp vec4 fragmentColor;\ + void main(void) \ + { \ + gl_Position = prjmat * viwmat * wldmat * vertexPosition; \ + fragmentColor = vertexColor; \ + }'; + + gl.vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(gl.vertexShader, vertexShaderSourceText); + gl.compileShader(gl.vertexShader); + + var fragmentShaderSourceText = '\ + varying highp vec4 fragmentColor; \ + void main(void) \ + { \ + gl_FragColor = fragmentColor;\ + }'; + + gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(gl.fragShader, fragmentShaderSourceText); + gl.compileShader(gl.fragShader); + + + + gl.programObject = gl.createProgram(); + gl.attachShader(gl.programObject, gl.fragShader); + gl.attachShader(gl.programObject, gl.vertexShader); + gl.bindAttribLocation(gl.programObject, 0, "vertexPosition"); + gl.bindAttribLocation(gl.programObject, 1, "vertexColor"); + + gl.linkProgram(gl.programObject); + gl.useProgram(gl.programObject); + +} + +var idtmat = new Float32Array(16); + +var x_rad = 0; +var y_rad = 0; + +function renderScene() { + + gl.clearColor(0.85, 0.85, 1, 1.0); + gl.clearDepth(1.0); + gl.clear(gl.DEPTH_BUFFER_BIT); + gl.clear(gl.COLOR_BUFFER_BIT); + gl.enable(gl.DEPTH_TEST); + + + var wldmatLoc = gl.getUniformLocation(gl.programObject, "wldmat"); + var viwmatLoc = gl.getUniformLocation(gl.programObject, "viwmat"); + var prjmatLoc = gl.getUniformLocation(gl.programObject, "prjmat"); + + var wldmatrix = new Float32Array(16); + var viwmatrix = new Float32Array(16); + var prjmatrix = new Float32Array(16); + + mat4.identity(wldmatrix); + mat4.lookAt(viwmatrix, [0,0,-5], [0,0,0], [0,1,0]); + mat4.perspective(prjmatrix, 3.14/4.0, canvas.width/canvas.height, 0.1, 1000); + + angle = performance.now()/5000*Math.PI; + mat4.identity(idtmat); + + mat4.rotateX(wldmatrix, wldmatrix, -x_rad); + mat4.rotateY(wldmatrix, wldmatrix, y_rad); + + gl.uniformMatrix4fv(wldmatLoc, gl.FALSE, wldmatrix); + gl.uniformMatrix4fv(viwmatLoc, gl.FALSE, viwmatrix); + gl.uniformMatrix4fv(prjmatLoc, gl.FALSE, prjmatrix); + + gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer); + gl.enableVertexAttribArray(0); + gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0); + gl.enableVertexAttribArray(1); + gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 28, 12); + gl.drawArrays(gl.TRIANGLES, 0, 36); + + return true; + +} + + + +function main() { + var canvas = document.getElementById("canvas"); + + initialStep(canvas); + + getBuffer(); + + getShaders(); + + requestAnimFrame = (function () { + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || + function (callback) { + window.setTimeout(callback, 1000, 60); + }; + })(); + + (function renderLoop() { + if (renderScene()) { + requestAnimFrame(renderLoop); + } + })(); + + +}