EUROGRAPHICS 2013/ E. Cerezo, J.-J. Bourdin, S. Cunningham Education Paper

Introductory graphics for very diverse audiences

edu2-1002

Abstract

This paper presents our first experience teaching WebGL in a master’s degree for a class of students with verydifferent backgrounds. The main challenge was to prepare a course that would be engaging for students withcomputer graphics experience, and yet interesting and non-frustrating for those students unfamiliar with OpenGL.In this paper we explain how we prepared this course, and the project assignment to achieve our goal. The resultsachieved by the students show that the course succeeded in keeping different kinds of students engaged and excitedwith the implementation of their final project.

Categories and Subject Descriptors (according to ACM CCS): I.3.6 [Computer Graphics]: Methodology andtechniques—

1. Introduction

Interactive Graphics System is a mandatory course in theMasters in Computer Science. One of the goals of this courseis that the students learn how to create multimedia applica-tions including 3D graphics and interaction. The main chal-lenge of the course was to make it interesting for studentswith and without a background in computer graphics. There-fore we needed to prepare a course that could provide newknowledge to those students familiar with the OpenGL fixedpipeline and GPU programing, as well as engaging studentswho had no previous experience in 3D graphics. We decid-ed to teach WebGL, since it is not included in any course ofthe undergraduate degree, and thus could provide interestingnew knowledge for those students that had taken previouscourses on computer graphics.

WebGL (Web Graphics Library) [khr] is a cross-platformweb standard for a 3D graphics API based on OpenGL ES2.0 [MGS08]. It is a JavaScript shader-based API usingGLSL [GLS] that is executed on a computer’s Graphics Pro-cessing Unit (GPU), and can be included in a web page withthe HTML5 Canvas element, without the need of plug-ins.

WebGL offers a very exciting way of getting started with3D graphics, including easy integration in web pages. Us-ing HTML5 we can get the students to implement a projectwhere they incorporate the basic concepts of this course,such as: 3D graphics, multimedia and interaction.

2. Outline

This paper details the contents of half a semester (7 weeksof classes), which is the part of the course dealing with in-teractive 3D graphics and multimedia. The course consistsof theory classes, as well as lab sessions.

The course starts with an Introduction to ComputerGraphics that includes the fundamentals of OpenGL, tech-nical details about the pipeline, the concept of camerawith modelview and projection transformations and 3D datastructures to render different models. We continue with anintroduction to the Programmable Pipeline, the GLSL lan-guage to program Vertex and Fragment shaders (VS and FS),and how to initialize and compile shaders. Next we explainhow 3D models are sent to the pipeline to be rendered, whichin WebGL is done using Vertex Buffer Objects (VBO). We in-troduce the VBOs and compare them to the immediate ren-dering mode (OpenGL 2.0 and Vertex Arrays).

We also explain in depth Transformation Matrices forcamera and 3D models. We show how to set the camera po-sition, orientation and projection, as well as all the matrixtransformations needed to build a scene by placing objectsgiven in model coordinates. In WebGL there are no built-inuniform variables containing these matrices as in OpenGLcompatibility mode, so we offer the students some existinglibraries that they can use to facilitate their work with ma-trices and camera [Thr, Sce]. In order to render more inter-esting models, we also study textures and concepts like col-or mapping, bump mapping, opacity mapping and displace-ment mapping.

c© The Eurographics Association 2013.

edu2-1002 / Introductory graphics for very diverse audiences

Figure 1: Examples of WebGL project assignments. Two projects to showsimple 3D objects (left and right), with HTML5 audioand Form elements to interactively modify camera, light, add new objects, and apply transformations, with drag and drop usedto change backgrounds or add objects. In the center, a game application where the user has to drive a rocket without collidingwith simple 3D objects. This includes drag and drop to change the background and different shaders used to render crashes.

In parallel to these theory classes, we carry out lab ses-sions where students learn about HTML5, JavaScript andCSS3. Each of the introductory classes consisted of one hourof explanation by the Professors, followed by one hour ofwork in the laboratories with the Professor present to helpthem out. During this hour the students had to solve a list ofexercises. After these three sessions, they had another oneon WebGL. The focus of this session was to get the studentsup to date with the basic OpenGL concepts, provide themwith JavaScript libraries to perform the most typical opera-tions (such as: camera and modelview transformations), andintroduce shaders programming. During these sessions thestudents were given a list of exercises to practice implement-ing simple VS and FS, and learn which variables are neededto pass information between the VF and FS, and betweenJavaScript, and the shaders.

3. Project assignment

The project consisted of developing a program for displaying3D models, including modelview and projection transfor-mations, interaction through mouse, keyboard and HTML5form elements, simple VS and FS implementation, and mul-timedia (audio and video). As additional concepts, theycould include more complex shaders (such us: phong shad-ing), or load complex 3D objects using external libraries[OBJ]. The assignment description was kept vague on pur-pose to give the student the freedom to be creative. We findthat students get more interested in their projects if there isnot an strict sequence of rules to follow.

Starting basically from the simple examples practiced dur-ing the lab sessions, the students could incrementally builda final project without getting stuck in front of an apparent-ly very complex project. We wanted to make sure that eventhose students without computer graphics background couldeasily get started with their projects, as long as they had at-tended the lab sessions.

4. Conclusions

We have presented a computer graphics course using We-bGL. The main challenge that the Professors faced in thiscourse, was the big differences in the level of computergraphics knowledge of the class. Therefore, we needed toorient the project assignments in a way that students thathad previously taken advanced computer graphics classes,could still find the project challenging, and at the same timemake sure that students with a lack of computer graphicsbackground could have access to enough information to suc-cessfully complete their assignment without getting frustrat-ed and giving up.

From the results achieved by the students, we can con-clude that this course succeeded to get students of all differ-ent backgrounds excited with their final projects. Even stu-dents that had never worked with OpenGL, managed to learnWebGL relatively fast by following our tutorials, other on-line tutorials [Lea], and completing the basic exercises givenin class. We can see in figure 1 the result of several student’sprojects. It is important to mention that we did not observe amajor correlation between their previous computer graphicsexperience and their final grade. This was achieved by givinghigher importance to WebGL concepts which were new forall students rather than implementation of fancy shaders forwhich experienced students would have had an advantage.

References[GLS] http://www.opengl.org/documentation/glsl. 1

[khr] http://www.khronos.org/webgl. 1

[Lea] http://learningwebgl.com. 2

[MGS08] MUNSHI A., GINSBURG D., SHREINER D.: OpenGLES 2.0 Programming Guide, 1 ed. Addison-Wesley EducationalPublishers Inc., July 2008. 1

[OBJ] https://github.com/kod3000/webGL-Examples/blob/master/js/J3DI.js. 2

[Sce] http://scenejs.org. 1

[Thr] http://github.com/mrdoob/three.js. 1

c© The Eurographics Association 2013.