Introduction to Computer Graphics
A Practical Learning Approach

News

2015/09/15
Textbook for the course "Computer Graphics" at "Yale University" (Prof. H. Rushmeier)

2015/02/03
Textbook for the course "Grafica Computazionale" at "Universita dell'Insubria" (Prof. M. Tarini)

2014/12/17
Textbook for the course "Grafica Computazionale" at "La Sapienza" (Prof. M. Schaerf)

2014/12/17
Textbook for the course "Fondamenti di Grafica Tridimensionale at "Universita di Pisa" (prof. P.Cignoni)

2014/10/15
The book is out

2014/10/3
The website of the book is online!

Book Info

F. Ganovelli, M. Corsini, S. Pattanaik, M. Di Benedetto, Introduction to Computer Graphics: A Practical Learning Approach, Eds. CRC Press, Chapman & Hall/CRC Computer Graphics, Geometric Modeling, and Animation Series, 422 pages, ISBN: 978-1439852798, 1st Oct. 2014.

This book guides students in developing their own interactive graphics application. The authors show step by step how to implement computer graphics concepts and theory using the EnvyMyCar (NVMC) framework as a consistent example throughout the text. They use the WebGL graphics API to develop NVMC, a simple, interactive car racing game.
Each chapter focuses on a particular computer graphics aspect, such as 3D modeling and lighting. The authors help students understand how to handle 3D geometric transformations, texturing, complex lighting effects, and more. This practical approach leads students to draw the elements and effects needed to ultimately create a visually pleasing car racing game.

Authors

Fabio Ganovelli is a researcher at the Visual Computing Laboratory, which is part of ISTI (Istituto Scienza e Tecnologie dell'Informazione), an Institution of the Italian National Research Council (CNR). He graduated from University of Pisa in 1995, earned his PhD in 2001. His research interest includes deformable objects, multi-resolution techniques, photorealistic rendering and geometry processing.

Massimiliano Corsini obtained his degree in Information Engineering from University of Florence in 2000. In 2005, he obtained a PhD in Information and Telecommunication Engineering from the same University. Currently, he is part of the permanent research staff of the Visual Computing Laboratory (ISTI-CNR, Pisa) where he is working on appearance acquisition and modeling, 2D/3D registration techniques and image-based relighting.

Sumanta Pattanaik is an associate professor of Computer Science in the School of Electrical Engineering and Computer Science at University of Central Florida, Orlando. Previously, he was a Research Associate at the Cornell Program of Computer Graphics, Cornell University (1995-2001), a Post-Doctoral Associate at the SIAMES group of IRISA/INRIA, Rennes, France (1993-1995), and a Senior Staff Scientist at the Graphics Department of NCST, Bombay (1985-1995). He received his PhD from the Department of Computer Science and Information Science of BITS, Pilani in November 1993.

The hobby of Marco Di Benedetto is Computer Graphics. Incidentally, it is also his research job (he is temporary researcher at Visual Computing Laboratory, ISTI-CNR). Passionate software developer, his main objective is to realize rendering engine for real-time visualization of complex scenes, both on powerful workstations and on off-the-shells smartphones.

Code

The code can be downloaded here. Read carefully the accompanying instructions for a fruitful use of it.

A list of the clients with a brief description follows. For each client, the part of the book where it is first explained is provided for reference.

Client 2/0 - The Very First Client

This is the very first working client. It does not do much, the car is a white triangle on an uniform background. It is useful to learn how to do the initial setup.
This client is described in Section 4.8, page 120 of the book.

Live Demo

Drawing a cube

We learn here how to define a cube, representing it with a triangular mesh. This basic shape will be used later to create our first 3D scene.
This client is described in Section XX, page XX of the book.

Live Demo

Drawing a cone

We learn here how to define a cone, representing it with a triangular mesh. This basic shape will be used later to create our first 3D scene.
This client is described in Section XX, page XX of the book.

Live Demo

Drawing a cylinder

We learn here how to define a cylinder, representing it with a triangular mesh. This basic shape will be used later to create our first 3D scene.
This client is described in Section XX, page XX of the book.

Live Demo

Client 4/0 - Our First 3D Client

We define our first 3D scene using the drawing primitive previously defined. Note that, the 3D effect is limited since we are looking at the race with an orthogonal projection from above.
This client is described in Chapter 4, Section 10.1, page 128 of the book.

Live Demo

Client 4/1 - The Chaser View

In this client, the view frame is expressed as a function of the car's frame to follow the car during its movements.
This client is described in Chapter 4, Section 11.2, page 131 of the book.

Live Demo

Client 4/2 - The Observer Camera

This type of camera allows you to go around without constraints. With the W-A-S-D keys you can change the position of the camera and with the mouse you can either look around (like in a First Person Shooter game).
This client is described in Chapter 4, Section 12, page 136 of the book.

Live Demo

Client 5/0 - View From Driver Perspective

The view from inside the car is added to the client. The driver perspective employs stenciling to avoid to redraw the inside of the car. The blending technique is used for the upper part of the windshield.
This client is described in Chapter 5, Section 3.4, page 159, of the book.

Live Demo

Client 6/0 - Add the Sun

In this client the car made with boxes and cylinders is gone, replaced with a 3D model of the car. We learn here how to add a simple type of lighting: directional light. We use directional light to simulate illumination from the sun.
This client is described in Chapter 6, Section 7.2, page 193, of the book.

Live Demo

Client 6/1 - Add the Street Lamps

We learn here how to use another type of light: point light. We use this type of illumination to simulate the lamps at the border of the street.
This client is described in Chapter 6, Section 7.4, page 199, of the book.

Live Demo

Client 6/2 - Car's headlights and light in the tunnel

We learn how to use other two types of light: spotlights and area lights. We use spotlights to model the car headlights, the first non-static lights we have (see Section 6.7.5). Moreover, we add lights in the tunnel simulating area light with multiple point lights (see Section 6.7.6).
This client is described in Chapter 6, Section 7.7, page 203, of the book.

Live Demo

Client 6/3 - Phong Illumination Model

In this client we provide an implementation of the Phong Illumination Model.
This client is described in Chapter 6, Section 9.3, page 211, of the book.

Live Demo

Client 7/0 - Add Textures to the Terrain, Street and Buildings

Here we start using texture. The shaders for the street, the buildings and the ground just map the texture and ignore the lighting.
This client is described in Chapter 7, Section 5, page 227, of the book.

Live Demo

Client 7/1 - Add the Rear Mirror

In this client the rear mirror is added. To do that, we introduce the frame buffers. In a first pass we render the scene as seen from the rear mirror and store the result in a frame buffer. In a second pass, the previous image is used as a texture and applied to the rear mirror.
This client is described in Chapter 7, Section 6, page 230, of the book.

Live Demo

Client 7/2 - Add the Asphalt

In this client object space normal mapping is used to simulate the asphalt of the road.
This client is described in Chapter 7, Section 8.3, page 245, of the book.

Live Demo

Client 7/3 - Add a Skybox for the Horizon

The skybox is a very straightforward use of cubemaps to produce a convincing environment.
This client is described in Chapter 7, Section 7.3, page 238, of the book.

Live Demo

Client 7/4 - Add Reflections to the Car

Reflections on the car are made with 6 rendering passes that produce a cubemap. These reflections look correct if the reflected environment is far enough.
This client is described in Chapter 7, Section 7.4, page 240, of the book.

Live Demo

Client 8/0 - Add Shadows

Basic shadow mapping with the depth bias trick explained in Section 8.4.
This client is described in Chapter 8, Section 3, page 263, of the book.

Live Demo

Client 8/1 - Shadow Mapping (PCF)

A better shadow mapping effect by means of the Percentage Closer Filtering (PCF) technique.
This client is described in Chapter 8, Section 3, page 263, of the book.

Live Demo

Client 9/0 - Add Fixed Screen Gadgets

Fixed Screen gadgets are added by drawing them in the NDC space, so that they are not affected by anything else.
This client is described in Chapter 9, Section 2.3, page 280, of the book.

Live Demo

Client 9/1 - Adding Lens Flare Effects

Here we use texturing and blending to create lens flare effect. This effect is largely abused, in fact modern real lens make it not so common.
This client is described in Chapter 9, Section 2.4, page 281 of the book.

Live Demo

Client 9/2 - Better Trees

In this client, we leave the trees made with cylinders and cones for billboards. We adopt axis aligned billboard, in this way they are always oriented towards the viewer.
This client is described in Chapter 9, Section 2.5.1, page 286 of the book.

Live Demo

Client 9/3 - Even Better Trees

Here the billboard clouds are used to obtain better trees.
This client is described in Chapter 9, Section 2.8.1, page 286 of the book.

Live Demo

Client 10/0 - A Better Photographer with Depth of Field

The depth of field effect of real cameras is simulated by blurring the pixels depending on their distance from the viewer.
This client is described in Chapter 10, Section 1.2, page 300 of the book.

Live Demo

Client 10/1 - Toon Shading

A very simple toon shading visual effect made by combining color quantization and edge detection.
This client is described in Chapter 10, Section 1.4, page 308 of the book.

Live Demo

Client 10/2 - A Better Photographer with Panning

In this client we simulate panning with a two-pass rendering technique. In the first pass, the velocity of each pixel is put on a buffer which will be used in the second pass to blur the image appropriately.
This client is described in Chapter 10, Section 1.5, page 311 of the book.

Live Demo

Credits & Acknowledgements

  • The model of the car is a modified version of the 'Mitsubishi Eclipse GSX' by scrawl on Blend Swap. This model is released under the Creative Commons Attribution 3.0 License.
  • The texture for the grass is from YoFrankie! (c) 2008, Blender Foundation. This texture is released under the Creative Commons Attribution 3.0 License.
  • The textures used for the buildings are part of the Facade II, Facade III and Concrete texture packages released by OpenFootage.net. These textures are released under the Creative Commons Attribution 3.0 Austria License.
  • The skybox used is a work of Emil Persson, aka Humus. This cube map is released under the Creative Commons Attribution 3.0 Unported License.
  • Lens flare textures are from 'Pythonless Lens Flare V2' by muhammadiqro on Blend Swap. They are released under the Creative Commons Attribution 3.0 License.
  • The billboard cloud model of the trees are courtesy of Bruno Fanini.
  • We acknowledge Federico Ponchio for his useful suggestions in developing the website.

Contact Us

For any questions related to the book you can write us at the following email address:

envymycarbook@gmail.com