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

1. Introducing Tracy: A Minimalistic,
CSS-Powered 3D Rendering Framework
Andrés Pagella - @mapagella - http://www.andrespagella.com
http://github.com/andrespagella

24. The Dirty Bits

26. • Rendering problems (read below)

27. • Rendering problems (read below)
• Many weird browser bugs

28. • Rendering problems (read below)
• Many weird browser bugs
• Complex implementation to get optimal
rendering performance

29. • Rendering problems (read below)
• Many weird browser bugs
• Complex implementation to get optimal
rendering performance
• You need to re-implement many things
yourself

30. • 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

31. • 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

32. • 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.

33. The Good Bits

35. • Works absolutely everywhere, Phones,
Tablets, PCs (Including IE10)

36. • Works absolutely everywhere, Phones,
Tablets, PCs (Including IE10)
• Very easy to use and to get started

37. • Works absolutely everywhere, Phones,
Tablets, PCs (Including IE10)
• Very easy to use and to get started
• Resolves many things automatically

38. More ‘cons’ than ‘pros’? Is it worth it?
Absolutely.

39. The Implementation

41. • Dynamically generated spritesheet

42. • Dynamically generated spritesheet
• Many 2D & 3D geometry types: Cubes,
Cylinders, Cones, Planes, Regular
Polygons, etc.

43. • Dynamically generated spritesheet
• Many 2D & 3D geometry types: Cubes,
Cylinders, Cones, Planes, Regular
Polygons, etc.
• Object groups

44. • 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

45. • 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

46. • 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

47. • 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

48. Custom2DPolygons (Irregular polygons)

49. Custom2DPolygons (Irregular polygons)

50. Custom2DPolygons (Irregular polygons)

51. Custom2DPolygons (Irregular polygons)

52. Custom2DPolygons (Irregular polygons)

53. Custom2DPolygons (Irregular polygons)

54. Demo

59. Is a Free, OSS, MIT-licensed tech

60. Thank you!

61. Questions?