HTML5 & WebGL

Daniel Davis – 16 May 2011

Innovation comes from funny places. In 2005 Apple introduced the Dashboard; a largely impractical application that overlaid the desktop with little Widgets reminding you of the time, weather, and stock-market prices. The most redeeming feature of the Dashboard was that when you added a new Widget to the Dashboard it made the screen ripple like it was made from water and, since not all computers at the time were powerful enough to do this, the Dashboard’s rippling became an unofficial performance benchmark. Despite the frivolous nature of Dashboard, the Widgets have an important legacy (other than being a precursor of the iPhone apps).

Dashboard Widgets are made up of HTML, CSS, and Javascript – the same stuff websites are made from. Except Apple added one extra word to the Widgets vocabulary: canvas. This little, propitiatory, modification of the HTML language allowed Widget designers to write Javascript code that drew shapes in the Widget – much like Processing.  Three years later, in 2008, and HTML standard was updated to standardise the drawing of drop-shadows across browsers (a big deal if you are a webdesigner) and to include the canvas tag as part of the official HTML standard (a big deal if you are an architect). Now in 2011, ‘canvas’ has been extended to allow the drawing of 3d shapes with WebGL.

What is WebGL?

Prior to WebGL the only practical way of drawing 3d objects in a web-browser was through a plugin like Flash or Java (not the same as Javascript). Plugins are slow because the when the plugin code decides to draw a line, it must ask the plugin, which must ask the webbrowser, which must ask the operating system, which must ask several other layers of the computer, to draw the line onscreen. This journey through the grapevine is inevitably slow. WebGL skips these layers by allowing Javascript access to the GPU, meaning WebGL can send data straight to your videocard to be rendered. WebGL also has the advantage that it is native to the browser, so users don’t need to download or install any additional plugins to view 3d content – currently only the latest versions of Chrome and Firefox support WebGL, but all browsers (except possibly IE) will support it in the coming months.

Why WebGL is important to CAD

It is inevitable that in the near future CAD models will be able to be viewed in a browser using WebGL. There are already some early examples of this happening with PythonOCC/WebGL which exports 3d models to WebGl; the Surface Explorer, which draws doubly curved surfaces from equations; and most beautifully in the Google Body Explorer, which allows you to interact with a rather complex 3d model of the body. And I have it on good authority that at least one major CAD manufacturer is making a ‘dropbox for CAD files and project data.’

With 3d models now viewable on the internet, the critical question becomes how much interaction will be enabled. Will you be able to view associated model data? Will you be able to modify a model? Will you be able to generate a model? Will the browser become your preferred way of designing?  Some early applications like CloudSCAD, 3dTin, Shapesmith (shown above) and TinkerCAD, would say ‘yes’ to all of the above. There are some advantages to this approach:

  1. Users don’t have to download software and updates can be made instantly.
  2. Theoretically the application is cross platform and cross device.
  3. Users can use less powerful computers to do more complex tasks by offloading the work onto the server. The server might be able to do the rendering or object population, the server could also load a really large model while giving the user a simplified version of the area they are working on. It is also a better use of resources to have one server constantly working hard rather than every user intermittently working their computer hard.
  4. Live connections to other databases. A few years ago I helped start ProductSpec, and it has always been on the roadmap to have the Productspec database linked to CAD models so that as manufactures change product data, this is reflected, in realtime, within the model.
  5. All of the associated advantages of cloud computing: less piracy, more payment granularity, online storage/backup ect.

However even with the examples of early WebGL CAD software and all the advantages listed above, I am still not entirely convinced we will be designing with WebGL in the future. For one thing CAD manufactures, who have a lot invested in large code bases, are going to be slow making the switch. There may be a new generation of companies that develop WebGL applications but (at least initially) they are going to look underdeveloped compared to their desktop rivals. Secondly, as painful as C++ development can be, writing a CAD program in Javascript is simply sadistic – there are problems with browsers being consistent, there are performance issues, there are security issues. Instead I think WebGL is going to spark a new generation of software, which are more interactive than a printed drawing and less featured than a full fledged CAD package.

It is interesting to see that the next iteration of architectural representation isn’t emerging from the past 20 years of discourse flowing out of architectural theorists and philosophers, but it comes from a technology Apple developed to add a bit of bling to the desktop.

Share

Subscribe

Join the mailing list to receive an email whenever a new post comes out. Otherwise, you can follow me on Twitter, or add the RSS feed to your reader.

15 comments

  • Ben 17 May 2011 at 1:52 am

    Woke up the morning of my thesis defense to this wonderful gift- in a few short hours I’m going to be attempting to get a small group of people to take this future seriously. I’d like to add that along with Canvas and WebGL, Websockets are another great addition to HTML5 that allow a dedicated duplex client to server connection, and enable sophisticated new collaboration method (check out rumpetroll.com for a demo). Also, in a web app the heavy lifting of the software could theoretically be done server side, which might make the creation of more complex software easier to bear.

  • Daniel 18 May 2011 at 1:57 am

    Hey Ben,

    I hope your defense went well. The final project over at http://work.permanentriot.com/ looks pretty amazing, would love to see a video of it in action.

    I think Websockets looks like it will be a big deal as well. One of my renovations about the WebGL/OCC video is that the server location is never explained, and obviously the responsiveness of the application will depend a lot on whether the server is in the same room, or whether it is in a different country. Hopefully Websockets and binary data will make this less of an issue.

    Anyway, enjoy the completion of your degree,

    Daniel

  • Daniel 18 May 2011 at 2:00 am

    Actually I take that back, it turns out the WebGL/OCC project is online at http://www.shapesmith.net/ Definitely has some latency issues, but it works!

  • Ben Regnier 18 May 2011 at 5:46 am

    Thanks Daniel! The full scope of my thesis (Games as Design Environments) is not up on the blog yet, I’ll try to get a post up in the next few days.

  • Daniel 19 May 2011 at 12:01 pm

    Thanks for uploading your thesis. Hopefully I will be able to read it today, looks really interesting.

  • Mentioned 30 May 2011 at 8:32 pm

    […] the Internet this week I found Daniel Davis blog Digital Morphogenesis. I bumped into his last post HTML5 & WebGL where he introduces us to WebGL and its importance for CAD modeling. I am not an expert on these […]

  • Mentioned 30 May 2011 at 8:32 pm

    […] the Internet this week I found Daniel Davis blog Digital Morphogenesis. I bumped into his last post HTML5 & WebGL where he introduces us to WebGL and its importance for CAD modeling. I am not an expert on these […]

  • Mentioned 31 May 2011 at 1:09 am

    […] the Internet this week I found Daniel Davis blog Digital Morphogenesis. I bumped into his last post HTML5 & WebGL where he introduce us on WebGL and why is it important to Cad. I am not an expert on these topics […]

  • Benjamin 1 June 2011 at 3:10 am

    Glad you like my project (shapesmith). I’m working on the latency issues, I believe I have a solution for that. It’s also running on a single micro amazon instance, so don’t expect it to perform too well at present 🙂

  • Daniel 1 June 2011 at 6:23 pm

    Hi Benjamin,

    I think Shapesmith is years before its time, so thank you for allowing us to have a little look at the future. I can see ShapeSmith potentially becoming are really important part of WebGL (the MySQL of online geometry?). And I also just recently came across the source on GIT hub (https://github.com/bjnortier/shapesmith), so hopefully some other people will join you in making this happen.

    I am curious if you agree with my assessment in the blog that Online CAD packages would not be replacing desktop versions (despite the advantages of could based CAD), as someone who has worked with the technology, how far do you think it will go?

    Daniel

  • Mentioned 25 June 2011 at 3:20 pm

    […] research into developing a web-based multiuser version of the tool has convinced me (as it has some other folks) that WebGL, WebSockets, and the Canvas tools in HTML5 are going to be the new power tools in […]

  • Mentioned 19 December 2011 at 4:17 pm

    […] I wrote a post about WebGl back in May. A bit like tablets, it is a solution seeking a problem. ShapeSmith is probably is not the right […]

  • Mentioned 16 May 2012 at 4:13 pm

    […] a year ago I wrote a post about HTML5 & WebGL. At the time WebGL was so new that most of the article was speculation extrapolated from just a […]

  • Mentioned 5 May 2013 at 2:40 pm

    […] a year ago I wrote a post about HTML5 & WebGL. At the time WebGL was so new that most of the article was speculation extrapolated from just a […]

  • Mentioned 6 August 2013 at 8:12 pm

    […] I wrote a post about WebGl back in May. A bit like tablets, it is a solution seeking a problem. ShapeSmith is probably is not the right […]

Leave a comment