SceneJS: A WebGL-Based Scene
Graph Engine
Lindsay Kay
40.1 Introduction
The WebGL graphics API specification extends the capabilities of the JavaScript lan-
guage to enable compatible browsers to generate 3D graphics on the GPU with-
out the need for plugins. With JavaScript execution speed a potential bottleneck,
high-performance WebGL applications rely on executing minimal JavaScript while
offloading as much work as possible to the GPU in the form of shader programs
This chapter describes key concepts of SceneJS, an opensource 3D engine for
JavaScript that applies some simple scene-graph concepts such as state inheritance
on top of WebGL [Kay 10]. The framework focuses on efficient rendering of large
numbers of individually pickable and articulated objects as required for high-detail,
model-viewing applications such as BIMSurfer and the BioDigital Human shown in
Figure 40.1 [Berlo and Lindeque 11, BioDigital 11].
Essentially, SceneJS works by maintaining a state-optimized list of WebGL calls
that is updated through a simple scene graph API based on JSON [Crockford 06].
As updates are made to the graph, SceneJS dynamically rebuilds only the affected
portions of the call list, while automatically taking care of shader generation.
This chapter describes the general architecture of SceneJS, focusing mainly on
the JavaScript strategies it uses to efficiently bridge its abstract scene representation
with an efficient use of WebGL and how those strategies can be exploited through
its API.
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 Humans 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 Efficiently 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 offloads most of the rendering work
to the GPU in the form of shaders written by the graphics programmer. Thus,
WebGL is geared for the limited execution speed of JavaScript, encouraging JavaScript
in the applications 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 five-
stage pipeline:
1. Scene definition. A JSON definition 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.
40. SceneJS: A WebGL-Based Scene Graph Engine 573
SceneJS . createScene({ // Scene graph root
type : "scene ",
id : "the -scene",
canvasId : "my -canvas ", // Bind to HTML5 canvas
nodes: [{ // View transform with node ID
type: "lookAt ",
id : "the -lookat ",
eye:{x:0.0,y:10.0 , z : 15 } ,
look :{y:1.0},
up: {y:1.0},
nodes : [{ // Projection transform
type : "camera ",
id : "the -camera ",
optics : {
type: "perspective",
fov y : 25.0 ,
aspect : 1.47 ,
nea r : 0.10 ,
far : 300.0
nodes: [{ // Light source
type : "light ",
mode : "dir",
color :{r:1.0,g:1.0,b:1.0},
dir:{x:1.0,y:-0.5 , z : -1.0 }
{ // Teapot geometry
type : "teapot "
{ // Texture for two cubes
type : "texture " ,
uri : "images / texture .jpg",
nodes : [{ // Translate first cube
type : "translate",
x : 3.0 ,
nodes : [{ // Cube geometry
type : "cube "
{ // Translate second cube
type : "translate",
x : 6.0 ,
nodes : [{ // Cube geometry
type : "cube "
}) ;
Listing 40.1. Scene-graph definition. The scene graph is a DAG expressed in JSON, in this case defining a
scene containing one teapot and two textured cubes, all illuminated by a directional light source and viewed in
perspective. Geometry nodes are normally at the leaves, where they inherit the state defined by higher nodes.

Get OpenGL Insights now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.