{"id":3303,"date":"2013-01-01T09:02:54","date_gmt":"2013-01-01T15:02:54","guid":{"rendered":"http:\/\/www.realtimerendering.com\/blog\/?p=3303"},"modified":"2014-01-26T19:17:05","modified_gmt":"2014-01-27T01:17:05","slug":"new-years-teapot","status":"publish","type":"post","link":"https:\/\/www.realtimerendering.com\/blog\/new-years-teapot\/","title":{"rendered":"New Year’s Teapot"},"content":{"rendered":"

I’ve been beavering away on my part of the Interactive Rendering course<\/a> for Udacity and Autodesk. It’s a free MOOC<\/a> – 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<\/a> plus three.js<\/a> 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.<\/p>\n

So, here’s my New Year’s thingy for you to try out:<\/p>\n

The Teapot<\/a><\/strong> – nicer controller, not currently working on mobile<\/p>\n

The Teapot<\/a>\u00a0–\u00a0<\/strong>semi-mobile friendly, annoying trackball<\/p>\n

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

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<\/a> your hardware configuration. The heresies I commit in this program:<\/p>\n