Upload New File

script_step1.txt

+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) {
+    }
+
+}
+
+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 angle = 0; 
+
+ var idtmat = new Float32Array(16);
+
+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);
+
+    //var rotx = new Float32Array(16);
+    //var roty = new Float32Array(16);
+    //var rotz = 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.rotate(rotx, idtmat, angle, [-5,5,-5]);
+    //mat4.rotate(roty, idtmat, angle, [0,5,0]);
+    //mat4.rotate(rotz, idtmat, angle, [0,0,5]);
+    //mat4.mul(wldmatrix, rotx, roty);
+    //mat4.mul(wldmatrix, wldmatrix, rotz);
+   
+    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);
+        }
+    })();
+
+
+}