topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

graphic-canvas-experiment-raytracer-scene.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"><head>
  
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Canvas Raytracer @ Flog</title>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-prototype.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-color.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-light.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-vector.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-ray.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-scene.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-basematerial.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-solid.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-chessboard.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-baseshape.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-sphere.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-plane.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-intersectioninfo.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-camera.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-background.js"></script>
  <script type="text/javascript" src="graphic-canvas-experiment-raytracer-script-engine.js"></script>
  
  <script type="text/javascript">
  
  function renderScene(){ 
      var scene = new Flog.RayTracer.Scene();
      
      scene.camera = new Flog.RayTracer.Camera(
                          new Flog.RayTracer.Vector(0, 0, -15),
                          new Flog.RayTracer.Vector(-0.2, 0, 5),
                          new Flog.RayTracer.Vector(0, 1, 0)
                      );
      
      scene.background = new Flog.RayTracer.Background(
                                  new Flog.RayTracer.Color(0.5, 0.5, 0.5),
                                  0.4
                              );
      
      var sphere = new Flog.RayTracer.Shape.Sphere(
          new Flog.RayTracer.Vector(-1.5, 1.5, 2),
          1.5,
          new Flog.RayTracer.Material.Solid(
              new Flog.RayTracer.Color(0,0.5,0.5),
              0.3,
              0.0,
              0.0,
              2.0
          )
      );
      
      var sphere1 = new Flog.RayTracer.Shape.Sphere(
          new Flog.RayTracer.Vector(1, 0.25, 1),
          0.5,
          new Flog.RayTracer.Material.Solid(
              new Flog.RayTracer.Color(0.9,0.9,0.9),
              0.1,
              0.0,
              0.0,
              1.5
          )
      );
      
      var plane = new Flog.RayTracer.Shape.Plane(
                                  new Flog.RayTracer.Vector(0.1, 0.9, -0.5).normalize(),
                                  1.2,
                                  new Flog.RayTracer.Material.Chessboard(
                                      new Flog.RayTracer.Color(1,1,1),
                                      new Flog.RayTracer.Color(0,0,0),
                                      0.2,
                                      0.0,
                                      1.0,
                                      0.7
                                  )
                              );
      
      scene.shapes.push(plane);
      scene.shapes.push(sphere);
      scene.shapes.push(sphere1);
  
      var light = new Flog.RayTracer.Light(
          new Flog.RayTracer.Vector(5, 10, -1),
          new Flog.RayTracer.Color(0.8, 0.8, 0.8)
      );
      
      var light1 = new Flog.RayTracer.Light(
          new Flog.RayTracer.Vector(-3, 5, -15),
          new Flog.RayTracer.Color(0.8, 0.8, 0.8),
          100
      );
      
      scene.lights.push(light);
      scene.lights.push(light1);
      
      /* Load rendering options */
      var imageWidth = F('imageWidth');
      var imageHeight = F('imageHeight');
      var pixelSize = F('pixelSize').split(',');
      var renderDiffuse = F('renderDiffuse');
      var renderShadows = F('renderShadows');
      var renderHighlights = F('renderHighlights');
      var renderReflections = F('renderReflections');
      var rayDepth = 2;//F('rayDepth');
      
      var raytracer = new Flog.RayTracer.Engine(
          {
              canvasWidth: imageWidth,
              canvasHeight: imageHeight,
              pixelWidth: pixelSize[0],
              pixelHeight: pixelSize[1],
              "renderDiffuse": renderDiffuse,
              "renderHighlights": renderHighlights,
              "renderShadows": renderShadows,
              "renderReflections": renderReflections,
              "rayDepth": rayDepth
          }
      );
      
      //$("canvas").setAttribute("width", imageWidth);
      //$("canvas").setAttribute("height", imageHeight);
      
      raytracer.renderScene(scene, $("canvas"), 0);
  }
  
  function start(){
      Event.observe('btnRender', 'click', renderScene);
  }
  
  window.addEventListener("load", start, false);
  
  </script>
  
  <style type="text/css">
  body {
      background: #fff;
      font: 11px/1.6em Tahoma, Verdana, Arial, sans-serif;
  }
  canvas {
      border: 5px solid #000;
      background: #000;
      float: left;
  }
  fieldset#options {
      width: 180px;
      margin-left: 20px;
      float: left;
  }
  </style>
      
  </head><body>
  
  <h1>Flog.RayTracer Canvas Demo</h1>
  <p>Warning: This is very CPU intensive. Your browser may appear to stop responding. I suggest using Opera, as it has
  a great (fast) JavaScript processor.</p>
  
  <canvas id="canvas" width="500" height="500" style="border: 5px solid rgb(0, 0, 0);"></canvas>
  
  <fieldset id="options">
      <legend>Rendering Options</legend>
      <fieldset>
          <legend>Output</legend>
          <label for="imageWidth">Image Width: </label><br>
          <input id="imageWidth" value="500" type="text">
          <br>
          <label for="imageHeight">Image Height: </label><br>
          <input id="imageHeight" value="500" type="text">
          <br>
          <label for="pixelSize">Pixel size:</label><br>
          <select id="pixelSize">
              <option value="20,20">Quick &amp; nasty (20x20)</option>
              <option value="10,10">Faster (10x10)</option>
              <option value="5,5">Fast (5x5)</option>
              <option value="2,5">Ok quality (2x5)</option>
              <option value="2,2">Good quality (2x2)</option>
              <option value="1,1">Best quality (1x1)</option>
          </select>
      </fieldset>
      
      <fieldset>
          <legend>Render</legend>
          <label><input id="renderDiffuse" checked="checked" type="checkbox"> Diffuse</label>
          <br>
          <label><input id="renderShadows" checked="checked" type="checkbox"> Shadows</label>
          <br>
          <label><input id="renderHighlights" checked="checked" type="checkbox"> Highlights</label>
          <br>
          <label><input id="renderReflections" checked="checked" type="checkbox"> Reflections</label>
      </fieldset>
      
      <button type="button" id="btnRender">Render</button>
  </fieldset>
  
  </body></html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.