<!DOCTYPE html>
<!--
/*
 * Copyright (C) 2009 Apple Inc. All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
  <head>
    <title>Many Planets Deep</title>
    <script type="text/javascript" src="common/webgl-utils.js"></script>
    <script type="text/javascript" src="debug/webgl-debug.js"></script>
    <script type="text/javascript" src="cros_fps.js"></script>
    <script src="resources/J3DI.js"> </script>
    <script src="resources/J3DIMath.js" type="text/javascript"> </script>

    <script id="vshader" type="x-shader/x-vertex">
        uniform mat4 u_modelViewProjMatrix;
        uniform mat4 u_normalMatrix;
        uniform vec3 lightDir;

        attribute vec3 vNormal;
        attribute vec4 vTexCoord;
        attribute vec4 vPosition;

        varying float v_Dot;
        varying vec2 v_texCoord;

        void main()
        {
            gl_Position = u_modelViewProjMatrix * vPosition;
            v_texCoord = vTexCoord.st;
            vec4 transNormal = u_normalMatrix * vec4(vNormal,1);
            v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
        }
    </script>

    <script id="fshader" type="x-shader/x-fragment">
        precision mediump float;

        uniform sampler2D sampler2d;

        varying float v_Dot;
        varying vec2 v_texCoord;

        void main()
        {
            vec4 color = texture2D(sampler2d,v_texCoord);
            color += vec4(0.1,0.1,0.1,1);
            gl_FragColor = vec4(color.xyz * v_Dot, color.a);
        }
    </script>

    <script>
        const numRowCols = 4;
        const numLayers = 3;
        const layoutWidth = 10;
        const layoutHeight = 8;
        const globeSize = 25;
        const minIncAngle = 0.2;
        const maxIncAngle = 2;
        var g = {};  // globals
        var g_crosFpsCounter = new crosFpsCounter();
        var then = 0.0;
        var lastJSRenderTime = 0.0;

        function init()
        {
            var gl = initWebGL("example");
            if (!gl) {
                return;
            }
            g.program = simpleSetup(gl, "vshader", "fshader",
                                [ "vPosition", "vTexCoord", "vNormal"],
                                [ 0, 0, 0, 1 ], 10000);
            gl.uniform3f(gl.getUniformLocation(g.program, "lightDir"), 0, 0, 1);
            gl.uniform1i(gl.getUniformLocation(g.program, "sampler2d"), 0);

            if (g.program) {
                g.u_normalMatrixLoc = gl.getUniformLocation(g.program, "u_normalMatrix");
                g.u_modelViewProjMatrixLoc = gl.getUniformLocation(g.program, "u_modelViewProjMatrix");
            }

            g.sphere = makeSphere(gl, 1, 30, 30);

            // get the images
            earthTexture = loadImageTexture(gl, "resources/earthmap1k.jpg");
            marsTexture = loadImageTexture(gl, "resources/mars500x250.png");

            return gl;
        }

        width = -1;
        height = -1;
        var requestId;

        function reshape(ctx)
        {
            var canvas = document.getElementById('example');
            if (canvas.width == width && canvas.height == height)
                return;

            width = canvas.width;
            height = canvas.height;

            ctx.viewport(0, 0, width, height);

            g.perspectiveMatrix = new J3DIMatrix4();
            g.perspectiveMatrix.perspective(30, width/height, 1, 10000);
            g.perspectiveMatrix.lookat(0,0,20, 0, 0, 0, 0, 1, 0);
        }

        function drawOne(ctx, angle, x, y, z, scale, texture)
        {
            // setup VBOs
            ctx.enableVertexAttribArray(0);
            ctx.enableVertexAttribArray(1);
            ctx.enableVertexAttribArray(2);

            ctx.bindBuffer(ctx.ARRAY_BUFFER, g.sphere.vertexObject);
            ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0);

            ctx.bindBuffer(ctx.ARRAY_BUFFER, g.sphere.normalObject);
            ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0);

            ctx.bindBuffer(ctx.ARRAY_BUFFER, g.sphere.texCoordObject);
            ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0);

            ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, g.sphere.indexObject);

            // generate the model-view matrix
            var mvMatrix = new J3DIMatrix4();
            mvMatrix.translate(x,y,z);
            mvMatrix.rotate(30, 1,0,0);
            mvMatrix.rotate(angle, 0,1,0);
            mvMatrix.scale(scale, scale, scale);

            // construct the normal matrix from the model-view matrix
            var normalMatrix = new J3DIMatrix4(mvMatrix);
            normalMatrix.invert();
            normalMatrix.transpose();
            normalMatrix.setUniform(ctx, g.u_normalMatrixLoc, false);

            // construct the model-view * projection matrix
            var mvpMatrix = new J3DIMatrix4(g.perspectiveMatrix);
            mvpMatrix.multiply(mvMatrix);
            mvpMatrix.setUniform(ctx, g.u_modelViewProjMatrixLoc, false);

            ctx.bindTexture(ctx.TEXTURE_2D, texture);
            ctx.drawElements(ctx.TRIANGLES, g.sphere.numIndices, ctx.UNSIGNED_SHORT, 0);
        }

        function drawPicture(ctx)
        {
            var now = new Date().getTime();
            if (then != 0.0) {
                g_crosFpsCounter.update(then, now - then, lastJSRenderTime);
            }
            then = now;

            reshape(ctx);
	        ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);

            var startX = -layoutWidth/2;
            var startY = -layoutHeight/2;
            var startZ = 0;
            var incX = layoutWidth / (numRowCols-1);
            var incY = layoutHeight / (numRowCols-1);
            var incZ = -5;

            for (i = 0; i < numLayers; ++i) {
                for (j = 0; j < numRowCols; ++j) {
                    for (k = 0; k < numRowCols; ++k) {
                        var index = i * numLayers * numRowCols + j * numRowCols + k;

                        drawOne(ctx, currentAngles[index],
                                startX + incX * k,
                                startY + incY * j,
                                startZ + incZ * i,
                                showEarth[index] ? 1 : 0.6, showEarth[index] ? earthTexture : marsTexture);

                        currentAngles[index] += incAngles[index];
                        if (currentAngles[index] > 360)
                            currentAngles[index] -= 360;
                    }
                }
            }

            ctx.bindTexture(ctx.TEXTURE_2D, null);

            framerate.snapshot();
            lastJSRenderTime = new Date().getTime() - then;
        }

        function start()
        {
            var c = document.getElementById("example");
            var w = Math.floor(window.innerWidth * 0.9);
            var h = Math.floor(window.innerHeight * 0.9);

            //c = WebGLDebugUtils.makeLostContextSimulatingCanvas(c);
            // tell the simulator when to lose context.
            //c.loseContextInNCalls(1500);

            c.addEventListener('webglcontextlost', handleContextLost, false);
            c.addEventListener('webglcontextrestored', handleContextRestored, false);

            c.width = w;
            c.height = h;

            var ctx = init();
            if (!ctx) {
                return;
            }

            currentAngles = [ ];
            incAngles = [ ];
            showEarth = [ ];

            for (var i = 0; i < numRowCols * numRowCols * numLayers; ++i) {
                currentAngles[i] = 0;
                incAngles[i] = Math.random() * (maxIncAngle - minIncAngle) + minIncAngle;
                showEarth[i] = Math.random() > 0.5;
            }

            framerate = new Framerate("framerate");
            var f = function() {
                drawPicture(ctx)
                requestId = window.requestAnimFrame(f, c);
            };
            f();

            function handleContextLost(e) {
                e.preventDefault();
                clearLoadingImages();
                if (requestId !== undefined) {
                    window.cancelAnimFrame(requestId);
                    requestId = undefined;
                }
            }

            function handleContextRestored() {
                init();
                f();
            }
        }
    </script>
    <style type="text/css">
        canvas {
            border: 2px solid black;
        }
    </style>
  </head>
  <body onload="start()">
    <canvas id="example">
    There is supposed to be an example drawing here, but it's not important.
    </canvas>
    <div id="framerate"></div>
  </body>
</html>