Professional Documents
Culture Documents
WebGL
Rita Turkowski – June 30, 2010
Introduction
The web is built on standard document formats (HTML, XML, CSS) and
standard communication protocols (HTTP, TCP/IP), gaining momentum
by the principle and power of the hyperlink (URL / URI) (1). Browsers
and servers implementing those standards have revolutionized
publishing and searching. Not only can documents be linked by other
documents, but since the data is provided in a standard open language
it also provides the ability to link to specific content inside a document,
enabling the rich navigation and search functionalities that we take for
granted today.
What is WebGL?
WebGL (Web Graphics Library (3)) is a low-level JavaScript API
enabling web applications to take advantage of 3D graphics hardware
acceleration in a standard way. Currently the only way to provide
interactive display of appreciable quality 3D content in a web browser
is to create a separate application loaded as a plug-in. Plug-ins are
problematic as they require end-user installation which is not
transparent, placing a burden on the end-user, and are frequently
forbidden by companies security guidelines, impeding the general
adoption of 3D content. Consequently, this current situation fosters an
ecosystem of "walled garden" communities as opposed to a World
Wide Web experience where each user can publish, access, and search
content.
1
The contribution of this new API is twofold: firstly it removes the need
for external plug-ins installation, thus widening and accelerating its
adoption, and, secondly, it allows web application developers to rely on
a standard that boasts a very large community of qualified 3D
professionals. In fact, WebGL is directly derived from the OpenGL ES
2.0 specifications to be a bare-bones yet extremely efficient and
powerful graphics API.
What is COLLADA?
COLLADA (5) is an intermediate language for interactive 3D
applications. It has been designed from the ground-up with well-settled
web technologies: it is essentially XML for 3D assets, using URLs for
linking content. COLLADA enables content to flow from content
creation tools to interactive applications; it is a lossless, extensible
declarative language well suited for content (persistent) serialization
and retrieval. The content can then be processed with standard tools in
its native XML encoding and adapted to any target application.
2
The inclusion of native 3D rendering capabilities inside web browsers,
as witnessed by the interest and participation in the Khronos Group's
WebGL(3) project, aims at simplifying the development of 3D for the
web. It does this by eliminating the need to create a 3D web plug-in
(and requiring a non-trivial end-user download with manual installation
before any 3D content can be viewed by the end-user).
3
creating 3D applications. The more that existing content and code for
models, shading, animation, special effects, physics etc., can be
shared and syndicated, the more efficiently production pipelines can
be made available.
For instance, as virtual goods are a growing business model for the
game industry, and increasingly end-users aspire to evolve from
consumers to creators and publishers of (their own) content,
COLLADA’s popularity is growing as an asset exchange and publishing
format. Many 3D web applications that are being developed with
WebGL are leveraging this trend of content reuse and taking
advantage of COLLADA.
What makes COLLADA such a good fit for web-based applications is its
inherent use of web technologies. This makes it appealing to WebGL
developers. COLLADA is using web technology for its syntax (XML) and
makes direct use of resource identifiers (URI) to query server
databases. As such, COLLADA is structurally a compliant citizen in the
WWW scenario. In this particular case (web delivery), as for most other
applications (e.g., native games) an encoding specific to the
application is necessary. Conditioning can be done COLLADA-in,
COLLADA-out for web content. In this context, standard XML tools
(such as Ant and XSLT) can be used to process COLLADA .dae
documents exported by popular DCC tools to create files that can then
be easily imported into interactive applications. This explains why
COLLADA is widely used on the web today and relied upon by the
web’s 3D content repositories, e.g., Google Warehouse, 3DVIA, Daz3D
and others. Note that there is a significant trend to move computation
into the digital cloud(13), which means that some (or all) of the content
pipeline could be moved into the cloud, changing the balance of
delivery versus authoring (specifically in the case of the web).
Consequently, operators will most likely be interested in compression
4
and streaming technology after 3D content bandwidth usage grows
significantly.1
This said, there is no formal web based approach between WebGL and
COLLADA. Work needs to be done outside of implementing both
specifications to realize COLLADA content in a WebGL enabled browser.
WebGL is a low-level, immediate mode graphics API with little concept
of even higher level visual scene elements such as hierarchical
transforms, shapes, instancing, and materials etc. that are central to
COLLADA. Therefore, in order to connect these two, some sort of
transformation or glue code must be implemented, albeit a retained
mode rendering engine in its most simple form. However, this is not
something Khronos specifies or has any control over.
1Compression and streaming are technologies that should be used to provide a better
experience for web delivery of 3D content. Currently the gzip compression and embedding of
COLLADA documents into a swf, a kmz,or a json compressed stream provides a 10x
compression. (Note that COLLADA 1.5 already defines the .zae format in its specification in
order to provide the identical technology as part of the standard, which matches with the
current compression delivery mechanisms in use for 3D content delivery on the web). More
advanced compression technology for COLLADA is already published by MPEG-4 Part 25 and
can provide a 200x compression and better streaming capabilities (using dedicated algorithms
for compression depending on the data semantic), but the web community has not yet shown
interest in higher compression technology (as opposed to video/images/audio). Mobile network
operators will be interested in this technology only when 3D content bandwidth usage grows
significantly.
5
content itself. Therefore, the secret sauce binding the two together is
the web and its supporting technologies.
As support for HTML5 and related standards grows, it is likely more and
more 3D web applications are likely to use COLLADA directly as an
input format and directly parse the COLLADA XML in the browser as
part of the application: For example, GLGE(21) and other experiments
prove that a partial COLLADA parser can be implemented in JavaScript.
As a working example of an implementation of this, Figure 1 below
(courtesy of Marco Di Benedetto and the SpiderGL(22) project)
illustrates the opportunities of WebGL used in conjunction with
COLLADA files and asynchronous XML transfers.
6
Simplifying, content availability and import will likely play a leading
role in moving WebGL toward broad adoption.
Another fine example comes from the GLGE library – as an open source
library GLGE is a JavaScript library intended to simplify use of WebGL.
The aim of GLGE is to mask the involved nature of WebGL from the
web developer, who can then spend his/her time creating richer
content for the web. Figure 2 shows the COLLADA Duck with the
Seymour Plane from www.collada.org. In February 2010, GLGE folks
showed this example (found at http://www.glge.org/collada-now-
supported/) when they announced COLLADA support for GLGE:
7
Code to prepare the WebGL scene (to render this COLLADA experiment
into) is shown here:
8
With GLGE, it is possible to declare a scene object and then import a
sub-scene from a COLLADA document. Importing a sub scene from a
COLLADA document provides maximum flexibility. It allows use of
COLLADA in more then one use-case to play to the strengths of the
COLLADA format and its versatility. For example, you can layout an
entire scene, as Paul Brunt did in his FPS (first person shooter) level,
shown in the image below, which is imported into GLGE as a single
COLLADA document (including the animations), or just import a single
object such as the duck and plane to use in a larger scene.
9
Bringing COLLADA to WebGL through URL
It is possible to bring any COLLADA asset - from geometry to effects -
into a WebGL enabled browser. One common example of COLLADA
content needing to be purposed into WebGL is shaders. COLLADA
documents include coexisting shader programs for several target
platforms (HLSL, Cg, GLSL,…). A WebGL application would want to look
at the GLES2 profile, which provides the shader program in the GLSL-
ES language used by WebGL, as well as all the input variables of the
shader directly available in XML. This encapsulation provides a
standard mechanism to deliver information about the embedded
shader without having to parse the shader itself. Tools such as ATI
Rendermonkey(23) and Imagination Technology PVRShaman(24)
already have support for creating shaders for GLSL-ES and
export/import in the COLLADA format. Such tools will be useful to
create/test/tweak WebGL shaders. The web application can simply
retrieve the shader text from the GLES profile inside the COLLADA XML
document once it is created using desktop tools.
1
be possible to click on a link and be launched immediately into a 3D
immersive environment in the browser, or click an element of a 3D
content and navigate to another 2D or 3D document, truly enabling 3D
content in the web. It is a worthwhile investigation to revisit the classic
WWW client / server schematic to see where COLLADA and WebGL fit
in. The architecture of WebGL and COLLADA can best be described
through the following web architecture diagram.
The most exciting usage model for WebGL and COLLADA is leveraging
the client/server architecture of the web and the technologies that are
in use in current web applications. COLLADA content can be created
dynamically by the server, providing the web application with content
that is adapted to the target device. Textures can be created
dynamically as well. For example a texture can be created dynamically
to represent real-time data. Even the JavaScript or the GLSL-ES code
can be generated dynamically by very sophisticated implementations.
Evidence of such infrastructures are already in development, such as
Sirikata(26).
1
Even with simpler implementations, using standard XML HTTP
requests, the web application can query the server to provide the
subset of the COLLADA document that is of interest to the application,
or select which level of detail or material complexity to use on the
target device. Since the workload of a 3D application is directly
impacted by the complexity of the data itself, it is important for a web
application to be able to adapt the content to the platform it is running
on. Even as WebGL provides a standard API on all platforms, the form
factor, CPU and GPU performances will have a direct impact on the
user experience. Combining COLLADA for standard content description
and a WebGL standard graphic API, along with the power of current
web technology, will enable web applications to provide the best
possible user experience adapted to the device characteristics. For
example, the web application can decide to query for a model with
fewer polygons on a slower embedded device with a small screen, and
a very detailed model on a powerful workstation with a high-resolution
screen.
1
WebGL 1.0 test cases, of particular interest are tests that exercise use
of shaders. It is the author’s opinion that a joint COLLADA/WebGL
working group effort could support the development of a sample
implementation of a COLLADA based WebGL reader that is made
publicly available. Thus, COLLADA content would need to be verified to
work within a WebGL standardized viewer and a set of COLLADA tests
created to test this new WebGL implementation.
There are two ways in which an individual or company can make use of
the Khronos developed technologies:
• But you may not claim that it is "compliant" unless they enter
and pass conformance testing
1
The Adopters technical Mailing list; a private priority
channel for 2-way interaction with Khronos Member
developers who can offer feedback and modifications
to the specification, as well as feedback on
conformance tests
Another important piece missing from the ecosystem are the tools
necessary to develop such applications. Since WebGL and COLLADA
are based on existing standards, many existing tools such as GLSL-ES
shader creation, XML editors and modelers can already be used to
create content. One can imagine HTML editors or publishing tools to
enable 3D interactive content by incorporating WebGL and COLLADA
content. One can also imagine evolution of user content web
applications such as wikis to be able to incorporate live editing of 3D
content inside a browser, demonstrated by already existing
experiments such as Shader Toy (28) that enable on line live editing of
GLSL-ES WebGL shaders.
Summary
As browsers incorporate the implementations of WebGL and web
applications take advantage of WebGL and COLLADA, it will be possible
1
to click on a link inside your browser and be launched immediately into
a 3D immersive environment. At that point, applications such as virtual
worlds will spill into the mainstream, and transform many sectors such
as social media gaming, e-commerce (e.g., social shopping), geospatial
applications and on-line education. When it’s implemented, it will allow
the kinds of 3D graphics you see in Second Life (29) or 1 st person
shooter (FPS) games to be available directly in the browser.
Note that the smart folks at Khronos are priming WebGL for mobile
rendering and interaction by specifying WebGL as a JavaScript binding
to OpenGL ES 2.0. This is telling in that the future of 3D, like most
applications for the web, is being driven by embedded devices very
quickly. The content of a 3D interactive web won’t be limited to
specialized applications, but will embody the same features such as
search, publishing and navigation (through 3D interactive content) that
we’ve come to expect. HTML pages can be integrated into 3D content,
and/or 3D content can link to other HTML content. 3D content will be
generated dynamically just like text and images are already generated
with web technologies.
COLLADA is a natural fit for working with 3D content on the web, and
WebGL provides the native access to the graphics hardware
acceleration. This year at GDC, we were pleased to see the early fruits
of the Khronos WebGL WG, deploying COLLADA based content to show
the value of their API in browser based applications (without the need
for any plug-ins). As 3D technology without useful content holds no
interest, and content without a standard accelerated multi-platform
outlet likely has limited life, it is exciting to see the highly synergistic
efforts of these two working groups come together in a way that
greatly benefits content creators, 3D developers and their web end-
user communities.
Many WebGL supporting initiatives are under way (and more coming
along every month) such as Paul Brunt’s GLGE(21), SpiderGL(22),
Rightware’s Kanzi(30), Ambiera’s CopperLicht(31), the Seneca College
Canvas3D - C3DL project(32) and the Sirikata project at Stanford
University(26). From these efforts and those as yet unforeseen, new
and compelling content will be developed. This very content is often
required to be archived for future revisions or used by applications
such as computer games, in whose context will be possibly modified by
developers as well as end-users, and re-purposed in game play. This is
where COLLADA comes into play. The powerful combination of
COLLADA and WebGL will help realize the potential of 3D from the
emerging HTML5 standards.
1
Vangelis Kokkevis (Khronos WebGL Working Group) for their input and
reviews. A special thanks to Marco Di Benedetto of SpiderGL and and
Paul Brunt of GLGE for their WebGL examples.
A great place to get started with COLLADA is the COLLADA Sailing the
Gulf of 3D Digital Content Creation book:
http://www.akpeters.com/product.asp?ProdCode=2876 and the
COLLADA wiki/forum http://www.collada.org/
Regarding HTML5: This is the next major revision of the core language
used to write code for web pages. It aims to reduce the need for
(mostly proprietary) rich Internet application (RIA) technologies such as
Adobe Flash, Microsoft Silverlight, and Sun JavaFX. HTML5 parts are
expected to be ready for implementation in the next two years. Find
the HTML 5 canvas element specifications here:
http://www.w3.org/TR/html5/.
1. http://en.wikipedia.org/wiki/Hyperlink - standardized by the URL.
[Online]
1
enabling diverse 3D authoring and content processing tools be
combined into a production pipeline. . [Online]
11. http://code.google.com/p/angel-
engine/http://news.softpedia.com/news/Google-s-ANGLE-Project-
WebGL-Based-on-DirectX-137892.shtml [Online]
15.
http://code.google.com/apis/o3d/docs/artdesignerguide.html#howto -
O3D COLLADA Converter with content created using Google SketchUp,
Autodesk 3ds Max, and Autodesk Maya. [Online]
1
17. http://unity3d.com/ - Unity is a multiplatform game development
tool, designed from the start to ease creation for web and mobile
gaming. [Online]
23. http://developer.amd.com/gpu/rendermonkey/Pages/default.aspx -
RenderMonkey is a rich shader development environment for both
programmers and artists. [Online]
24. http://www.imgtec.com/PowerVR/insider/powervr-pvrshaman.asp -
PVRShaman is an integrated shader development environment
allowing rapid-prototyping of new vertex and fragment shader
programs. . [Online]
1
31. http://www.ambiera.com/copperlicht/index.html - Copperlicht
engine home page. [Online]