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

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…