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!

The World’s Biggest WebGL Site – For Now

Now that Sony has released the PS4, the truth can be told. The user interface to the PlayStation Store, the Music and Video Applications, and a good chunk of the user overall user experience is running in a browser, written in WebGL. As the PS4 rolls out in the coming months, I believe it will represent the world’s largest WebGL site. At least, until Google cuts all their maps users over to the new version.

Kudos to my pal Don Olmstead for his great work!

WebGL around the net, 14 November 2013

Welcome to the New Age! Eyes in the sky, pyramid power, and some serious browser love lead this week’s WebGL roundup.

  • Firefox now lets you debug your shaders using a WebGL live shader editor that has been added to the dev tools in version 27. Wow!
  • For the touch screen-averse (or just haters of all even-numbered Microsoft releases) IE11 has made it to Windows 7. It features WebGL and comes with a ported version of Hover, a capture-the-flag-style DirectX game that originally shipped with Windows 95.
  • Ever have the feeling you’re being watched? Eyes is a fun piece from interactive agency Goodby Silverstein.
  • Boston-based Logan Engstrom has created a prototyped tile-based pyramid editor. Simple and fun.

WebGL around the net, 7 November 2013

This week in WebGL: fun with physics, mobile game portals, 3D digital art exhibits and… w t f?

  • Peter Lüders (of PL4N3S WORLD fame) has created a simple fighter game demo and editor that uses his port of the Bullet physics engine to JavaScript,  bullet.js.
  • The always-creative Ivan Kuckir has “made a web for mobile games” at www.FunInTablet.com . It has very simple design, so it can be easily controlled with touch input. The first 6 games are WebGL games. Here is Ivan’s video of the “tablet experience” – using the Nexus 7.
  • Kuckir has also created a utility, 3D Tool, for display and very simple rendering of 3D models: drag and drop any 3D file into the browser window, and after you find the right angle and choose an environment map, you just press Render and wait until your image is pretty enough.
  • Andrew Benson has created Plastic Yet Still In-Between, an intriguing WebGL-based digital art exhibit, for The Wrong – A Digital Art Biennale (http://thewrong.org/). Andrew also pointed out another cool WebGL-based exhibit created for the same show, Giselle Zatonyl’s Three.js-driven pavilion.
  • 2D drawing library Pixi.js now features realtime webGL filters… beautiful.
  • Apparently Microsoft still has some work to do on IE11 WebGL. Nikolaus GebhardtAmbiera founder and developer of CopperLicht3D, tries it out and compares graphics and performance to Chrome at http://www.irrlicht3d.org/pivot/entry.php?id=1406
  • A nice million particle simulation by Robert Oram via Chrome Experiments
  • Not WebGL – just yet – but this may be of relevance soon: Amazon launched new GPU instances for high performance 3D in the cloud. Anyone up for prototyping a server-side WebGL rendering or “cloud gaming” service?
  • Don’t have the WebGLs? Brandon Jones can help you figure out why in this blog post http://blog.tojicode.com/2013/11/the-state-of-webgl-on-chrome-aka-why.html
  • Finally, from the WTF department… apparently hardware giant AMD has decided to go its own way with 3D graphics, creating a totally new API dubbed Mantle, for creating high-performance games on desktops that rival console performance. This, while Steam is pushing forward on the Steam Box, their new console offering featuring SteamOS – an operating system with God knows what under the hood. Last week it seemed like HTML5 and WebGL were poised to be the open graphics foundation for everything from desktop to tablets to consoles; this week… not so much. But time will tell.

WebGL around the net, 31 October 2013

Trick or Treat? Cool new tools and more in our All Hallows’ Eve edition of WebGL around the net.

  • Stealth No More: Goo Technologies decloaks to launch Goo Create, a browser-based tool for easy creation of WebGL games and 3D applications.
  • Leeds-based Lawrie Cape has created Rompola, a 3d sketchpad application. Rompola features a dead-simple line drawing tool that lets you create rotatable 3D shapes and apply effects. WARNING: addicting. http://rompola.com/
  • Wanaplan your house? Create the plan of your house or apartment with ease in Wanaplan’s 2D editor and enjoy the result in 3D!
  • Design your own ring in 3D. http://davidscottlyons.com/threejs/ring/
  • Helmut Emmelmann has just released an early version of taccgl, an open source JavaScript library for mapping HTML elements as textures on WebGL 3D objects. It can draw integrated scenes that display and animate HTML elements and 3D objects with depth buffering, lighting, and shadows.
  • Paris-based BLIQ has just released SpaceRun 3D II - an awesome space racer game with beautiful graphics, great sound design and fun game play.

WebGL around the net, 17 Oct 2013

Topping this week’s headlines: a new 3D engine, and plugging WebGL into the newest hardware.

  • Long-time fans of the Flash-based 3D engine Away3D will be delighted to know that it has been ported to Typescript and uses WebGL for rendering. Plugin-free 3D just got a turbo-boost with this fantastic library.
  • Want to immersive yourself in your WebGL? Now you can, using Oculus Bridge, an application that connects the Oculus Rift head-tracking display to WebGL-based applications using web sockets.
  • You can also get your hands into the act using Leap Motion. Code junkie/data maven/script kiddie Theo Armour makes things a little easier with his Leap + Three.js Boilerplate.
  • If you run Windows and want to get a jump on WebGL 2.0 features, Chrome Canary now uses Direct3D 11 (via ANGLE) to render, and it also features multiple render targets. via Brandon Jones
  • This awesome 3D piano player demo allows you to control a Three.js-rendered piano in real time using your keyboard. Game of Thrones fans will get an extra treat when they hit play. Best theme music EVER!
  • Real-time messaging company LightStreamer has developed a demo of its technology for use in multiplayer WebGL gaming.
  • Got data? 3D charting package  incharts3D is now in live beta.

Sorry about the delay…

Hi all,

Sorry about the delay in getting the roundup out this week. I just coughed up the penultimate chapter of my new WebGL book. One more to go! FYI the due date is looking like early January 2014. Stay tuned; you’ll know before anyone else does.

I’ll get back to the regularly schedule weekly news as soon as I recover.

WebGL around the net, 1 Oct 2013

The week in WebGL: classic games, training courses, and an anatomy lesson.

  • Microsoft is bringing a classic DirectX game back with WebGL. It just announced that it ported Hover! to HTML5 and WebGL.
  • SOLD OUT! My course, Programming 3D Applications in HTML5 and WebGL, a one-day training session at this fall’s HTML5 developer conference in San Francisco, has filled up. But GOOD NEWS: the organizers have opened up a second session. Go to the web site and register today!
  • Videep Mishraa, aka theMaxScriptGuy, is at it again. Here is a C#-based program to convert OBJ to Three.js JSON without using Python command line.
  • CL3VER just released an absolutely gorgeous WebGL presentation demonstrating the anatomy of the human foot, created using their development tools.
  • KineMan is another anatomy piece that focuses on realistic human skeletal joint motions, by adding scientifically-derived joint kinematics (axes and motion ranges) to 3D bone geometry.
  • Also on Chrome Experiments this week, an experiment with spherical harmonic distortion to create an organic shape.
Subscribe to RSS Feed Follow Learning WebGL on Twitter