WebGL: An Interactivity Superhero

With the release of the Oculus Rift, Google Glass testing and the
distribution of 3D printers, the age of 3D is going to reach more and more
people and sectors. But can we have the same browser experience on a
computer or a mobile device? And finally, what can we learn from this
experience?

A bit of history

3D experiences have always been trending on the
web (virtual tours, product demonstrations, games…). Since the early 2000s, a
lot of experiences have been tried, especially with Flash technology. However, these
attempts have been very limited in number and challenging to design. On
top of that, they required the installation of a plug-in, which was an obstacle
for the user.

Energizing content through technology.

WebGL: Dynamic 3D on browser

WebGL is a programming language, which allows users to
put up, to create and to manage complex graphic elements in 3D on browser
(source: Wikipedia). It uses the graphic card performances without overloading
the processor of your computer or mobile. The language uses all the elements
that compose a 3D image: scene, 3D forms and objects, textures and materials,
lights, virtual cameras… It allows for a great deal of interactivity with a given scene:
360, in and out zooming, animation, angles switching, etc.

Web and apps: a 2D world

For 4 or 5 years now, there has been a tendency to use Flat Design for user experiences and browsing interfaces. Invented by
Microsoft for their Mobile OS, Flat Design was widely used by Google and the
entire developer community. Flat design is a style of interface design without
any stylistic elements that give the illusion of three dimensions (such as drop
shadows, gradients or textures) and is focused on a minimalist use of simple
elements, typography and flat colours (source: Wikipedia). The limits of this
medium for expression are inherent to its name: although it provides a real
comfort to the user in terms of browsing and readability of information, it
tends to standardize user interfaces and experience. The content then becomes
the main point of differentiation.

Towards more depth and personality.

Material Design: An introduction to the Z Axis

That’s why Google has just proposed new digital
creation style, known as Material design.

''We challenged ourselves to
create a visual language for our users that synthesizes the classic principles
of good design with the innovation and possibility of technology and science.
This is material design.'' Google
Material Design specifications.

This new visual language offers an approach to
the interface based on animations and perspectives that give more personality
and depth to the user experience.
When we refer to perspective and depth,
we mean the addition of a third dimension: the Z axis.

Space can be defined along three axes: X, Y and
Z. While Flat Design only progresses through two axes, Materiel Design offers users the opportunity to explore the Z axis.
This is an interesting first step, but, in the
end, it does not really use that Z axis, contrary to the possibilities WebGL offers.

Connecting the functional with the creative.

What are some examples of the way WebGL is used?

WebGL is already applied in many sectors (visit the Chrome experiment for examples).

- More details:
With WebGL, users can now preview a product
by checking it out under different angles.

WebGL is a complex and tedious environment. Fortunately,
there are efficient Javascript libraries that provide tools designed to help developers.
The most famous is ''Three.js'' created by Mr Doob. In most cases,
the implementation of a WebGL experience requires the help of specialists.

What kind of jobs does WebGL offer?

Mainly jobs for developers with a 3D
or video game background. They should have a creative view of programming as well as a
good knowledge of mathematics. They usually work in tandem with Art
directors and 3D modelers who design the experience with Maya or Cinema 4D,
since it is possible to export WebGL with this type of software.