diff --git a/script_step1.txt b/script_step1.txt
new file mode 100644
index 0000000000000000000000000000000000000000..6fe0a34672f2e4425125e081c1141bc1c5e7ad6a
--- /dev/null
+++ b/script_step1.txt
@@ -0,0 +1,220 @@
+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);
+ }
+ })();
+
+
+}