Espen Hovlandsdal
Written by Espen Hovlandsdal
Published 2013-07-08

WebGL DAE model viewer

WebGL Model Viewer3D modeling is pretty fun. I’m nowhere near an expert – in fact, I’ve only really used Sketchup. There was a time when I was really into it, making 3D-models for all sorts of PC components.

The other day, I was looking at a WebGL demo made in three.js, and wanted to see how hard it would be to do some basic stuff in WebGL.

Having seen a lot of demos using three.js, I figured it would be a good starting point.

Entry image

Since I didn’t really have any specific project I wanted to do, I decided to at least import one of my old Sketchup-models to a scene and add some basic controls. While we can’t load Sketchup’s .skp-files directly into the scene, we can export our model to DAE format from Sketchup.

DAE models are XML documents, and as such they can become pretty big. I was using a model of an EPIA v10000 Mini-ITX motherboard, which when exported was 4.25 MB, without textures. While this isn’t really a problem when developing locally, it’s important to note that serving these files from a webserver, make sure to have gzip-compression enabled. For this particular model, it reduces the size down to 375 KB.

During my experimentation, I wondered if there was a way to package these models along with its textures and still be readable by three.js without doing multiple requests. After some Googling, I found zip.js, a Javascript library to zip and unzip files. After playing around with it for a while, I managed to get three.js and zip.js to work fairly well together.

In the demo, you can choose to load a ZIP file containing a DAE model and textures. The cool thing is that since it’s all javascript, nothing needs to be uploaded, it all runs locally within your browser. I’m not sure how often we’ll get to use WebGL and 3D models here at VG, but I enjoyed giving it a shot, and with Microsoft recently announcing WebGL support in IE11, the future is looking bright and three-dimensional 😉

Take a look at the demo if you have a WebGL-enabled browser (Chrome would be a good choice, Firefox should work).

Written by Espen Hovlandsdal
Published 2013-07-08