Saltar al contingut Menu
  • Home
  • Information
  • Contact
  • Map

Visualisation and Graphic Interaction (VIG)

Credits Dept. Type Requirements
7.5 (6.0 ECTS) CS
  • Compulsory for DIE
  • Elective for DCSFW
  • Elective for DCSYS
ADA - Prerequisite for DIE , DCSYS
AL - Prerequisite for DIE , DCSYS , DCSFW
PRED - Prerequisite for DIE , DCSYS
PROP - Prerequisite for DIE , DCSYS
PS - Prerequisite for DCSFW


Person in charge:  (-)

General goals

This subject has two overall objectives:
-  For students to learn the architecture and the elements that back up interactive graphic systems, and the principles and algorithms behind them, and for students to be able to program interactive visualisations of three-dimensional scenes using APIs such as OpenGL.
-  For students to learn the design principles of graphic user interfaces (GUIs) and for them to be able to program them using specific software tools.

Specific goals


  1. Knowledge of the elements making up an interactive graphic system and the main models relating to it: camera model, geometric model, lighting model, and input-output devices.
  2. The basic principles of home-computer interaction and for the design of user graphic interfaces, the key tools for developing such interfaces and interaction tasks.
  3. The processes and algorithms for providing realistic basic visualisation of 3D objects: project visualisation process, z-buffer, empirical models for lighting and introducing 2D textures.
  4. The architecture and functional analysis of APIs implementing the visualisation project. The design of applications using APIs.
  5. Direct manipulation of objects. Interaction techniques. Selection mechanisms.


  1. Programming of graphic user interfaces using standard packages, following the specifications of a given application.
  2. Ability to develop interactive 3D graphic visualisations based on triangle meshes and employing graphics libraries.


  1. Ability to work in a group developing interactive graphic applications.
  2. Ability to evaluate graphic interfaces in analyzing the features of a given graphic system, and to assess the features and performance of tools for designing interactive visualisations and graphic interfaces.
  3. Initiative: Resolution, knowing how to take decisions and how to act in order to solve a problem.
  4. Ability to design and carry out 3D visualisations and graphic interfaces, and to study their results.
  5. Ability to relate and structure information from various sources and thus integrate ideas and knowledge.
  6. Ability to work effectively in small groups to solve problems of middling difficulty.
  7. Intellectual curiosity and openness.
  8. Initiative: Resolution, knowing how to take decisions and how to act in order to solve a problem.
  9. Ability to adapt: Knowing how to deal with new situations arising from organisational and/or technological changes.
  10. Ability to draw up a well-structured technical document.


Estimated time (hours):

T P L Alt Ext. L Stu A. time
Theory Problems Laboratory Other activities External Laboratory Study Additional time

1. Introduction to computing graphics and the design of graphic user interfaces.
T      P      L      Alt    Ext. L Stu    A. time Total 
2,0 0 0 0 0 0 0 2,0
Definition of computing graphics. Applications.

Definition of user graphic interfaces. Examples.

Course presentation.

2. Architecture of an Interactive graphic system.
T      P      L      Alt    Ext. L Stu    A. time Total 
7,0 0 8,0 0 10,0 9,0 0 34,0
Elements of an interactive graphic system. Conventional input/output devices. Models of scenes and objects. Triangle meshes. Camera model. Lighting environment. Graphic libraries. Colour models.

  • Laboratory
    Introduction to OpenGl. Examples. Presentation of the overall script for the first piece of practical assignment. The theme involves completing a programme for visualising a scene comprising triangle meshes.
  • Additional laboratory activities:
    Analyze the guidelines for the practical work, the application skeleton, and the basic examples supplied. Completing the application design and programme. It is vital that students analyze the skeleton, the examples in OpenGL, and the tools available before deciding on the design to be completed in the lab sessions.

3. Design and programming of user graphic interfaces.
T      P      L      Alt    Ext. L Stu    A. time Total 
6,0 0 6,0 0 8,0 6,0 0 26,0
Principles for specifying, designing and evaluating the Graphic User Interface (GUI).

Interaction techniques. Structuring GUI-based applications. Classification and assessment of standard design packages.

  • Laboratory
    Introduction to tools for programming interfaces: Glut, Qt. Examples. Presentation of the first practical sessions. Students must complete the interface for a scene visualisation programme. The interface should allow modifications to be introduced (e.g. for the camera).
  • Additional laboratory activities:
    Study of the interface structure in the light of the tools available. Analysis of the examples and the supplied interface skeleton. Interface design following the specifications for the practical assignment in general and for the first submission in particular. Where applicable, students will complete the programming set in the lab work. It is vital that students prepare the lab sessions, analyze the tools available and the examples before embarking on the practical work in the lab sessions.

4. Interactive visualisation.
T      P      L      Alt    Ext. L Stu    A. time Total 
9,0 0 4,0 0 4,0 9,0 0 26,0
Projected visualisation versus ray tracing.

Conceptual diagram of the visualisation process.

Co-ordinate systems, transformations, and basic algorithms.

Review of geometric transformations.

  • Laboratory
    Presentation of the lab sessions covering the first piece of practical work in this field. The work involves completing the programming of the application, interactively modifying the camera parameters.
  • Additional laboratory activities:
    Design of the skeleton modules required to complete the first stage of the practical work. If necessary, complete the programming. Produce a user manual and submission of the practical assignment.

5. Introduction to realistic visualisation.
T      P      L      Alt    Ext. L Stu    A. time Total 
9,0 0 6,0 0 6,0 9,0 0 30,0
Remove the hidden parts: z-buffer. Empirical models of lighting. Introduction to 2D textures. Graphic cards.

  • Laboratory
    Introduction of the basic features of OpenGL to increment the scenes realism. Introduction of the guidelines for the second practice, consisting on completing the interactive visualization with hidden parts, modifying the lights of the environment and adding textures
  • Additional laboratory activities:
    Analysis of the guidelines for the second practical assignment. Completing the design of modules relating to realistic visualisation and the new functions of interfaces. If necessary, complete the programming of the practical assignment. Produce a user manual and submission of the second practical assignment.

6. Direct manipulation of objects.
T      P      L      Alt    Ext. L Stu    A. time Total 
6,0 0 4,0 0 6,0 3,0 0 19,0
Interaction techniques. Input devices. Algorithms for selecting graphic information.

  • Laboratory
    Faculty presentation of the third practical session. Students must complete the implementation of selection techniques, using graphic libraries for this purpose. Selection of objects, faces, and groups of objects. Modification of attributes or geometry.
  • Additional laboratory activities:
    Analysis of the guidelines for the third stage of the practical work. Complete the design of the modules relating to the user interface. Note that students must have previously finished the analytic stage if they are to satisfactorily complete the sessions. Complete the lab programme. User manual and submission of the third set of exercises.

7. Advanced graphic interfaces.
T      P      L      Alt    Ext. L Stu    A. time Total 
3,0 0 0 0 0 3,0 0 6,0
Multi-modal interaction: graphics, sound, and haptics.

3D interaction and virtual reality.

Total per kind T      P      L      Alt    Ext. L Stu    A. time Total 
42,0 0 28,0 0 34,0 39,0 0 143,0
Avaluation additional hours 7,0
Total work hours for student 150,0

Docent Methodolgy

The teaching methodology will be based based on weekly theory classes (3 hours) and lab classes (2 hours).

Theory classes will introduce course concepts. Exercises will help consolidate these concepts and improve students' practical skills.

The lab classes have two aims: the introduction of specific programme tools (OpenGL, Qt, etc.) and the development of compulsory exercises. These exercises will be carried out individually and are a key part of the course.

The exercises basically involves developing programs for providing realistic interactive viewing of 3D scenes, and using the OpenGL graphic library for this purpose and Qt for the interface design.

The guidelines for each session will be published beforehand and explained at the beginning of each implementation stage. It is essential that students prepare for the lab classes by carrying out the individual analytical and design assignments set out in the guidelines. This preparatory work can be partially completed without the need for a computer.

Evaluation Methodgy

There will be a written exam (T) that will comprise short questions and/or exercises in which students must demonstrate their mastery of the concepts taught during the course. The evaluation of practical work (P) will come from a short work on user interfaces (P0), two practical exams (P1 and P2), and the global evaluation of the practical work (Pr). The practical exams will consist on making several changes to the continuous work in order to evaluate how the student dominates and understand his own work, and will be distributed along the semester.

In case that the practical exams, for technical reasons, could not be executed in the lab, alternatively a written exam would be done about the practical work.

The course grade (F) is based on the foregoing grades (T and P), and in accordance with the following formula:

F = 0.6*T + (0.05 P0 + 0.25 (P1+P2)/2 + 0.1 Pr)

Basic Bibliography

  • Andújar, C., Brunet P., Fairén, M., Navazo, I., Vinacua, A. Informātica Grāfica. Un enfocament multimčdia., CPET, 2002.
  • Edward Angel Interactive computer graphics : a top-down approach with OpenGL, Addison-Wesley, 2006.
  • Alan Watt 3D computer graphics, Addison-Wesley, 2000.
  • Woo, M., Neider, J., Davis, T. OpenGL User Programming Guide, Version 1.4., Addison Wesley, 2003.
  • Matthias Kalle Dalheimer Programming with Qt, O'Reilly, 2002.
  • Steve Cunningham Computer Graphics: Programming in OpenGL for Visual Communication, Pearson/Prentice-Hall, 2007.
  • Mike Bailey & Steve Cunningham Graphics Shaders: Theory and Practice, A.K.Peters, 2009.

Complementary Bibliography

  • Wilbert O. Galitz The Essential guide to user interface design : an introduction to GUI design, principles and techniques, Wiley Computer Pub, 2002.
  • Peter Shirley Fundamentals of computer graphics, AK Peters, 2002.
  • James D. Foley ...[et al.] Computer graphics : principles and practice, Addison-Wesley, 1996.

Web links

(no available informacion)

Previous capacities

Linear algebra concepts, in particular geometric transformations and the basic principles of matrix calculation.

High-level programming, knowledge of database structures and algorithm design, as well as knowledge of C++ and Linux are essential. Programming Projects Course.


logo FIB © Barcelona school of informatics - Contact - RSS
This website uses cookies to offer you the best experience and service. If you continue browsing, it is understood that you accept our cookies policy.
Classic version Mobile version