Building 3D apps
with Javascript
Graham Weldon

  PHP developer for 11 years

  CakePHP core contributor

  Open source public speaker

  Love developing/teaching



  @predominant

  http://grahamweldon.com

  http://cakedc.com
Tragic Gamer

  Used to work as a public
  gaming administrator

  Used to game competitively

  Still heavily into games

  Hobby in game development

  R&D, and move on

  Helps me be a more innovative
  developer for work
Side Projects
MyIsland

  Perlin noise generation

  Simplex alternatives

  Voxel terrain

  Complex mesh generation

  Mesh combination

  Performance complexities
Sphere
Tessellation
  Dynamically generate a sphere

  Custom mesh winding

  Allow various sizes

  Keep performance high

  Combine meshes
Procedural Terrain
Generation
  Earth-like planets

  Chunky but natural looking

  Randomly generated

  Shaders

  Colouring
Spaaaaaaaaaaaace

  Free form sandbox space game

  1:1 scale

  Space travel

  Intra-atmosphere travel

  Rotating planets

  Planetary gravity



Ship Model by Thomas Campbell
      http://tomc3d.com
Falling sand
simulation
  Pixels for sand

  Drag and drop producers

  Heap generation

  Particle emitters

  Frame based particles
Javascript Rendered
Lidar Data
  apps4nsw

  Kempsy data

  Raw files provided

  Progressive data loading

  Performance problems
Scary fact
Why you might want to leave
I am not a
Javascript Ninja
Exciting fact
Why you should stay
Technology
Stuff we will use today
Technology

  Javascript

  Chrome

  Three.js

      Make 3D easier

      https://github.com/mrdoob/three.js

  Node.js

      Server

      Client management

      http://nodejs.org
Math

 Yuck :-(



 Vectors

 Quaternions

 Matrices

 Trigonometry
Vector (2D)
P(x, y)

   P(12, 13)
   P(-10, 8)




Vector (2D)
Vector (3D)
P(x, y, z)

  P(12, 13, 4)
 P(-10, 8, -33)




Vector (3D)
Local Space & World Space
3D Terminology
The Concept
Lets build a game

  Game

  Multiplayer

  Responsive

  Canvas based HTML client
CODE TIME!
You can grab the code at: https://github.com/predominant/OSDC-3DJS
Frustum
Graham Weldon

  PHP developer for 11 years

  CakePHP core contributor

  Open source public speaker

  Love developing/teaching



  @predominant

  http://grahamweldon.com

  http://cakedc.com

Building 3D apps with Javascript