Getting to grips with Web Graphics Library and Building Web Based Games and Apps


webgl-html5IC15_Azure_WebBanner_Student_300x250_V2

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.

 

asm process

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

WebGlSamples.org

WebGL samples

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:

  1. Create <canvas> element
  2. Obtain drawing context
  3. Initialize viewport
  4. Create buffers
  5. Create matrices
  6. Create shaders
  7. Initialize shaders
  8. Draw primitives

Option 2. Engines / Frameworks

BabylonJS

Babylon-Front-Page

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

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

game-savetheday-full

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

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

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

construct2

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

Three.js

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

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:

And some free tools to get started: Visual Studio Code, Azure Trial, and cross-browser testing tools – all available for Mac, Linux, or Windows.

Comments (0)

Skip to main content