
<?php
if(isset($_GET['show_source'])) {
    show_source(__FILE__);
    die();
}

$jsDir = 'js';

?><!DOCTYPE HTML>
<html>
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>Ray Tracing - Canvas Playground - HTML 5 features</title>
        
        <script type="text/javascript" src="canvas.js"></script>
        <script type="text/javascript" src="benchmark.js"></script>
<?php
        if(is_dir($jsDir)) {
            foreach(scandir($jsDir) as $file) {
                if(preg_match('/\.js$/i', $file)) {
                    echo '        <script type="text/javascript" src="' . $jsDir . '/' . $file . '"></script>' . "\n";
                }
            }
        }
        ?>

        <script type="text/javascript">
        /* <![CDATA[ */
            var renderIteration = 0;
            var renderBatchSize = 10000;
            var renderInterval = null;
            var renderSkipPixels = 1;
            
            var reflectionSamples = 1;
            
            var gammaCorrection = .8; //1.4;
            var antialias = 0;
            var renderDepth = 2;
            
            var debug = false;

            var c = b = fpsDiv = scene = camWindowTop = camWindowLeft = null;

            function init() {
                c = new Canvas(document.getElementById('axis'));
                b = new Benchmark();
                fpsDiv = document.getElementById('fps');
                                
                scene = new Scene(gammaCorrection);
                camWindowTop = new Vec3(-1, 1, -1);
                camWindowLeft = new Vec3(-1, 0, 1);
                scene.setCamera(new Camera(new Vec3(10, 10, 10), new Vec3(-1, -1, -1), camWindowLeft.normalize(), camWindowTop.normalize(), antialias, reflectionSamples));

                camWindowTop = new Vec3(0, 1, 0);
                camWindowLeft = new Vec3(-1, 0, 0);
                scene.setCamera(new Camera(new Vec3(2, 2, 12), new Vec3(0, 0, -1), camWindowLeft, camWindowTop, antialias, reflectionSamples));
                
                scene.addLight(new Light(new Vec3(7, 7, 12), 2, new Vec3(1, 1, 1), 1));
                
                var floorTexture = new CheckerTexture([new Vec3(.75, .75, .75), new Vec3(.2, .2, .2)]);
                var ballTexture = new CheckerTexture([new Vec3(1, 1, 0), new Vec3(.5, 0, .5)], Math.PI / 8, Math.PI / 8);
                var wallTexture = new ImageTexture('textures/brick.jpg', 6, 6);
//                var oldworld = new ImageTexture('textures/world_old.jpg', 2*Math.PI, Math.PI);
                var world = new ImageTexture('textures/world.jpg', 2* Math.PI, Math.PI);
                var tiles = new ImageTexture('textures/tiles.jpg', 2, 2);
                                                                //Material(texture, ambient, diffuse, specular, specularPower, reflectance, reflectionDistort, Texture)
                scene.addObject(new Plane(new Vec3(0, 0, 1), 0, new Material(wallTexture, .4, .3, 0, 16, 0, 0), [new Vec3(1, 0, 0), new Vec3(0, 1, 0)], 'red back wall'));
                //scene.addObject(new Plane(new Vec3(0, 0, 1), 0, new Material(new Texture(new Vec3(1, 0, 0)), .4, .3, 0, 16, 0, 0), null, 'red back wall'));
                scene.addObject(new Plane(new Vec3(0, 1, 0), 0, new Material(floorTexture, .5, .3, 0, 16, .3, 0), null, 'green floor'));
                //scene.addObject(new Plane(new Vec3(1, 0, 0), 0, new Material(new Texture(new Vec3(0, 0, 1)), .6, .3, 0, 16, .2, 0), null, 'blue left wall'));
                scene.addObject(new Plane(new Vec3(1, 0, 0), 0, new Material(tiles, .75, .4, .5, 8, .3, 0), [new Vec3(0, 0, 1), new Vec3(0, 1, 0)], 'blue left wall'));
                //scene.addObject(new Sphere(new Vec3(3, 3, 3), 1, null));
                
                //scene.addObject(new Sphere(new Vec3(3, 3, 7), 2, new Material(new Texture(new Vec3(1, 1, 0)), .5, .5, .4, 8, 0, 0), 'yellow ball'));
                scene.addObject(new Sphere(new Vec3(3, 3, 7), 2, new Material(world, .5, .5, .4, 8, 0, 0), 'yellow ball'));
                scene.addObject(new Sphere(new Vec3(0, 0, 10), 1.5, new Material(new Texture(new Vec3(.3, .3, .3)), .3, .3, .4, 8, .75, .5), 'mirror ball'));
            }

            function startTrace() {                
                renderInterval = setInterval(function() {
                    for(var i = 0; i < renderBatchSize; i++) {
                        if(!scene.renderPart(renderIteration, c, renderDepth)) {
                            clearInterval(renderInterval);
                        }
                        renderIteration = renderIteration + renderSkipPixels;
                        //b.lap();
                    }
                    //fpsDiv.innerHTML = 'Rendering @ ' + Math.round(b.rate()) + ' pixels per second';
                }, 0);
            }

            function debugTrace() {
                debug = true;
                console.log('Left top');
                scene.renderPart(0, c, renderDepth, antialias);
                console.log('Right top');
                scene.renderPart(c.width - 1, c, renderDepth, antialias);
                console.log('Left bottom');
                scene.renderPart((c.height - 1) * c.width, c, renderDepth, antialias);
                console.log('Right bottom');
                scene.renderPart((c.height * c.width) - 1, c, renderDepth, antialias);
                console.log('Center');
                scene.renderPart((((c.height / 2) - 1) * c.width) + ((c.width / 2) - 1), c, renderDepth, antialias);
                
                debug = false;
            }

            function singleTrace() {
                renderInterval = setInterval(function() {
                    if(!scene.renderPart(renderIteration, c, renderDepth)) {
                        clearInterval(renderInterval);
                    }
                    renderIteration = renderIteration + renderSkipPixels;
                }, 0);
            }

            function stopTrace() {
                clearInterval(renderInterval);
            }

            function clone(obj) {
                if(obj == null || typeof(obj) != 'object') {
                    return obj;
                }

                var temp = new obj.constructor(); // changed (twice)
                for(var key in obj) {
                    temp[key] = clone(obj[key]);
                }
                return temp;
            }
            
            function debugMsg(msg) {
                var dbg = document.getElementById('debug');
                var tmp = dbg.innerHTML;
                tmp = msg + '\n' + tmp.replace('<br />', '\n');
                if(tmp.length > 300) {
                    tmp = tmp.substring(0, 300);
                }
                dbg.innerHTML = tmp.replace('\n', '<br />');
            }
        
        /* ]]> */
        </script>

        <style type="text/css">
            canvas { border: 1px solid black; }
        </style>
    </head>

    <body onload="init()" style="font-family: Lucida Console; font-size: 10pt;">
        <h1>Ray Tracer - Canvas Playground - HTML 5 features</h1>
        As discussed at <a href="http://www.edesign.nl/">www.eDesign.nl</a> | by Jurgen Westerhof<br /><br />
            <canvas id="axis" width="400" height="400" style="float: left">
                This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
        <div style="float: left;">
            <button onclick="startTrace();">Start/continue tracing (batch, windows whines about browser not responding)</button><br />
            <button onclick="singleTrace();">Start/continue single step tracing (slow)</button><br />
            <button onclick="stopTrace();">Pause tracing</button><br />
            <button onclick="debugTrace();">Debug tracing</button><br />
        </div>
        <div style="clear: both"></div>
        <div id="fps"> </div>
        <div id="debug"> </div>
<p>
    <a href="?show_source=true">Source of this PHP file</a><br />
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="html5.png"
        alt="Valid HTML5" height="31" width="80" style="border: none" border="0" /></a>
</p>
    </body>
</html>