Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

onGameStart

1,802 views

Published on

Introducing Tracy: A minimalistic, CSS-Powered 3D Framework

Published in: Technology
  • Be the first to comment

onGameStart

  1. 1. Introducing Tracy: A Minimalistic,CSS-Powered 3D Rendering Framework Andrés Pagella - @mapagella - http://www.andrespagella.com http://github.com/andrespagella
  2. 2. The Dirty Bits
  3. 3. • Rendering problems (read below)
  4. 4. • Rendering problems (read below)• Many weird browser bugs
  5. 5. • Rendering problems (read below)• Many weird browser bugs• Complex implementation to get optimal rendering performance
  6. 6. • Rendering problems (read below)• Many weird browser bugs• Complex implementation to get optimal rendering performance• You need to re-implement many things yourself
  7. 7. • Rendering problems (read below)• Many weird browser bugs• Complex implementation to get optimal rendering performance• You need to re-implement many things yourself• Completely different from traditional 3D Frameworks
  8. 8. • Rendering problems (read below)• Many weird browser bugs• Complex implementation to get optimal rendering performance• You need to re-implement many things yourself• Completely different from traditional 3D Frameworks• No tools for artists
  9. 9. • Rendering problems (read below)• Many weird browser bugs• Complex implementation to get optimal rendering performance• You need to re-implement many things yourself• Completely different from traditional 3D Frameworks• No tools for artists• Not practical to load models using COLLADA, obj, etc.
  10. 10. The Good Bits
  11. 11. • Works absolutely everywhere, Phones, Tablets, PCs (Including IE10)
  12. 12. • Works absolutely everywhere, Phones, Tablets, PCs (Including IE10)• Very easy to use and to get started
  13. 13. • Works absolutely everywhere, Phones, Tablets, PCs (Including IE10)• Very easy to use and to get started• Resolves many things automatically
  14. 14. More ‘cons’ than ‘pros’? Is it worth it? Absolutely.
  15. 15. The Implementation
  16. 16. • Dynamically generated spritesheet
  17. 17. • Dynamically generated spritesheet• Many 2D & 3D geometry types: Cubes, Cylinders, Cones, Planes, Regular Polygons, etc.
  18. 18. • Dynamically generated spritesheet• Many 2D & 3D geometry types: Cubes, Cylinders, Cones, Planes, Regular Polygons, etc.• Object groups
  19. 19. • Dynamically generated spritesheet• Many 2D & 3D geometry types: Cubes, Cylinders, Cones, Planes, Regular Polygons, etc.• Object groups• Each element is given a unique ID to optimize lookups
  20. 20. • Dynamically generated spritesheet• Many 2D & 3D geometry types: Cubes, Cylinders, Cones, Planes, Regular Polygons, etc.• Object groups• Each element is given a unique ID to optimize lookups• No reflows, just repaints in most cases
  21. 21. • Dynamically generated spritesheet• Many 2D & 3D geometry types: Cubes, Cylinders, Cones, Planes, Regular Polygons, etc.• Object groups• Each element is given a unique ID to optimize lookups• No reflows, just repaints in most cases• Object pools to optimise the GC
  22. 22. • Dynamically generated spritesheet• Many 2D & 3D geometry types: Cubes, Cylinders, Cones, Planes, Regular Polygons, etc.• Object groups• Each element is given a unique ID to optimize lookups• No reflows, just repaints in most cases• Object pools to optimise the GC• Intuitive, easy to use for 2D Developers
  23. 23. Custom2DPolygons (Irregular polygons)
  24. 24. Custom2DPolygons (Irregular polygons)
  25. 25. Custom2DPolygons (Irregular polygons)
  26. 26. Custom2DPolygons (Irregular polygons)
  27. 27. Custom2DPolygons (Irregular polygons)
  28. 28. Custom2DPolygons (Irregular polygons)
  29. 29. Demo
  30. 30. Is a Free, OSS, MIT-licensed tech
  31. 31. Thank you!
  32. 32. Questions?

×