Anonymous avatar Anonymous committed 2100fc5

mmmm

Comments (0)

Files changed (3)

 <body>
 
   <h2>WebGL</h2>
-  <script type="text/javascript">
-    //<!-- 
-	 function webGLStart() {
-    var canvas = document.getElementById("canvas0");
-    initGL(canvas);
-    initShaders();
-    initBuffers();
-
-    gl.clearColor(0.0, 0.0, 0.0, 1.0);
-    gl.clearDepth(1.0)
-    gl.enable(gl.DEPTH_TEST);
-    gl.depthFunc(gl.LEQUAL);
-
-    setInterval(drawScene, 15);
-  }
-  //-->
-  </script>
+  <div>
+    <h4><a href="https://sites.google.com/site/hackthewebgl/learning-webglhon-yaku/the-lessons">lessons</a></h4>
+    <ol>
+      <li><a href="webgl.html">rotating pyramid and square</a></li>
+      <li><a href="webgl2.html">rotating kumaa</a></li>
+      <li><a href="webgl3.html">transparent rotating kumaa</a></li>
+      <li><a href="webgl4.html">rotating stars</a></li>
+      <li><a href=".html"></a></li>
+      <li><a href=".html"></a></li>
+      <li><a href=".html"></a></li>
+    </ol>
+  </div>
   
 <h2>realtime reflection form</h2>
         <table class="bbs">
+
+<!-- saved from url=(0052)http://learningwebgl.com/lessons/lesson09/index.html -->
+<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+<title>Learning WebGL � lesson 9</title>
+
+
+<script type="text/javascript" src="./gl-matrix-min.js"></script>
+<script type="text/javascript" src="./webgl-utils.js"></script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+    precision mediump float;
+
+    varying vec2 vTextureCoord;
+
+    uniform sampler2D uSampler;
+
+    uniform vec3 uColor;
+
+    void main(void) {
+        vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+        gl_FragColor = textureColor * vec4(uColor, 1.0);
+    }
+</script>
+
+<script id="shader-vs" type="x-shader/x-vertex">
+    attribute vec3 aVertexPosition;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uMVMatrix;
+    uniform mat4 uPMatrix;
+
+    varying vec2 vTextureCoord;
+
+    void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+    }
+</script>
+
+
+<script type="text/javascript">
+
+    var gl;
+
+    function initGL(canvas) {
+        try {
+            gl = canvas.getContext("experimental-webgl");
+            gl.viewportWidth = canvas.width;
+            gl.viewportHeight = canvas.height;
+        } catch (e) {
+        }
+        if (!gl) {
+            alert("Could not initialise WebGL, sorry :-(");
+        }
+    }
+
+
+    function getShader(gl, id) {
+        var shaderScript = document.getElementById(id);
+        if (!shaderScript) {
+            return null;
+        }
+
+        var str = "";
+        var k = shaderScript.firstChild;
+        while (k) {
+            if (k.nodeType == 3) {
+                str += k.textContent;
+            }
+            k = k.nextSibling;
+        }
+
+        var shader;
+        if (shaderScript.type == "x-shader/x-fragment") {
+            shader = gl.createShader(gl.FRAGMENT_SHADER);
+        } else if (shaderScript.type == "x-shader/x-vertex") {
+            shader = gl.createShader(gl.VERTEX_SHADER);
+        } else {
+            return null;
+        }
+
+        gl.shaderSource(shader, str);
+        gl.compileShader(shader);
+
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            alert(gl.getShaderInfoLog(shader));
+            return null;
+        }
+
+        return shader;
+    }
+
+
+    var shaderProgram;
+
+    function initShaders() {
+        var fragmentShader = getShader(gl, "shader-fs");
+        var vertexShader = getShader(gl, "shader-vs");
+
+        shaderProgram = gl.createProgram();
+        gl.attachShader(shaderProgram, vertexShader);
+        gl.attachShader(shaderProgram, fragmentShader);
+        gl.linkProgram(shaderProgram);
+
+        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+            alert("Could not initialise shaders");
+        }
+
+        gl.useProgram(shaderProgram);
+
+        shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+        gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+
+        shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+        gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+
+        shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+        shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+        shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
+        shaderProgram.colorUniform = gl.getUniformLocation(shaderProgram, "uColor");
+    }
+
+
+    function handleLoadedTexture(texture) {
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+
+
+    var starTexture;
+
+    function initTexture() {
+        starTexture = gl.createTexture();
+        starTexture.image = new Image();
+        starTexture.image.onload = function () {
+            handleLoadedTexture(starTexture)
+        }
+
+        starTexture.image.src = "star.gif";
+    }
+
+
+    var mvMatrix = mat4.create();
+    var mvMatrixStack = [];
+    var pMatrix = mat4.create();
+
+    function mvPushMatrix() {
+        var copy = mat4.create();
+        mat4.set(mvMatrix, copy);
+        mvMatrixStack.push(copy);
+    }
+
+    function mvPopMatrix() {
+        if (mvMatrixStack.length == 0) {
+            throw "Invalid popMatrix!";
+        }
+        mvMatrix = mvMatrixStack.pop();
+    }
+
+
+    function setMatrixUniforms() {
+        gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
+        gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
+    }
+
+
+    function degToRad(degrees) {
+        return degrees * Math.PI / 180;
+    }
+
+
+    var currentlyPressedKeys = {};
+
+    function handleKeyDown(event) {
+        currentlyPressedKeys[event.keyCode] = true;
+    }
+
+
+    function handleKeyUp(event) {
+        currentlyPressedKeys[event.keyCode] = false;
+    }
+
+
+    var zoom = -15;
+
+
+    var tilt = 90;
+    var spin = 0;
+
+
+    function handleKeys() {
+        if (currentlyPressedKeys[33]) {
+            // Page Up
+            zoom -= 0.1;
+        }
+        if (currentlyPressedKeys[34]) {
+            // Page Down
+            zoom += 0.1;
+        }
+        if (currentlyPressedKeys[38]) {
+            // Up cursor key
+            tilt += 2;
+        }
+        if (currentlyPressedKeys[40]) {
+            // Down cursor key
+            tilt -= 2;
+        }
+    }
+
+
+    var starVertexPositionBuffer;
+    var starVertexTextureCoordBuffer;
+
+    function initBuffers() {
+        starVertexPositionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, starVertexPositionBuffer);
+        vertices = [
+            -1.0, -1.0,  0.0,
+             1.0, -1.0,  0.0,
+            -1.0,  1.0,  0.0,
+             1.0,  1.0,  0.0
+        ];
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+        starVertexPositionBuffer.itemSize = 3;
+        starVertexPositionBuffer.numItems = 4;
+
+        starVertexTextureCoordBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, starVertexTextureCoordBuffer);
+        var textureCoords = [
+            0.0, 0.0,
+            1.0, 0.0,
+            0.0, 1.0,
+            1.0, 1.0
+        ];
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
+        starVertexTextureCoordBuffer.itemSize = 2;
+        starVertexTextureCoordBuffer.numItems = 4;
+    }
+
+
+    function drawStar() {
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, starTexture);
+        gl.uniform1i(shaderProgram.samplerUniform, 0);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, starVertexTextureCoordBuffer);
+        gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, starVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, starVertexPositionBuffer);
+        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, starVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
+
+        setMatrixUniforms();
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, starVertexPositionBuffer.numItems);
+    }
+
+
+
+    function Star(startingDistance, rotationSpeed) {
+        this.angle = 0;
+        this.dist = startingDistance;
+        this.rotationSpeed = rotationSpeed;
+
+        // Set the colors to a starting value.
+        this.randomiseColors();
+    }
+
+    Star.prototype.draw = function (tilt, spin, twinkle) {
+        mvPushMatrix();
+
+        // Move to the star's position
+        mat4.rotate(mvMatrix, degToRad(this.angle), [0.0, 1.0, 0.0]);
+        mat4.translate(mvMatrix, [this.dist, 0.0, 0.0]);
+
+        // Rotate back so that the star is facing the viewer
+        mat4.rotate(mvMatrix, degToRad(-this.angle), [0.0, 1.0, 0.0]);
+        mat4.rotate(mvMatrix, degToRad(-tilt), [1.0, 0.0, 0.0]);
+
+        if (twinkle) {
+            // Draw a non-rotating star in the alternate "twinkling" color
+            gl.uniform3f(shaderProgram.colorUniform, this.twinkleR, this.twinkleG, this.twinkleB);
+            drawStar();
+        }
+
+        // All stars spin around the Z axis at the same rate
+        mat4.rotate(mvMatrix, degToRad(spin), [0.0, 0.0, 1.0]);
+
+        // Draw the star in its main color
+        gl.uniform3f(shaderProgram.colorUniform, this.r, this.g, this.b);
+        drawStar()
+
+        mvPopMatrix();
+    };
+
+
+    var effectiveFPMS = 60 / 1000;
+    Star.prototype.animate = function (elapsedTime) {
+        this.angle += this.rotationSpeed * effectiveFPMS * elapsedTime;
+
+        // Decrease the distance, resetting the star to the outside of
+        // the spiral if it's at the center.
+        this.dist -= 0.01 * effectiveFPMS * elapsedTime;
+        if (this.dist < 0.0) {
+            this.dist += 5.0;
+            this.randomiseColors();
+        }
+
+    };
+
+
+    Star.prototype.randomiseColors = function () {
+        // Give the star a random color for normal
+        // circumstances...
+        this.r = Math.random();
+        this.g = Math.random();
+        this.b = Math.random();
+
+        // When the star is twinkling, we draw it twice, once
+        // in the color below (not spinning) and then once in the
+        // main color defined above.
+        this.twinkleR = Math.random();
+        this.twinkleG = Math.random();
+        this.twinkleB = Math.random();
+    };
+
+
+
+    var stars = [];
+
+    function initWorldObjects() {
+        var numStars = 50;
+
+        for (var i=0; i < numStars; i++) {
+            stars.push(new Star((i / numStars) * 5.0, i / numStars));
+        }
+    }
+
+
+    function drawScene() {
+        gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+        mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
+
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+        gl.enable(gl.BLEND);
+
+        mat4.identity(mvMatrix);
+        mat4.translate(mvMatrix, [0.0, 0.0, zoom]);
+        mat4.rotate(mvMatrix, degToRad(tilt), [1.0, 0.0, 0.0]);
+
+        var twinkle = document.getElementById("twinkle").checked;
+        for (var i in stars) {
+            stars[i].draw(tilt, spin, twinkle);
+            spin += 0.1;
+        }
+
+    }
+
+
+    var lastTime = 0;
+
+    function animate() {
+        var timeNow = new Date().getTime();
+        if (lastTime != 0) {
+            var elapsed = timeNow - lastTime;
+
+            for (var i in stars) {
+                stars[i].animate(elapsed);
+            }
+        }
+        lastTime = timeNow;
+
+    }
+
+
+    function tick() {
+        requestAnimFrame(tick);
+        handleKeys();
+        drawScene();
+        animate();
+    }
+
+
+
+    function webGLStart() {
+        var canvas = document.getElementById("lesson09-canvas");
+        initGL(canvas);
+        initShaders();
+        initBuffers();
+        initTexture();
+        initWorldObjects();
+
+        gl.clearColor(0.0, 0.0, 0.0, 1.0);
+
+        document.onkeydown = handleKeyDown;
+        document.onkeyup = handleKeyUp;
+
+        tick();
+    }
+
+</script>
+
+
+</head>
+
+
+<body onload="webGLStart();">
+
+    <canvas id="lesson09-canvas" style="border: none;" width="500" height="500"></canvas>
+
+    <br>
+    <input type="checkbox" id="twinkle"> Twinkle<br>
+    (Use up/down cursor keys to rotate, and <code>Page Up</code>/<code>Page Down</code> to zoom out/in)
+
+    <br>
+
+</body></html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.