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.
http://3de-commerce.com/webgl/product-visualizations/video-camera-jvc-gy-hd100-super-high-poly/
https://sketchfab.com/models/9683ee9d1f2443ac87da4ed79282b0ac
https://sketchfab.com/models/653c5c50627749c185dbaccf38a64745
- More depth
The content is presented with 3D animations to capture the users' attention. WebGL is very efficient for statistics, illustrations, and travel stories.
http://www.nytimes.com/interactive/2015/01/09/sports/the-dawn-wall-el-capitan.html
http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=3&abt=0002&abg=1
- More sensations and experiences
3D allows the user to dive into a multi-sensorial experience, which that is impossible to obtain with 2D.
https://www.g-star.com/en_nl/newdenimarrivals
http://maratropa.com/
- More interactivity
Interactivity is a key aspect of WebGL: interacting with objects or shapes to create an immersive storytelling.
http://my.deejo.fr/
https://boda.sensors.jp/
- More fun
Communicate through a game, inviting the user to live an experience: 3D multiplies the possibilities.
http://rainbowroad.jp/special03/
http://inspirit.unboring.net/
- More beauty
WebGL is also a graphic and creative experience.
http://jeremybouny.fr/runrun/
http://www.iamnop.com/particles/
http://jbouny.github.io/fft-ocean/
http://myshards.com/
What are the sectors that can take advantage of this technology ?
This technology can be applied in every sector: video games, data visualization, cartography, virtual tours, education, interactive video, art, design and of course products and objects presentations.
Here are several examples :
http://www.mecabricks.com/en/workshop
http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/
http://patapom.com/topics/WebGL/cathedral/index.html
http://www.ro.me/
http://madebyevan.com/webgl-water/
http://www.vill.ee/eye
http://www.zolabo.com/projects/hdi/
An experience hand-crafted by specialists.
Is WebGL easy to implement ?
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.