Here’s a look at some cool WebGL and Web Audio API demos that I’ve seen over the past couple weeks

EVE Online ship viewer is a great-looking online ship viewer app built with WebGL Very nice way to showcase the artwork in the game universe

Web Audio API
samples page has several compelling examples on how to do audio processing using it WebGL City is one of the demos linked from the samples page It’s a small demo of a helicopter flying around a night cityscape…..

SwiftShader is a software 3D renderer used in Chrome 18 that lets you use CSS 3D and WebGL even on blacklisted GPUs SwiftShader is available only on Windows and kicks in when you visit a site that uses 3D graphics features

The first time you run Chrome it checks if your GPU is blacklisted In the unfortunate case that it is Chrome downloads and installs the SwiftShader component in the background After the component is installed you can view 3D content If you visit a 3D site before the component has finished…..

Back in 2000 the Mutation Events API was specified to make it easy for developers to react to changes in a DOM (eg DOMNodeRemoved DOMAttrModified etc)

This feature wasn’t widely used by web developers but it presented a very convenient and popular use case for Chrome Extensions if they wanted to perform some action when something in the page changed

Mutation Events are useful but at the same time they create some performance issues The Events are slow and they are fired too frequently in a synchronous way which causes some…..

…..

If you use Gmail you may become frustrated when you click a mailto: link by accident and now your desktop client of Outlook or Mail starts up

Thanks to navigatorregisterProtocolHandler() ( which we’ve covered here before ) you can wire up Gmail as your default mail client for all mailto: links in Chrome and Firefox

Here’s how:

First open up a Gmail tab You must do this from the Gmail tab not your html5rocks one
Open your javascript console ( cmd-opt-j on Mac ctrl-shift-j …..

The Pointer Lock API recently landed in Chrome Canary and the Dev channel all rejoice! Wait what? You haven’t heard of the Pointer Lock API? Well in a nutshell the Pointer Lock API makes it possible to write proper first-person shooters for the web

The Chrome implementation lets a full-screen webpage ask your permission to capture the mouse pointer so that you can’t move it outside the page This lets web developers write 3D games and applications without having to worry about the mouse cursor moving outside of the page When the pointer is locked the…..

DEMO

As part of the MediaStream Integration with WebRTC the Web Audio API recently landed an undercover gem known as createMediaElementSource() Basically it allows you to hook up an HTML5 <audio> element as the input source to the API In layman’s termsyou can visualize HTML5 audio do realtime sound mutations filtering etc!

Normally the Web Audio API works by loading a song via XHR2 file input whateverand you’re off Instead this hook allows you to combine HTML5 <audio> with the visualization…..

Heads up! The XMLHttpRequest2 spec was recently changed to prohibit sending a synchronous request when xhrresponseType is set
The idea behind the change is to help mitigate further usage of synchronous xhrs wherever possible

For example the following code will now throw an INVALID_ACCESS_ERR in developer channel builds of Chrome and FF:

var xhr = new XMLHttpRequest();
xhrresponseType = ‘arraybuffer’;
xhropen(‘GET’ ‘/’ false); // sync request
xhrsend();
See WebKit Bug Buzilla Bug

Note: the ability to parse HTML has also been added to …..