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.

WebGL at SFHTML5, 23 January 2014


Tomorrow night (PST) there is going to be a WebGL mega-event hosted by the San Francisco HTML5 Meetup group. This is one of the biggest-ever events for this group; in fact, we broke the record for wait list size! That goes to show how hot the topic of WebGL is.

If you’re not in the bay area, and not already on the list, you can still enjoy the live casts of the event online. Links below.

  • G+ eventhttps://plus.google.com/events/cvsnurl45lmlpcc08s97ddt5g7o
  • Meetup link (incl. YouTube Live link): http://www.meetup.com/sfhtml5/events/149698902/
  • YouTube Live event: http://www.youtube.com/watch?v=sIhtcUvi0BQ
  • Google Developers Live event linkhttp://bit.ly/sfhtml5webgl
  • Hashtags#sfhtml5 #webgl
  • WebGL around the net, 20 January 2014

    I have a dream… of WebGL everywhere.

    • Coming soon to a TV near you! At the Consumer Electronics show, Opera announced a partnership to bring HTML5 browsing and WebGL to Bang and Olufsen connected TVs.
    • 3D publishing just got a huge shot in the arm: the new version of Adobe PhotoShop CC integrates Sketchfab, meaning that artists will now be able to publish directly to their Sketchfab accounts from within Photoshop. See the Sketchfab blog for details.
    • CreateJS, a suite of Javascript libraries & tools for building rich, interactive experiences with HTML5, now includes support for Firefox OS, including WebGL.
    • iChemLabs has launched ChemDoodle Web Components 6, with a lot of new WebGL features, including picking, highlighting and transparency, 3d measurements and more: http://www.ichemlabs.com/1802. It also now includes a full 3D interface that allows the user to completely control the graphics. Works in all WebGL enabled browsers including Chrome for Android.
    • Data gang-banger Theo Armour continues to mash up global data sources in unFlatland, a 3D geographic visualization.This 3D map covers the entire earth with an accuracy of one elevation point approximately every one kilometre or 43,600 x 43,600 data points.
    • Martin Vézina recently released jsOrrery – because everyone loves a good solar system! Very nice.
    • For those in the London area: the next FREE London WebGL Workshop will be Thursday, January 23, 2014 7:00PM. Alvin Sight will be giving a brief introduction to pixi.js, a super fast HTML5 2D rendering engine that uses WebGL with canvas fallback. Also, a look at light and shadows in WebGL… using THREE.js this time.
    • Kaj Dijkstra, co-founder and graphics engineer at Raptorcode, has released their WebGL-based graphics engine as an open source project. The Raptor Engine can be found at https://github.com/kajdijkstra/RAPTOR.
    • As we enter 2014, it seems like WebGL has hit a tipping point. What do you think?

    Building a WebGL Santa

    No roundup this week. We’ll get back to that  in the New Year. In the meantime…

    The Cesium AGI team has once again built the backbone for NORAD’s Santa tracker. This year, they added an animated 3D model for Santa and his sled and reindeer using glTF, the new runtime asset format being designed at the by Cesium AG architect Patrick Cozzi, myself and a small team. Here is Patrick’s blog posting on how it was built.

    Merry Christmas and Happy New Year!

    WebGL around the net, 19 December 2013

    A Merry Christmas and Happy New Year to you all! WebGL finishes 2013 strong with amazing experiments and new tools.

    • Check out Paper Christmas, a beautiful paper cutout scene by Little Workshop, built with Three.js and SoundJS.
    • Google Zeitgeist is an interactive 3D globe showcasing the top search terms per day for 2013, in cities around the world. Created by the Google Data Arts team in WebGL for desktop and mobile.
    • ZYA has developed Octahedrone, a provocative experiment in generative music. Interact with the geometry to create musical arpeggios, dynamically adjust the textures and change the tones.
    • The folks from HelloEnjoy just ported their awesome Hello Racer car to mobile. Point your favorite WebGL-enabled mobile browser at Samsung-sponsored Racer S.
    • This stunning Chrome experiment by Jaume Sanchez Elias uses marching cubes and triplanar texture mapping to create  normal-mapped metaballs.
    • East-Bay developer Josh Staples shows how to extend Three.js to add object-based animation as a native capability. Josh used this approach to develop a WebGL application for the shipping industry.
    • Viktor Kovacs’ JSModeler now has the capability to easily create 3D logos by converting SVG drawings to 3D models. Sweet!
    • Some good news on the tools front: Babylon.js now has a Sandbox Editor to help test your 3D assets without writing code.
    • Really Famo.us? Venturebeat might love your pretty WebGL User Interface Demos, but until you release the API and documentation, it’s all smoke and mirrors to me. It’s almost 2014; get with the program.
    • Net Magazine just posted the online version of my article on building games in Three.js, which originally appeared in the print version of the mag earlier this year.
    • Patrick Cozzi of Cesium and glTF renown also teaches GPU Programming and Architecture at UPenn. (Does this guy ever sleep!?!) Here are some projects Patrick wanted me to share:
    1. WebGL water simulation with Fast Fourier Transforms by @wuhao1117 and @Guanyu_He.
    They also plan to make their GLSL FFT implementation a standalone open-source library.
    2.  Tile-based deferred shading in WebGL by @YuqinShao and @sijietian.
    The live demo needs a browser that supports WEBGL_draw_buffers.  The development was done in Firefox using the experimental WebGL 2 features.
    3.  Visualizing Kinect input in the browser using WebGL and web sockets by @Qiong0516 and @takfuruya.
    A local web server gets Kinect input, compresses it, and sends it to the browser using web sockets where it is rendered with WebGL.
    4.  WebGL point cloud renderer by @uriahjb and @MagentaWaffles.
    Initial work towards rendering massive point clouds using an out-of-core octree so only a subset of the tree is in memory based on the view parameters.

    See you in 2014! –Tony

    WebGL around the net, 12 December 2013

    There’s no place like WebGL for the holidays. This week features the world’s first commercial asm.js 3D game, creative competitions, workshops… and special guest stars Notch and Santa!

    • NomNom Games announced that it has developed the first commercial 3D game built in asm.js, a port of Monster Madness that uses the Unreal Engine.
    • Unleash your inner game creator: Mozilla and Goo have announced a holiday gaming competition. The deadline is January 14th, so get coding already.
    • This has got to be the sweetest music gizmo rendered in WebGL yet! Audiotool Sketch is a music sequencer, built with the multi-platform app development system defrac, that lets you create beats using two drum machines and a bass line. I couldn’t stop messing around with it…
    • Have a hippie, trippy Xmas: Nate from Devmaster started a fun community contest to construct various types of art using nothing but fragment shaders. Nate set up a sample framework in WebGL so that others can quickly dive in.Details and discussion are available at http://devmaster.net/posts/23953/xmas-demo-fun.There are already several cool demos in the can… but you can still jump in.
    • Data maven Theo Armour has just hacked a new version of FGx Globe. Does this guy ever sleep?
    • Is Notch working on a WebGL Minecraft? Brandon Jones thinks maybe.
    • In maybe  the biggest WebGL design win of the year, NORAD has switched to Bing Maps to track Santa, working with Microsoft to create a new Santa Tracker.
    • East-Bay developer Josh Staples of shipping container visualization fame figures out to how calculate tic tac toe win conditions using ray intersections. Mmm mmm geeky!
    • What would you write on your own tombstone? Try this WebGL app to find out. In the words of designer Felix Palmer, “An obvious application for these techniques is an in-browser tombstone designer, ” … um, ok…
    • If you’re in the London area next week, Carl Bateman is organising a FREE WebGL Workshop in London — 6:30pm Thu Dec 19 (http://www.meetup.com/WebGL-Workshop-London).

    WebGL around the net, 26 November 2013

    This week in WebGL: zombies, kids… and hobbitses!

    • Google’s demo team has done it again, this time with A Journey Through Middle Earth, an interactive experience inspired by the upcoming motion picture “The Hobbit: The Desolation of Smaug.” The big news with this one is that was also designed to work on mobile Chrome for Android. Read more in the team’s blog posting.
    • San Francisco-based Ludei has announced that it is partnering with Nickelodeon to bring HTML5 gaming to its mobile Nick App for kids games and TV programming using CocoonJS.
    • It had to happen. A Goo engine-based Zombie shooter! http://goobuzz.github.io/NavMesh-Project/
    • Los Angeles-based Steve Belarovich has create Synth, a WebGL video synthesizer that uses your webcam as an input and maps the brightness of the video to the displacement of 3D geometry.
    • Dan Anderson just released Cupola VR Viewer, a Chrome packaged app that uses Chrome’s USB API to get head-tracking data from the Oculus Rift using a native Javascript library to be used in WebGL pages that support the Rift. Windows-only for now, pending Google improving their USB support for OS X. Dan’s reddit posting provides more details here.
    • Visualization programmer John Mick has developed a WebGL lake simulation that allows the user to modify oxygen, light, temperature, wind speed, nitrogen, phosphorus, and other simulation factors to observe different scenarios impacting Zooplankton and Algae populations.
    • My glTF partner in crime Patrick Cozzi has written this great article surveying WebGL debugging and profiling tools. LOTS of useful hands-on information in there.
    • … and in case you missed it from last week: the Sony PS4 user interface is built in WebGL!!!

    Happy Thanksgiving Everyone!

    Subscribe to RSS Feed Follow Learning WebGL on Twitter