Architecture

Mindset

The Web and particularly WebGL are still tested as a sustainable platform for 3D applications. Mainly this is more of a tooling problem (and experience in using it) rather than a hard limit in existing potential.

On the other hand, web development has a tradition that is unique and rather different from native development, where 3D used to live till now. Thus there's a need for 3D to be reformed in a way that it meets existing web development standards, rather than going the other route and porting existing native 3D frameworks on the Web.

Created out of this need is Construct.js, an HTML5 framework that leverages existing open source libraries to render 3D graphics, using preconceived conventions while taking a firm stance towards following best practices.

Concept

What if we could have the same building blocks like markup, stylesheets to build 3D environments and combine them with existing js libraries to manipulate the 3D content.

The main idea is to extend existing web development to cover 3D, rather than creating a whole different mindset all together. So, as we're used to in traditional web development, we mostly work with HTML for structure, CSS for styling and JavaScript for the binding logic.

In comparison, other HTML5 framework have similar feature set, namespace definitions as they try the all under one roof approach. Construct.js is in fact defying this practice by depending on popular libraries like Backbone.js, Underscore, Handlebars, Three,js, jQuery and Require.js. It’s non-intrusive and all conventions can be overridden.

To make the necessary bindings between 3D and the DOM, instrumental components of Construct.js are:

• jQuery Three, a jQuery plugin that connects Three.js with markup tags
• Backbone APP - an extension library for Backbone.js that includes a number of common conventions under the app namespace.

Technically Construct.js can be perceived as a binding shell rather than a development framework. More interestingly, it is not relying solely on JavaScript. Markup has proven its utility in the DOM and separation of concerns is one of the fundamental principles Construct.js is trying to enforce; by using a combination of markup tags, CSS styles and JavaScript. The core belief is that 3D needs to be constructed on the web like all other DOM elements, following the same concepts & conventions.

Setting these conventions is done with the foresight to upcoming evolutions of the web platform like ECMAScript 6 and web components using Shadow DOM, and the library tries to respect (and not override) any of the existing web APIs or set standards.

Goal

Construct.js was created to free web developers, not get them tied to another framework they can’t escape. It won’t try to take over the full development stack or the whole browser viewport. It’ll just be contained to where it’s defined and run the code that’s needed.