Category Archives: Miscellaneous

Reflections on a WebGL MOOC

Ed Angel
Professor Emeritus of Computer Science
University of New Mexico
http://www.cs.unm.edu/~angel
angel@cs.unm.edu

[This is a guest post from Ed on a subject near and dear to my heart, online learning. – Eric]

Recently I finished teaching a Coursera MOOC entitled Interactive Computer Graphics with WebGL. Having taken Eric’s excellent three.js course with Udacity, I was interested in doing a very different course. The experience was interesting, at times exasperating, ultimately rewarding and a lot of work. Here are some of my observations, many of which echo some of Eric’s on previous blog posts, and many that relate to the present state of MOOCs.

First, something about me and my course. I’m the coauthor, with Dave Shreiner, of the textbook Interactive Computer Graphics, which is now in its seventh edition. It has been the standard textbook for in computer graphics for students in computer science and engineering. For the seventh edition we switched from OpenGL to WebGL, which has turned out to be an excellent decision. We’ve also done both OpenGL and WebGL SIGGRAPH courses, which are now on Youtube at SIGRRAPH U. Given the explosion of interest in WebGL over the past year, I decided to do a MOOC using WebGL. For those of you unfamiliar with WebGL or interested in what I do in my academic course, there’s lots of sample code here that was also available to the students in the MOOC.

What we teach under the title of Computer Graphics can be very different depending on the audience. For those in the application world, such as the CAD community, who want to use computer graphics at a high level and not worry about writing shaders (or even knowing about shaders), three.js is a powerful tool built on top of WebGL. Users of three.js can reap many of the advantages of WebGL without writing a single line of WebGL code. On the other hand, students in Computer Science and Computer Engineering focus on “what’s beneath the hood”: shaders, algorithms, architectures. The two MOOCs, Eric’s and mine, are completely complementary and pretty much at the same level.

Course Outline

A fundamental premise of my 30+ years of teaching computer graphics is that students should be able to write complete applications as early as possible. While this philosophy is fairly common in university courses, it very uncommon in programming MOOCs. There are many reasons for this. The two key ones are the time needed to do a complete program and the problem of grading thousands of assignments. Nevertheless, I did not want to teach the course unless I could require complete programs, each one satisfying a set of requirements.

Because WebGL runs in all recent browsers, students needed only have access to a public website where they could put their assignments. Then they only had to submit the URL to let the graders run the code and see the source. I referred the students who did not have public websites to codepen.io. This mechanism worked wonderfully. The fact that the applications were on public sites never became an issue.

Here are the five assignments,  with some student postings folded in:

1. Tessellation and Twist: Twist is rotation, where the amount of rotation depends on the distance from the origin. It is can best be done in a vertex shader. The assignment starts with a single triangle centered at the origin. Twist applied to its three vertices does not result in a very interesting display. However, if we tessellate the triangle by recursive subdivision, the vertices of the smaller triangles are different distances from the origin, which creates a display in which the filled triangles have a curved outline. I give them some examples so that they need not write a lot of code to do this problem. It not only serves as test as to whether they have sufficient background for the course, they get to see what even a simple shader can do.

course1

2. Line Drawing: The minimum requirement was to create an application that rendered line segments following mouse clicks. There were many options, such as letting the user change the line thickness via a menu. The main goal was to bring in interactivity through event listeners and involved both JS and a little HTML5.

course2

3. A Mini CAD system: Create a scene by adding objects to a scene. Minimally, the application had to have two object types and the instance transform was to be determined interactively. There was code available for spheres and cubes but they were encouraged to add cylinders and/or cones. Because we had yet to cover lighting most students built applications that rendered each 3D object twice, once filled and once with lines.

course3

4. Adding Lighting: Students had to write shaders to add lighting to their CAD systems. They were encouraged to compare implementing per-vertex lighting with per-fragment lighting.

course4

5. Adding Texture Mapping: Applications had to add textures to a sphere. They were asked to use both an image and a generated checkerboard pattern as textures and to use two different methods of assigning texture coordinates.

course5

Assignment 3 proved to be more difficult than I anticipated and if I did it again I’d probably eliminate or simplify Assignment 2 and simplify Assignment 3. Students who went through the whole course loved the last couple of assignments and the freedom they had to experiment. They even created web pages to share their results. See screen shots here.

The Numbers

Initially about 14,500 signed up for the course. However, only 5,500 ever watched even the first video. I still can’t figure out why 9,000 would sign up and then never even take a look. After the first week, I had about 2,500 remaining. Fair enough, since the first week’s videos enabled them to see if the content was what the wanted and if they had the time and background to continue.

Of the remaining 2500, about 1000 went through all the videos. Many of them did at least some of the projects, or even all of them, but didn’t care about getting a certificate. In the end, 282 participants earned certificates, including, I believe, all the ones who paid for a verified certificate.

I don’t know what is the best way to evaluate these numbers, Certainly using 282 out of 14,500 makes little sense. Personally I prefer 1000 out of 2500. The 2500 represents people who really were interested and the 1000 went all the way through in one way or another.

Working with Coursera

My institution, the University of New Mexico, was one of the first public institutions to partner with Coursera. Having followed Eric’s course and his blog about doing a course with Udacity, I was curious about the differences. And there are many. Perhaps the most significant is that Coursera leaves virtually all the course development and support to the partner institution. Since UNM, like most public institutions, is under considerable financial stress, the course was pretty much a do-it-yourself (unpaid) venture. With the exception of 2-3 minute videos we recorded on campus to introduce each week’s lessons, I recorded all the videos on my iMac with Camtasia. These were later minimally edited by UNM’s Extended Learning staff. As weird as it may seem, one can actually get pretty good at giving an animated presentation talking to your computer. I had a similar experience to Eric in finding that making changes to a video is extremely difficult. Since the each video is fairly short, I learned to just rerecord a video instead of trying to cut and paste within an existing one.

The major problem I had was dealing with Coursera’s software. Some crucial parts, such as keeping the courses available 24/7 and managing the discussion forums, worked really well. However, there were many other problems that ate large amounts of time, both mine and the students’. These included lack of and bad documentation, unannounced changes to the website, rigidity of the software, and unresponsiveness to problems. It was interesting that many of the students were aware of these issues from previous courses but still were taking many MOOC courses.

MOOCs and Professional Development

If I compare my course to my (or any) regular academic CS course, it’s not even close in academic content. How can it be otherwise when there’s no book allowed, there’s a lower level entry requirement, and not enough time to assign the amount of work we would expect in an academic course?

As a professional development course, it’s more interesting. I’ve taught well over 100 professional development courses, both in person and online, to audiences ranging from the twenties to the hundreds. The majority were in a concentrated four-day format. I realized after I had finished the MOOC that the hours of video in the MOOC were very close to the amount of lecturing I would do in an intensive four-day course. But I also realized that the MOOC is a superior method for professional development. Besides the fact that it is essentially free, the material is spread over a longer period, allowing participants flexibility in when they learn and giving them time to do serious programming exercises. Looking at the analytics available from my course, it’s clear that the vast majority of the learners have figured this out and are there for professional development.

Why are State Universities and Colleges doing MOOCs?

My experience, reinforced by talking to participants and other MOOC instructors, led me to question why UNM or any state institution is involved with MOOCs. While I can understand the desire to try new educational methods and the idealism that many of us believed would enable us to provide first class technical education to the developing world, two things should have pretty obvious from the beginning. First, the business model under which we have done our MOOC courses makes no sense; there had to a lot of self-delusion to believe that verified certificates would bring in enough money to cover our expenses. Out of 14,500 “learners” who initially signed up for my course, all of 200 signed up for verified certificates, generating $10,000 in revenue, revenue that is shared between Coursera and UNM. That’s not going to pay even minimal costs.

What’s more troublesome is that MOOC courses are not academic courses. They’re not even close. So why, when public institutions are facing all kinds of financial problems to support their own students, are they putting resources into professional development courses for people outside of their own regions? Some institutions have recognized this problem. I note that many of the offerings by Coursera are now coming from self-supporting Continuing Education/Professional Development units of Universities and not from the academic units.

MOOC Computer Programming Courses

There’s a level of delusion that I’ve seen with almost all MOOC programming courses (Coursera, Udacity, Code.org, Khan, Codecademy). These courses claim to teach a programming skill in a few weeks with the learner spending only a few hours a week. What happens in these courses is that the learner never writes a complete program but rather changes a line or two of code or adds a few lines to an existing program. Easy to check and grade by computer but in the end the student cannot write a complete program using her new skill but is deluded into believing she can. After all, she has a certificate of completion; often for many such courses. This becoming a serious and more widely recognized problem in the real world, which is getting filled with “programmers” who can’t program but have been told they can based on their experience with online courses.

When I decided to do my MOOC, I was adamant that it would require participants to design complete programs from a set of specifications. In spite of the clear prerequisites for the course, a majority of the participants could not even get started on the simplest of my assignments, one that could have been done by changing four or five lines of code in an example I gave them. Most of them couldn’t even take the problem statement and figure out that this was all they had to do. On the other hand, the participants who came in with real programming experience absolutely loved the course and did some remarkable work. Through the discussion forums I was able to establish relationships with a number of these students and these interactions were as rewarding as any in my 40+ years of teaching computer courses.

How I Would Do It Again If I Were To Do It Again

There’s a lot of if’s here but it’s conceivable that I might, with adequate support this time, do it again. It would involve almost as much work the first time since I’d rerecord the videos but what I have in mind might be a step towards a more stable MOOC that could break down some of the barriers between academia and professional development. I see the MOOC as remaining at 10 weeks with much the same outline. I’d start it at the same time as an academic semester. Students who want academic credit would also register for my regular online computer graphics class. All students would use the MOOC videos for the first 10 weeks but those registered for the University course would have additional reading and variants on the MOOC programming assignments. I would also meet with these students either live or via video conferencing, thus making the course more of a flipped classroom. After the 10 week MOOC was over, I would continue working with the university students on projects and advanced topics for the rest of the 15 week semester.

In addition, if the University could figure out how to do this and what to charge, I’d open the academic course to students outside the university who could take the course as non-degree students at a reduced tuition. Such credit would be transferable to other academic programs. Exploring such a format might move us in a direction that helps state institutions with their financial issues, leads to a working business models for MOOC providers, and at the same time, fulfills many of the idealist goals that many of us have for MOOCs.

Seven Things for August 22, 2015

Last collection of links for awhile – I’m pretty much caught up. Here’s a rundown of things that are more physical:

  • Where’s Waldo in the real world; specifically, Seattle. Info. Some of the Easter Eggs are truly great.
  • Pixelated hair. I collect anything where “X is used as pixels”; link collection here (and send me more).
  • I’m impressed by Google Cardboard. A local architecture firm has been using it to give clients a much better sense of their designs. The fact that you can pre-render at very high quality I consider a large advantage over GPU-based VR. Also, it seems like many firms overbuilt, so these viewers are now dirt cheap, e.g. less than $3 with free shipping.
  • Surroundings:
    • The Ricoh Theta gives surprisingly nice instant IBLs in a relatively cheap ($300) compact camera – gallery, review.
    • Matterport looks like a pretty nice room capture device.
    • Photosynth 3 is strangely compelling at times. On one level it’s a low-frame-count video you can scrub through, but scenes often have a surreal feel as interpolations are shown.
  • Intel Thunderbolt 3 demos, showing a laptop driving an external GPU. Annoying ad will play, but then the chewy bit of the video plays. Too much info about USB & Thunderbolt here.
  • If you have lots of old business cards, two words: Menger Sponge.
  • This Is Colossal covers lots of interesting artistic and well-crafted works. Mostly real-world stuff (I liked this mirror work), and also great things such as Bees & Bombs (example below).

Seven Things for August 21, 2015

I’ve burnt through most of my SIGGRAPH tidbits. Now to start running through a few worthwhile articles, resources, and sites I’ve found the past months:

  • Colors and words article – a must-read. Teaser: “So he raised his daughter while being careful to never describe the color of the sky to her, and then one day asked her what color she saw when she looked up.”
  • IKEA has been using V-Ray for much of its catalog for years. Favorite quote: “But the real turning point for us was when, in 2009, they called us and said, ‘You have to stop using CG. I’ve got 200 product images and they’re just terrible. You guys need to practise [sic] more.’ So we looked at all the images they said weren’t good enough and the two or three they said were great, and the ones they didn’t like were photography and the good ones were all CG!”
  • Cambridge, Mass. (which I live next to) as a 3D map in your browser. Background info here. WebGL is great.
  • Slightly spooky 3D program, done in CSS (that’s right – no WebGL here). Other fun experiments by the author here.
  • Languages: I hadn’t heard of a few of these C++ tools. The Swift language, which I’ve heard nice things about, is going to be open-sourced by Apple (surprising, for Apple). Michael Gleicher mentioned liking the free book Javascript in 10 Minutes.
  • Tools: For home use only, Glary Utilities is a bunch of free utilities – two minutes to clean off various types of sludge from your PC. Everything is a simple super-fast file and folder name searcher for Windows. I’ve added these to the bottom section of the portal page.
  • Ray tracing using armor stands in Minecraft. Things just keep getting weirder.

Seven Things for August 20, 2015

Still more things, bits of info worth knowing (at least to me – now I know where I’ve written it all down):

  • glTF is an up and coming format for transmitting 3D models, tailored for WebGL and OpenGL – they like to think of it as a 3D model codec. There’s three.js and Node.js support, as well as a Collada and separate FBX converter. There’s more explanation of glTF in the presentation at the WebGL BOF. Compression progress here, discussion here. (Thanks to Patrick Cozzi for these links.)
  • I mentioned Shadertoy two days ago. I’ll mention it again! I’ve heard Iñigo Quilez’s youtube video channel has good tutorials on programming for Shadertoy, or just watch great demos (with no chance of locking up your GPU). Also, check this great Shadertoy illusion. My theory is every blog post should have a reference to Shadertoy, at least in my perfect world.
  • The code for Epic’s Unreal Engine 4 is all open-sourced now. Best story for me at SIGGRAPH was of a guy who looked like a gang member coming to an Educator’s meeting and getting the signatures of some of the UE4 programmers, as he wanted to thank them for changing his life due to their code being accessible.
  • Unity 4 is also free (including royalty free) for personal use (though not open source). Old news from March and GDC, but I realized I had only tweeted it, not blogged it.
  • 3D printing. Yeah, it’s not graphics, but it’s close enough for me. The Computational Tools for 3D Printing course had a good introduction to the major types of 3D print processes, along with a useful walk down the software pipeline. BTW, I made a little page of links to 3D printing resources for beginners with an URL I can remember, bit.ly/info3dp
  • I was surprised to learn that cross-site scripting attacks are 80% (by some measure) of all website security problems. A form of this type of attack was found and fixed back in summer 2011 for WebGL in Chrome and Firefox, with the concern that private textures from other sites could be read and copied by WebGL programs.
  • Sketchfab has been adding cool new features, such as animation and object annotation (click horizontal arrows in lower right), as well as Oculus Rift support: just put “/embed?oculus=2” at the end of any model URL.

Going for a walk
by Yann
on Sketchfab

SIGGRAPH 2015: Calendars and Unlisted Events

Get them: http://skitten.org/2015/07/siggraph-2015-google-calendars

As of this moment it’s missing our own event Sunday, but you’re all coming to that anyway, right? I also believe there are one or two parties not listed, such as the Chapters Party.

Oh, and there’s an informal WebGL meetup Saturday night (tonight!) at the bar by the pool at the Figueroa.

Time to get on the plane – see you there!

Why not?

I like to ask researchers whether they think the release of code should be encouraged, if not required, for technical papers. My argument (stolen from somewhere) is, “would you allow someone to publish an analysis of Hamlet but not allow anyone to see Hamlet itself?” The main argument for publishing the code (beyond helping the world as a whole) is that people can check your work, which I hear is a part of this science stuff in “computer science.”
       
Often they’re against it. The two reasons I hear are “my code sucks” and “we’ve patented the technique.” I can also imagine, “I don’t want those commercial fatcats stealing my code,” to which I say, “put some ridiculous license on it, then.” If the reason is, “I want to publish to enhance my resume and reputation, but I also want to keep it all secret because I’m going to make money off it,” then choose A or B, you can’t have both (or shouldn’t, in my Utopian fantasy world).

Continue reading

CFP HPG 2015

I’m being a lazy reporter here, simply passing on the press release. That said, of all the research-oriented gathering out there, this one I find the most relevant to what I do (well, GDC, too, but HPG is better for new ideas, vs. the “proven implementations” seen at GDC). This year the HPG committee is trying to include topics relating to emerging display technologies e.g. virtual and augmented reality.

High Performance Graphics is the leading international forum for performance-oriented graphics and imaging systems research, including innovative algorithms, efficient implementations, languages, parallelism, compilers, hardware and architectures for high-performance graphics. The conference brings together researchers, engineers, and architects to discuss the complex interactions of parallel hardware, novel programming models, and efficient algorithms in the design of systems for current and future graphics and visual computing applications.

High Performance Graphics is co-sponsored by Eurographics and ACM SIGGRAPH. The program features three days of paper and industry presentations, with ample time for discussions during breaks, lunches, and the conference banquet. The conference is co-located with SIGGRAPH 2015 in Los Angeles, United States, and will take place on August 7–9, 2015.

High Performance Graphics invites original and innovative performance-oriented contributions to the design of hardware architectures, programming systems, and algorithms for all areas of graphics, including rendering, virtual and augmented reality, ray tracing, physics, animation, and visual computing. It also invites contributions to the emerging area of high-performance computer vision and image processing for graphics applications. Topics include (but are not limited to):

  • Hardware and systems for high-performance graphics and visual computing
    • Graphics hardware simulation, optimization, and performance measurement
    • Shading architectures
    • Novel fixed-function hardware design
    • Hardware design for mobile, embedded, integrated, and low-power devices
    • Cloud-accelerated graphics systems
  • Hardware and software systems for emerging display technologies
    • Novel display technologies
    • Virtual and augmented reality systems
    • Low-latency rendering and high-performance processing of sensor input
    • High-resolution and high-dynamic range displays
  • Real-time and interactive ray tracing hardware or software
    • Spatial acceleration data structures
    • Ray traversal, sorting, and intersection techniques
    • Scheduling and shading for ray tracing
  • High-performance computer vision and image processing techniques
    • Algorithms for computational photography, video, and computer vision
    • Hardware architectures for image and signal processors (ISPs)
    • Performance analysis of computational photography and computer vision applications
  • Programming abstractions for graphics
    • Interactive rendering pipelines (hardware or software)
    • Programming models and APIs for graphics, vision, and image processing
    • Shading language design and implementation
    • Compilation techniques for parallel graphics architectures
  • Rendering algorithms
    • Surface representations and tessellation algorithms
    • Texturing and compression/decompression algorithms
    • Interactive rendering algorithms (hardware or software)
    • Visibility and illumination algorithms (shadows, rasterization, global illumination, …)
    • Image sampling, reconstruction, and filtering techniques
  • Parallel computing for graphics and visual computing applications
    • Physics, sound processing, and animation
    • Large data visualization
    • Novel applications of GPU computing
Important Dates
 Papers
 Friday, April 17  Deadline for paper submissions
 Monday, May 18  Reviews available (start of rebuttal period)
 Thursday, May 21  End of rebuttal period
 Monday, June 1  Notification of paper acceptance
 Thursday, June 11  Revised papers due
 Posters
 Friday, June 5  Deadline for poster submissions
 Friday, June 12  Notification of poster acceptance
 Hot3D
 Friday, June 5  Deadline for Hot3D proposals
 Friday, June 12  Notification of acceptance
 Conference
 Friday—Sunday,
August 7—9
 Conference

 

Full CFP here.

Chartreuse and Puce

Yes, I should weight in about Apple’s Metal announcement, or Google’s Tango smartphone, or talk about Oculus Rift, or Word Lens (which really is cool and free for a short time, so get it now), or something. But, others have said enough on them, so let’s talk about two colors, chartreuse and puce.

I’ve blogged about chartreuse before (and answers here). The gist: it’s a color that a lot of people think they know, but don’t (including myself, once upon a time). Get it fixed in your mind before reading further. I decided to actually make it a tiny part of the Udacity MOOC, asking students about it for fun. 10,450 students responded, and here are the results:

  • 41% said yellow-green
  • 22% said red-orange
  • 19% didn’t know
  • 18% said deep purple

Please use this knowledge for good, or evil. So what about puce? Well, last night I was trying to think about other colors I wasn’t sure about. I know what drab is – that’s the color of commerce, accountancy, and business (hey, I don’t make this stuff up). One I though of was puce (aka, peuce, puse, peuse). I again got it wrong. Also, it turns out this has to be about the most disgusting color name ever – you’ve been warned. It sounds nicer in French, though.

This is a mostly content-free post (you really should see Word Lens, though – it’s like magic), but I should have an interesting color-related announcement next week, if all goes well.

3D Printed Sphereflake

Well, it’s not printed in silver or steel or somesuch, but it’s still fun to see. This is from Alexander Enzmann, who did a lot of work on the SPD model software, outputting a wide variety of formats. Since the spheres in the sphereflake normally touch each other at only one point, he modified the program a bit to push the spheres only 80% of the way along their axis translation, so giving more overlap between each pair. He printed this on his Solidoodle printersphereflake

HPG CFP 2014

Really, you just need this link. I think HPG is the most useful conference I keep tabs on, from a “papers that can help me out” standpoint. SIGGRAPH’s better for a “see what’s happening in the field as a whole” view, and often there’s useful stuff in the courses and sketches, but in the area of papers HPG far outstrips SIGGRAPH in the number of papers directly useful to me. I can’t justify going as often as I like (especially when it’s in Europe), but HPG’s a great conference.

Anyway, here’s the CFP boilerplate, to save your precious fingers from having to click on that link (it’s actually amazing to me how much links are not clicked on; in my own life I tend to consider clicking on a link something of a commitment).

High-Performance Graphics 2014 is the leading international forum for performance-oriented graphics and imaging systems research including innovative algorithms, efficient implementations, languages, parallelism, compilers, hardware and architectures for high-performance graphics. High-Performance Graphics was founded in 2009, synthesizing multiple conferences to bring together researchers, engineers, and architects to discuss the complex interactions of parallel hardware, novel programming models, and efficient algorithms in the design of systems for current and future graphics and visual computing applications.

The conference is co-sponsored by Eurographics and ACM SIGGRAPH. The 2014 program features three days of paper and industry presentations, with ample time for discussions during breaks, lunches, and the conference banquet. It will be co-located with EGSR 2014 in Lyon, France, and will take place on June 23—25, 2014.

Topics include:

  • Hardware and systems for high-performance graphics and visual computing
    • Graphics hardware simulation, optimization, and performance measurement
    • Shading architectures
    • Novel fixed-function hardware design
    • Hardware for accelerating computer
    • Hardware design for mobile, embedded, integrated, and low-power devices
    • Cloud-accelerated graphics systems
    • Novel display technologies
    • Virtual and augmented reality systems
  • High-performance computer vision and image processing techniques
    • High-performance algorithms for computational photography, video, and computer vision
    • Hardware architectures for image and signal processors (ISPs)
    • Performance analysis of computational photography and computer vision applications on parallel architectures, GPUs, and specialized hardware
    • Programming abstractions for graphics
      • Interactive rendering pipelines (hardware or software)
      • Programming models and APIs for graphics, vision, and image processing
      • Shading language design and implementation
      • Compilation techniques for parallel graphics architectures
      • Rendering algorithms
        • Spatial acceleration data structures
        • Surface representations and tessellation algorithms
        • Texturing and compression/decompression algorithms
        • Interactive rendering algorithms (hardware or software)
        • Visibility algorithms (ray tracing, rasterization, transparency, anti-aliasing, …)
        • Illumination algorithms (shadows, global illumination, …)
        • Image sampling strategies and filtering techniques
        • Scalable algorithms for parallel rendering and large data visualization
        • Parallel computing for graphics and visual computing applications
          • Physics and animation
          • Novel applications of GPU computing

Important Dates:

  • Paper submission deadline: April 4, 2014
  • Notification of acceptance: May 12, 2014
  • Camera-ready papers due: May 22, 2014
  • Conference: June 23—25, 2014

More information: www.HighPerformanceGraphics.org