HTML and CSS Reference
In-Depth Information
To illustrate the steps that take place during the execution of a WebGL call, the behavior of Blink, the rendering
engine that powers Google Chrome, can be highlighted (see Figure
9-1
). The implementation presented is current at
the time of writing; however, the internals of Blink are subject to change at any time. Even if the internals did change,
or if another browser's functionality were examined, the gist would be roughly the same.
Figure 9-1.
Blink data flow
For those interested in perusing the actual implementation, there is the Chromium code search, which can be
queried for the classes in question.
Listing 9-1 sketches out a general logic to rendering a geometry to the screen. Now, what happens within the
browser when the
drawArrays
call is made? To answer that, the call's flow through the browser will be traced through
each layer.
Listing 9-1.
Drawing a Model
function drawModel() {
bindShaderProgram();
bindTextures();
bindVertexBuffer();
// Invoke the draw call
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 16);
}
The lifetime of a WebGL call begins within the context of the scripting language's virtual machine; in the case of
Blink, this is fulfilled within the V8 JavaScript engine. Any API the browser supports requires there to be glue between
the script's execution context and the browser. The cohesion between the two is specified by the Web
Interface
Definition Language
(Web IDL) format, a standard that describes interfaces, which are to be implemented within a
web browser, as shown in Listing 9-2.
