20 Amazing WebGL Examples and Demos in Action
October 5, 2016
WebGL does more than any other CSS3 features available. Its ability to use HTML5 Canvas elements to generate graphics dynamically from script code, made it easy for web designers and developers to access all graphical horsepower that users regularly see on desktop applications.
WebGL is still growing and while most modern browsers support it, may need to enable it. In this article I’ve come across quite a lot of examples and demos of WebGL to enhance your understanding about this new technology.
So sit back and relax, pull up your latest browser and check out these stunning WebGL demos.
Created by Greggman and Human Engines. The aquarium runs almost entirely based on a clock.That means the position of the camera and every fish will be the same across machines if their clocks are in sync. When in networked mode each machine keeps its clock in sync by periodically asking the server for the current time.
2. 3 Dreams of Black
A Semi-Intereactive film authored by Chris Milk. It was developed using technology developed by Google and other sources.
It works with chrome mixing 2D and 3D computer graphics, showcasing the song “Black” by Danger Mouse and Daniel Luppi ,with Norah Jones and Jack White.
A WebGL innovative game inspired with Google maps technology. It consists of elements you see in Google Maps and analog labyrinth games combined with amazing controls that can break an experience.
Chemdoodle is a scientific visualization which lets you pick one of a number of medicines and see a 3D display of its chemical structure on compatible browsers, developed by iChemLabs.
A dynamic Jellyfish WebGL demo built with Vladimir Vuki?evi?’s mjs matrix library. It showcases simulated skeletons, partial server-side simulation and synchronization with WebSocket, and camera facing a particle system and volumetric light effect.
6. WebGL Bookcase
Google Books’ new flashy interface styled after a helix. Within the spiral books are sorted by subject and clicking on any book takes you to the entry in Google Books.
7. Just a Reflektor
Just a Reflektor is a band Arcade Fire music video which was collaborated by Google. Using your mouse you can adjust various real-time filters and effects. This WebGL will require a webcam or simply your mouse.
8. WebGL Earth
An open source software enabling exploration, zooming and “playing” with the 3D globe in a web browser. The project is sustained through the support and cooperation of the developer community.
3Dtin is an easy to use tool for creating shapes with a natural voxel-oriented 3D pixel approach, with the feature to export your project in 3D printing services.
10. The Biodigital Human
The BioDigital Human is a virtual 3D body that brings to life thousands of medically accurate anatomy objects and health conditions, in an interactive Web-based platform.
11. WebGL Rubik’s Cube
A Rubik’s Cube applets from Java to WebGL developed by Werner Randelshofer. Parts of the code are from the WebGL demo repository. Codes use in this WebGL are copyrighted by Apple Inc. and by Google Inc. and is used under permission.
Digital studio Grouek designed this Web GL website, that allows anyone to create its paper toy in 3 easy steps. Once you’re done, print the PDF, cut, fold and glue following instructions. In less time than you think, a beautiful, unique, self-created paper toy will proudly stand on your desktop.
14. A holiday message
Developed by @thespite and @mrdoob. It will first require you to put on your address before proceeding. Once entered you’ll see a beautiful 3D scene that has a holiday greetings on it, where as you can move along using your mouse to view the whole 3D models.
15. Materials: Cars
With this WebGL you can choose to view 3D looks of Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 and Chevrolet Camaro in your browser. Pick your ride and enjoy the view. Guest what, you can even choose their colors.
Developed by Brandon Jones, it is an impressive WebGL game demo complete with music. You can play it by just using your keyboard and mouse.
17. WebGL Image Filter
A WebGL graphic editor application by Evan Wondrasek ,with a smooth and fast interface. You can play around with filter effects like the brightness and contrast, similar to the features you see in Photoshop.
18. From Dust
A WebGL game originally released a couple years ago on some traditional gaming platforms. Ubisoft has ported this game to WebGL and contains amusing and amazing effects and controls on it.
A WebGL that offers 3D logo on the header with a basic setting of a site when scrolled down. It offers a possibility that WebGL can be used as a practical setting to a website or software application.
20. WebGL Terrain
A WebGL demo with dynamic procedural terrain using 3d simplex nois. It features birds from ro.me and the background sound by Kevin Maclead.
There are a lot of suggestions coming from Mozilla and Google to strengthen its security, which might help in the future development of this technology.
This article showcases the different amazing WebGL demos and examples to make you understand this new technology. Hope it amazes you and let us know what you think.