Look Ma, No Plugins! WebGL and HTML5 Games, Effects and Applications

Look Ma, No Plugins! WebGL and HTML5 Games, Effects and Applications

Posted by Rainey

Imagine a world where you can play a game on any device within a browser free of plugins.  Imagine being able to control all of your media or use applications without ever downloading some app to do it. Cloud based computing is an old promise and one that many of us have dreamed about.  With the death of IE6 / 7, private party browser plugins (still happening) and bandwidth becoming less of an issue (unless telcos screw that up) cloud computing looks like it is finally becoming a reality. Below are 17 examples of effects, games and applications showing off the power of WebGL and HTML5.  You will need a modern browser to see these. A decent processor and video card certainly will not hurt either.

HTML5 / JavaScript / CSS3

Sense – a HTML5 Media Center

sense-html5-media-center

I am really excited about the possibilities of this.  Imagine being able to access your home collection of digital content using this beautiful experience on any display connected to the internet.

 

Lux Ahoy HTML5 Game

lux-ahoy-html5

In this gorgeous 2D HTML5 game, players take turns collecting coins and afflicting damage to the opponent.

 

Bkom Robot HTML5 Game

The side scrolling platformer is HTML5, JavaScript, CSS and all kinds of awesome.

 

Make No Wonder

make-no-wonder

Make No Wonder feels like Legend of Zelda meets Minecraft.  Gamers navigate the world around them, collecting resources to survive and build a more civilized environment.

 

CSS3D Clounds

css3d clouds

A cool demo showing off how CSS3 can be used.

 

Mix.js

This impressive little audio mixer allows you adjust various settings while the audio playback through your browser.

 

HTML5 Quake Map Viewer

html5-quake

This may not look as cool as the Quake 3 WebGL port above, but this is built using HTML5, JavaScript and CSS.

 

HTML5 Audio Read-Along

This is a really cool project with some really practical uses.  Basically, each word on the page is highlighted when the audio voice says the word. This project is open source and the full source is available for download.

 

CSS Minesweeper

 CSS Minesweeper

Just what you have been waiting for, right?  Minesweeper has never been this cool and likely will not be again.

 

WebGL

WebGL X-Wing

webgl-x-wing

A quick demo allowing you to fly a X-Wing on a mission to destroy the Death Star.  Keep in mind this is a demo only, so don’t expect a full feature game, yet.

 

WebGL Quake 3

Explore the Quake 3 environment in your browser.

 

Nomo Racer – 3D Multiplayer Racing

Nomo Racer is a 3D gaming concept designed to push the limits of WebGL and WebSocket technologies. The game does feel and play well, and shows that plugin free gaming is certainly a possibility.

 

GLSL Cityscape Flyover


This one is exactly as it sounds.  The demo animates at the clarity that you set and shows the code in an overlaid editor, where you can fork your changes directly.

 

WebGL GTA

In this experiment, Niklas von Hertzen has roughed out a GTA world reading from the original game files in WebGL. This is worth checking out, but gameplay has not really been addressed as this is just an experiment.

 

WebGL Recent Earthquake Viewer

This is an interactive globe that allows the user to view recent earthquakes all over world. It seems to be more of a proof of concept than anything, but it works really well.

 

Plane Deformation

 

 

A demo animating different visual effects using WebGL.

 

OpenWorm

OpenWorm is a WebGL artificial life form in effort to be able to study how the brain works.  Worth checking out.

 

 

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


    Today in Web Design - Inspiration