mlorg.threed

• nmlorg
• Rendering
• Physics
• Collisions
• Gaming

Simple rendering

• One collection of objects rendered into 4 viewports
• Visualization of a camera frustum
• One viewport with configurable camera settings
• Natural-language environment builder
• Tests: gl.js • world.js

Every object starts off as a shape (nmlorg.threed.shape.Shape). A shape contains geometry, color information, etc.  Each shape exists on its own, independent of a canvas, world, etc., and does not have a position or physics model.

  var shape = new nmlorg.threed.shape.Shape(
      ['position', 'color'],
      'triangles',
      [// [position ] [color       ]
          x1, y1, z1, r1, g1, b1, 1,
          x2, y2, z2, r2, g2, b2, 1,
          x3, y3, z3, r3, g3, b3, 1,
      ]);

Shapes are coupled with a 3D position inside a world to form a position object (nmlorg.threed.world.PositionObject). A single shape can be added to a world multiple times, creating a new position object each time. When a world is rendered, every shape is sent to the graphics card once, then it is repeatedly painted for every position object.

  var positionObject1 = world.addObject(shape);
  var positionObject2 = world.addObject(shape);

  positionObject1.translate(x1, y1, z1);
  positionObject2.translate(x2, y2, z2);

Each world is a collection of objects and canvases (nmlorg.threed.gl.Canvas). When a shape is added to a world, its geometry, color, etc. information (as vertex buffers) is added to each canvas. When the world is rendered, each object is rendered to each canvas.

  var canvas1 = new nmlorg.threed.gl.Canvas(width1, height1);
  var canvas2 = new nmlorg.threed.gl.Canvas(width2, height2);
  var world = new nmlorg.threed.world.World([canvas1, canvas2]);

The world can be rendered once by calling world.draw(). The world can be set to render itself repeatedly (using the browser's requestAnimationFrame) using world.start(). Custom code can be run once for each animation frame by setting the world's eachFrame.

  world.eachFrame = function(timeStep) {
    positionObject1.translate(0, 0, -1);
    positionObject2.translate(2, 0, 0);
  };

A custom animation function can be called for each position object by passing it to the constructor (directly or as the optional second argument to world.addObject). The position object will be available as this and any arguments passed after the animation function will be passed back into the function, followed by a value containing the amount of time (in seconds) since the previous frame began rendering.

  function animateObject(x, timeStep) {
    this.translate(x[0], x[1], x[2]);
  }

  var positionObject1 = world.addObject(shape, animateObject, [0, 0, -1]);
  var positionObject2 = world.addObject(shape, animateObject, [2, 0, 0]);