Tag Archives: teapot

Seven Things for April 3, 2016

The things:

490 links for 70 days

I like to give 7 links for a day, but I’ve been busy the past half year or so with the interactive 3D graphics MOOC. In two days the second half of the course will roll out, and I’ll blab about that later (in, like, two days). In the meantime, here are 490 links for the half year I’ve been missing. Basically, it’s the Instructor Notes for a bunch of the lessons in the course, additional material and links relevant to the subjects. I admit it, there are a lot of weaksauce links in there, basics for beginners and pointers to Wikipedia this and that. But there are also some great things in there.

Hey, let’s turn this into 7 great links (use Chrome or Firefox to view them, or enable WebGL in Safari):

I know there are a bunch more links in the Instructor Notes that are worthwhile (things like the GLSL shader validator plug-in for Sublime Text 2), but these particular ones stuck with me.

I did get to visit the shrine one morning while in Mountain View recording:

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.

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!

Peripherally-Related Links

Here are a bunch of links to things that are graphical, but definitely not about hard-core interactive rendering. Basically, it’s stuff I found of interest that has a visual and technical component and that I’m compelled by the laws of the internet to pass on. It’s a pile of candy, so I recommend reading just a bit of this post each day. Which of course you won’t do, but at least your teeth won’t rot and you won’t gain 3 pounds.