A Beginner’s Guide to WebGL
This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
First introduced in early 2011, this is similar OpenGL ES, the mobile version of OpenGL, but built inside of the browser. Desktop browsers have really started to support it as of late, as have mobile browsers. I wrote about the current state of it (as of November 2014) here.
How Many People Are Using WebGL?
User pyalot on reddit has pointed me towards an excellent site for tracking WebGL usage and statistics: http://webglstats.com/. WebGL Stats uses a tracker frame embedded in other sites to collect the data. You can help too, just embed the code below into your page.
<script src="//cdn.webglstats.com" defer="defer" async="async"></script>
What is WebGL Doing and Why Should I Care?
WebGL has three distinct advantages over writing code that simply manipulates the DOM:
- Performance.Utilizing hardware acceleration (the GPU built into your device), WebGL is a great fit for games or complex visualizations.
- Shaders.Complex visual effects can be produced with small programs known as “shaders”. This may be as simple as producing a sepia coloring effect, or more complex simulations such as water or flames. Visit Shadertoy for a showcase of some examples which really highlight this.
Unity, and Epic’s Unreal Engine, the popular middleware tools frequently used by game developers are not limited to creating compiled applications that run as an executable.
In April, with the release of Chrome 42 stable, they finally put the axe to it. There are a number of reasons as to why, but most notably they stated “hangs, crashes, security incidents, and code complexity.” Google suggests using web standards instead, such as WebGL, which I will explain below.
Microsoft is following suit and deprecating ActiveX, VBScript, attachEvent, and other legacy technologies in favor of web standards. The need for ActiveX controls has been significantly reduced by HTML5-era capabilities, which also produces interoperable code across browsers.
With the advent of WebGL and now asm.js, developers can now harness much of the power of their computing device from within the browser and access markets previously unavailable.
Exporting a Unity Game to WebGL with Asm.js
This 2D top-down shooter is headed to the Playstation 4, but that didn’t stop it from appearing on the Xbox 360 and even in the browser through Turbulenz‘s WebGL framework first. This Xona Games title runs at 60 frames per second and can draw tens of thousands of particles on screen at once. Moreover, 4-player simultaneous co-op is available, and you can drop in at any point. Who says that there aren’t console-quality games in the browser?
The Dolby Audio Room was built using WebGL to provide an interactive environment where users can explore and play content on a variety of media devices (a media PC, desktop, laptop and tablet). Each device demonstrates Dolby Audio with a different streaming video, either MPEG DASH H.264 or HLS. The demo currently requires Microsoft Edge, since it is the first browser to include native support for Dolby Audio.
This demo is provided by Sencha Labs to showcase PhiloGL, and is a great showcase for how you can use WebGL to visualize data. In this case, it is active flights across the world.
If you find someone who doesn’t enjoy Monopoly, you let me know, because they are the anomaly.
How Do I Get Started?
Here are the essentials steps to create create your first WebGL project:
- Create <canvas> element
- Obtain drawing context
- Initialize viewport
- Create buffers
- Create matrices
- Create shaders
- Initialize shaders
- Draw primitives
I know what you’re thinking: “This sounds like a lot of work. There’s got to be a better way”, and there is! Take a look at some of the engines below.
Engines and Frameworks
Babylon is an open source and free framework created by several folks at Microsoft as a fun side project. This is updated on nearly a daily basis, and even offers a sandbox to play in and test out your code. Here is a video course broken up into several parts, to get you started with BabylonJS and WebGL.
PlayCanvas is an open source engine which includes a bevy of options, including an editor to help visualize your changes as you make them. Some useful experiences they highlight include brand experiences for viewing high performance cars, as well as playable ads which you can inject into applications. It was also used for the largest game of Space Invaders ever made!
Turbulenz offers a 2D and 3D engine for developers to build, publish, and monetize games on their platform. Founded by former developers at Electronic Arts, this tool is also open source under the MIT License. Download and build the latest Turbulenz Engine directly from the Github public repository. This includes everything from rendering effects and particles, to physics, animations, audio, inputs, and networking. Their developer page offers a ton of information to get you started.
James Austin, the CEO of Turbulenz, has a great write up about the engine on Gamasutra.
Pixi.js is a devoted rendering engine. There are a host of other engines covering game, sound and physics etc. and they all work beautifully with Pixi. It also has a number of added benefits including render auto-detect to fallback to Canvas when necessary, text support via bitmap (sprites) or webfont, as well as an asset loader.
This is the framework that I use most often when working with high school or university aged students who have never programmed a game before, largely due to the excellent editor. Developers can easily drag-and-drop all of their assets into the scene and view the properties in an easy to view pane. Even better, it comes with a ton of templates and samples to get started. Ashley Gullen has a great post on how WebGL works with this program as well.
ThreeJS is one of the more popular frameworks, and includes everything you need to get running: renders, scenes, cameras, animations, and lights. While this is fantastic for most things, it is lacking a physics engine, which will came in handy when creating a game. Three.js is made available under the MIT license. It even has an editor (beta) that you can play around in!
PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development from the folks at Sencha Labs. . All lessons from Learning WebGL have been ported into the PhiloGL Framework. This is a great starting point for people wanting to learn PhiloGL and/or WebGL as well. This is also licensed under the MIT License.
Will It Work on Consoles?
As of November 12th, a new update is available on Xbox One. As a web developer, I’m more than happy to now have Microsoft Edge running on my console! This means that you can now run very modern content inside the Xbox One browser!
You can also remote debug the application using VorlonJS. Vorlon.js is an open-source cross-platforms remote debugging tool that has been made to easily remote debug any web page running on any device.
WebGL also works on the Playstation 4. In fact, their UX is largely powered by WebGL. From Don Olmstead, one of the head architects at Sony:
When you login to your PS4 you are running #WebGL code. The PlayStation Store, the Music and Video Applications, as well as a good chunk of UX are all rendered within the browser.
I spent a good amount of time tuning our WebGL rendering engine, and I will be speaking at+SFHTML5 about how to optimize WebGL usage within the context of that work. There will be plenty of great tips on how you can speed up your own WebGL applications so get your slot now.
This talk from Google Developers offers a great overview of how it works on their platform. Silicon Angle also has a great article on the topic.
If podcasts are your thing, I’ve covered WebGL with a couple of developers before as well.
My peer in Chicago, David Giard, has a video podcast called “Technology and Friends”. During the MVP Open Days event in Philadelphia a few months ago, I had a chance to hop on and talk about WebGL, in addition to that, we cover asm.js, and how middleware tools like Unity and Unreal Engine are using asm to allow their applications to run in the browser.
On my own podcast, The Indie Dev Podcast, I interviewed my co-worker, David Catuhe (@DeltaKosh), who is a Principal Program Manager on Microsoft’s TED team in Redmond. He is one of the master minds behind the BabylonJS WebGL framework,
Looking to Learn More?
Here are some of the better resources I’ve found on the internet for learning WebGL:
More Hands-on with Web Development
We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com:
- Scan your site for out-of-date libraries, layout issues, and accessibility
- Download free virtual machines for Mac, Linux, and Windows
- Check Web Platform status across browsers including the Microsoft Edge roadmap
- Remotely test for Microsoft Edge on your own device
More in-depth learning from our engineers and evangelists:
- Interoperability best practices (series):
- How to avoid Browser Detection
- Using CSS Prefix best practices
- Keeping your JS frameworks & libs updated
- Building plug-in free web experiences
- Coding Lab on GitHub: Cross-browser testing and best practices
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- Unleash 3D rendering with WebGL (from David Catuhe)
- Hosted web apps and web platform innovations (from Kiril Seksenov)
Our community open source projects:
- manifoldJS (deploy cross-platform hosted web apps)
- babylonJS (3D graphics made easy)
More free tools and back-end web dev stuff:
- Visual Studio Code (lightweight code-editor for Mac, Linux, or Windows)
- Visual Studio Dev Essentials (free, subscription-based training and cloud benefits)