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 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:
- Utilizing hardware acceleration (the GPU built into your device), WebGL is a great fit for games or complex visualizations.
- 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.
What is Emscripten
Some great examples of WebGL
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
Playcanvas are Microsoft Ventures UK Alumni Playcanvas was founded in London, UK in 2011 and is the world’s first cloud-hosted game development platform. It’s a social hub where game developers have a next-generation toolset that focusses on real-time collaboration where users can build, share and play video games. 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.
Unity3d and WebGL Export
Unity WebGL supports all major desktop browsers to some degree (8). However, the level of support and the expected performance varies between different browsers. Look at the feature matrix below to give you an overview of browser features of interest to Unity WebGL content, and which browsers support them. http://docs.unity3d.com/Manual/webgl-gettingstarted.html
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 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.
Scirra Ltd was founded in May 2011 by brothers Ashley and Thomas Gullen. You can read more about the people behind Scirra on the team page. Scirra is based in Twickenham, SW London. Construct2 comes with a ton of templates and samples to get started. The developer Ashley Gullen has a great post on how WebGL works
ThreeJS is one of the more popular frameworks, and includes everything you need to get running: renders, scenes, cameras, animations, and lights.
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?
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:
- 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)
- Hosted Web Apps and Web Platform Innovations (a deep-dive on topics like manifold.JS)