432 V Transfers
When we started, the simple act of loading a 3D model was its own little leap
of faith. The source 3D model data was incredibly detailed; we ended up shipping
a reduced version with 1.4 million triangles and 740 thousand vertices for 1,800
anatomical entities. Our ﬁrst prototype simply loaded everything using COLLADA,
but that took almost a minute to load from a local web server. That’s a really long
time to wait for a web page.
COLLADA was inefﬁcient in its use of bandwidth and computation, but it
wasn’t immediately apparent how we could do better. There is no DOM node or
XMLHttpRequest wouldn’t get it for months. F ortunately, we devised a way to load
Google Body’s 1.4 million triangles much more efﬁciently than we expected using a
surprising combination of standard web technologies.
I’ve shared WebGL Loader, http://code.google.com/p/webgl-loader/, as an open-
source project so that other WebGL projects can beneﬁt. This chapter describes how
WebGL Loader works. WebGL Loader can compress a 6.3 MB OBJ ﬁle to under
0.5 MB, better than a 13:1 compression ratio. GZIP alone shrinks the same ﬁle to
about 1.8 MB and yields a model ﬁle that is slower to parse and render. Taken apart,
the techniques and concepts are actually quite simple to understand. I also hope to
give insights into the process of how we went about making those choices so that we
can be equipped with more than just faith for the next time we are spurred to delve
into the depths of technical uncertainty.
30.2 Life of a 3D Model
Loading 3D models was the apparent challenge, but it is always important to keep
the big picture in mind. When I joined Google, as part of orientation, I attended
internal lectures about how the key internal systems at Google work. They all had
titles like“Life of a [blank].” For example, “Life of a Query” walks through, step by
step, what happens when a user performs a search on google.com. This end-to-end
perspective is the key to building computer systems because it motivates what we
build, even when we focus on a single component. I spent two years optimizing a
tiny corner of web search by a few percent, but I knew the effort was wor thwhile
because it was in the critical path for every web search by all of our users. If “Life of
a Query” teaches us anything, it is that there are lots of queries.
It doesn’t make sense to think about loading 3D models outside the context of all
the other steps a 3D model takes through an application. Each step informs the de-
sign. For Google Body, we thought of the model as it related to four key stages. They
are general enough that they should apply to most other WebGL projects as well:
• Pipeline. Where does the 3D model data originate?
• Serving. How does the 3D model data arrive in users’ browsers?
• Encoding. What format should the 3 D model data use?
• Rendering. How does the 3D model data get to the screen?