Primitives

$(function() {
    
  var canvas = document.getElementById('mainCanvas');
  
  var graphicsDevice = new Zia.GraphicsDevice(canvas);

  var program = new Zia.BasicProgram(graphicsDevice, {
    textureEnabled: true,
    lightingEnabled: true,
  });
  program.enableDefaultLighting();

  var texture = Zia.Texture2D.createFromImagePath(graphicsDevice,
    '../assets/textures/UV_Grid_Sm.jpg');
  program.texture = texture;

  var model;

  function loadModel(primitive) {
    model = Zia.GeometricPrimitive.convertToModel(
      graphicsDevice, Zia.GeometricPrimitive['create' + primitive]());

    for (var i = 0; i < model.meshes.length; i++) {
      var mesh = model.meshes[i];
      for (var j = 0; j < mesh.meshParts.length; j++) {
        mesh.meshParts[j].program = program;
      }
    }
  }

  loadModel('Teapot');

  var projectionMatrix = Zia.Matrix4.createPerspectiveFieldOfView(
    Zia.MathUtil.PI_OVER_FOUR,
    graphicsDevice.viewport.aspectRatio, 0.1, 100,
    new Zia.Matrix4());
  
  var viewMatrix = Zia.Matrix4.createLookAt(
    new Zia.Vector3(1, 1, -1.2),
    new Zia.Vector3(0, 0, 0),
    new Zia.Vector3(0, 1, 0),
    new Zia.Matrix4());

  var modelMatrix = Zia.Matrix4.createIdentity(new Zia.Matrix4());

  var rotationAxis = new Zia.Vector3(0, 1, 0);
  var rotationAngle = 0;

  var stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.top = '0px';
  canvas.parentElement.appendChild(stats.domElement);

  function drawScene() {
    stats.begin();

    if (graphicsDevice.resize()) {
      Zia.Matrix4.createPerspectiveFieldOfView(
        Zia.MathUtil.PI_OVER_FOUR,
        graphicsDevice.viewport.aspectRatio,
        0.1, 100,
        projectionMatrix);
    }

    graphicsDevice.clear(
      Zia.ClearOptions.ColorBuffer | Zia.ClearOptions.DepthBuffer,
      new Zia.Color4(0.7, 0.7, 0.7, 1), 1);

    Zia.Matrix4.createFromAxisAngle(
      rotationAxis, Zia.Math.degToRad(rotationAngle),
      modelMatrix);
    model.draw(modelMatrix, viewMatrix, projectionMatrix);

    stats.end();
  }

  var lastTime = 0;

  function animate() {
    var timeNow = new Date().getTime();
    if (lastTime != 0) {
      var elapsed = timeNow - lastTime;
      rotationAngle += (20 * elapsed) / 1000.0;
    }
    lastTime = timeNow;
  }

  function tick() {
    requestAnimationFrame(tick);
    drawScene();
    animate();
  }

  var controls = {
    primitive: 'Teapot',
    toggleFullScreen: function() {
      Zia.HtmlUtil.toggleFullScreen(canvas.parentElement);
    }
  };

  var gui = new dat.GUI({ autoPlace: false });
  canvas.parentElement.appendChild(gui.domElement);

  var filterController = gui.add(controls, 'primitive', [
    'Cube',
    'Cylinder',
    'Plane',
    'Sphere',
    'Teapot',
    'Torus'
  ]).name('Primitive');
  filterController.onChange(function(value) {
    loadModel(value);
  });

  gui.add(controls, 'toggleFullScreen').name('Fullscreen');

  tick();

});