EUROGRAPHICS 2013/ E. Cerezo, J.-J. Bourdin, S. Cunningham Education Paper Introductory graphics for very diverse audiences M. Fairén and N. Pelechano ViRVIG–Moving Group. Universitat Politècnica de Catalunya (UPC), Spain Abstract This paper presents our first experience teaching WebGL in a master’s degree for a class of students with very different backgrounds. The main challenge was to prepare a course that would be engaging for students with computer 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 results achieved by the students show that the course succeeded in keeping different kinds of students engaged and excited with the implementation of their final project. Categories and Subject Descriptors (according to ACM CCS): I.3.6 [Computer Graphics]: Methodology and techniques— 1. Introduction Interactive Graphics System is a mandatory course in the Masters in Computer Science. One of the goals of this course is that the students learn how to create multimedia applica- tions including 3D graphics and interaction. The main cha- llenge of the course was to make it interesting for students with and without a background in computer graphics. The- refore we needed to prepare a course that could provide new knowledge to those students familiar with the OpenGL fixed pipeline and GPU programing, as well as engaging students who had no previous experience in 3D graphics. We decided to teach WebGL, since it is not included in any course of the undergraduate degree, and thus could provide interesting new knowledge for those students that had taken previous courses on computer graphics. WebGL (Web Graphics Library) [khr] is a cross-platform web standard for a 3D graphics API based on OpenGL ES 2.0 [MGS08]. It is a JavaScript shader-based API using GLSL [GLS] that is executed on a computer’s Graphics Pro- cessing Unit (GPU), and can be included in a web page with the HTML5 Canvas element, without the need of plug-ins. WebGL offers a very exciting way of getting started with 3D graphics, including easy integration in web pages. Using HTML5 we can get the students to implement a project whe- re 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 weeks of classes), which is the part of the course dealing with in- teractive 3D graphics and multimedia. The course consists of theory classes, as well as lab sessions. The course starts with an Introduction to Computer Grap- hics that includes the fundamentals of OpenGL, technical details about the pipeline, the concept of camera with model- view and projection transformations and 3D data structures to render different models. We continue with an introduction to the Programmable Pipeline, the GLSL language to pro- gram Vertex and Fragment shaders (VS and FS), and how to initialize and compile shaders. Next we explain how 3D mo- dels are sent to the pipeline to be rendered, which in WebGL is done using Vertex Buffer Objects (VBO). We introduce the VBOs and compare them to the immediate rendering mode (OpenGL 2.0 and Vertex Arrays). We also explain in depth Transformation Matrices for ca- mera and 3D models. We show how to set the camera po- sition, orientation and projection, as well as all the matrix transformations needed to build a scene by placing objects given in model coordinates. In WebGL there are no built-in uniform variables containing these matrices as in OpenGL compatibility mode, so we offer the students some existing libraries that they can use to facilitate their work with ma- trices and camera [Thr, Sce]. In order to render more in- teresting models, we also study textures and concepts like c  The Eurographics Association 2013. DOI: 10.2312/conf/EG2013/education/009-010