Learning WebGL

Some good news! I’ve found someone who’s interested in taking on Learning WebGL. It’s not finalised yet, so no promises, but this blog may be about to get a whole new lease of life.

Stay tuned…

OK, I think it’s time to admit it to myself. I no longer have time to keep posting WebGL links. As PythonAnywhere, my day job, has scaled past 16,000 users it’s basically nommed up all of the free time I have. It’s a good problem, the right kind of problem to have, but it’s kind of sad too. I’ve really enjoyed seeing all of the amazing stuff people have created over the last few years, and I’m sure there’s a ton more amazing stuff to come.

If you’re looking for cool new WebGL demos, I really recommend the WebGL subreddit — both as a place to find new stuff, and a place to post your own demos. WebGL.com is also well worth a look.

And, of course, if you’re looking for good tutorials my 16 lessons are still very much live. If you’re looking for a book, the best I’ve seen so far is Tony Parisi’s WebGL: Up and Running

Many many thanks to everyone for their support over the years — for sending cool links to demos, ideas to improve the lessons, and wonderfully helpful comments. It’s been a great run, and I’ve enjoyed every minute of it.

[UPDATE] if anyone else wants to take over running these updates, drop me a line and we’ll see if we can work something out.

A very merry Christmas to everyone! My apologies for the light posting of late, I was catching up and then I got my Ingress invite…

• AGI has worked with NORAD Tracks Santa this year to develop a 3D web map that shows Santa’s real-time position on a 3D globe on Christmas Eve. Here’s a blog post with the technical details. (Via Patrick Cozzi)
• 100,000 Stars is a fantastic visualisation for astronomers or anyone interested in our stellar neighbourhood. (via mariuz)
• The is gorgeous: the beginnings of a platform game? A demo using Three.js to render a game made with impactJS + box2D, by Christian Östman and Richard Åström
• Stuck on an idea for your next startup? I’m considering a “Big Data tablet network for business execs”, and if you’re looking for similar inspiration yourself, you should try Peter O’Shaughnessy’s Future Technologies Idea Generator.
• vw3 is a virtual worlds game engine in being created at Middle Tennessee State University; it supports import from Maya files including skeletal animations, and has a neat little demo of that on the front page, along with a tutorial for the pipeline on YouTube.
• Keen on Dart, and keen on Three.js? You should check out three.dart. (via John Davis)
• Verold Studio is a tool that makes it possible to collaborate online with 3D models, and it uses Three.js heavily. To give back to the library, they’ve contributed their code that converts FBX files to Three.js JSON files.
• SpaceGoo have been featured in these posts many times in the past… and now their complete website interface is in WebGL! Xavier writes “And too bad for those who have not enabled webgl, there is no fallback version for them XD”. Brave
• On the subject of WebGL-based sites, onGameStart US is a new conference for web gaming in New York next year, hosted by Michal Budzynski. Collin Hover is putting together a fun 3D site about it.
• Some new cool medical imaging, from Tobias Rautenkranz: the standard view is of images on a 2D canvas, but if you go to “Overview” on the right and then “3D”, you get a volume-rendered version.
• TeeChart is a JavaScript charting library, with 3D WebGL support using Three.js
• glslmin is a CLI tool for minifying WebGL shaders by Chris Dickinson.
• I was sure I’d linked to this before, but perhaps not: a Three.js demo rendering Minecraft imagery.
• Inka3D, a tool for exporting Maya content for use in WebGL apps, has reached version 1.5. You can now export scenes from Maya to WebGL with no polygon limit, and create characters with hundreds of bones.
• Have you written an HTML5 game you’d like people to hear about? Ivan Kuckir has put together Spread My Game, a website where you can post a link.
• For readers of Japanese, here’s a tutorial on writing shaders.
• 10 PRINT is a book about a one-line Commodore 64 BASIC program, and Daniel Haehn has knocked together a quick 3D version of the pattern that program creates using XTK/WebGL.

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

Sorry for the silence here on Learning WebGL! Things have been a bit hectic. I’m putting together some tools to help generate the “around the net” posts faster, and I have a bunch of links almost ready to go…

In the meantime, I thought any London-based JavaScript gurus reading might like to hear about a job opportunity at a close friend’s startup, even if it’s not WebGL-specific. The company’s called Crowdscores, and here’s what they’re looking for:

Senior front-end developer needed to take over and own the front-end development of our product. You will be expected to provide leadership in best practices and the technology stack used. You will work closely with our design and interaction consultants and the back-end development team on the implementation of our responsive, mobile-first web application.

More info here. You can drop them a line at jobs@crowdscores.co.uk.

• From Pavel Zyr, a neat artificial life experiment using Three.js
• Something very cool from Xavier Bourry (unfortunately Chrome 22+ only) — a motion-tracking system that uses your webcam to control a WebGL scene. In his own words, “I did it in 2 days so it is not the most reliable application of the world, but it is funny ” There’s a video here.
• Also from Xavier, a 3D chess game where you can see a webcam view of your opponent. Video here.
• ThreeDeeMedia are working on a WebGL engine of their own for “immersive 3D Rich Media advertising and 3D visualization” (but in a good way) and here’s a work-in-progress example of the kind of thing they mean — an in-browser interactive colour-picker and display for Beats by Dre headphones. Apparently there’s an online editor coming soon, too.
• In general, it’s a waste of CPU to use a generic hard-to-parse format like COLLADA if you’re sending models from a server that you control to a client WebGL app that you control. The normal recommendation is to just use your own format, probably based on JSON. But wouldn’t it be nice to have a standard format for that? There’s now work in progress to create one.
• From Thomas Kjeldsen, an interactive view of data about Danish municipalities.
• A topical demo from Callum Prentice: Storm Tracks WebGL.
• One demo that I’d never seen before on this Japanese roundup: the Sunlight Graffiti sphere by Olafur Eliasson, which displays images contributed by people who saw the original physical installation at the Tate Modern art gallery.
• I was sure I had mentioned this before, but I can’t find the post… anyway, if you’ve not read the WebGL tutorials over at Nettuts+, then they’re worth a look. Here’s part III, lighting.
• Also from Japan (and in Japanese) — part 5 in a series of articles on using Three.js.
• If you’re using Windows to code WebGL and need to know how to set up a web server, here’s a helping hand from Eric Haines.
• Shashi Sharma’s Dart + WebGL lessons continue: Part 2.
• A bit of reflective demoscene fun from (I think Anne Jan Brouwer) (coarse language warning…) (via paulo)
• Interesting: Anthony Pesch is doing a manual line-by-line port of Quake 3 to WebGL; here’s a recent tweet with a link to a screenshot of the work in progress. (via mariuz)
• On the subject of ports, if you’re able to use Microsoft technologies then Matthias Ferch has build a new vector/matrix library in their superset of JavaScript, TypeScript. It can be compiled to JavaScript, so it should work fine with browsers that support WebGL after that.

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

[UPDATE] This was posted before I’d put everything in that I wanted to; I’ll let it stand for now, though, and will post more when I’ve got a little further through the backlog.

• Gregg Tavares has written a good low-level overview of how WebGL works (via mariuz).
• Turbulenz is a game-development platform with its own hub where people can publish their games. They’ve got a decent set of samples here including some really neat games (though you need to register to play them).
• I’ve mentioned Verold Studio before; I may have done it an injustice by just calling it a model-sharing site, it’s more than that. They call it “a CMS for web-optimized 3D content”, and they’ve just added a great new feature that allows you to embed a model in a 3D video conference, using Google Hangouts. An excellent way to run a design review for a distributed team.
• If you have an XBOX 360 or PS3 controller, Google Chrome can use it if you set the gamepad API flag under chrome://flags. If you do that, then you should definitely take a look at Corey Clark’s Omega Resistance demo. If you haven’t, the video’s still worth checking out.
• If you’re interested in combining Dart and WebGL, here’s a port of my first WebGL lesson by Shashi Sharma.

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

• Interested in another London WebGL meetup? Dennis Ippel is planning to organise one. Leave a comment below if you’re interested in presenting and if you know anyone who might be interested in hosting it.
• Best. Résumé. Ever. Godio’s Journey is Steeven Plu’s, and he’s done it as an HTML5/WebGL platformer!
• From Michael Chang of the Google Data Arts Team, Generative Machines “generates machines inspired by exploding view diagrams.” And even though it’s a Chrome Experiment, it works on Firefox. Blog post here.
• Another cool one from the Google Data Arts Team: a WebGL globe showing cloud data from 1 July 201 to 12 September 2012.
• Some fantastic visualisations on the GPU from Nicolas Garcia Belmonte, doing complex calculations on the GPU — specifically, texture advection via line integral convolution. The complete project is here (including links to research papers about the technique), and here are some cool demos: flow visualisation via texture advection and an electric dipole visualisation.
• Similarly GPU-based, there’s Yang Chenglin’s particle-based free surface flow simulation and FFT-based ink droplet simulation (via Evgeny Demidov)
• And something by Evgeny Demidov, a chemical demo: valence bonds.
• This is a nice demo on the WebGL Playground, anyone know more about it?
• Two games by Mobialia, written with GWT and in the Chrome app store, but they work in Firefox: Chess and Connect 4.
• Viktor Kovacs’s JSModeler makes it easy to build up 3D objects programatically and export them as Three.js meshes.
• A new release, 4.2, of DOM-based 3D framework xml3d.js — with some nice demos.
• Two new 3D model sharing sites: TFTLabs’ JSON3D, and Verold Studio.
• Here’s a fun little game from Otto Piispanen: Ball-o-Madness.
• Tim Field’s Heaphy is a WebGL-based control system for a group of humanoid robots; unsurprisingly there’s no live demo but the video’s pretty impressive!
• Brian Danchilla has written a new WebGL book: Beginning WebGL for HTML5, published by Apress. The companion site is here.
• “Blast™ by HKI™ is a immersive VJing experience”, but is annoyingly Chrome-only.

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

• The WebGL port of the open source racing game Trigger Rally was excellent — and version two is looking even better! (via webgl.com)
• Jaume Sánchez Elias’ Rocking dendrites is a super-cool music visualisation.
• …as is A dive in music — don’t miss out on the configuration options you get by moving your mouse over to the side of the page.
• Google’s Chrome Experiment #500 isn’t WebGL itself, but it is a nice visualisation of the first 500 Chrome Experiments, and you can filter them by type so if you want a concentrated hit of all of the WebGL ones, it’s just two clicks away…
• Some neat little demos from Cartelle (use the button at the top right to get a list)
• “Catch the red boxes without crashing into the ground to get a point.” vikerman’s Voxel Shooter is fun.
• “ArcGIS Online is a cloud-based, collaborative content management system for maps, apps, data, and other geographic information.” They have some nice models of various parts of cities using WebGL.
• Here’s a nice wobbly toroid from Rob Hall.
• This Three.js demo of skinning and morphing is pretty cool (takes a little while to load)
• Interesting: “gloc is a collection of tools for transforming the WebGL shading language, OpenGL ES 2.0 GLSL.” I can see how that could be really helpful in building a WebGL framework, or a syntax-highlighing editor, or general code analysis… any other ideas?

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

Still working through quite a backlog, if you’ve sent me a link then don’t worry — it’s on its way!

• I missed this one out last week. Getting lighting to work perfectly is really hard; Florian Boesch has written up the details (with a great, if GPU-heavy demo) of one technique, using Deferred Irradiance Volumes.
• I haven’t been able to try this out on a machine with a webcam yet (long story) but it sounds incredibly neat: Eugene Baumstein and Doug Sherk have built a Tron racer game that you steer by moving your head, using face recognition! Eugene writes: “the map is complete with physics, html5 audio, web workers, web sockets, and video. Its even got a (pretty broken) multiplayer baked in. [We] built this in 24 hours at a hackathon, and we’ve released the source for this too. If it looks any good, let me know!”
• Wow! Space Invaders, in a GLSL shader, by Alan Mackey.
• Cool data visualisation from the Google Data Arts team — a globe showing searches by language. Look closely, it can be hard to distinguish some of the colour differences (I spent a good few minutes wondering why so many people in Russia were searching in English, and I’m still not convinced that they’re showing Polish and Russian in different colours…)
• A little game Xavier at Spacegoo wrote for a friend’s wedding: “Help Régis to rescue Alice while avoiding the monsters.”
• Interesting: “An interactive visualization of government-authorized small arms and ammunition transfers from 1992 to 2010.”
• A nice little teaser for Jerome Etienne’s tutorial at the onGameStart conference in Warsaw later this month.
• A cute platformer made by Fenmar for a Ludum Dare competition: Upgrade.
• A neat 3D graph plotter, by polish designers Webdev 2.0
• For Japanese speakers: this presentation by Akihiro Oyamada looks like a pretty good introduction to WebGL and Three.js, and this book looks interesting: HTML5+JavaScript+CSS+WebGLによる3D Web コンテンツ制作
• An animation of random events from the 20th Century, from zugakousaku.com. (via dotHTML5)
• Interesting: Ben Vanik’s WebGL Inspector plugin for Chrome is fantastic, but it looks like something similar is going to be built in to Chrome 23. Anyone know if it’s the same codebase? It looks pretty similar…

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

Still a little overloaded with all of the links, but I’m working on a solution — an automated WebGL link-finder that might eventually write these posts for me More on that later, here’s what I’ve seen over the last two weeks:

• A really impressive 3D FPS from Mozilla: BananaBread, originally written for the C++-based Cube 2: Sauerbraten engine.
• Another great game — if you remember Wipeout, you’ll love Thibaut Despoulain’s HexGL.
• Impressive for 13k of code: Paul Brunt’s Johnny Smiter: 13th Knight
• And one more game: PL4N3’s Wloom gets a big update.
• Beautiful: SBArt4 Daily Evolved Animation, by Tatsuo Unemi
• With all the ASCII art and Google Street View WebGL demos, it was only a matter of time before someone did this. Kudos to Peter Nitsch for doing it, though!
• An art project that uses music and graphics to visualise network data captured by Alcatel-Lucent: Electric Ikebana.
• A virtual tour of the Saint Jean Cathedral in Lyon, France.
• Sphere-tracing demos from Johannes Diemke: Oldskool Plasma Effect, Sphere Tracing with Iteration Glow, Domain Repetition and Reflections, and Variable Penumbra Soft Shadows.
• An interesting article by Mikael Emtinger on how he used his GLOW WebGL framework to build the recent LEGO-based Build With Chrome demo.
• Barack Obama’s appearance on Reddit obviously generated a lot of traffic; Darien Acosta has mashed it up into a globe visualisation.
• Here’s an in-browser (online and offline) editor for JavaScript code, with a focus on Three.js, from Mr.doob.
• More from SIGGRAPH: a video of the WebGL BoF.
• There’s lots of speculation about what the predicted iPad mini might look like so MacRumors.com decided to mock one up in WebGL.
• A new WebGL-based in-browser model viewer, SlingM.
• If you’re a user of the Sublime Text 2 editor, and you’re hand-coding GLSL shaders, then Paul Lewis has a syntax-validating plugin for you.
• Tony Parisi’s excellent WebGL, Up and Running is now officially out! It uses Three.js to help you go from zero 3D knowledge to building cool stuff in the browser really quickly and I heartily recommend it. Other options: Diego Cantor and Brandon Jones’ WebGL Beginner’s Guide, and three I’ve not read yet: Jacob Seidelin’s HTML5 Games: Creating Fun with HTML5, CSS3, and WebGL, Andreas Anyuru’s Professional WebGL Programming and James L. Williams’ Learning HTML5 Game Programming

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