Prerequisites: Lessons 1–20.
None.
Be able to
We’ve spent most of the semester learning about the canvas and SVG, two very different APIs for graphics which are available for web pages and web applications, with a little glance at video and audio elements in HTML5.
Since we’ve spent this much time largely on two technologies, we ought to be able to compare them.
But we also ought to look at what else is out there, new or on the horizon, in the world of web graphics and multimedia.
We’ve covered all the essentials of the canvas and SVG. They’re both for drawing, but they’re different. You need to spend some time thinking about how they are similar, and how they’re dissimilar. What kinds of things are easier to do in one, and what things are easier in the other? Are there things that can be done in one, but are impossible in the other? Which would you rather be using, in general, and why?
Think this through for yourself. I’m not going to do it for you.
SVG has been around since 1999. The Canvas got started by Apple in 2004, though it took some time to catch on, with Internet Explorer finally adding support in version 9 (2011). So what else is new? And what might the future hold?
The future might hold all kinds of surprises, and many things are new. But I’d like to highlight two recent developments: WebGL and WebRTC. WebGL is 3D graphics for web browsers, and WebRTC is real-time communication (e.g., video chat) for web browsers.
Remember how all of our canvas examples started out with something like this?
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');Well, there’s also a canvas 3D context, and it’s for WebGL.
I’m sure many of you have played some 3D video games. Until recently, such games have required a stand-alone application (i.e., a program outside of a web browser) or even a special computing device (such as a Sony PlayStation). Now, it’s coming to your web browser—it may be already there! But if your browser is made by Microsoft, you need a plugin.
WebGL is derived from OpenGL, a standard, platform-independent API for computer graphics programming; specifically, from OpenGL ES (for Embedded Systems).1 Computation for 3D graphics is intense and usually handled by a graphics card (GPU, Graphics Processing Unit); otherwise, it may be unbearably slow. (Web browsers on my home computer disable WebGL because of my pathetically weak graphics card. And they are right to do this, because if I override that setting and visit a WebGL site, my computer grinds to a halt.)
My first exposure to WebGL was Google’s body browser (released December, 2010).
Now, it’s also in Google Maps, if you switch on the 3D view (“MapsGL”).
Here are a few WebGL demonstrations and experiments, if you’d like to try them out. These are live web sites, not videos; you may need to configure your web browser for OpenGL (see these hints if needed).
3D graphics programming is much more complicated than 2D graphics, so I’m not going to make any attempt to teach you how in this last week—it really would take a whole semester in itself. But if you’re interested, there are a couple of links in the References that you might check out.
We know we can watch video and listen to audio in our web browsers. But how about sending audio and video to other users? Until quite recently, web browsers could play video and audio (at first with plugins, more recently with the native HTML5 <video> and <audio> elements), but could not send it.
So video and audio conferencing or calls would require a plugin (such as Adobe Flash or Microsoft Silverlight) or external application (such as Skype). Now, WebRTC (Real-Time Communication) is about to change that.
For example, IU uses the Adobe Connect Meeting service, which is based on the Flash plugin, to provide video-conferencing and desktop sharing. As I find this necessary for some of my online classes, it has seriously bothered me that Connect Meeting does not adequately support Linux. From Linux, I can view other people’s screen or camera share and listen to what they are speaking into their microphones. But try to connect my Linux desktop, or my webcam—it not only doesn’t work, it causes my computer to freeze up! :-(
So I am really looking forward to a WebRTC-based service that should support any popular browser on any operating system.
Watch and listen to Justin Uberti on WebRTC: Real-time Audio/Video and P2P in HTML5 (41:54, YouTube), presented at the Google I/O conference, 2012.
Direct3D is another API for computer graphics, but it is for Microsoft Windows, not platform-specific.↩︎