Written by Ramón Saquete
3D graphics, when used well, can be a good marketing tool, as they can enhance design, showcase products for sale or create surprising effects that guide users towards conversion goals.
Throughout the history of the Web, several proprietary and open technologies have emerged that could display 3D graphics (3DXML, VRML, X3D, Flash, Silverlight, Java, etc.), but none of them have ever been supported by all browsers, forcing users to install plugins. This made the 3D technology quite annoying, as asking the user to install a plugin was the best you could do to make them leave the page. Fortunately, that has just changed with the recent release of Windows 8.1, because it brings Internet Explorer 11 and it allows to make use of a 3D technology called WebGLInternet Explorer was the last remaining desktop browser to adopt the open standard (for the moment, it cannot be used on cell phones). On this occasion, IE’s delay in adopting the technology has not been due to the usual reason (that Internet Explorer is usually only updated with the operating system), but to other reasons that I already wrote about some time ago in my personal blog(Internet Explorer vs. WebGL).
Here are the features of WebGL and two other technologies that will also be supported by all browsers.
WebGL
WebGL provides the ability to use features of the graphics card hardware, allowing high-quality 3D graphics to be displayed and made interactive, within the HTML5 Canvas element. For example, if we have a teapot e-commerce, we could show our products in 3D to bring them closer to users and make them more desirable, as seen below:
If you use an environment that does not support WebGL technology you will see a static image. This may be because your browser does not support it, or because your computer’s graphics card drivers are not working properly and prevent you from using OpenGL technology , on which WebGL relies. Although the latter will occur only in rare cases. If this technology works for you, you can change the view by dragging with the mouse or moving the wheel and you can even change parts of the color with the right mouse button.
Even if a browser does not support WebGL, it can display 3D graphics without using the hardware acceleration provided by WebGL. The problem is that the best open JavaScript library to work comfortably with WebGL (threejs) is not sufficiently optimized to provide software 3D with acceptable quality and performance, so what is done instead is simply to display an image.
Those of you who can see the example can also enjoy others at Chrome Experiments and threejs. In addition, you can use Google Maps in 3D or view 3D representations of mathematical functions in the Google search engine (for example by searching for: x^2+cos(y)*10). Also noteworthy is the design of the Web Hackery, Math & Design, which is fully implemented in WebGL with procedural 3D models, giving it an impressive, adaptable look and feel with very smooth 3D scrolling. Those of you using an older version of Internet Explorer should switch to another browser to view it.
WebGL is the best choice for displaying high-quality, real-time 3D graphics on the Web. Its only drawback is that the content displayed inside a Canvas is not indexable, so it is only recommended for decorative elements or to offer additional functionalities to users. However, the following 3D technologies, although for other uses, do not have this problem.
CSS 3D Transforms
WebGL is not the only technology that makes use of the hardware acceleration of the graphics card. It is also used by desktop, tablet and mobile operating systems. to paint the interface and, for browsers, to paint the page elements. This last feature is exploited by the CSS specification to manipulate in 3D the invisible rectangles on which the page elements are drawn.
CSS 3D transforms can be combined with CSS transitions, CSS animations or directly with JavaScript to create interesting animations like the one below:
If your browser or drivers do not support OpenGL you will still see the effect, although a little slower. This is because the browser will not use the graphics card, which has a dedicated graphics processor (GPU), but the general purpose central processor (CPU).
This technology is ideal for creating image galleries, page turning animations and, in general, 3D effects that we can usually see in mobile interfaces.
The use of CSS transitions and animations saves code in JavaScript, but with JavaScript we will have full control of the physics of motion. In addition, with JavaScript, we can also create a 3D engine based on CSS 3D transforms, representing complex geometries, although without reaching the level of WebGL. An extension of the threejs library allows you to do just that.
The CSS 3D Transforms specification is in draft form, but is already supported by all browsers. In Internet Explorer it can be used from version 10 onwards, although partially.
CSS Shaders or CSS Filters
In graphics programming, shaders are programs that run on the single programmable module of the graphics card. These programs are written in GLSL (OpenGL Shanding Language) and sent as a text string to the graphics card, which compiles it into the machine code of the GPU and executes it.
CSS Shaders allow such programs to be loaded from a style sheet to apply filters to any element on the page. These filters are like the ones we can find in any photo retouching tool (blur, sepia, distortions, etc.). In addition, just like the CSS 3D transforms, we can apply the filters in combination with CSS transitions, CSS animations and JavaScriptThe programmer can create amazing effects such as text that blurs until it disappears, morphing between faces, lighting effects depending on the position of the mouse or any other madness that comes from the programmer’s imagination.
The bad news is that this technology is still very young and, at the moment, can only be tested if enabled from hidden configuration screens in the latest versions of Google Chrome, or in the experimental Google Chrome Canary and Safari WebKit Nightly browsers.
If Microsoft has taken three years to implement WebGL in Internet Explorer, how long will it take to implement CSS Shaders? For the sake of the Web, let’s hope that by the time they go to do it, their browser will be such a minority that no one will use it.
