SIGGRAPH 2016 Deluxe Report Pt II: the 3D Web

| Comments

At this year’s SIGGRAPH, the computer arts conference, WebGL was everywhere, as was something called X3DOM. I met the Web3D Consortium and saw first-hand how 3D can be put to work inside browsers and educational institutions to build a better world for us to live in.

Rachel Nabors poses in front of a SIGGRAPH logo.

The Web3D Consortium: the greatest Web 3D allies you’ve never heard of

The meeting of the Web 3D Consortium was collocated at a nearby hotel, and I got to ask questions to many of the consortium’s members directly. One of my first was… what the heck is the Web3D Consortium? So few people know what it is, self-included!

Web3D Consortium is a non-profit group working on royalty-free standards that enable real-time 3D across applications, networks, and XML web services. They work closely with the International Standards Organization (ISO), Open Geospatial Consortium (OGC), World Wide Web Consortium (W3C—the folks I work with). They have working groups for CAD, MR (the difference between VR, AR and MR), and even medical applications.

One of the projects they work on is H-Anim, a standard for defining human motion in 3D for the Web. Another project is X3DOM, which lets you include 3D scenes on a web page using XML-like sytax. It runs on top of WebGL and is supported all the way back to IE 7! If this XML format sounds familiar, that’s because this project grew out of VRML–literally “XML for VR.” The members I met seemed to pride themselves on X3DOM’s archivability and utility for higher education.

The Fraunhofer Institute for Computer Graphics Research did a talk on X3DOM, and making declarative 3D a first-class citizen in every web browser. It’s interesting to see academic institutions recognising the power of the web (and 3D within the web) as a place for research and academic advancement! They’re also working on bringing physically-based rendering (PBR) to the Web, something which has been gathering steam for a while now.

A wall covered in attendees' drawings.
There was art all over these panels at the conference. Can you spot Alice in Web Animations API Land?

WebGL 2 and WebGL Next

There was much talk about WebGL Next, the proposed successor to WebGL 2, which some people have some Big Opinions about. WebGL features heavily in bringing VR to the Web, as you can see in this W3C post on the matter. Remember, even X3DOM runs on top of WebGL!

Learning with WebGL

At a panel of college professors discussing teaching 3D graphics with WebGL, Firefox got major shout outs for not only for having a shader editor (Chrome doesn’t seem to), but also for having great turn around time on bug fixes. One of the professors was admonishing students to report every bug they found! A win for OSS.

WebGL is useful for teaching about how the GPU works, and in some browsers, WebGL runs faster than its C# counterparts! “The PlayStation 4 interface is WebGL and works great!” Everyone lauded WebGL as a great place to start learning computer graphics. These teachers seemed to be of a mind that students can and should learn more than one language in their lifetimes. Why not start with JavaScript before diving into C++? (I wholeheartedly endorse this mindset.)

Patrick Cozzi, author of OpenGL Insights, said, “It is a great time to get into WebGL.” Are you ready to get into it? What luck! One of the panelists, Eric Haines, co-created a full (and free!) interactive 3D graphics course on Udacity where you can learn the basics of meshes, transforms, cameras, materials, lighting, and animation with WebGL.

Extra WebGL Learning Materials


I was impressed with many of the uses for WebGL I saw at SIGGRAPH. Bentley’s ContextCapture takes arial photos and turns them into interactive 3D models. It was used to create a model of Philadelphia to prepare security measures for the Pope’s visit. Propeller uses photos taken by drones to create 3D models you can take measurments from. The implications for mining, fishing, any industry where large amounts of stuff must be measured accurately at a glance is impressive. Cesium is involved with a lot of these types of projects. It is an open source JavaScript library for 3D globes and maps and visualising dynamic data.

All of these uses for WebGL realize the Open Web’s promise of low cost solutions for real world problems. It was reaffirming to see what could be done with a consumer grade drone and a browser. That’s not to say that WebGL experiments like Neve aren’t equally important to our ecosystem. But in the web design and development world, it’s more common to see 3D in storytelling use cases rather than industrial ones. This was a refreshing alternative.

Bonus: the following has less to do with the Web, but is awesome.

Made something cool with 3D or VR? Sketchfab lets you share it. It’s a little like Codepen: you give it some code, and it gives you an embeddable, rendered example. Game dev companies use Sketchfab to share character designs with fans on their Facebook pages, for instance. (I’m partial to its Cultural Heritage applications, personally.) Sketchfab also presented their own PBR (that’s “physically-based rendering”, not “Pabst Blue Ribbon”!) at SIGGRAPH as well.

Live2D unveiled Euclid, their proprietary editor for turning 2D drawings (Photoshop, anyone?) into interactive 3D models with a cel-shaded appearance for games and animation. It really does look like the style of animation used in the latest Pokemon games.
Bound, a PS4 game by Plastic, used motion-capture on ballet and contemporary dancer Maria Udod to bring its playable character to life. You can read more about how they approached it (and why they chose to use motion-capture rather than animate from scratch) in this behind-the-scenes post.
Three puppets from Kubo and the Two Strings on display at a SIGGRAPH panel.
If you haven’t gone to see Kubo and the Two Strings yet, you should get on that. While the entire film is stop-motion, it uses advanced compositing techniques to achieve a rich complexity impossible in an analog production environment. The effect is otherworldly, truly the height of its craft.

This brings us to the end of the SIGGRAPH Special! If you enjoyed this, consider donating a little to keep Web Animation Weekly going or sharing this post with someone. Either way, spread the Web Animation Love!

At Disneyland: Rachel Nabors stands and points in front of a statue of Walt Disney, also pointing, with Mickey Mouse at his side.
No better way to end a series of posts about animation than with a picture of Walt Disney, taken at our mini post-SIGGRAPH adventure at Disneyland.


comments powered by Disqus

Conference Schedule

Do you love web animation and digital storytelling?

Sign up for my mailing list and get updates when I post new projects, blogs, workshops, and shennigans.

Join my mailing list
Copyright © 2008 – 2016 Rachel Nabors