O'Reilly logo

OpenGL Insights by Christophe Riccio, Patrick Cozzi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

WebGL Models: End-to-End
Won Chun
30.1 Introduction
When we were making Google Body in 2010 (see Figure 30.1), WebGL was new
technology. It wasnt entirely clear what we’d be able to accomplish; indeed, the
Figure 30.1. Google Body, a 3D anatomy browser for
the web.
uncertainty was one of the
reasons for building it in the
first place. Adopting a new
technology like WebGL was
aleapoffaith. Evenifthe
idea made perfect sense to
us, so many things outside
of our control needed to go
right. We eventually open
sourced Google Body,
1
and
unequivocally demonstrated
that it is possible to build
a rich, 3D application using
WebGL. Google Body made
the use of WebGL less an act
of faith, and more an act of
execution.
1
The c ontent is now available at zygotebody.com.
431
30
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 first 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 inefficient in its use of bandwidth and computation, but it
wasnt immediately apparent how we could do better. There is no DOM node or
MIME-type for 3D models. WebGL added TypedArray support to JavaScript, but
XMLHttpRequest wouldnt get it for months. F ortunately, we devised a way to load
Google Body’s 1.4 million triangles much more efficiently 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 benefit. This chapter describes how
WebGL Loader works. WebGL Loader can compress a 6.3 MB OBJ file to under
0.5 MB, better than a 13:1 compression ratio. GZIP alone shrinks the same file to
about 1.8 MB and yields a model file 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 doesnt 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?

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required