StackHack, Ducks, Remote-Tilt, Simplify.js

2012-02-03 00:00:00 +0000 by Alex R. Young


StackHack screenshot

StackHack by Philip Deschaine and from PubNub is a WebGL demo that uses PubNub to create a massively multiplayer interactive block stacking game. The technical details are discussed in StackHack: A Massively-Multiplayer Mashup of PubNub and Three.js.

Let's start with the server. I used Node.js with express to serve up our HTML, CSS, JavaScript. When a client connects, we generate a UUID, append some stuff and listen on that channel. Why do it this way? Why not just use a generic PubNub channel? Excellent question I wanted what's known as an authoritative server.

The article includes more details behind both the client-side and server-side code.

Ducks, a WebGL Demo

Ducks screenshot

Ducks (GitHub: statico / webgl-demos / ducks) by Ian Langworth is a simple game demo that uses WebGL and sound, complete with animated models and reflections. The GLGE WebGL framework has been used, along with models from the COLLADA Basic Samples collection.

The game logic, in ducks / logic.js, is relatively clear and easy to follow, so it works as a great example of a small, manageable example of a WebGL game.


Remote-Tilt (License: MIT, GitHub: remy / remote-tilt) by Remy Sharp can help test motion events without fooling around with a mobile device:

Testing motion events was never going to be easy task. You have two options, both of which suck. That's where Remote-Tilt comes in. By including a single line of JavaScript you can emulate device motion events in your test page which can either be a regular browser or even a mobile emulator.

By including the Remote-Tilt polyfill on a page a popup will appear that allows motion events to be simulated:

Remote-Tilt motion emulator


Simplify.js demo screenshot

Simplify.js (License: BSD, GitHub: mourner / simplify-js, npm: simplify-js) by Vladimir Agafonkin is a library for fast 2D/3D polyline simplification:

It is very useful when you deal with lines consisting of many tens of thousands of points, e.g. when you need to quickly render a 50k-points line on the browser (for charts, map routes, etc.).

The demo on the Simplify.js homepage shows how impressive the performance is, easily throwing around 50,000 points like it's child's play! The source for this project has been extracted from another of Vladimir's interesting libraries, Leaflet, which is also worth checking out.