enabling the immersive 3d web with collada & webgl · webgl is a low-level, immediate mode...

16
1 Enabling the Immersive 3D Web with COLLADA & 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. Two standard technologies developed by the Khronos Group(2), WebGL and COLLADA, are opening the way for enhancing the web experience into the third dimension (3D) of imaging. Thanks to this work, 3D applications can now take advantage of the fundamentals of the web while natively exploiting 3D graphics hardware acceleration. This white paper describes both Khronos standards at an abstract level and the evolution of an ecosystem that will enable immersive 3D Web applications to evolve from currently disparate implementations (i.e. “walled gardens” or “silos”) to become standard web publishing accessible natively in a web browser. What is WebGL? WebGL(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. In contrast, the WebGL standard will provide native access to the graphics hardware by extending the HTML specifications with a new set of objects and functions for 3D graphics. 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. In this scenario, users of WebGL-enabled browsers, such as Apple Safari, Google Chrome, Mozilla Firefox, Opera and mobile solutions by Nokia, will benefit from the

Upload: others

Post on 06-Sep-2019

8 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

1

Enabling the Immersive 3D Web with COLLADA & 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.

Two standard technologies developed by the Khronos Group(2), WebGL and COLLADA, are opening the way for enhancing the web experience into the third dimension (3D) of imaging. Thanks to this work, 3D applications can now take advantage of the fundamentals of the web while natively exploiting 3D graphics hardware acceleration. This white paper describes both Khronos standards at an abstract level and the evolution of an ecosystem that will enable immersive 3D Web applications to evolve from currently disparate implementations (i.e. “walled gardens” or “silos”) to become standard web publishing accessible natively in a web browser.

What is WebGL?

WebGL(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.

In contrast, the WebGL standard will provide native access to the graphics hardware by extending the HTML specifications with a new set of objects and functions for 3D graphics.

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.

In this scenario, users of WebGL-enabled browsers, such as Apple Safari, Google Chrome, Mozilla Firefox, Opera and mobile solutions by Nokia, will benefit from the

Page 2: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

2

richness of newly created applications such as 3D virtual worlds directly from the browser.

Technically speaking, WebGL is an extension to the HTMLCanvasElement (as defined by the W3C’s WHATWG HTML 5 specification Canvas element(4)), being specified and standardized by the Khronos Group. The HTML CanvasElement represents an element on the page into which graphic images can be rendered using a programmatic interface. The only interface currently standardized by the W3C is the CanvasRenderingContext2D. The Khronos WebGL specification describes another interface, WebGLRenderingContext, which faithfully exposes OpenGL ES 2.0 functionalities. WebGL brings OpenGL ES 2.0 to the web by providing a 3D drawing context to the familiar HTML5 Canvas element through JavaScript objects that offer the same level of functionality.

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.

COLLADA is also being used as an interchange format, providing a bridge between authoring applications. Because COLLADA is a royalty-free open standard based on standard XML technology, its use as a publishing format has been steadily growing with its adoption by Google Earth(6) and other GIS applications, web 3D engines such as Papervision3D(7), Google O3D(8) and asset repository systems such as 3DVIA(9) and Google 3D warehouse(10).

Motivation for WebGL

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).

WebGL benefits by harnessing the widely used standard OpenGL ES 2.0 API directly. Some background is useful here. Many graphics programmers today leverage the OpenGL family of APIs that are supported by a number of hardware drivers. OpenGL ES is increasingly found on a number of devices (e.g., 3D games for the iPhone are supported via OpenGL ES). Therefore driver support is already good, and likely to continue to improve over time. In fact, OpenGL ES 2.0 will work on the desktop though not natively supported by desktop drivers. It can be implemented on top of desktop OpenGL with some care but you need to impose the appropriate restrictions. Google

Page 3: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

3

explicitly created project ANGLE(11) which implements a compliant OpenGL ES 2.0 API on top of Microsoft’s D3D9 that browsers will most commonly use on Windows(12).

The Khronos WebGL Working Group is motivated to specify how to bring hardware-accelerated 3D graphics to the web for a number of reasons:

JavaScript performance has radically improved. JavaScript is the "defacto" programming language of the web. Many interesting applications are web applications. Cloud based application development is growing. New capabilities on the web should solve for the widest use case. For example,

libraries such as jQuery and Dojo provide programmer-facing abstractions and syntactic help, so that developers rarely need to use the underlying "raw" primitives. Likewise, by providing a Shader-based API like OpenGL ES 2.0 within WebGL, Khronos is solving for the widest possible number of use cases, leaving room for new libraries to do many things, including model parsing, etc. This provides a technical infrastructure that benefits both business models and academic research models.

Motivation for COLLADA

The burden COLLADA set out to alleviate is that 3D environments are difficult, expensive and time-consuming to create and manage. Content creation represents by far the largest budget in the cost of 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.

Taking advantage of COLLADA and WebGL

WebGL provides native low-level 3D graphics hardware acceleration for JavaScript and is directly accessible within standard web browsers. COLLADA provides XML-encoded content that WebGL applications can use directly. Neither WebGL nor COLLADA specify how the web application should use the content; both are providing complementary technologies that a JavaScript web application can leverage, and both are, by design, not forcing a specific visual representation. Likewise neither enforces a specific usage of the content or graphic hardware. This is the key for enabling innovation and remaining future-proof.

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

Page 4: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

4

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 XML 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 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.

So while COLLADA will be a very important part of the WebGL ecosystem as a vehicle for getting content into WebGL applications, it is not yet clear how these two standards will work together more officially.

COLLADA as a Khronos standard should work in synergy with WebGL in order to bring content to WebGL applications. It would likely increase WebGL adoption by providing a wealth of ready content and a (open source) WebGL viewer for COLLADA, especially including robust support for the GLSL shading language.

So in short - COLLADA is using web technologies (XML, URI) and is well suited for 3D content delivery for the web, although compression and streaming technologies such as MPEG 4 part 25(14) will most likely be used in the near future to enhance downloading and streaming performance.

1 Compression 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.

Page 5: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

5

How to get COLLADA content into the browser

As stated above, WebGL is a low-level, immediate mode graphics API with no direct access to high-level content, while COLLADA is the content itself. Therefore, the secret sauce binding the two together is the web and its supporting technologies.

To connect these two technologies a software interface must be implemented by developers of web applications. The definition of this interface is often too domain specific: this is one of the main reasons why such a specification is not provided (or looked upon to be standardized) by the Khronos Group.

Most probably the first wave of applications taking advantage of COLLADA and WebGL will be based on the current model of tightly packaged data and code. Those applications will provide 3D interactive content embedded in a browser similar to those available today. Typically the content in COLLADA and other formats is processed off-line in specialized tools, and packaged into an application-specific format. There are already many examples of such architectures such as the recently redefined Google O3D content tool(15) (which converts COLLADA XML into JSON(16) and other data), and popular game engines such as Unity(17), Irrlicht(18), Ogre3D(19) and Torque(20).

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.

Figure 1: The SpiderGL library architecture:

Page 6: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

6

Simplifying, content availability and import will likely play a leading role in moving WebGL toward broad adoption.

This architecture hints at the possibilities to take advantage of a server side COLLADA service to enable on-demand (a.k.a. dynamic) content retrieval or creation.

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:

Page 7: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

7

Figure 2: COLLADA GLGE Examples:

Code to prepare the WebGL scene (to render this COLLADA experiment into) is shown here:

GLGE’s implementation of the JavaScript code for loading COLLADA documents is shown here:

Page 8: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

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.

Page 9: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

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.

Another example on how COLLADA and WebGL work together is the mechanism used to bring images into WebGL to be used as textures. WebGL is relying on the browser to provide the image bits from a URL. COLLADA specifies the image as an URL that can be passed directly to the browser. COLLADA also specifies all the additional parameters to create a texture (such as sampler and surface parameters), directly in XML form. It is up to the web application’s COLLADA loader to parse all the information and set up the WebGL state appropriately before rendering the geometry. The application would browse the COLLADA ‘material’ information to extract the sampler and surface parameters and the URL of the image before invoking the browser image loading capabilities. I.e., the application provides all these parameters to WebGL.

WebGL and COLLADA enabling the 3D Web

The hyperlink mechanism allows documents to link to other documents, providing the fundamentals of a rich semantic navigation system. The content of a 3D interactive web won’t be integrated as native web technology until this same hyperlink philosophy is built into the document viewers (i.e. directly into 3D engines built for the web) as well.

Soon web applications will be taking advantage of the client/server architectures and web technologies for dynamic content and partial refresh (see Ajax(25) as a good example). With such applications it will 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.

Page 10: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

10

Figure 3: COLLADA and WebGL integration from a client/server perspective:

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).

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

Page 11: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

11

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.

As an example of what WebGL and COLLADA can offer in the near future when integrated in a web application, every major browser (client) now supports the ability to link to a content repository. Developers can write a few lines of JavaScript into their html markup, include the URL to the server (aka: content repository) they need content from, and your browser will display the content. A good working example of such a web application today is Typekit(27). With a simple line of JavaScript, Typekit remotely serves fonts from Typekit’s online font foundry to client-based applications running directly in browsers. The more that web developers bring this sort of desired content direct to the user's browser in real time, the less there will be a need for specialized solutions or the use of canned images to display content (such as fancy fonts) in a web application.

Value of the Khronos Group Conformance Effort

An important service provided by Khronos that adds lasting value to organizations adopting Khronos specifications is conformance testing. The purpose of conformance testing is to determine to what extent a single implementation of a particular standard conforms to the individual requirements of that standard. Conformance testing already exists for many Khronos specifications and information about Khronos technology implementations and conformance testing (adoption), by specification versions, is available at http://www.khronos.org/adopters/ (Khronos Adopters site).

As of the Summer of 2010, the COLLADA conformance test suite is also available at the Khronos Adopters site. The WebGL Working Group has started an effort to develop test suites. For 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.

Khronos acts as the governing body to support the creation, evaluation and reference of implementations that are compliant with their publicly published specifications. It is important to vet applications against the conformance test suite for each API or format published by Khronos. Likewise, vendors should want to be adopters for the benefit of their customers and users. Users should demand that applications pass the test suite at the highest conformance level available (that makes sense for the application). The health of the ecosystem is assured by adoption with conformance, not by unproven implementations that may lead to market fragmentation and implementation chaos.

There are two ways in which an individual or company can make use of the Khronos developed technologies:

Page 12: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

12

1. Implementers - for no cost or license fees you may:

Create and deliver a product using the publicly released specifications and technologies

But you may not claim that it is "compliant" unless they enter and pass conformance testing

And if the product is a software or hardware engine, you may not advertise it using the Khronos API technology logos or trademarks

2. Adoption/Conformance Testing - for a fee and under legal agreement, you may:

Download and run the conformance tests and if the implementation passes, you may

o Advertise and promote the product as being "compliant" using the technology logos and trademarks under a royalty-free license

o Gain Access to:

The Conformance Tests source code

Any sample implementations

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

o Use the technology logo in printed marketing or packaging materials of the product

o Use the technology logo in the actual software application startup screens

o Receive a company listing on the Adopting Members with Conformant Products pages

Adopter's applications may be promoted on the Khronos web site and other activities.

Outside the scope of the Khronos Group

WebGL is defined to be as a close to the hardware as possible. The WebGL specification is purposely lean so it can run on many different types of devices, many with limited resources. COLLADA provides a standard language to describe 3D assets but steers clear of a specific run-time policies or scene-graph specification. As such, definition and implementation of how the application will use the content, (or what subset of content will be used), and how the WebGL API will be used to display the content is left to the WebGL/COLLADA developer. Khronos’ goal is to provide the technology to the

Page 13: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

13

developer but chooses to stay out of the business of specifying a run-time or scene-graph implementation for the web.

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 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 1st 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

Page 14: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

14

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.

The author wishes to thank Remi Arnaud, Mark Barnes (Khronos COLLADA Working Group), Vladimir Vukicevic, Arun Ranganathan and 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.

About the Author

Rita Turkowski has been the Khronos COLLADA Marketing Working Group Chair since 2007 and was previously the Executive Director of the Web3D Consortium. She can be reached at [email protected].

Background and references

A great place to get started with WebGL is this Mozilla Developer Center site dedicated to teaching WebGL - https://developer.mozilla.org/en/WebGL, http://hacks.mozilla.org/2009/09/webgl-for-firefox/, and Planet WebGL - http://planet-webgl.org/

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/

A great place to get started with OpenGL ES is http://www.khronos.org/opengles/2_X/.

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]

2. http://khronos.org - home of the Khronos Group . [Online]

3. http://khronos.org/webgl - WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. [Online]

4. http://en.wikipedia.org/wiki/Canvas_element - Html Canvas Element. [Online]

5. http://khronos.org/collada- COLLADA™ defines an XML-based schema to make it easy to transport 3D assets between applications - enabling diverse 3D authoring and content processing tools be combined into a production pipeline. . [Online]

Page 15: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

15

6. http://earth.google.com - Google Earth lets you fly anywhere on Earth to view satellite imagery, maps, terrain, 3D buildings, from galaxies in outer space to the canyons of the ocean. . [Online]

7. http://blog.papervision3d.org - Papervision3D (PV3D) is a popular open source 3D engine for Flash. It enables to create advanced three-dimensional objects displayed real time right in the web browser. [Online]

8. http://code.google.com/apis/o3d/ - Google O3D home page. [Online]

9. http://www.3dvia.com - 3DVIA allows you to find, upload & create your 3D models and content online. [Online]

10. http://sketchup.google.com/3dwarehouse - The Google 3D Warehouse is a free, online repository where you can find, share, store, and collaborate on 3D models. . [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]

12. http://msdn.microsoft.com/en-us/library/dd919276.aspx D3D9 home page [Online]

13. http://en.wikipedia.org/wiki/Cloud_computing - Cloud computing is Internet-based computing, whereby shared resources, software and information are provided to computers and other devices on-demand, like a public utility. [Online]

14. http://portal.acm.org/citation.cfm?id=1497876 - A graphics compression framework for XML-based scene graph formats. [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]

16. http://www.json.org/ - JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language. [Online]

17. http://unity3d.com/ - Unity is a multiplatform game development tool, designed from the start to ease creation for web and mobile gaming. [Online]

18. http://irrlicht.sourceforge.net/ - The Irrlicht Engine is an open source high performance real time 3D engine written and usable in C++ and also available for .NET languages. [Online]

19. http://www.ogre3d.org/about - OGRE (Object-Oriented Graphics Rendering Engine) is a scene-oriented, flexible 3D engine written in C++ designed to make it easier and

Page 16: Enabling the Immersive 3D Web with COLLADA & WebGL · WebGL is a low-level, immediate mode graphics API with little concept of even higher level visual scene elements such as hierarchical

16

more intuitive for developers to produce applications utilising hardware-accelerated 3D . [Online]

20. http://www.torquepowered.com/products/torque-3d - Torque 3D is architected from the ground up for maximum flexibility and performance across a wide range of hardware and built upon the Frontline award-winning Torque Game Engine Advanced. [Online]

21. http://www.glge.org/ - GLGE home page. [Online]

22. http://spidergl.org/ - SpiderGL home page. [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]

25. http://en.wikipedia.org/wiki/Ajax_(programming) - Ajax (shorthand for asynchronous JavaScript and XML) is a group of interrelated web development techniques enabling interactive web applications. [Online]

26. http://www.sirikata.com -a BSD licensed open source platform for games and virtual worlds. [Online]

27. (http://typekit.com) - a subscription-based service for linking to high-quality Open Type fonts from some of the worlds best type foundries through Typekit’s web-only font linking license.

28. http://www.iquilezles.org/apps/shadertoy - Shader Toy, an online shader editor. It's using the pretty new WebGL specification to allow you to edit GLSL shaders. [Online]

29. http://lindenlabs.com - Home of Second Life. [Online]

30. http://www.rightware.com/index/Kanzi+UI+Solution). [Online]

31. http://www.ambiera.com/copperlicht/index.html - Copperlicht engine home page. [Online]

32. http://www.c3dl.org/. [Online]