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

The Dirty Bits

• Rendering problems (read below)

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

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

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

• 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

• 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

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

The Good Bits

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

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

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

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

The Implementation

• Dynamically generated spritesheet

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

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

• 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

• 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

• 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

• 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

Custom2DPolygons (Irregular polygons)

Custom2DPolygons (Irregular polygons)

Custom2DPolygons (Irregular polygons)

Custom2DPolygons (Irregular polygons)

Custom2DPolygons (Irregular polygons)

Custom2DPolygons (Irregular polygons)

Demo

Is a Free, OSS, MIT-licensed tech

Thank you!

Questions?