How WebGL is reinventing Flash’s legacy

Default avatar.
May 26, 2016
How WebGL is reinventing Flash’s legacy.
Do you remember all those projects with outstanding interactions, mind-blowing animations, and thrilling accompanying sound effects that resulted in an intensely immersive user experience? Yep, chances are those were created with the help of Flash. However I hate to admit it, the era of this rich multimedia platform has come to an end. Flash is finally dead. But fear not! As often happens when one door closes, another opens, and Flash is slowly being replaced by a fresher, more vigorous successor. Technologies like WebGL, and accompanying JavaScript libraries like Three.js are rapidly growing—enabling developers to build Flash-like projects, without the accompanying security issues. Today we’re going to focus on WebGL and Three.js. This pairing is powerful option for immersive UX.

WebGL and Three.js

WebGL serves as a foundation that provides instruments for manipulating with interactive 3D and 2D computer graphics. It gives you an opportunity to mix and match its elements with HTML elements and combine them with other constituents of the page or background. Three.js is a Javascript library with a list of high-end features that let you operate with scenes, cameras, lights, geometry, and more. It is intended to unlock the potential of WebGL by adding extra functionality to the platform. It makes it simple to create GPU-accelerated 3D animations without relying on browser plugins.

Compatibility issues

With the modern technologies, you are always caught in a dilemma: either create a “one size fits all” project that will run on various devices and offer consistent user experience, or put everything on the line and instantly impress the audience that you can reach. With WebGL and Three.js it is the same story. Safari, Opera and the majority of mobile browsers (and that’s to say nothing about Internet Explorer) are like a fly in your Chardonnay. Unfortunately, a great deal of users are stuck with legacy browsers, so compatibility is quite an obstacle—but support is growing (which is more than can be said for Flash) and provided you don’t use it for anything mission critical, WebGL and Three.js are excellent options.

Examples

Void

001 Void is an experiment by Hi-ReS!, a creative studio based in London. The developers wanted to abstract from the limitations inherent to modern platforms and browsers and test the limits of current technologies. It seems that they nailed it. It is a purely desktop application that is powered by WebGL and Web Audio features. Along with Howler.js, GSAP, and Coffee Collider, Three.js took part in producing this outstanding playground that inexorably draws online visitors into a journey that looks much like a digital book.

Reshaping Excellence

002 This interactive campaign dedicated to Sennheiser’s anniversary is an epic odyssey that combines not only dramatic sci-fi landscapes but also numerous cutting-edge features and details. It is a pure Chrome experiment that allows visitors to participate in forming and shaping a monument of sound. Although the phase of formation has been completed—one million people all over the Globe participated in the event—it sill rocks. You are welcome to make your own contribution, examine this massive sound-sculpture, and enjoy the intro video and top-notch execution.

Bruno Quintela

003 The personal portfolio of Bruno Quintela is a real-time rendered WebGL experiment that demonstrates the potential of the artist and possibilities of the current web technologies. Use your mouse to examine the scene thoroughly. Drag it in different directions to see what is hidden inside this bulk of accurately placed together 3d polygons with glossy surfaces. The idea serves as an excellent opening for the website that leaves a strong, lasting first impression.

Particle Test

004 This project exhibits a whirlwind of more less ordered and organized tubes of particles that radiates of high-tech vibe. There is a control center that encourages you to play with such attributes as the radius of a cylindrical-shaped cloud, the density of tubes, height, scale, and more. The concept is mesmerizing.

Water Shader

005 This artist has managed to imitate a water surface by mimicking the natural behavior of liquid. The convex shape and undulating surface with sun reflections as finishing touches recreate a truly realistic scene that catches the eye from the first second.

WebGL Particle Head

006 As they were when Flash was successful, particles are all the rage nowadays. Animations of various size and type can be seen in numerous projects, and this work is one such. The subtle version of a head that is vaguely reminiscent of an intelligent human-like robot from Isaac Asimov's novels is a true masterpiece. Not only does the realization surprise, but also its behavior. It reacts to mouse movements, naturally tilting head to the right, left, up and down.

Dynamic 3D Confetti Text

007 Text effect is one of the ways to spice up boring interfaces with a note of playfulness and coolness as well as emphasize the required lettering. Rachel Smith’s confetti-inspired solution will certainly help to enrich the design with bright emotions and place the title to the center stage. Type a word in the input field below to see the whole magic. Vibrant and vivid 3D geometric pieces will shape the request and make the result prettily interactive.

3D Panorama Viewer

008 Three.js comes in handy in common projects as Max Chuhryaev proves. His solution easily transforms panoramic images into an essential detail of the user experience. It has a pleasant perspective and slowly moving camera: together they make you feel a part of the composition. It goes well with the landscapes, cityscapes, and interiors, allowing users to enjoy the beauty of static multimedia.

Triangle Pattern Generator

009 This experiment gives you a fantastic polygonal background with a lovely 3D feeling. It also acts as a playground where you can make some areas brighter and others dimmer: just use your mouse. The panel of options enables you to tune up a bulk of details of the canvas including light, mesh, render and even export settings.

Nataly Birch

Popular Posts

Read Next

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…

15 Best New Fonts, October 2023

We’re entering the final quarter of 2023, and even in the pre-holiday lull, there are still plenty of fonts to get…

Progressive Web Apps (PWAs): Unlocking The Future of Mobile-First Web Development

There are over 5.4 billion mobile users today, meaning that over 68% of the population tap into an online business via…

The 12 Most Controversial Ad Campaigns of the 21st Century

How far would an organization be willing to go for the chance to generate a little extra buzz? In this list, we're…

20 Best New Websites, October 2023

The Bento trend is still going strong: In some cases, we see this extend to the layout, but many more are picking…

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…