WebGL(Web Graphics Library) was released a couple of years ago. Its ability to use HTML5 Canvas elements to generate graphics dynamically made it easy for web designers and developers to create smooth 2D and 3D effects. Here are some WebGL examples and demos you should look at.
WebGL is a branch of OpenGL based on OpenGL Embedded Systems (ES). It is a JavaScript API for drawing 2D and 3D graphics in a compatible web browser of an HTML5 canvas without the use of plugins.
Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
This Javascript API is managed by the consortium of non-profit technology Khronos Group and work together with theMozilla Foundation. Since early 2009, they’ve developed prototypes and deploy such technology.
WebGl is still growing, although most of the modern browsers support it, it may need to work on old browsers, too. In this article, I’ve come across quite a lot of examples and demos of WebGL that can enhance your understanding of this new technology.
So sit back and relax, pull up your latest browser, and check out these stunning WebGL demos.
Aquarium
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.
A semi-interactive film authored by Chris Milk. It was created using technology developed by Google. 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.
A non-interactive music video rendered in real-time JavaScript and WebGL with Flickr and Twitter integration developed by the Mozilla Audio API team.
A web version of Angry Birds created by Rovio. It is a low-resolution (SD) version based on the non-hardware-accelerated 2D canvas game.
Chemdoodle is a scientific visualization which lets you pick one among a number of medications 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.
Google Books’ new flashy interface styled after the helix. Within the spiral, books are sorted by subject. Clicking on any book takes you to the entry in Google Books.
Just a Reflektor is the band, Arcade Fire’s music video which was collaborated on with Google. Using your mouse, you can adjust various real-time filters and effects. This WebGL will require a webcam or simply your mouse.
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 web developer community.
3Dtin
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.
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.
A Rubik’s Cube applets from Java to WebGL developed by Werner Randelshofer. Parts of the code are from the WebGL demo repository. Codes used in this WebGL are copyrighted by Apple Inc. and by Google Inc., and is used under their permission.
VideoFX
Developed by Daniel Patterson using Google’s code. It enables you to play around with the color of the video such as contrast and tint.
Developed by Paul Brunt and used as a framework for making WebGL, this is a JavaScript library intended to ease the use of WebGL, allowing for the use of hardware accelerated 2D/3D applications without having to download plugins.
Ctrl+[P]aper
Digital studio Grouek designed this Web GL website that allows anyone to create a paper toy in 3 easy steps. Once you’re done, print the PDF, cut, fold and glue by following the instructions. In less time than you think, a beautiful, unique, self-created paper toy will proudly stand on your desktop.
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 holiday greetings on it where you can move a long using your mouse to view the whole 3D models.
Nouvelle Vague offers a poetic and interactive real-time 3D WebGL experience based on Twitter. In a minimalist and strange world. Tweets are being carried out with different flying objects from borders of the scene to the center.
With this WebGL, you can choose to view the 3D looks of Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 and Chevrolet Camaro in your browser. Pick your ride and enjoy the view. Guess what, you can even choose their colors.
Collectibles Painter
Collectibles Painter is a WebGL-based collectible figure designer that allows you to create your own personal toy collectible with paint, decals, and materials. You can then share your favorite creation with your friends. Choose from 10 different skin tones, faces, hair styles and the like. Graphic effects include:
- Environment-based lighting
- A single-pass shader effect
- Soft shadows using PCF filtering
- Texture based projection for stickers.
Developed by Brandon Jones, it is an impressive WebGL game demo complete with music. You can play it by using your keyboard and mouse.
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.
From Dust
A WebGL game originally released a couple years ago on some traditional gaming platforms. Ubisoft has ported this game to WebGL. It contains amusing and amazing effects and controls.
A WebGL that offers a 3D logo on the header with basic settings when the user scrolls down. It offers the possibility that WebGL can be used as a practical additionto a website or software application.
A WebGL demo with dynamic procedural terrain using 3D simplex noise. It features birds from ro.me and the background sound is by Kevin Maclead.
Songs of Diridum
This WebGL demo offers a true web hi-fi jazz experience in a 3D magic voxel world with WebGL and WebAudio. Use WASD keys, the most common configuration of arrow keys to navigate. Use the control panel to remix the jazz-band. It was developed by Goo Technologies.
Fireworks
A simple fireworks show using WebGL and Web Audio API developed by Jaakko Rinta-Filippula.
An experiment by Evan Wallace which features an interactive scene of a ball in a pool with reytracedreflections and refractions, analytic ambient occlusion, caustics and soft shadows.
WebGL Terrain Editor, created by Rob Chadwick, is an amazing WebGL built with technical featuresthat allow you to craft your own landscapes in real-time. It features some stunning effects such as ray-traced soft and volumetric shadows.
HelloRacer
A WebGL created by HelloEnjoy, is an interactive 3D toy car that you can drive around your screen. You can tilt to steer, touch right to accelerate and left to reverse. Swipe right or left to restart if you get lost.
Wrapping Up
WebGL offers a great 3D Javascript display; however, some of them require a modern GPU to get it running and a powerful one at that. There are also some warnings that WebGL contains multiple possible security issues which might lead to random execution of codes or even cross-domain attacks.
There are a lot of suggestions coming from Mozilla and Google to strengthen security, which might help in the future development of this technology.
This post may contain affiliate links. See our disclosure about affiliate links here.
FAQs
WebGL by example is a series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.
What can you make with WebGL? ›
WebGL can be applied, for example, to interactive music videos, games, data visualization, art, 3D design environments, 3D modeling of space, 3D modeling of objects, plotting mathematical functions, or creating physical simulations.
Is HTML5 a WebGL? ›
Specifically, WebGL allows for hardware accelerated graphics in an HTML5 canvas. Video games spend most of their time rendering. WebGL provides the opportunity for your browser to access more of your computer's hardware, which dramatically increases performance.
Is WebGL good for games? ›
WebGl is a JavaScript API, based on the OpenGL 3D graphics standard. It provides some great 3D games on our websites through HTML5 using JavaScript without additional plugins.
What language does WebGL use? ›
WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer's Graphics Processing Unit (GPU).
How do I start learning WebGL? ›
You start development with a simple working program and use a simple cycle of implement/test, implement/test, implement/test, ... until you reach your goal. Rarely, if ever, should you program a complex WebGL program “from scratch.” Always start with a working program and add complexity slowly.
Is WebGL worth learning? ›
WebGL is blindingly fast and fully utilizes hardware acceleration, making it suitable for games or complex visualizations. Although other options can benefit from hardware acceleration, WebGL is written with performance in mind and should perform better than other options in many cases.
What is replacing WebGL? ›
WebGPU is the successor to WebGL. It is still a bleeding edge technology, and it's turned off by default in all browsers (if available at all).
Is WebGL difficult? ›
It's very difficult at the beginning, but later you'll get the grasp of the pipeline and way of thinking. It takes time (1-2 months to learn only basics), but be persistent.
Is WebGL outdated? ›
1 Answer. WebGL 2.0 is deprecated for now, but WebGL 1.0 isn't deprecated.
WebGL 2.0 on Chrome for Android is fully supported on 97-103, partially supported on None of the versions, and not supported on below 97 Chrome for Android versions.
Does WebGL use GPU? ›
WebGL programs consist of control code written in JavaScript and shader code that is written in OpenGL ES Shading Language (GLSL ES), a language similar to C or C++, and is executed on a computer's graphics processing unit (GPU).
Is OpenGL faster than WebGL? ›
WebGL is much slower on the same hardware compared to equivalent OpenGL, because of the high overheard for each WebGL call.
Is WebGL the future? ›
WebGL has been declared the “future of the internet”, and on the face of it, it's easy to understand why. WebGL doesn't need plug ins. It's now supported by the major web browsers. And it's supported by robust libraries users can leverage to create their 3D graphics.
Is WebGL easier than OpenGL? ›
WebGL is easier to learn and develop applications. OpenGL can be learned easily if once you are familiar with WebGL. In WebGL, it can fake 3D texture with the help of using 2D texture. In OpenGL, it is not required to do as it has a lot of features like geometry and shaders.
Does Google support WebGL? ›
About WebGL
Google Chrome supports WebGL, and in most cases will have it enabled by default.
Why do we use WebGL instead of OpenGL? ›
OpenGL is a desktopcomputer-centric API (like Direct3D). WebGL is derived from OpenGL ES 2.0 (intended for mobile devices) which has less capabilities and is simpler to use. WebGL is also designed to run in a browser, and has therefore a few limitations more then OpenGL ES 2.0.
How do I create a WebGL project? ›
In this tutorial, you will: Create a WebGL build.
...
Check for the Build Support module
- Open the Unity Hub.
- Select the Projects tab, and identify the version of Unity you are using in the project you want to build.
- Select the Installs tab and search for the version in the list available.
Three. js is a JavaScript library under MIT license that works right above WebGL. The library's goal is to drastically simplify the process of handling all of what we just stated. You'll have an animated 3D scene in just a few code lines, and you won't have to provide shaders and matrices.
Is WebGL an API? ›
WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML <canvas> elements.
Enhancing with WebGL
We created a framework on top of react-three-fiber that enables us to add WebGL functionality to any existing React component on the website. When the <Image> component mounts, it tells the global canvas to render <WebGlImage> .
Can I make a 3D game with JavaScript? ›
js is one of the most popular JavaScript libraries for creating and animating 3D computer graphics in a web browser using WebGL. It's also a great tool for creating 3D games for web browsers.
Should I learn three js or Babylon js? ›
I would recommend Babylon. js for almost all 3d browser game projects since Babylon is a game engine with a lot of features that you would need for developing a game.
Is 3js worth learning? ›
Three. js is a powerful library that many web developers are including in their projects to give their website that three-dimensional edge. It's incredibly easy to use, and we're sure that you'll find somewhere on your site to throw in a 3D model or two, so make sure to look more into Three.
Are we WebGPU yet? ›
Starting in Chrome 94, WebGPU is available as an origin trial in Chrome. The origin trial is expected to end in Chrome 109 (Feb 1, 2023). The origin trial is expected to pause for 2 weeks starting in Chrome 106 (Sep 27, 2022).
Is WebGPU ready yet? ›
WebGPU is available for now in Chrome Canary on desktop behind an experimental flag. You can enable it at chrome://flags/#enable-unsafe-webgpu . The API is constantly changing and currently unsafe. As GPU sandboxing isn't implemented yet for the WebGPU API, it is possible to read GPU data for other processes!
Is Vulkan faster than OpenGL? ›
Vulkan is intended to offer higher performance and more efficient CPU and GPU usage compared to older OpenGL and Direct3D 11 APIs. It provides a considerably lower-level API for the application than the older APIs, making Vulkan comparable to Apple's Metal API and Microsoft's Direct3D 12.
Does unity WebGL work on mobile? ›
WebGL 1.0. WebGL 1.0 is supported in the stable releases of most major browsers on both desktop and mobile platforms.
Do browsers use OpenGL? ›
As of 2021 every browser uses ANGLE. Chromium (Chrome, Edge, Brave, etc...), Firefox, and Safari. As of 2018 Safari/Webkit calls into OpenGL on the Mac. I believe Chrome and Firefox use ANGLE.
Where can I learn 3js? ›
- YouTube has a number of great tutorials.
- ThreejsJourney by Bruno Simon is arguably the best course for threejs this year.
- If you want to make games, check out courses by Nik Lever.
To turn on WebGL start by opening Google Chrome. In the address bar, type chrome://flags/, and press Enter. Scroll to Disable WebGL - Enabling this option prevents web applications from accessing the WebGL API, and click Enable: Click Relaunch Now.
How do I enable WebGL? ›
To find out if WebGL is enabled in your browser, go to http://get.webgl.org/. To enable WebGL on your browser: Chrome: type "about: flags" in the address bar, then search for WebGL and activate the option.
What is WebGL supported browser? ›
Google Chrome is a very customizable browser, allowing you to to change many of your settings to your liking. One of the options that you can choose to enable is WebGL, or Web Graphics Library. WebGL is a JavaScript API that allows you to render 3D and 2D computer within your browser.
How do I integrate WebGL into my website? ›
first Upload Unity WebGL outputs to your web server, and in your website, Simply just create iframe and put your webgl index. html in the iframe.
Does WebGL use GPU? ›
WebGL programs consist of control code written in JavaScript and shader code that is written in OpenGL ES Shading Language (GLSL ES), a language similar to C or C++, and is executed on a computer's graphics processing unit (GPU).
Does Google support WebGL? ›
About WebGL
Google Chrome supports WebGL, and in most cases will have it enabled by default.
What is WebGL not supported? ›
One possible reason why you might be encountering the 'WebGL is not supported' error is that hardware acceleration is disabled in your web browser. The WebGL technology is dependent on hardware acceleration, so you'll need to take the appropriate steps to ensure that hardware acceleration is enabled on your browser.
Is WebGL outdated? ›
1 Answer. WebGL 2.0 is deprecated for now, but WebGL 1.0 isn't deprecated.
Can my PC run WebGL? ›
WebGL should be enabled in recent versions of Chrome. If you aren't able to run WebGL in Chrome, make sure that you update to the most recent version of Chrome. If you are using the most recent version of Chrome and can't access WebGL content, make sure that hardware acceleration is enabled in your Chrome settings.
How do I enable WebGL 2022? ›
If you are having trouble running WebGL in Firefox, please take the following steps:
- Go to about:config in your address bar.
- Search for webgl. force-enabled and make sure this preference is set to true. ...
- Search for webgl. disabled and make sure this preference is set to false. ...
- Restart Firefox to apply your new settings.
It's very difficult at the beginning, but later you'll get the grasp of the pipeline and way of thinking. It takes time (1-2 months to learn only basics), but be persistent.
Is WebGL worth learning? ›
WebGL is blindingly fast and fully utilizes hardware acceleration, making it suitable for games or complex visualizations. Although other options can benefit from hardware acceleration, WebGL is written with performance in mind and should perform better than other options in many cases.
Does WebGL work on phones? ›
WebGL 2.0 on Chrome for Android is fully supported on 97-103, partially supported on None of the versions, and not supported on below 97 Chrome for Android versions.
What is replacing WebGL? ›
WebGPU is the successor to WebGL. It is still a bleeding edge technology, and it's turned off by default in all browsers (if available at all).
What are the limitations of WebGL? ›
WebGL is difficult, if not impossible, for deploying 3D assets to mobile web browsers. At present, WebGL graphics are incredibly difficult to deploy to mobile devices. Oftentimes, attempts to view even simple 3D graphics on a mobile device crash the browser.
Is WebGL the same as three Js? ›
Three. js is a JavaScript library under MIT license that works right above WebGL. The library's goal is to drastically simplify the process of handling all of what we just stated. You'll have an animated 3D scene in just a few code lines, and you won't have to provide shaders and matrices.
