3D in the web - the choice of technology

Instead of the preface

This is the first article in a small series written by developers of a three-dimensional javascript-engine based on WebGL. This article is an overview, but in subsequent ones it is planned to talk about the engine itself and its capabilities - with examples, demonstrations, and so on. And the author will be grateful if someone will share an invite for him, so that he can not only answer possible questions in the comments, but also be able to publish subsequent articles on this topic not through me, but on his own.

3D Web View

Hello to all habrazhiteli. In this article I want to talk a little bit about the state of affairs in the field of three-dimensional graphics on the Web, and what our team can offer for those who would like to implement a project related to 3D, on the Web, but doubts the choice of technology or simply not knows in what direction to "dig." I also hope that the article will be of interest to everyone who follows the development of web technologies.

Despite the fact that the three-dimensional graphics technology used in desktop applications has been leaps and bounds for quite a long time, and over the past 10 years, several generations of 3D API and graphical hardware have changed, web developers have not had a web-based technology that allows them to work with 3D .

Companies creating projects with three-dimensional graphics were forced to develop their own plug-ins to browsers, or use third-party, providing the display of 3D graphics. These approaches are either necessary to contain a separate command to support the plug-in, or to be limited by the level of functionality and support offered by companies creating 3D graphics solutions in the browser.
')
The situation began to be corrected a couple of years ago, when Apple proposed an API for working with 3D on the Web. Beginning Apple was supported by Google and Mozilla, and, somewhat later, by Opera. This is how the WebGL specification was born.

Around the same time, Adobe announced that Flash 11 will have an API for working with three-dimensional graphics. In my opinion, despite the undeniable merits, Flash is a plugin and, like any other plugin, is not a web-based technology. It is very poorly integrated with the browser ecosystem, and actually survives from mobile platforms. In addition, the Stage3D API is not based on some well-established and popular 3D API, which means it takes a lot of time to study and understand the possibilities, bottlenecks, for example, it is difficult to transfer existing source codes of shaders. In addition, when creating projects in Flash, it is difficult to rely on HTML tools for complex layout, and it is difficult to reconcile (overlay, interact) the DOM page and content created using Flash, and when developing in ActionScript it is impossible to use all the wealth of libraries created by the Web development community .

In my opinion, WebGL has more prospects. I hope I can convince you of this.

WebGL Overview

WebGL is based on the OpenGL API, and with some degree of convention we can say that WebGL is an OpenGL binding for JavaScript. WebGL focuses on the range of features provided by OpenGL ES 2.0, which allows it to be used on a wide range of equipment: both on desktops and mobile platforms. Of course, the capabilities of desktop computers in most cases significantly exceed what WebGL can provide. But this solution allowed to create some uniformity with mobile platforms, where three-dimensional graphics accelerators settled relatively recently and at the moment in terms of functionality and performance roughly correspond to middle-class graphics accelerators for desktop computers 5-7 years old.

Like OpenGL, WebGL is a fairly low-level API, and in order to create projects using it directly, you need to be pretty well versed in many complex aspects of 3D graphics. However, history has shown that high-level 3D APIs do not take root well in the development environment, for example, the Direct3D 7 Retained Mode has faded into oblivion, and by the 8th version of Direct3D, Microsoft has stopped developing it. In my opinion, the reason for this is the very strong differences in the tasks facing 3D developers. Many are faced with the task of creating the most realistic graphics that work in real time, and no one wants to sacrifice a significant part of the performance for the sake of versatility or somewhat greater simplicity. When working with a low-level API, there are often opportunities to make a less universal (but decisive task), but at times faster and / or even a simple solution. Many may remind me of the well-known phrase of Donald Knuth: “Premature optimization is the root of all ills,” but in the case of three-dimensional graphics it is necessary to output at least 30, and better 60 frames per second, not just a desire. It requires an attractive and competitive level of application graphics.

When reviewing these contradictions, the developers of the WebGL standard expect that the complexity of working with WebGL will be directly compensated by a large number of libraries. Thus, experienced developers who create complex applications and beginners will be satisfied - they will be able to create projects without going into all the details of the low-level API at once, but will use various libraries / frameworks.

Currently, WebGL is already supported by Google Chrome and Mozilla Firefox for Windows, Linux and MacOS browsers, and Firefox for Android browser. Opera in the 12th version also introduced the WebGL implementation (albeit rather crude), in the Safari night builds for MacOS it is possible to enable WebGL support. In iOS, you can activate WebGL in the UIWebView component, though for now using private APIs (respectively, such an application cannot be published in the AppStore).

IEWebGL Overview

The attentive reader by now has probably noticed that I have bypassed the question of the support of WebGL by Microsoft. Unfortunately, for several reasons, the discussion of which goes far beyond the scope of this article, Microsoft decided that WebGL did not adequately comply with the spirit of the Web, and the ideas on which the modern Internet has grown, and that the WebGL standard in its current form has a number of security problems. .

This can not but grieve anyone who has sufficient experience in web development and knows how hard it is to build their solutions on technologies that have a significantly different level of support among browser manufacturers.

Our team is pleased to offer a possible solution for those who want to create projects on WebGL and at the same time do not want to miss the users of Internet Explorer browsers. Our development is IEWebGL. This is an ActiveX plug-in for IE, running in all versions of the browser from 6th to 10th and implementing the WebGL API. IEWebGL is absolutely free. You can use it to create your projects without restrictions. The plugin works in both 32-bit and 64-bit versions of Internet Explorer browsers on operating systems from Windows XP to Windows 8 (except for Metro-style IE and ARM-version of Windows 8, but more on this in the next article).

I'll tell you a little more about how IEWebGL works.

You may know that, for normal operation of OpenGL in Windows, it is necessary to install the driver from the manufacturer of the video card, since the drivers included in the Windows kit only provide hardware acceleration of Direct3D. In this regard, Google and Mozilla have developed the open source library ANGLE, which emulates the OpenGL API via Direct3D and thus does not depend on the availability of an OpenGL driver in the system. ANGLE renderer is used by Chrome and Firefox browsers in Windows by default. ANGLE also contains a GLSL shader language translator (used in OpenGL / WebGL) to HLSL used by Direct3D. Currently, the implementation of the OpenGL ES 2.0 standard library ANGLE, passes all tests for compatibility ES 2.0.3.

The IEWebGL plugin is based on ANGLE and therefore provides a high-quality implementation of the WebGL standard, comparable in quality to implementations in Google Chrome and Mozilla Firefox. In addition, in modern versions of IE, new APIs are used for hardware-accelerated compositing of the page and graphic content of the plug-in, thus ensuring high speed and low power consumption, since graphic content does not leave the video adapter and does not require processing by the central processor.

Of course, the plugin is not part of the browser, and therefore there are some very minor differences, mainly related to getting the context WebGL. According to the standard, the WebGL context is created by calling the canvas element's getContext (“webgl”); however, plugins are created on the page using the object element and therefore the site developer either needs to generate different HTML code for IE and for other browsers, or use JavaScript to create the desired element (object or canvas) depending on the browser. Fortunately, the differences are almost over. In IE, you use the same .getContext (“webgl”) call for an object element and continue to work with the context in full compliance with the WebGL API.

Code for browsers with integrated WebGL support:

 <! doctype html>
 <html>
     <head>
         <script type = "text / javascript">
             function initWebGL () {
                 var glCanvas = document.getElementById ("renderArea");
                 var glCtx = glCanvas.getContext ("experimental-webgl");
                 if (glCtx) alert ("got WebGL context");
             }
         </ script>
     </ head>
     <body onload = "initWebGL ()">
         <canvas id = "renderArea"> </ canvas>
     </ body>
 </ html>

Code for Internet Explorer browsers:

 <! doctype html>
 <html>
     <head>
         <script type = "text / javascript">
             function initWebGL () {
                 var glCanvas = document.getElementById ("renderArea");
                 var glCtx = glCanvas.getContext ("experimental-webgl");
                 if (glCtx) alert ("got WebGL context");
             }
         </ script>
     </ head>
     <body onload = "initWebGL ()">
         <object id = "renderArea" type = "application / x-webgl">
         </ object>
     </ body>
 </ html>

IEWebGL also implements full support for the TypedArray standard in IE up to and including version 9. In IE10, IEWebGL uses the TypedArray implementation built into the browser. Thus, even if your site does not work with 3D graphics, you can use IEWebGL to add the ability to work with binary data in IE versions 9 and below using standard APIs.

Summing up, I want to say that today when choosing a technology for displaying 3D on the Web, it is worthwhile to consider WebGL as a real alternative to the old approaches that reliably works in most browsers.

IEWebGL website: iewebgl.com

In the next article we will tell you directly about our javascript engine using WebGL features for three-dimensional visualization.