README

= NGEN =

NGEN is a technology demo using HTML5 Canvas. The application demonstrates a basic rendering engine with rotate, zoom, pan, entity selection and more.

NGEN implements a 'virtual' world with entities that can be connected with each other, as defined by a JSON dataset. Each entity has it's own properties that can be inspected by clicking on it. The app keeps a history of selected items and allows the user to rotate, pan and zoom the scene gracefully.

== Relevancy of the demo ==

Working with HTML5 canvas is very different from working with the HTML and CSS. This demo explores the differences by experience.

Also, I tried to get a sense of what is possible in the browsers of today – how many frames per second can we squeeze out? Can we already port Quake 3 to Canvas?

Where the DOM is stateful and has structure, HTML5 Canvas has nothing – it's just a pixel buffer. This requires to have a clean separation between model and view in your JavaScript code, and manage redraws and user events yourself.

While programming with Canvas, you find yourself in a whole new performance arena. The one browser is fast in drawing lines, the other one is slow with drawing gradients. Internet Explorer has to run through a very slow emulation layer.

== Features ==

Functional features:
 * Selection of entities.
 * Back/forward selection.
 * Dragging of entities.
 * Zoom, rotate, pan of the scene.
 * Filter/search for entities.
 * Dynamic entity layout.

Technical features:
 * Dynamic entity layout.
 * Only rendering objects that are in view.
 * Using multiple Canvas elements (layers).
 * Freezing layers for performance..
 * Entity API.
 * Accurate object finder by mouse x/y.
 * Using HTML controls with Canvas.