Learning WebGL

• jgrc’s translation of my WebGL tutorials into Spanish is now complete!
• WebGL Camp was, once again, excellent; Nicolas Garcia Belmonte has written a review that summarises things much better than I could. If you didn’t make it, you can see what you missed here — the videos will apparently be going up sometime early next year.
• The Los Angeles WebGL meetup also seems to have gone well.
• An interesting multimedia demo from Xavier Bourry and the Spacegoo team.
• Google’s WebGL bookcase is now available in a French version.
• I’ve mentioned the GLOW WebGL framework before; this is a cool demo and explanation.
• Brandon Jones has expanded on some points he made in his WebGL Camp talk on the value of compressed image formats
• Andor Salga’s written an interesting post on implementing vertex projection shadows.
• I think everyone will agree, what the world needs right now is a 3D Nyan Cat. Yes, it does play the music. (h/t Mr. doob).
• Chris O’Dell’s making some first steps toward a WebGL music visualiser.
• LSD users in the 60s could have saved a lot of money and brain cells if they’d had access to WebGL and a bit of help from Paul Neave.
• The Guardian did an interesting animation (using WebGL if available) of how rumours about the summer riots in London spread over Twitter. More about it here.
• Remember the Million Dollar Home Page? Now there’s a new one, in 3D, and spherical.

A relatively quiet week!

• BlackBerry’s tunneltilt game is now live for non-PlayBook WebGL browsers on GitHub: drag to steer. Warning: it’s addictive!
• Another addictive one is Rinesh Thomas’ WebGL Air Hockey.
• If you liked the pendulum waves video that did the rounds a while back, you’ll love Yuv’s WebGL version.
• It’s probably best not to follow this link to Xavier Bourry’s “Tiananmen” demo if you’re in China…
• Evan Wallace has released csg.js, a tool for creating 3D solids by intersecting and subtracting simpler ones. (h/t Badass Javascript)
• Evan’s also made some updates to lightgl.js, a library that adds commonly-used functions from OpenGL back into WebGL.
• If you want to render text in your WebGL scenes, check out Harry Jones’ tutorial!
• Here’s a “first steps” kind of walkthough for three.js in Portuguese by Ígor Jacaúna.

• From Iacopo Sassarini, a gorgeous mathematical demo in Three.js: Martin’s Hopalong Orbits Visualizer
• Krystian Samp’s WebGL Playground is a nice in-browser WebGL editor/runner.
• Pl4n3′s game Wloom is getting ever better.
• From the prolific AlteredQualia, a procedurally-generated city.
• From Gerwin Sturm, a WebGL-based view onto Google+ Hangouts (no live demo yet).
• “CAAT is a multi-instance director-based scene-graph manager. It is able to render using Canvas, WebGL and CSS with the same code base.”
• 3dtin, the online 3D design site, now supports text.
• It’s fascinating to see the slow but steady rise in WebGL ads. Here’s one by Stopp for Adidas sports footwear.
• A useful article from dev.opera — how to convert 3D models from popular editors into a JSON format you can render in WebGL.
• Similarly, here’s a presentation (with embedded WebGL demos, nice) from Jochen Wilhelmy: “Exporting 3D scenes from Maya to WebGL using Clang and LLVM”
• Via Eduardo Pelegri-Llopart, here’s another better video of RIM’s TunnelTilt WebGL game running on a BlackBerry PlayBook — I’m hoping to be able to post more about this soon.
• Firefox on Android has supported WebGL for a while now, but now WebGL’s appeared in a live release of the stock Android browser for the first time, thanks to Sony Ericsson.
• If you’re interested in playing with WebGL in Dart, Google’s new JavaScript competitor, then it sounds like it’s possible — has anyone tried it?

• Registration for the next WebGL Camp on 9 December in Mountain View, California, is now open.
• A bit of nostalgia from OutsideOfSociety: X-Wing.
• A real-world use of WebGL: Building Information Modeling is an abstraction of architectural designs, and BIMsurfer has been built to help you surf your BIM just like you surf the Web.
• An interesting visualisation of the distribution of groundwater worldwide. (via AlteredQualia)
• By AlteredQualia: a three.js lens flare demo.
• Quite fun: C-Cab night drive, by Stickman Ventures
• A nice explanation of a GPU picking implementation in SceneJS by Lindsay Kay.
• Andor Salga has blogged about doing anaglyphs (old-school red/blue glasses 3D) using XB PointStream.
• From Scirra, a comparison of Canvas 2D, WebGL and their own DirectX/C++ based engine for 2D games. Relative speeds are pretty much as you’d expect (though IE’s hardware-accelerated Canvas 2D and Opera 12′s WebGL performance are extremely impressive).
• Peter Strohm has updated his WebGL tutorials (in German, more maths-orientated than mine).
• For Polish readers (or those who can put up with Google Translate), 3dgames.pl have put together a comparison of four WebGL frameworks: SceneJS, Three.js, X3DOM and Copperlicht.

• An awesome demo from Florian Bösch — WebGL GPU Landscaping and Erosion. You’ll need a decent graphics card to be able to run the live version, though.
• The Light is a new game by Stefan Wagner showing off WebGL, HTML5 Audio and the Fullscreen API
• “The plants in the ECOSPHERE grow from your tweets tagged with #COP17.”
• A nice demoscene production, using Three.js: Anaemia by Litewerx (via Photon Storm)
• Not quite so pretty to look at, but technically incredibly impressive! Frank is a WebGL demo in 4kb, including visuals and music.
• Shapesmith’s “aim is to make designing 3D printable models accessible to anyone with a modern browser”
• A nice basic shader tutorial in .NET magazine by Bartek Drozdz.
• Good news for SceneJS fans — the long-awaited version 2.0 has now been released. If focuses on “high rendering speed for complex scenes containing many individually articulated and pickable objects, which is characteristic of model viewing applications for engineering, architecture and medical visualisation.”
• ThreeNodes.js is a graphical programming environment for building real-time interactive media, drawing inspiration from vvvv.
• Illyriad’s first WebGL experiment was published last week; here’s an interesting follow-up post about their experiments with compressed textures.
• WebCL looks like it’ll bring some amazing parallelisation features to JavaScript, but — like WebGL’s GLSL — coding it might be harder than you might like. River Trail, an Intel Labs project that pre-dates WebCL (but has a fork using WebCL as a back-end) adds much simpler-to-program parallelisation support, compiling JavaScript to OpenCL kernels. It has some way to go, but it’s very clever stuff.
• If you want something a bit ahead of the current Firefox beta, but don’t want to have to go quite as far as a nightly build, you might want to try out Aurora — a new pre-beta channel. It’s currently at version 10 (as you’d expect, two versions ahead of the release version) and has some nice enhancements, including WebGL antialiasing.
• Here’s the beginnings of a translation of my tutorials into Russian — just the first half of lesson 1 for now.

• This is excellent: the Google MapsGL team have open sourced a unit testing framework they use to test their shaders. The code is here, and there’s a demo test here. They’re planning to give a talk about it at the WebGL Camp next month.
• A WebGL documentary: the National Film Board of Canada has produced One Millionth Tower, showing new possibilities for high-rise homes.
• Want to see WebGL on an iOS device? Nathan de Vries has worked out a slightly scary hack to get it running. If you don’t want to try it out yourself, Marcin Ignac has videoed the results: on an iPhone, and, in more depth, on an iPad 2.
• Cool: a GLSL sandbox from Mr. doob.
• AlteredQualia’s dynamic procedural terrain is very beautiful.
• Another one from Mr. doob: WebGL + Kinect = crazy demo.
• Brandon Jones is writing a WebGL game and blogging his progress: here’s part zero, there are links to the next part at the bottom of each post.
• Mike Cann: it’s “possible have millions of particles interacting updating and rendering simultaneously as all the operations are performed on the GPU”.
• Here are some ongoing translations of my WebGL tutorials into Spanish.
• An interesting article by Carlos Ulloa on the creation of the interactive video for Ellie Goulding’s song ‘Lights’.
• If you’re wondering how to use CORS to be able to load textures for your WebGL apps from other domains, something that’s been in Chrome for a little while and has now landed in Firefox 8, Benoit Jacob has written an explanation.
• Colin MacKenzie IV’s Jax, a WebGL framework designed to help build rich applications with Ruby on Rails on the server side, has reached version 2.0.
• Illyriad is a free-to-play, real-time, HTML5 Massively-Multiplayer strategy game. Its developers are experimenting with WebGL — sadly Chrome-only, though that’s fair enough given that it’s a first experiment. (via AlteredQualia)
• Good news — the Blackberry PlayBook 2.0 will apparently support WebGL. The latest developer release already has it, and there’s a brief demo at around 24:20 in this presentation.
• An amusing WebGL-enabled Toyota ad — pity it also insists on Chrome.
• Skulpt is an in-browser Python interpreter, apparently with WebGL bindings. I’ve only tried it on one of my less reliable machines, and the WebGL stuff didn’t work there for me, but others might have more luck — reports welcome in the comments.
• Odin is a demo from Opera’s Erik Möller. The live version works well on the latest Opera 12 beta, is rather slow on Firefox, and doesn’t work on Chrome yet. But it’s pretty impressive.
• Stephen Bannasch has updated his WebGL matrix library comparison table. Looks like Closure and TDLFast are the current leaders.
• If you’re in or near Los Angeles and want to meet fellow WebGL enthusiasts, Felix Turner and Bartek Drozdz have set up an LA WebGL meetup.
• On the subject of meetups, it sounds like last weekend’s Mozilla Media Festival in London was fun — David Humphreys has a summary here (as well as a nice post on the workings of Processing.js, the WebGL-based JavaScript implementation of the Processing graphics language).

Lots of good stuff today!

• A gorgeous WebGL experience from French web agency ultranoir: Nouvelle Vague.
• VideoRiot lets you mash up videos in your brower, using YouTube as the source.
• From Florian Boesch, a great demo of ambient occlusion, an impressive lighting technique.
• Project Nell aims to produce a 3D learning environment for One Laptop Per Child (the laptops don’t support WebGL yet, but there are plans to change that). Here’s a collection of mostly-WebGL demos showing the direction they’re going, with a bit of help from three.js.
• Another nice demo from Xavier Bourry at Spacegoo — a beach scene with animated water.
• Ralph Schurade has built a WebGL interactive version of an upcoming paper about the mechanisms of language processing in the brain. It has “the functionality of a basic mri viewer”, with “textured slices, surfaces and fibre tracts”.
• This is cool: My Robot Nation lets you design your own toy robot online (using WebGL, of course), then realises it with a 3D printer and mails it to you.
• A new framework: ChesterGL is a 2D game library based on WebGL, with some fallback to Canvas 2D when WebGL isn’t enabled.
• GLmol is a WebGL molecular viewer
• An interesting experiment in 3D mapping by Jaume Sánchez Elias.
• Another Chester: Chester the Dog definitely writes better tutorials than I do.
• Serious games need full-screen graphics; Brandon Jones has been experimenting with a new API providing that (currently Webkit-only). Read the full article including the corrections he added later.
• Relatedly, mouse lock is another new API that will be useful for games: here’s David Humphrey’s description of why it’s useful, and how and why he and his students will be building it into Mozilla.
• Thanks to OutsideOfSociety, we now only need someone to create WebGL badgers and mushrooms.
• Here’s a nice simple demo of motion blurring in WebGL by Dmitri Shuralyov.
• Jacob Seidelin, who write some of the best early WebGL demos, has written a book HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL. It should be well worth reading.
• Not strictly WebGL, but if you’ve not seen it then you should take a look at Adobe’s CSS shaders proposal, which would allow you to use the OpenGL ES shader language we all know and love to modify normal web page elements. Definite possibilities there!
• Learn OpenGL ES is branching out into WebGL lessons; here’s the first one, along with a useful post about how to put WebGL canvases into WordPress blog posts.

• Nokia’s (sadly Chrome-only, apparently they’re fixing some cross-domain issues [UPDATE Paul comments that it works in Firefox 8 or later]) 3D WebGL maps are extremely impressive! Use the tilt buttons (right-hand side of the control panel at bottom-centre) when zoomed in for maximum awesomeness.
• From Raul Hao: my WebGL tutorials, converted to use Oak3D and translated into Chinese
• So, I’ve been being pretty useless about organising another London WebGL meetup — but there’s some good news for fellow Londoners who fancy a meetup: the London Mozilla Festival, from 4-6 November, “open web developers, journalists and educators coming together to reinvent media on the web”. Sadly I can’t make it myself, but the guys at Mozilla have said that WebGL / JavaScript developers are very welcome, and can sign up at the reduced “student/partner/community member” rate of £30.
• A lovely interactive music video: Ellie Goulding’s Lights, by HelloEnjoy (of HelloRacer fame)
• Inka3D helps you convert Maya scenes for use in WebGL apps. It was apparently used in the creation of the excellent Azathioprine demo, which is a good recommendation!
• Here’s Kleki, an online paint package by bitbof, with WebGL-based filters using Evan Wallace’s glfx.js library.
• Ilmari Heikkinen has posted a presentation on the basics of Three.js.
• Not quite as shiny as some of his older demos, but perhaps more scientifically useful: Evgeny Demidov has ported some old VRML crystal models to WebGL.
• Do not click this demo from OutsideOfSociety.