Learning WebGL

Wow, now this has been a busy week!

• Cube is an advert/game based on Google Maps, by Jaume Sánchez Elias, Jordi Ros, and B-Reel. Very addictive! (via Alvaro, thanks to AlteredQualia and Mr.doob for the attribution)
• More Google Maps — a new extension giving photo tours of famous landmarks using WebGL. (via Mr.doob)
• And finally, the older 3D building views in Google Maps have also been enhanced recently.
• Microsoft’s refusal to support WebGL in its browser is an ongoing pain, so many thanks to Mr.doob for giving a simple demo of Internet Explorer with WebGL.
• Via Patrick Cozzi, three class projects from his students at the University of Pennsylvania; all have useful blogs, in particular for the most recent posts, which are have interesting videos and the final presentations:
  • Alice Yang’s Procedurally Generating an Infinite City: here’s the project blog, and final demo.
  • Nop Jiarathanakul’s Ray Marching of Distance Fields in Real Time in WebGL — project blog, and the final demo.
  • Adair Liu’s Volumetric Lighting: project blog, final demo (works best in Firefox, apparently — though it worked fine in Chrome for me).
• On the subject of wonderful shaders on the GLSL Sandbox (which we almost were), this one is lovely too. (via Kevin Roast)
• Chandler Prall’s Physijs is a Three.js physics plugin built on top of ammo.js. I highly recommend the Jenga demo!
• I mentioned the Ludum Dare game competition last week — here are some of the current round’s WebGL/HTML5 entries, collected by David Evans. WebGL-specific entries are My Little Dungeon, Laser Coin Planets, Tiny World Of Lifeand the previously-mentioned LittlePlanetBigRocket. I think SlimeABug is also WebGL. What’s particularly cool is that all of them were built in at most a weekend!
• More on the gaming front: WebGL.com have found two different WebGL Pong games: Player vs Computer by Richard Tuin, and Player vs Player by Rob Ashton (with help from Yves Reynhout and Tom Janssens), while Jerome Etienne has managed to create (with WebRTC) an augmented-reality 3D pong in just 100 lines of JavaScript!
• Or more adventurously, you can teach Tux the penguin to fly his wingsuit over at Spacegoo.
• I mentioned CAAT, a JavaScript animation toolkit with a WebGL-based renderer, back in December. Here’s a scarily addictive little game written as a technology demonstrator: Sumon.
• This is great fun: ‘Livecodelab is a special secret place where you can make fancy “on-the-fly” 3d visuals and play awesomely offbeat (literally) sounds.’ As Mr.doob says, it’s like the old Logo language, but in 3D!
• I’m surprised I didn’t see this before: a nice plasma demo by Bartek Drozdz, written as a demo for J3D. (via WebGL.com)
• Publish Your Design allows product designers to upload 3D designs of their products so that purchasers can get a good idea of what they’re buying. A particularly neat feature for designers is that the design is not transmitted as an easily-copyable model file, but instead as NURBS — meaning that the product can be faithfully rendered without too much chance of design piracy.
• “ThreeFab is a [alpha] tool that allows designers and developers to quickly fabricate and manipulate a three.js scene.” Live demo here.
• R is a language beloved by statisticians, and RGL is a visualisation toolkit for it — which now supports an option to export a (big) web page embedding a data visualisation using WebGL.
• Node.js isn’t just for web servers any more — it’s also a platform to build desktop apps using JavaScript. So it’s great that Mikael Bourges-Sevenier has written node-webgl, node-webcl and node-glfw. Read more at DailyJS.
• Here are some of the 1997-vintage Grand Theft Auto levels converted to Three.js by Niklas von Hertzen. (via Hacker News)
• I’m surprised we’re not seeing more of these: Artfolio is a virtual art gallery where artists can display their creations online. I particularly like that you can walk out of the gallery and see it from outside (via Chrome Experiments). And Image Armada is similar, allowing individuals to create their own galleries (via WebGL.com).
• Here’s a fantastic post on the state of WebGL support across the net (broken down by various features and extensions), by Florian Boesch. Essential reading if you’re doing serious WebGL development.
• Theo Armour’s tutorial on how to make animated human-like characters using a small set of free tools is now complete: part 1, part 2, part 3, part 4, part 5.
• And another lovely water simulation, this one from Edouard Coulon (via Chrome Experiments).
• Slightly headache-inducing, but cool: Drawing 3D SuperShapes with Three.js, by Alejandro Mosquera. (via theo on the WebGL subreddit)
• Using compressed textures in your WebGL app is useful — they take less time to send from the machine’s main memory up to the graphics card, and less space in the graphics card’s memory. The problem is that it’s a pain to convert the images you already have to a GPU-friendly compressed format (GPUs don’t like JPEG, PNG or GIF) and that those formats aren’t as efficient as normal image formats anyway — they’ve been designed to be easy for the GPU to decompress, not for general efficiency. Evan Parker’s solution? Send images from web server to browser in a normal compressed format, then convert them on the fly to a GPU-friendly format using JavaScript! (via mariuz on the WebGL subreddit)
• On the subject of textures, Brandon Jones’ WebGL texture-loading library is now genuinely useful, and uses Evan’s work to support CRN files.
• Some musings on Three.js extruded splines and knots from Zz85.
• Some fun OpenGL samples converted to WebGL by Taskinoor Hasan
• Cafe4tune is a social network with a 3D environment, written in WebGL with a fallback to Flash. (via intomobile)
• A neat shader effect, making an image look like an old film.
• A quick post on rendering Blender models using Three.js by Dealga McArdle (via theo on the WebGL subreddit).
• Sol Mi Re do various online tricks with MIDI files, and this demo shows that they can render music files visually. At least for me, it didn’t play any sounds, but interesting nonetheless. (via theo on the WebGL subreddit)
• If you play EVE Online, you might find this visualisation of the in-game markets useful for your trading. (via theo on the WebGL subreddit)
• Fame indeed: Andor Salga’s face, featured on WebGL.com
• Mathieu Triay’s M’Otter is a quasi-game allowing you to move around the streets of Bloomsbury in London. WebGL.com has the details.
• A new WebGL book, on sale now: Professional WebGL Programming: Developing 3D Graphics for the Web by Andreas Anyuru. (via theo on the WebGL subreddit)
• If you’re using a browser that supports WebRTC (basically a dev version of Chrome or an alpha Firefox), the new standard for real-time communications from browsers, then if you haven’t checked out Jerome Etienne’s post on WebGL Meeting, a real-time videoconferencing tool built with, well, you know what, then do so right now.
• WebGL advertising for a non-WebGL game: The Amazing Spiderman.

Got a WebGL demo you want me to put in next week’s roundup? Leave a comment below, or drop me a line!