A collection of GPU real-time rendering shader experiments.
After reading this article - I was inspired to have a go at some GPU programming for the first time - with the intention of learning the amazing real-time accelerated rendering technique known as 'ray marching'. A very clever technique described clearly in the article that allows amazing quality images to be generated on a modern GPU in real-time. The maths is really interesting and it's a lot of fun to experiment with.
The demos all use WebGL so require a good graphics processor and WebGL support in your browser.
A collection of JS1K demo competition entries.
Demo entries are a maximum of 1024 bytes (not characters...) of JavaScript code and can use any trick in the book to get as small as possible but still work in modern browsers!
3D scenes in any HTML5 browser without WebGL!
A complete rewrite of my canvas 3D engine. Now able to manage complete 3D scenes with a fully positional camera, scene graph, lighting and rendering.
Some fun interactive demos to play with, including a nifty particle emitter and point lighting effects.
The demos will work on iOS and Android phone browsers in addition to all desktop HTML5 browsers.
HTML5 Canvas browser benchmarking tool.
Test the rendering performance of your HTML5 browser. Runs a number of graphical tests on the canvas 2D rendering features that are most used in HTML5 games, particularly image sprite rendering and alpha compositing.
The results depend heavily on the CPU and GPU power of your machine. CanvasMark is on Twitter.
My latest HTML5 canvas game experiment - Winner of Canvas Innovation Prize in the Microsoft Dev Unplugged contest!
Updated to run at a full 60 frames-per-second with improved game performance.
It's more than a little "inspired" by Geometry Wars and similar, but that's not a bad thing...
A good test of canvas performance as it hits the browser hard with lots of glow effects and particle explosions.
Another example of my canvas 3D library - K3D in action!
Works best in Chrome and Safari, FireFox and IE struggle a bit with the shiny effects.
You can comment and rate the game as it is featured on the Google Chrome Experiments page.
An updated version of the classic Asteroids arcade game from 1979. Featuring ray-traced modern graphics and "retro" glowing vector graphic modes, exciting powerups and green glowing lasers oh yes.
Now with iPad touch controls and updated to run at a full 60 frames-per-second with retro styled sound effects.
The now world famous (ahem) Asteroids HTML5 Game has been featured on wired.com! Gosh.
The game has received over 300,000 visitors since the first version.
You can comment and rate the game as it is featured on the Google Chrome Experiments page.
A tool to help HTML5 developers to quickly try out Canvas 2D tests and demos in real-time!
JavaScript code is evaluated immediately and the output displayed in a Canvas element.
Some code examples and useful tutorial links are provided to get you started...
Demo entry for the JS1K - Love 2012 competition.
A trippy pink plasma field with a parametric heart curve effect.
Code is exactly 900 bytes and could probably be crushed down further but is well below the 1024 bytes needed anyway.
View Source on the page to see the original code.
As usual there are much more impressive entries than mine squeezed into 1K but still fun trying all the same.
Oldskool meets nuskool with a trippy plasma effect in HTML5 canvas!
You can tweak lots of fun settings for the effect using the built-in control panel.
Thanks to the DAT.GUI awesomeness for the amazingly easy to use JavaScript GUI library!
Demo entry for all-the-cool-kids-are-doing-it JS1K competition.
The JavaScript code is only 1007 bytes in length! Which is pretty impressive, or at least I thought it was until I saw some of the later entries in the competition managing to perform pretty much anything you can imagine in 1K and making this feel rather simple in comparison, bah. But hey it still looks nice.
Move the mouse to change the center of the field and for extra fun use the mouse wheel to control warp speed!!
Now pretend you *are* captain of the Enterprise (I know you're thinking about it).
Some examples of my Canvas 3D rendering library.
A simple and fast library to allow pseudo 3D graphics to be rendered onto a 2D canvas.
All 3D maths is hand cranked and rendering performed using the nifty Canvas APIs. Objects can be displayed as points, wireframe, solid polygons, textured polygons and shaded using plain colour, depthcued (z-order) or light-sourced - things can be rotated around and moved about to make cool demos (see below). A simple linear-additive lighting model (oh-err) with any number of coloured lights can be applied to objects, which is nice.
Demo entry for the Xmas 2010 JS1K competition.
The JavaScript code is only 1020 bytes in length!
The winning entry for the competition is annoyingly brilliant (yep no winning entry for me, bah humbug) and is well worth viewing.
Fractals and shrubbery.
An L-System, or Lindenmayer System is a simple but elegant 'turtle' rendering platform. Self-similarity and fractal-like forms make it easy to generate plant and other natural-looking organic forms that 'grow'.
The shiny new tongue-in-cheek HTML5 logo in glorious 3D!
I came across this sinister Flash demo and decided enough is enough, HTML5 canvas can do that, no problem.
The W3C group seem a little confused about the logo and feel a need to attach some significance to what it means, but I just like its cheesey 80's retro look.
There are some other good examples of the logo built in HTML5 only using CSS to generate a simple 3D effect, and an excellent old skool animated GIF, nice.
An experiment around an animated and interactive business card on an HTML5 canvas.
Elements of the design gently pulsate and can be nudged with the mouse.
Thanks to Michael Hawley for the design and inspiration for the animated interactive business card.
Interactive 3D demo. Another example of the Canvas K3D library in action. With mouse control so you can entertain yourself.
Shows off the real-time lighting features of the 3D library, lovely.
Image Manipulation.
Once of the first canvas experiments I tried, just playing around with sine wave effects on an image using a hidden canvas element to preprocess the image in one direction then another for each frame.
It's quite trippy, you remember that Simpson's episode right?
HTML5 Canvas browser benchmark tool.
Give your HTML5 browser a run for its money. Runs a number of punishing tests on the canvas 2D rendering features that are most used in HTML5 games, particularly image sprite rendering and alpha compositing.
The results depend heavily on the CPU and (for recent browsers) GPU power of your machine - so you cannot really compare between machines unless you run the same browser. So give it a try on as many browsers as possible!
NOTE! This benchmark is now replaced by CanvasMark 2013 which gives much better results on modern browsers.