Projects

This a list of selected projects and experiments. Click on an item to see a description and further links.

Experiments

RavenJS

Porting a 3D PC RPG to the browser

Nov 2011

With WebGL arising, the question was whether we could actually provide a plugin-free 3D experience in the browser. To this point, WebGL demos were mostly mere tech-demos – but what about real content, exploring a world in first person view?
To test this, I ported several levels of a famous triple A Computer game to the browser.

More: See Video - Read post

CSS Shader Playground

Live edit and share CSS Shaders

Nov 2012

In 2012, CSS gains the ability to apply GLSL shaders to DOM nodes. Time to see how far one can go…
This experiment uses requestAnimationFrame to dynamically apply vertex and fragment shaders via data-URI to a regular DOM node.

Sadly, support for CSS shaders was removed in 2014 due to security concerns.

More: View code (GitHub)

Shooting At Balls

A 3D shootout game utilizing various bleeding-edge HTML5 APIs

Dec 2012

This project used to serve as a testing ground for new HTML5 APIs like GamePad, WebAudio, pageVisibility, FullScreen and PointerLock APIs, for patterns like Component-Entity-Architecture and Object-Pooling and for sub-projects like Decoupled-Input and InfiniteGround.

But, it’s also quite fun!

More: Run experiment - View code (GitHub)

Surf in Style

Browsing a website inside of a 3D scene, or: I put a computer in your computer

Jul 2013

WebGL is not only for games – it can fundamentally change how we interact with content delivered via the Web. This is more of an artistic experiment, but the initial question behind this was if one could seamlessly blend traditional HTML and user interaction into an 3D WebGL scene.

More: Run experiment - View code (GitHub) - Read blog post

Projects

IDBWrapper

A wrapper for the IndexedDB HTML5 offline storage API

IndexedDB is the new standard for offline persistence, but the API is not very pleasant to use. This wrapper makes using IndexedDB easier, while still providing access to all the core API's features.

More: View code (GitHub) - Read post

AMD-Feature

Cross-target development with AMD modules

Handling cross-target development and deployment gets more and more important. AMD-feature helps achieving this by dynamically loading the right implementation for a given feature at runtime, as well as creating a specific build just for one platform. No more code-branching inside of a module, but nicely organized files instead. You might also want to read Alex Sexton's article about high performance deployment over here.

More: View code (GitHub)

Decoupled-Input

User input handling done right

Loose coupling and task separation are common concepts – but are often missing when it comes to user input handling. When high performance and 60FPS are the goal, this is especially painful. Decoupled-Input separates input listeners from handling logic, comes pre-built with listeners for keyboard, mouse, GamePad and Speech API, allows binding changes during runtime, and handles PointerLock and FullScreen.

More: Read Post - View Code (GitHub)

farbs

Minimal dependency-free application setup

A clean separation between UI components and application logic doesn't need a huge framework; it can be done in a few lines of plain JavaScript, without the help of any libraries. To prove this, I created farbs, which does that in 948 bytes of code (457 bytes via gzip). It allows a declarative UI set up, late and lazy event binding and module communication via Pub/Sub. I successfully introduced this approach in a high-traffic mobile website.

More: View Code (GitHub)

storehouse

A persistent data store implementing the dojo/store API

In version 1.6, the Dojo Toolkit introduced the new Object Store, and my storage providers that were part of the official pre-1.6 builds are not compatible with the new API. But - Dojo no longer ships a persistent solution. Storehouse fills this gap, providing a persistent multi-backend solution that favors the IndexedDB engine.

Storehouse is fully CLA covered to provide maximum IP protection.

More: View Code (GitHub)