My presentation from OSDC 2011 on building 3d apps with Javascript. The code for this can be found here: https://github.com/predominant/OSDC-3DJS

1. Building 3D apps
with Javascript

2. Graham Weldon
PHP developer for 11 years
CakePHP core contributor
Open source public speaker
Love developing/teaching
@predominant
http://grahamweldon.com
http://cakedc.com

3. 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

4. Side Projects

5. MyIsland
Perlin noise generation
Simplex alternatives
Voxel terrain
Complex mesh generation
Mesh combination
Performance complexities

6. Sphere
Tessellation
Dynamically generate a sphere
Custom mesh winding
Allow various sizes
Keep performance high
Combine meshes

7. Procedural Terrain
Generation
Earth-like planets
Chunky but natural looking
Randomly generated
Shaders
Colouring

8. 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

9. Falling sand
simulation
Pixels for sand
Drag and drop producers
Heap generation
Particle emitters
Frame based particles

10. Javascript Rendered
Lidar Data
apps4nsw
Kempsy data
Raw files provided
Progressive data loading
Performance problems

11. Scary fact
Why you might want to leave

12. I am not a
Javascript Ninja

13. Exciting fact
Why you should stay

16. Technology
Stuff we will use today

17. Technology
Javascript
Chrome
Three.js
Make 3D easier
https://github.com/mrdoob/three.js
Node.js
Server
Client management
http://nodejs.org

18. Math
Yuck :-(
Vectors
Quaternions
Matrices
Trigonometry

19. Vector (2D)

20. P(x, y)
P(12, 13)
P(-10, 8)
Vector (2D)

21. Vector (3D)

22. P(x, y, z)
P(12, 13, 4)
P(-10, 8, -33)
Vector (3D)

23. Local Space & World Space

24. 3D Terminology

25. The Concept

26. Lets build a game
Game
Multiplayer
Responsive
Canvas based HTML client

27. CODE TIME!
You can grab the code at: https://github.com/predominant/OSDC-3DJS

28. Frustum

29. Graham Weldon
PHP developer for 11 years
CakePHP core contributor
Open source public speaker
Love developing/teaching
@predominant
http://grahamweldon.com
http://cakedc.com