Category Archives: Resources

MOOC Expelliarmus

I spent a few minutes last week skimming through my unread stack of “Communications of the ACM” (CACM) – they were piling up. I enjoy the lighter articles for the most part, especially those on copyright and patent issues. The more serious articles would probably do me good to read, but no time, no time.

One bit that caught my eye: “Will MOOCs Destroy Academia?” A MOOC is a massive open online course, e.g., I’m working on one (I think there were about 15,000 sign-ups for it as of last month). I’d summarize the article as: “college courses where the professor lectures to all are ineffectual and costs are soaring [his words, not mine], but MOOCs are popular only because they’re free, and a Cambridge don says universities are critical to civilization”. His concluding sentence was particularly surprising to me: “If I had my wish, I would wave a wand and make MOOCs disappear, but I am afraid that we have let the genie [out] of the bottle.” The word “out” is in the on-line HTML and PDF versions, but not in the original print magazine. I guess the internet is good for something, though clearly not education, by the author’s estimation.

The author, by the way, is the Editor-in-Chief of CACM; I sometimes disagree with his views, but usually appreciate that some thought has been put into his opinion pieces. This time the research appears to have been the book “What Are Universities For?” and the Bible. I was cheered to see some reasonable replies.

For a CACM article with much more chew and nuance, see “Reflections on Stanford’s MOOCs“. This article is worth your time if you’re interested in a survey of various combinations of education and the internet for teaching computer science.

Me, I’m happy to see it’s possible to teach (in any form) using three.js on top of WebGL – click a link and you’re taken to a demo, or code you can edit and run in the browser. Try it now, if you want: for three.js demos, go to the three.js page and click on any appealing thumbnail (caveats being “use Chrome” or “enable on Safari” – see this worthwhile page if you have problems). For code in the browser, try here or any of these. For WebGL demos, some of which are wonderful, see webgl.com. And there are great things out there beyond these, I’ll cover more here once I have the time. A few days back Steve Worley pointed out this amazing thing, a classic tile terrain renderer, all in a web page.

This all couldn’t have been done at all two years ago – WebGL was officially released on March 3, 2011. This is great news for anyone teaching graphics, either online or in the classroom (or both).

Becoming a computer graphics programmer is something I consider as much an apprenticeship as a set of college courses. That’s how I felt as I began to be one at Cornell back in 1983-85. The Masters program in the Program of Computer Graphics was officially one 18 credit course each semester (and summer), along with “take a minor”. It was essentially “live and breathe graphics” for two-plus years. Teenagers in the demoscene have similar experiences, I expect.

I ran across a great quote from Confucius, which I’ll probably use at the end of the MOOC, “Every truth has four corners: as a teacher I give you one corner, and it is for you to find the other three.” This fits my view of computer graphics: you can be given a foundation in the subject, but it’s mostly up to you to learn by doing and pursuing knowledge (Confucius probably meant something entirely different). The fact that you can now do this on your own with a PC and enough self-motivation and online support I find wonderful (take the creator of three.js, for example).

Going to a college or university and learning from a good teacher and working with other students is fantastic stuff; I consider myself fortunate to have been able to do so. There are great professors and programs out there. Even humble basic courses (such as mine) are a boon, as they can expose and motivate some students to get involved and find their passion. However, the field of computer graphics (unlike, say, genetics, where you can’t currently buy a DNA sequencer for $25, but can buy a GPU for that) is quite accessible even if you can’t commit to being a full-time student.

So, back to doing my little bit to help destroy universities because, you know, that’s just the kind of guy I am. Honestly, I think MOOCs have their place, and my own vision of the future is one where professors can grab chapters, videos, githubbed code and so on to supplement their courses, and they can make their own creations available to others. They can say “take this MOOC over the summer and come back in the fall ready to go,” so that everyone has a baseline understanding.

Committing nowadays to a single textbook, for example, seems archaic. Few people have the time to write a whole book, so there are only so many to choose from and each has chapters a teacher will not use, either for time or for dislike of the author’s approach. However, plenty of people can write a short article explaining mipmaps or scaling matrices or other topics, and a few of them will be superb. Sites with educational content such as RedBlobGamesAlgoViz.org, and Online Python Tutor are signs of how things can be (BTW, I learned of those URLs from the useful CACM article). Mixing and matching among these resources allows engaging and powerful new tools for teachers and students.

Behold your doom, universities

Launched!

As of today, March 11th 2013, the free online interactive 3D graphics course I’ve been working on has begun, at last. I’ve been laboring in earnest and more than full time on this class since October (thank you, Autodesk), and I’m just the most visible person on the project. There’s a raft of others at Udacity making things work and look great: web programmers, video editors, and particularly Gundega Dekena, the assistant instructor on the course. Many other people inside and out of Autodesk have been contributing time for interviews, for video clips, and  for reviewing material (special shout-out to Patrick Cozzi and Mauricio Vives for reading over everything). It’s way more total work creating a video course than writing a book, maybe equivalent to the effort of making a movie vs. writing a novel.

Some of the slick things Udacity has done is integrate video lessons, WebGL/three.js demos, and exercises and questions all in a continuous series. I’d point at an URL, but you do have to sign up for the course to see its structure. Also, wait a day or so: by tomorrow a bunch more links to resources should be in place, at least for Unit 1. Soon the course code will be githubbed, the videos all downloadable, etc. (update: this is now done.)

By the way, this is only the first half of the course. I’m in the throes of writing the second half, which will come out May 1st. I’m learning the video creation process as I go, so I think the quality is increasing as the units progress. Gesturing at the screen and reading what I wrote at the same time gives me a new-found respect for weathermen.

Even if you already know about 3D graphics, you might want to check out the history of the teapot video, which Martin Newell kindly fact-checked. And if you don’t know who Martin Newell is, or only know that he created the teapot model, then you definitely should watch the video. Oh, and then try the WebGL/three.js demo here.

What’s nice is that all the course videos are hosted on YouTube, so it’s easy for anyone to link to any of the lessons (well, except where YouTube is blocked; Udacity has  alternate delivery methods). I hope that these videos and demos will be handy for other people explaining 3D graphics.

Introduction to Parallel Programming course available

I’ve been more than a bit busy working on the (newly renamed) Interactive 3D Graphics course for Udacity, so have been tardy pointing out that this cool course is out now: Introduction to Parallel Programming. Taught by John Owens, David Luebke, and others, it uses CUDA as its basis for teaching. I look forward to taking it myself! It’s a free online course with some serious content, graded exercises, and much else to recommend it – a lot of time & effort (& money) was put into making it, so I expect it will be worth my while.

Oh, and I should also mention another new course, HTML5 Game Development, from experts at Google. It’s more 2D graphics related, but again looks like quite a serious course with a lot of chew.

Wow, that worked?

The demo I made for the Interactive Rendering course actually runs on my phone (Samsung Galaxy S3). My course assistant found it runs on her HTC phone, too. Good luck hitting the up-arrow on my phone, like the documentation on the screen wants me to do… (I should fix that.) It runs only on Firefox, from what I can tell.

Update: works in Chrome Beta for Android.

Anyway, I’m impressed that my phone can do this at all. It does take a good long while to download and run, but still. 44 frames per second – not bad! Go three.js and WebGL. Oh, and here’s a little video.

click the picture below to go directly to the demo.

New Year’s Teapot

I’ve been beavering away on my part of the Interactive Rendering course for Udacity and Autodesk. It’s a free MOOC – massive open online course – and I’ll talk more about what I learned from doing it when the course nears completion. For now, the main takeaway I have is “WebGL plus three.js is a pretty good combination for teaching graphics on the web.” The fact that WebGL is built into most browsers (sad slow head-shake to Microsoft Internet Explorer at this point) means you can point a student to an URL and they can immediately see and play with an interactive demo. Three.js is a scene graph library which simplifies for the student the mass of initialization and whatnot that WebGL requires, while also not hiding a lot of functionality from the programmer (like some scene graphs do). Bonus bit is that the Chrome browser has a JavaScript debugger built in (just hit F12 or ctrl-shift-I to toggle it on), so students can always look at the underlying code.

So, here’s my New Year’s thingy for you to try out:

The Teapot – nicer controller, not currently working on mobile

The Teapot – semi-mobile friendly, annoying trackball

[Mac/Safari users: follow these simple instructions to enable WebGL on your machine. Other users: if stuck, try this site.]

Nothing deep, as it’s meant for teaching about Gouraud vs. Phong shading: the mouse changes the view (left: trackball, right: pan, middle: zoom), there are a few keyboard controls to switch from vertex to pixel shading and change the tessellation, a GUI for messing with the model and scene, and a little FPS counter in the corner. If the mouse or GUI doesn’t work the first time, hit refresh (and if anyone knows a fix for this glitch, speak!). If you see the FPS counter consistently below 60 FPS for your machine, please let me know your hardware configuration. The heresies I commit in this program:

  • You can add a bottom to the teapot (SJ Baker’s excellent page considers this a major sin).
  • You can expand the lid 7.7% horizontally to give a solid seal between the teapot and the lid (this gap looks goofy to unbelievers).
  • You can scale the model up by 30% so it actually looks more like the real teapot (read the end of this section for one explanation of why the model was changed – short version: Blinn hack to adjust for non-square pixels).
Comments appreciated!

Graphics Codex version 1.7 Released

[This is a guest post from Morgan McGuire. His Graphics Codex is a pretty great thing for anyone who wants just about all graphics formulae and algorithms at their fingertips. It’s not a perfect venue yet, but I think this is an extremely interesting alternative to books, since the app can be constantly updated and improved. With links to working code for many of the algorithms, my first question, “how do I copy and paste?”, is covered. – Eric]

The Graphics Codex 1.7 costs $9.99 on the App Store. You can install it on multiple iOS devices (I use both an iPad and an iPhone). You also receive free (approximately-) monthly updates of new content and features. It supports all iPads, iPhones, and iPod touches with iOS 5 or later [my experience is that you need iOS 6 – there’s a refresh problem with anything older; evidently Apple has changed its scrolling support], although I recommend at least an iPad 2, iPhone 3, or iPod 4.

The Graphics Codex contains about 200 entries on essential computer graphics equations, algorithms, data, and figures. These span quite a range. For example, they include: the formal definition of the BSDF, source code for a shadow map pixel shader, LaTeX commands for image formatting, and figures commonly used in teaching. For me, the historical figures are particularly fun. The staff at the Chapin rare books library helped me to track down first editions of books including Newton’s Opticks, Durer’s perspective manuscripts, and even Lambert’s work. I then scanned these so that you can get Lambert’s law from his original derivation–a kind of vicarious graphics tourism. When lecturing, I connect my iPad to the classroom projector to display these; the students use their iPhones and iPads to pull up equations and details of what I’m writing on the board.

Every month I add new entries based on what I use in my own graphics work and requests that I receive by e-mail. I read all reviews posted on iTunes as well and respond to them with changes. I currently have a queue of 44 new entries to be added. For each one, I cite a primary source and actually implement the algorithm to ensure correctness. The citations include links to canonical (e.g., ACM Digital Library) and free (e.g., author version) PDFs in most cases, so you can quickly jump directly to the source to learn more. Since many functions are also supported under various APIs, I link to DirectX, OpenGL, Mitsuba, etc., documentation as well.

In addition to the reference material, version 1.7 includes “Lecture Notes on Rendering”: twelve long-form chapters suitable for use in an introductory (ray tracing) computer graphics course. This semester I taught graphics at Williams College using this as the primary reading material. I supplemented it with a few chapters from Fundamentals of Computer Graphics 3rd edition, Computer Graphics: Principles & Practice 3rd edition [to be released May 6, 2013 – Morgan is a coauthor], and two research papers: Kajiya’86 and Jensen ’96. The next three chapters I will add in future updates are deep explanations of Photon Mapping, Importance Sampling, and Color Theory. All of these can be used with any API, but are explicitly supported by the open source G3D Innovation Engine graphics library. G3D now includes a complete photon mapping ray tracer that matches the notation and structure of the renderers described in the lecture notes.

On the technical side, I completely rewrote the layout and scrolling engine for this release. The new GPU-accelerated version allows scrolling before layout completes, making even the longest chapters respond nearly instantly. The underlying code uses LaTeX for math typesetting and that runs on a second thread, so if you scroll really fast you’ll see the equations inserted as they are completed. I use dynamic layout instead of static (e.g., PDF) so that content can respond to changing device orientation and re-layout on font change rather than forcing the reader to scroll horizontally. This version also includes support for iPhone 5, iPod 5, and iPad mini resolutions and processors. I recommend using the latest iOS version 6.0.1 because that has the best GPU drivers, but the app supports everything back to iOS 5.1.

I can’t stress enough how liberating and rewarding it has been as an author to release material as an app instead of a book. There are no delays because I release content incrementally instead of in discrete editions, and the quality remains uncompromised by artificial publishing and marketing deadlines–I only release material when it is polished. Direct feedback from readers allows me to support them with appropriate content, and there are zero known errors; as soon as errata is collected, I simply patch the content and push it out to everyone. Selling for 10-20% of the cost of a textbook allows me to reach the hobbyists, indie developers, and students who will be tomorrow’s great developers and researchers. The down side, of course, is that I rely on “word of mouth” (e.g., blogs and Twitter) to promote the app, whereas traditional publications have marketing budgets and campaigns. Now that the app has a critical mass of content, I’m starting to promote it more actively. I look forward to readers letting me know what new features and entries to add in future months.

[p.s. here are links for the Graphics Codex homepage, and Morgan’s twitter feed (actually, he has two) and blog.]

Seven Things for October 28, 2012

Books: The Good, The Bad, and Some Third Category

Due to a long plane flight, this week I started reading up on WebGL in earnest, going beyond the various tutorials on the web. The two books recommended to me that I’ve started on (and skimmed through in their entirety – I need to sit down with each in front of a computer):

WebGL: Up and Running, by Tony Parisi, O’Reilly Press, August 2012. More info about the book here, including a sample. I recall Tony from way back in the days of VRML, he had one of the first viewers for that file format, so he’s been working in this area of 3D graphics for the web for a long time. This looks to be a good book if your goal is indeed to get something on the screen fast. It’s readable, and I appreciate his use of URLs to WebGL demos and resources and (properly credited) Wikimedia images. The code samples for the book are here on github.

It uses the popular three.js library to insulate you from the OpenGL ES roots of WebGL and hide its raw API nature. The author of three.js, Mr.doob (I don’t make these names up), notes that his work is “a lightweight 3D library with a very low level of complexity — in other words, for dummies”. Which is a fine thing, and I think I’ll be using it myself to teach introductory computer graphics. However, if you want to gaze at the occult pulsing mutation spawned of JavaScript + OpenGL ES + DOM + JSON + HTML 5, I mean, unleash the full power of WebGL itself, you’ll want to read the next book instead.

WebGL Beginner’s Guide, by Diego Cantor and Brandon Jones, Packt Publishing, June 2012 (code here). This is a pretty impressive book overall. The authors deal with WebGL directly, adding only the glMatrix library on github to make matrix manipulation easier (this is about as minimal as you can get). This book walks through much of what WebGL does (essentially, the same as OpenGL, of course), giving lots of code examples and worthwhile illustrations. Some example programs are quite nice, with useful user interfaces allowing you to twiddle values and see the effect. The book deals with more advanced topics towards the end, such as how to render offscreen and sample the results (their example is for performing picking). There are a few minor problems with layout on my iPad (a few illustrations don’t fit and there’s an awkward scrolling interface that doesn’t quite work), and some occasional lapses in grammar, but overall the book is fine. Occasionally the authors will get distracted by side topics, like a full derivation of why you use the inverse transpose of the matrix for transforming normals, or explaining a shader that does simple ray tracing. In general, however, the book works through the key areas of the WebGL API and warns you of potential problems along the way. WebGL itself exposes you directly to vertex and fragment shaders, so if you are planning to do some serious work in this area, this book is perhaps a better choice that Parisi’s (that said, three.js itself gives you easy access to shaders).

Personally, these two WebGL books were cheap enough on Kindle that I bought them both. The Beginner’s Guide in particular is a much better deal on Kindle – a third the physical book’s price. They’re actually better on Kindle, in that they’re in color; the physical books are printed with grayscale images. There are other books on WebGL, but these were the two recommended to me and they are both reasonable choices, depending on your goals. I would not recommend either if your primary goal is learning the fundamentals of computer graphics (though there’s a bit of that type of material in each). For learning WebGL itself and the basics of what it offers, both books are fine, with the “WebGL Beginner’s Guide” being aimed at the more “to the metal” programmer.

JavaScript: The Good Parts, by Douglas Crockford, O’Reilly Press, May 2008. If you use WebGL, you’ll have to know at least a bit about JavaScript. Patrick Cozzi mentioned this as a reasonable guide, along with other writings by the author. I’ve only started it, but it’s pretty amusing. The book’s approach is to indeed teach only the good parts about the language and not let you know how to use the bad parts. The author recommends only one of the dozens of books on JavaScript, JavaScript: The Definitive Guide. He feels the rest are, to quote, “quite awful.”

Update: I finished this book and thought it got better as it went along. It starts out a bit language-wonkish, too much about grammar. Skip that chapter. The most useful parts were the appendices, where he explains the various parts of JavaScript clearly and succinctly, calls out the dangerous and evil parts of the language, and explains how to steer clear of them. The author came up with JSLint, which checks your code for badness, but to be honest it’s way too a strict schoolmarm for me, hitting me on the knuckles whenever I put a left brace “{” on the wrong line. I recommend JSHint instead.

Enough on WebGL and JavaScript, my current interests. I’ll mention just two more books that I’ve only just glanced at and so can jump to conclusions.

Real-Time Graphics Rendering Engine (Advanced Topics in Science and Technology in China), by Hujun Bao and Wei Hua, Springer Publishing. Shame on you, Springer, for shame. A 300 page book for $169 is bad enough, but this one has a slap-dash translation that could probably have been done better by Google Translate. I’m judging only from the “Look Inside” text I can access on the Amazon listing, but I see things like a section labelled “Rending Modle” on page 5. This might be a fine book in its native Chinese, the bits of material I tried to read seemed sound enough, but the translation is, well, judge for yourself. Here’s the end of chapter summary, a section I picked at random:

“Real-time rendering is always formed as a pipeline composed of consequential data processing and graphics calculations to generate final rasterized images. In order to achieve amazing rendering effects as well as real-time performance, GPU techniques, especially shader techniques, are introduced to utilize programmable pipelines and the parallel computing structure. Virtual geometric 3D models are transformed to be located in a virtual scene by geometrical transformation matrices. Material and/or other visual properties are then attached to those geometrical models to compute visually pleasant rendering results. As the performance of real-time rendering applications is highly emphasized, tailored shading techniques and BRDF models are employed to achieve real-time rendering results with balanced visual effects.”

I feel terrible for these authors whose work has been so shabbily thrown between two covers.

However, there is certainly a worse book out there, and I have to give the full-sized cover from its Amazon listing, since I expect it to disappear any day now and I want to keep it as a memento.


Suck it, bizzatches, I got me my own book on Amazon. Yes, the title is my name, it’s ostensibly a biography; I’m not the author. I ran across it yesterday morning, and it almost made me laugh. Almost, because I hate these “books”. It’s clearly by the same people who came up with all those other automated offerings, VDM Publishing.

I’ve posted about this so-called publisher before, here and here. VDM now has a new imprint, “Cel Publishing” (one of seventy-nine!), I expect because the Alphascript and Betascript Publisher books are fast disappearing from Amazon’s catalog as the complaints and returns roll in. The short version is that this firm has a program that grabs a random Wikipedia page and follow links from it. Once there’s enough material for a book-sized book, it spits out the contents. Some human – in this case allegedly one “Iustinus Tim Avery” (anagram server’s first hit is “Autism University”) – slaps a cover on it and it’s put in the catalog, to be published on demand.

The most creative part of the process used to be the cover choice. In the past they were sometimes pretty amusing, but it looks like Cel Publishing has removed that fun part of the job for the “editor” and instead just uses random abstract patterns. I personally think of myself as more of a splash of chartreuse paint, but so be it. Also, the book is clearly underpriced at $38 for 60 pages. What did make me laugh is that there’s now a review of the book (thanks, Matt!).