Building 3D appswith Javascript
Graham Weldon  PHP developer for 11 years  CakePHP core contributor  Open source public speaker  Love developing/teaching ...
Tragic Gamer  Used to work as a public  gaming administrator  Used to game competitively  Still heavily into games  Hobby ...
Side Projects
MyIsland  Perlin noise generation  Simplex alternatives  Voxel terrain  Complex mesh generation  Mesh combination  Perform...
SphereTessellation  Dynamically generate a sphere  Custom mesh winding  Allow various sizes  Keep performance high  Combin...
Procedural TerrainGeneration  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  Planet...
Falling sandsimulation  Pixels for sand  Drag and drop producers  Heap generation  Particle emitters  Frame based particles
Javascript RenderedLidar Data  apps4nsw  Kempsy data  Raw files provided  Progressive data loading  Performance problems
Scary factWhy you might want to leave
I am not aJavascript Ninja
Exciting factWhy you should stay
TechnologyStuff we will use today
Technology  Javascript  Chrome  Three.js      Make 3D easier      https://github.com/mrdoob/three.js  Node.js      Server ...
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 ...
Building 3D apps with Javascript
Building 3D apps with Javascript
Upcoming SlideShare
Loading in...5
×

Building 3D apps with Javascript

3,338

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,338
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Building 3D apps with Javascript

    1. 1. Building 3D appswith Javascript
    2. 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. 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. 4. Side Projects
    5. 5. MyIsland Perlin noise generation Simplex alternatives Voxel terrain Complex mesh generation Mesh combination Performance complexities
    6. 6. SphereTessellation Dynamically generate a sphere Custom mesh winding Allow various sizes Keep performance high Combine meshes
    7. 7. Procedural TerrainGeneration Earth-like planets Chunky but natural looking Randomly generated Shaders Colouring
    8. 8. Spaaaaaaaaaaaace Free form sandbox space game 1:1 scale Space travel Intra-atmosphere travel Rotating planets Planetary gravityShip Model by Thomas Campbell http://tomc3d.com
    9. 9. Falling sandsimulation Pixels for sand Drag and drop producers Heap generation Particle emitters Frame based particles
    10. 10. Javascript RenderedLidar Data apps4nsw Kempsy data Raw files provided Progressive data loading Performance problems
    11. 11. Scary factWhy you might want to leave
    12. 12. I am not aJavascript Ninja
    13. 13. Exciting factWhy you should stay
    14. 14. TechnologyStuff we will use today
    15. 15. Technology Javascript Chrome Three.js Make 3D easier https://github.com/mrdoob/three.js Node.js Server Client management http://nodejs.org
    16. 16. Math Yuck :-( Vectors Quaternions Matrices Trigonometry
    17. 17. Vector (2D)
    18. 18. P(x, y) P(12, 13) P(-10, 8)Vector (2D)
    19. 19. Vector (3D)
    20. 20. P(x, y, z) P(12, 13, 4) P(-10, 8, -33)Vector (3D)
    21. 21. Local Space & World Space
    22. 22. 3D Terminology
    23. 23. The Concept
    24. 24. Lets build a game Game Multiplayer Responsive Canvas based HTML client
    25. 25. CODE TIME!You can grab the code at: https://github.com/predominant/OSDC-3DJS
    26. 26. Frustum
    27. 27. Graham Weldon PHP developer for 11 years CakePHP core contributor Open source public speaker Love developing/teaching @predominant http://grahamweldon.com http://cakedc.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×