Real time 3d

• Most interactive devs were already using it.
• A huge amount of community support.
• By comparison AS3 is awesome.
• Really high penetration rate (twss).
• Platform independent.
• Compiles to Desktop and Mobile Apps.

• Really fast to do simple things.
• 60fps sub-pixel animations.
• Works great on most devices.
• No plugins required.

• Very fast drawing of 3D graphics.
• Increasing browser penetration.
• No plugins required.
• Ultra trendy.
• Imminent mobile support.

• ThreeJS (The standard)
• PhiloGL (Looks promising)
• CopperLicht (Meh)

• Cameras
• Lights
  
• Geometry
• Renderer

this.scene = new THREE.Scene();this.scene.add( this.light );
this.scene.add( this.camera );
this.scene.add( this.mesh );

• Perspective
• Orthographic

• Objects further away from the camera appear smaller.
• Imagine the eye is at a fixed point.
• Similar to how we see things in real life.

• Objects appear at the same scale no matter how far away.
• Imagine the eye is at infinity.
• Great for grid / tile based games.

1. Field of View
2. Aspect Ratio
3. Near Clipping Plane
4. Far Clipping Plane

this.camera = new THREE.PerspectiveCamera( 35, this.wndw.width / this.wndw.height, 1, 5000 );

var loader = new THREE.OBJLoader();
loader.addEventListener('load', this.onModelLoadComplete);
loader.load(this.modelLocation);
function onModelLoadCompelte(event) {    var model = event.content;    model.traverse(this.traverseModel);    this.scene.add(model);}

• Ambient: Applied to everything evenly.
• Area: Light that illuminates from a surface.
• Directional: An infinite light source in one direction.
• Point: Illuminates outward from a single point.
• Spot: Point light that casts a shadow in one direction.

var light = new THREE.DirectionalLight( 0xAAAAAA, 1.5 );
light.position.set(0, 300, 500);
light.castShadow = true;light.shadowMapWidth = 4096;light.shadowMapHeight = 4096;scene.add(light);

• CanvasRenderer
• WebGL Renderer

this.renderer = new THREE.WebGLRenderer( { antialias: true } );
this.renderer.setSize( this.windondwWidth, this.windowHeight );
			
this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;

this.renderer.shadowMapDarkness = 0.5;
this.renderer.shadowMapWidth = 2048;
this.renderer.shadowMapHeight = 2048;
this.renderer.shadowMapType = THREE.PCFSoftShadowMap;

this.element.appendChild( this.renderer.domElement );

AddType image/x-dds .dds 

AddOutputFilterByType DEFLATE image/x-dds 

1. Compressed textures are read in upside down.
2. ThreeJS has a separate loader for compressed textures.

THREE.ImageUtils.loadCompressedTexture(source, mapType, loadHandler);

1. Current Free Video Memory
2. GPU Core Utilization

var vector = new THREE.Vector3(( x / windowWidth ) * 2 - 1, - ( y / windowHeight ) * 2 + 1, 1 );

var projector = new THREE.Projector();
projector.unprojectVector( vector, this.camera );
            
var raycaster = new THREE.Raycaster( this.camera.position, vector.sub( this.camera.position ).normalize() );
var intersects = raycaster.intersectObjects( objects, true);

• Two axis movement for X, Y or X, Z.

• Mouse wheel offers third axis of movement.

  
  
• Everyone has one.
  

• Gyroscope provides three axis rotation.
  
• Accelerometer provides three axis of position. 
  
• Touch displays allow for custom UI controls.
  
• An existing user understanding of basic gestures.
  
• A lot of people have at least one.