If your a student game developer there never a better time to get upto date with the latest tech and tools which the Christmas holiday starting and having access to DreamSpark Azure why not get your teeth into WebGL and build some great prototypes you can take into January’s Global Game Jam.
So what is WebGL
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins.
WebGL is becoming very popular with Game Developers, but it is finally gaining widespread visibility across the web, and is now being used for all kinds of apps including map visualizations, charting data, and even presentations.
WebGL has three distinct advantages over writing code that simply manipulates the DOM:
Tasks
- Drawing reflective materials or complex lighting generate a ton of overhead, and seeing that JavaScript is single threaded and CPU bound, why not offload some of that to the GPU in your device and have that do the heavy lifting?
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.
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.
JavaScript is the only language which works in all web browsers. Although only JavaScript will run in the browser, you can still write in other languages and still compile to JavaScript, thereby allowing it to also run in the browser. This is made possible by a technology known as emscripten.
What is Emscripten
Emscripten is an LLVM based project that compiles C and C++ into highly performant JavaScript in the asm.js format. In short: near native speeds, using C and C++, inside of the browser. Even better, emscripten converts OpenGL, a desktop graphics API, into WebGL, which is the web variant of that API.
Some great examples of WebGL
Score Rush– Xona Games
This 2D top-down through Turbulenz‘s WebGL. 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.
Dolby Audio Room
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.
World Flights
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.
Monopoly – PlayCanvas
Playcanvas are Microsoft Ventures UK Alumni and have experience in both apps and games using WebGL
WebGlSamples.org
This site has some fantastic collections to play with. I’m not sure of who put this page together, but they some neat demos, such as the book (cloth simulation) and Electric Flower
Getting Started with WebGL
Option 1. Building it Yourself
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
Option 2. Engines / Frameworks
BabylonJS
Babylon is an open source and free framework . It offers a sandbox to play in and test our your code. Here is a video course broken up into several parts, to get you started with BabylonJS and WebGL.
PlayCanvas
PlayCanvas is an open source engine which includes a bevvy 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.
Exporting a Unity game to WebGL with asm.js
Turbulenz
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.
Pixi.js
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 ass loader.
Phaser.io
Phaser is also open source (fork it on GitHub) and even offers TypeScript support, which is a strongly typed version of JavaScript. in-depth guides, and a showcase of Phaser made games.
Construct 2
This is another UK developed tool and have an 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. The developer Ashley Gullen has a great post on how WebGL works
Three.js
ThreeJS is one of the more popular frameworks, and includes everything you need to get running: renders, scenes, cameras, animations, and lights.
PhiloGL
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 this work on Xbox One?
David Rousset (@davrous), who is one of the brains behind bablyon and vorlon, has a great blog post where he showcased BabylonJS running on an Xbox One.
Debugging WebGL
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.
Web GL Learning Resources
Here are some of the better resources I’ve found on the internet for learning WebGL:
More Hands-On With JavaScript
Microsoft has a bunch of free learning on many open source JavaScript topics, and we’re on a mission to create a lot more with Microsoft Edge. Here are some to check out:
- Microsoft Edge Web Summit 2015 (a complete series of what to expect with the new browser, new web platform features, and guest speakers from the community)
- Best of //BUILD/ and Windows 10 (including the new JavaScript engine for sites and apps)
- Advancing JavaScript Without Breaking the Web (Christian Heilmann’s recent keynote)
- Hosted Web Apps and Web Platform Innovations (a deep-dive on topics like manifold.JS)
- Practical Performance Tips to Make Your HTML/JavaScript Faster (a seven-part series from responsive design to casual games to performance optimization)
- The Modern Web Platform Jump Start (the fundamentals of HTML, CSS, and JavaScript)
And some free tools to get started: Visual Studio Code, Azure Trial, and cross-browser testing tools– all available for Mac, Linux, or Windows.