n-Hedral – Behind the Scenes, Part 4: Interactive WebGL Interface

June 4, 2014 3D graphics
If you haven’t yet checked out my Masters Project, n-Hedral: Customizable Furniture System, take a look here!

The start of the n-Hedral project basically coincides with the start of this blog.  I started by first experimenting with a lot of different technologies to find a foothold in the world of web-based customization.  Finally, I found my way to WebGL, and began experimenting with it (here, here and here).  Once I had determined the form of my project (based on my experiments here), I began developing the framework to design custom furniture based on tetrahedral forms.

**Disclaimer**

This post is simply meant to show the evolution of the interface, not the technical nuts and bolts.  If you have a specific question about a certain feature implementation, write me a note and I’d be glad to write a post explaining it.  Also, please keep in mind that I am not a coder by profession, so a lot of the things I’ve done here are probably not the most efficient or correct way to go about things.  However, keeping that in mind, I’d like to take a minute to point out that it really is amazing what can be accomplished with a bit of research on the internet.  For starters most of the heavy lifting was done for me by ThreeJS, a javascript libray that implements WebGL.  And without all of the countless blog posts, stack overflow responses, and other general nerdery on the internet, I would have had no idea where to start… so thanks!

The initial prototypes started simply, just building an expandable framework on which the panels would be drawn.  This prototype allows you to click on the frame, and create new cells.   Click below to view the demo:

Prototype_V01-01

The next step was to draw panels for each of the faces of the triangular faces.  This involved creating a custom mesh generation algorithm to create each panel and keep track of them in space.  The original framework is still there, just invisible.  Click below to view the demo:

Prototype_V01-04

From here, I was able to design a way to move the vertices of the underlying framework, allowing the panels to be re-sized.  The framework can be expanded, as in the previous example, however, now you can move each individual vertex by hovering over it, clicking, and dragging an arrow handle.  The arrow handles are done using invisible intersection planes that allow the code to find the intersection points of the mouse in a given direction.  Enabling draggability created some difficulties (which can be found here), however, in-depth research into the OrbitControls script allowed me to solve my own problems.   Click below to view the demo:

Prototype_V02-05

With the general framework down, adding static interface buttons was the next task.  Using Javascript-generated HTML elements, I was able to create the a set of graphics that appear in a layer over the WebGL canvas.  These elements still allow interaction with the 3D environment, but enable the user to receive directions and make selections.  Click below to view the demo:

Prototype_V03-06

With the basic elements understood, I was able to add functionality.  I was able to create draggable sliders using HTML div elements, and then wrote a custom mesh generation algorithm to create new panel shapes and connector pieces.  I also enabled saving a picture or 3D model of the design for future use.  A flyout window provides instructions to the user, and the wireframe can be turned on and off.  Click below to visit the n-Hedral Customizer:

Interface

And that’s about 4 months of work in a nutshell!  I’m really excited to have been able to achieve such an interactive result in such a short amount of time.  All of the tricks I learned through the making of this interface have given me some serious coding skill with which I can move forward and create more customizable products.  I’m really excited for the future!

Click here to see the next, and final, installment of the n-Hedral – Behind the Scenes series!

Leave a Reply

Your email address will not be published. Required fields are marked *