WebGL around the net, 27 May 2014

This week in WebGL: Tetris, quantum computing, and… Assassin’s Creed!

  • BlockTris is a 3D version of Tetris. Warning: maybe become habit-forming.
  • Jerome Etienne shows his THREE.X terrain generator game extension built with Perlin noise.
  • The awesome Potree point cloud renderer has been rewritten in Three.js! Check out the beautiful new demos on the site.
  • Simulating a quantum computer with WebGL. To see it in action, make sure to hit Compile, then Run. http://qcplayground.withgoogle.com/#/home
  • Tarek Sherif of BrainBrowser fame has put together some beautiful procedural texture shader examples featuring shadow mapping.
  • Is Flash dead? Marcus Kruger from the Goo team wrote an article on the subject for Wired. Read the flak he gets in the comments, especially entertaining! I’m on Marcus’ side… but what do you think?
  • Get immersed in your world: NICTA, Australia’s Information Communications Technology Research Centre, has created an Oculus Rift Plugin for the Cesium virtual globe and mapping engine.
  • And finally… not to be outdone by Mozilla’s aggressive stance on in-browser gaming, Microsoft has gotten into the act. The Internet Explorer team joined forces with Ubisoft to create an Assassin’s Creed Ship Race in WebGL!

WebGL around the net, 6 May 2014

Lasers, robots and Machinima top this week’s WebGL developments.

  • Jerome Etienne, creator of the great blog Learning Three.js, has been a busy boy with his ‘one THREEx a day’ challenge. Here are how-to’s on developing threex extensions for video textures, realistic physics, and dynamic lasers. Choose your next witticism carefully, Mr. Bond; it may be your last.
  • Giles Bowkett has developed a great video and software package that demonstrates how to create Tachikomas, or  robotic spider tanks, in WebGL. The package isn’t free, but it’s inexpensive and chock full of great info. Check it out.
  • The folks behind Blend4Web show how to make simple WebGL Machinima in this article.
  • WebGL game developers should check out the updated version of Craig Buckler’s intro to the Fullscreen API, highlighting the latest changes.
  • Want faster physics? Ok with a sprinkle of native code in your browser? Then you might want to have a look at this physics demo created using a port of Bullet to PNaCl (Portable NAtive Client). Fast!
  • There’s a new game engine in town: Minko Engine. This one boasts cross-platform support for HTML5/WebGL, iOS, Android, Windows, OS X and Linux and is MIT-licensed. The online demos and peppy and look great. More information can be found at http://fr.slideshare.net/Minko3D.
  • Finally, from the How’d I miss this? department: a stunning promotional piece for Nestle’s Special.T Ô Green brand tea: a gorgeous, tranquil underwater scene http://ogreen.special-t.com/en/.

WebGL around the net, 24 April 2014


  • CORRECTION: Our humblest apologies to Tarek Sherif, the true guru in charge of BrainBrowser.  Last week we mistakenly reported that the tool was created by “a team at McGill University lead by Nicolas Kassis.” Apparently, Kassis left McGill two years ago after creating the original application in O3D. The current iteration of BrainBrowser as a WebGL app, library and web service has been developed almost entirely by Sherif. (For the curious, full credits can be found here.) Sorry, man… our bad. And again: great work!
  • For anybody in the San Francisco bay area: I am presenting tonight at the Tales of JavaScript meetup: HTML5 and WebGL Game Evolution and Development. My usual fare, plus some Oculus ranting for good measure. I hope you can stop by. If not, the slides for my talk, The Browser as Console, can be found on SlideShare.
  • Londoners: the next FREE London WebGL Workshop, on Writing Shaders and Effects for Three.js,  will be held on Thursday, May 22, 2014 6:30PM. Register at http://www.meetup.com/WebGL-Workshop-London/events/177288532/. Venue: at SkillsMatter, 116-120 Goswell Road, London (http://skillsmatter.com). Prerequisites: A laptop with a browser that supports WebGL and an editor that can handle HTML and JavaScript. Some knowledge of HTML and programming, preferably JavaScript (or similar).
  • Faskat-Neon is *coolest* neo/retro Tron-style game I’ve seen in while. Code and design by Andrea Doimo – music by Fabrizio Radica.
  • The folks at Goo made a lovely Easter egg featuring their little minion guy. I know, cutesy, but the rendering is really nice on this one.
  • Two great Chrome Experiments hit the site this week: http://www.chromeexperiments.com/detail/dollyzoomjs/, which covers cinematic camera dolly techniques, and http://www.chromeexperiments.com/detail/light-paint-live-mercury/, a light painting experiment that uses the GPU to composite frames, like a real-time photo exposure simulation.
  • Haxe fans: Brazil-based Eduardo Pons has just released a preview of his new engine Haxor, a Haxe language-based game engine and Rich Internet Application framework. Here is a nice dungeon level demo. Use arrow keys to move  (animation uses GPU skinning), space bar to attack (featuring cross fades), 1, 2, 3 and 4 keys show debug gizmos for various features, and there are light maps and 8 dynamic lights. Off to a good start!

WebGL around the net, 17 April 2014

This is your brain on WebGL: browsing the human brain and the Earth’s weather in 3D are top in this week’s developments.

  • A team at McGill University led by Nicolas Kassis has developed BrainBrowser, a set of web-base 3D visualization tools for neuro-imaging. Browse the human brain in real-time at https://brainbrowser.cbrain.mcgill.ca/
  • Zooming outward, take a look at World Weather Viewer, an WebGL weather forecast application that displays current world wide pressure, wind, humidity, and surface temperature on an interactive globe.
  • Look down: you can see the Pompeii Ruins in a point cloud visualization developed using the Potree WebGL PointCloud Viewer. Stunning.
  • AlteredQualia continues his groundbreaking WebGL rendering work: here is a great demonstration of deferred skin rendering using physically-based rendering and filmic tone mapping.
  • Kevin Roast, a total stud when it comes to rendering 3D with the 2D canvas API (his Phoria library is featured in Chapter 7 of my new book, plug!), has branched into real-time 3D with various GPU shader experiments in distance fields and generative art. Great stuff!
  • Is your boss getting on your case about playing with WebGL during work time? Here’s some extra ammo from Cesium’s Patrick Cozzi on why WebGL should be used for graphics research. Might help?
  • The folks from Ambiera have released version 4.5 of CopperCube. The game engine now has the option to publish WebGL games with fullscreen and pointer lock support, meaning first person games and apps are now easy to use when run from websites. There is also a new WebGL demo available, showing this feature in action: http://www.ambiera.com/coppercube/demo.php?demo=fpsdemo&mode=webgl

WebGL around the net, 8 April 2014

A fresh crop of development tools leads this week’s WebGL headlines.

  • CL3VER is a cloud-based 3D engine in HTML5 and WebGL to create and publish interactive 3D scenes on web and mobile. They recently released the latest version of the product, which includes a free way for architects to publish designs and presentations to their clients.
  • The team at Clara.io has some great new samples to check out: http://clara.io/?mc_cid=448bd04d01&mc_eid=a428ee9647
  • New kid on the block Blend4Web (http://blend4web.com/en/) develops  a software framework for authoring and interactive rendering of three-dimensional graphics and audio in browsers. The platform is intended for creating visualizations, presentations, online-shops, games and other rich internet applications, and is integrated tightly with Blender (hence the name).
  • Still reeling from the Oculus acquisition? Me too. Here is Brandon Jones’ take on it.
  • Welcome to the modern age, Unity! In this interview from GDC, CEO David Helgason presents his vision for the future of gaming. Guess what? WebGL looms large…
  • How Did I Miss This? Dept: Check out Matter.js, 2D rigid body physics library http://brm.io/matter-js-demo/ Also fast animated WebGL fractals.
  • And, finally, for those of us like me who think you can’t have enough WebGL aquaria… here is FishGL, from the RethinkIE team at Microsoft.

WebGL around the net, 27 March 2014

This week in WebGL: virtual reality gone wild, MMOs and more.

WebGL around the net, 18 March 2014

[Apologies for the delay in posting. I have been swamped due to the release of my new book, speaking at O'Reilly Fluent, commemorating VRML's 20th Anniversary and running the San Francisco WebGL Meetup. We should be getting back to our regularly scheduled weekly review starting next week. --Ed]

On the eve of the Game Developers’ Conference, WebGL’s got game… and more.

Here’s the more… ALL kinds of pioneering visualization work is happening around the net.

  • Want to green the planet? Here’s one way to do it virtually. Urban Jungle Street View combines Google street view with a Three.js overlays depicting jungle plants… absolutely stunning.
  • Cesium now has full support for glTF models, including aircraft, ground vehicles, and character models: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=3D%20Models.html&label=Showcases. Check out the tutorial on how to use Cesium with glTF, and their tool to convert COLLADA models.
  • Mike Linkovich has created Earth History Explorer, a way to observe and interact with continental drift over time, and to explore Wikipedia articles for each major time period in Earth’s history.
  • Engi is a dataflow programming editor using HTML5 and WebGL. Creator Antti Jadertpolm  just released an open source project that could be interesting for webGL community. It’s been worked on for 3 years so it’s at quite advanced stage already. Check out the introduction: http://www.engijs.org/help/introduction.html
  • Bartek Drozdz (@bartekd) has just released a soundscape visualization controlled with a microphone and a Leap Motion, using WebGL, WebRTC, the Web Audio API and the LeapMotion SDK.
  • The next London WebGL Meetup coming in April features bit more Three.js … and a deeper look at shaders.

WebGL around the net, 20 February 2014

The force is strong in this one: a Quake port, a shader showdown and screen capture highlight the week’s WebGL developments.

  • If Epic Citadel whetted your hardcore gaming appetite, then this should be a great next course: Anthony Pesch describes porting Quake3 to the browser using Emscripten. (Note: some assembler required!)
  • ShaderToy is hosting a Hackathon, the first-ever world competition to see who can write the best shader in 60 minutes (!) If you’re in the SF Bay Area during the Game Developers’ Conference (GDC), you might want to pop in and give it a try. You can also compete online.
  • Learn how create a 3D WebGL procedural QRCode maze with Babylon.js. Quite innovative…
  • London-based Ilmari Heikkinen has written a great tutorial on saving out video frames from a WebGL app at http://fhtr.blogspot.com/2014/02/saving-out-video-frames-from-webgl-app.html.
  • Brandon Jones has posted a much-anticipated update to his blog postings on how Google’s migration to the Blink rendering engine has affected WebGL.

WebGL around the net, 13 February 2014

Flappy Bird clones, Famo.us killers and personalized jewelry top this week’s WebGL headlines.

  • And the Flappy Bird cloning continues unabated! Have a play with Goo-based Push to Break. Irritating but tons of fun! Ok, time to step away from the monitor. Just step away…
  • D3 fans should check out Pathgl, a library that sits between D3 and the DOM and lets you render to WebGL instead of SVG.  Here’s a great demo http://pathgl.com/examples/swarm.html that shows off the insane performance. Which once again begs the question (that I seem to ask regularly these days): why would anybody need Famo.us?
  • Dan Ristic from Pubnub has written a great blog posting about creating real-time visualizations in WebGL using their world-class highly scalable messaging system.
  • IMVU’s Chad Austin just gave really informative presentation on using Emscripten to port WebGL apps. These guys are really bullish on the technology. Me… not so much. I think it’s still pretty immature. But if you want to know what you’re getting into, the team at IMVU has some of the best experience so far.
  • AngularJS enthusiasts will appreciate East Bay Hacker Josh Staples’ blog article talks about how he has developed an AngularJ factory for Three.js.
  • I just stumbled upon Shader Hub, a promising – though early – 3D content repository for 3D Artists and GLSL Shader programmers
  • Ontario-based Mike Leonard made a WebGL demo using the Wing Commander Privateer cockpit and an Earth model with clouds. Press the tab key to gain mouse lock so that you can look around, use WASD keys to move, Q and E to rotate, and hold the Shift key to move faster. Here is the live demo and a YouTube video.
  • Coders – the Babylon.js project is looking for contributors: http://www.html5gamedevs.com/topic/3699-contribution-needed-exporters/
  • Finally, 3D printing just gets better and better! Check out Ye Wang’s new app for Autodesk 123D at apps.123dapp.com/charmr. It’s a jewelry tool that lets people use their images to create 3D printable jewelry pieces; uses Three.js for rendering and geometry representation.

WebGL around the net, 6 February 2014

WebGL is cranking in first weeks of 2014! Trillions of Legos, great presentations and face-melting demos.

  1. The videos from the main presentations and panel QA are up on YouTube: http://www.youtube.com/playlist?list=PLOU2XLYxmsIKp2fK2_JnYd08i3HEsL3nF
  2. One of the outstanding showcases was glTF architect Fabrice Robinet’s lighting-talk demo of styling WebGL content using CSS. Great content (delivered in glTF of course), and likely an idea whose time has come!
  3. Also of note from the same Meetup was another lighting talk by Eric Levin: a Visual/Contemplation or “Sunset Jam” of Burial’s Come Down to Us. It’s quite beautiful. http://ericrius1.github.io/ComeDownToUs/
  • Borja Morales has shared a WebGL work he contributed to some weeks ago, thisway.js, an HTML5 remake of stravaganza’s piece, “this way.” It’s based on a 1990s demo, and as such the effects have an old school look to them. But it’s a nice collection of WebGL powered visuals with audio as you would expect. All done with the help of Three.js.
  • Here is a presentation about the Kinect Fusion - done in WebGL!
  • Finland-based Jaakko Rinta-Filppula built this simple fireworks show using WebGL and Web Audio. Nice!
  • Sashko Stubailo has created Meteor Blocks, a collaborative 3D scene editor (blocks-based) using the Meteor framework and X3DOM.
  • Ever want to look like Walter WhiteGeorge Clooney? Justin Beiber?! Now you can, with this face substitution demo built using WebGL and the javascript library clmtrackr.
  • Patrick Cozzi’s students Sijie Tian and Yuqin Shao have written a nice article on deferred shading for the Mozilla Hacks blog. This introduces and shows the performance benefits of WEBGL_draw_buffers (multiple render targets). The demo also includes lots of debug views for learning about deferred shading.
  • Also quite informative: if you’re looking to compare and contrast scene graph libraries, check out this IBM Developer Works article on “taming” WebGL with ThreeJS and SceneJS http://www.ibm.com/developerworks/web/library/wa-webgl2/index.html
  • Attention Londoners! There will be another FREE London WebGL Workshop on Thursday, February 20, 2014 6:300PM. The group will be taking a look at some of Three.js’s features, and maybe a look at some alternatives.
Subscribe to RSS Feed Follow Learning WebGL on Twitter