572 VII Software Design
Figure 40.1. SceneJS is the rendering engine within the BioDigital Human, a free Web-based
atlas of human anatomies and conditions. When all visible, the 1,886 meshes and 126 textures
in the Human’s male anatomy view render at around 10–15 FPS in Chrome 14.0.835.202 on
a computer with an i7 CPU and an NVIDIA GeF orce GTX 260M GPU.
40.2 Efﬁciently Abstracting WebGL
A scene graph is a data structure that arranges the logical and spatial representation of
a graphical scene as a collection of nodes in a graph, typically a tree. A key feature of
most scene graphs is state inheritance, in which child nodes inherit the states set up by
parents (e.g., coordinate spaces, appearance attributes, etc.). Scene graphs typically
provide a convenient abstraction on top of low-level graphics APIs, which encapsu-
lates optimizations and API best practices, leaving the developer free to concentrate
on scene content.
WebGL is based on OpenGL ES 2.0, which ofﬂoads most of the rendering work
to the GPU in the form of shaders written by the graphics programmer. Thus,
in the application’s graphics layer to be used for little more than directing GPU state:
buffer allocation and binding, writing variables, draw calls, and so on.
SceneJS bridges the gap between its scene-graph API and WebGL through a ﬁve-
1. Scene deﬁnition. A JSON deﬁnition like that of Listing 40.1 is parsed to
create a scene graph like Figure 40.2 with resources such as vertex buffer objects
(VBOs) and textures stored for its nodes on the GPU. Note the geometry
nodes at the leaves.