In our progression towards a full-fledged model design app, we completed the following steps so far:
- Retrieving and Processing Query Strings in JavaScript and a Node.js Server
- Hosting a Node Server on Heroku
- A Program Generator Node.js Web Server
- Displaying 2D Graphics via a Node Server
- Driving the SVG Node Server from a Desktop Application
After the quick and efficient little excursion into 2D graphics using SVG, let's head straight on towards 3D...
WebGL
Nowadays, the simplest and most ubiquitous support for 3D on the web is probably provided by WebGL.
WebGL is a JavaScript library that supports generation and interaction with 3D graphics within compatible web browsers.
It uses the HTML5 canvas element and the DOM or Document Object Model interface to access it.
WebGL is more-or-less a subset of OpenGL, a well established, cross-language, cross-platform specification typically used in desktop applications.
Here are some great WebGL resources for getting started:
- WebGL samples
- WebGL fundamentals – start here to learn WebGL
- Three.js – start here to get stuff done
- The WebGL specification
- The official WebGL Wiki
WebGL Fundamentals Tutorial
The WebGL fundamentals by Gregg 'Greggman' Tavares provide an exquisite and thorough tutorial.
The entire web site is GitHub hosted and automatically generated from markdown source files.
To quote the readme in the WebGL Fundamentals GitHub repo:
Unlike most WebGL lessons these are not based off of OpenGL. OpenGL is 20 years old. The lessons of OpenGL don't match well with WebGL. The APIs have changed too much. The ideas of OpenGL and OpenGL tutorials are out of date with WebGL, OpenGL ES 2.0 and the land of shaders.
I would argue that WebGL is actually a very simple API. What makes it appear complicated is the way in which it's used. The complications are added by the programmer. WebGL itself is simple.
These lessons try to show that simplicity and well as teach the fundamentals of 2D math and 3D math so readers can hopefully have an easier time writing their own WebGL programs and understanding the complexity that other programmers pile on top of simple WebGL.
One nice starting point to jump into the third dimension is his orthographic 3D post, working up meticulously step by step to the following final result:
Click here to open in a separate window
One of Gregg's subsequent posts, on the WebGL 3D perspective, provides the nicest interactive explanation of the perspective view matrix I have ever laid eyes on:
Click here to open in a separate window
The Tiny WebGL Helper Library TWGL
The WebGL Fundamentals Tutorial also presents Gregg's Tiny WebGL helper Library TWGL (rhymes with wiggle).
TWGL makes the use of WebGL a little simpler by providing a few tiny helper functions that make it much less verbose. It is a thin wrapper. It does not help with the complexity of managing shaders, nor is it a full-fledged 3D library like three.js.
One simple demos of it displays this rotating cube:
Click here to open in a separate window
I already started implementing a Revit add-in to populate that sample with real-world CAD geometry grabbed from a simple building model, so I'll go on and take a closer look at it tomorrow.
For more complex interaction and greater comfort, we will later move on to three.js and other higher-level frameworks, just as suggested above in the overview of WebGL resources.
Subscribe