Table Of ContentP
A
T
T
A
N G
A A
FABIO GANOVELLI IK • NOV Introduction to
MASSIMILIANO CORSINI DI BE ELLI •
SUMANTA PATTANAIK NE C COMPUTER
D O
MARCO DI BENEDETTO E R
T S
TO IN
I
GRAPHICS
AI
N
Introduction to Computer Graphics: A Practical Learning Approach PT
guides you in developing your own interactive graphics application.
rR
The authors show step by step how to implement computer a
cO
graphics concepts and theory using the EnvyMyCar (NVMC) tD A Practical Learning Approach
i
framework as a consistent example throughout the text. They cU
use the WebGL graphics API to develop NVMC, a simple, aC
l
interactive car racing game. T
L
I
Each chapter focuses on a particular computer graphics aspect, eO
a
N
such as 3D modeling and lighting. The authors help you under- r
n
stand how to handle 3D geometric transformations, texturing, T
i
complex lighting effects, and more. This practical approach nO
g
leads you to draw the elements and effects needed to C
ultimately create a visually pleasing car racing game. AO
p
M
p
Features rP
oU
• Puts computer graphics theory into practice by developing an
a
T
interactive video game c
E
h
• Enables you to experiment with the concepts in a practical setting R
• Uses WebGL for code examples, with the code available online G
R
• Requires knowledge of general programming and basic notions of HTML
A
and JavaScript
P
H
I
C
S
K12432
ISBN: 978-1-4398-5279-8
FABIO GANOVELLI • MASSIMILIANO CORSINI
90000
SUMANTA PATTANAIK • MARCO DI BENEDETTO
9 781439 852798
Computer Graphics
Fabio Ganovelli
MassiMiliano Corsini
suManta Pattanaik
MarCo Di beneDetto
Boca Raton London New York
CRC Press is an imprint of the
Taylor & Francis Group, an informa business
A CHAPMAN & HALL BOOK
CRC Press
Taylor & Francis Group
6000 Broken Sound Parkway NW, Suite 300
Boca Raton, FL 33487-2742
© 2015 by Taylor & Francis Group, LLC
CRC Press is an imprint of Taylor & Francis Group, an Informa business
No claim to original U.S. Government works
Version Date: 20140714
International Standard Book Number-13: 978-1-4822-3633-0 (eBook - PDF)
This book contains information obtained from authentic and highly regarded sources. Reasonable
efforts have been made to publish reliable data and information, but the author and publisher cannot
assume responsibility for the validity of all materials or the consequences of their use. The authors and
publishers have attempted to trace the copyright holders of all material reproduced in this publication
and apologize to copyright holders if permission to publish in this form has not been obtained. If any
copyright material has not been acknowledged please write and let us know so we may rectify in any
future reprint.
Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced,
transmitted, or utilized in any form by any electronic, mechanical, or other means, now known or
hereafter invented, including photocopying, microfilming, and recording, or in any information stor-
age or retrieval system, without written permission from the publishers.
For permission to photocopy or use material electronically from this work, please access www.copy-
right.com (http://www.copyright.com/) or contact the Copyright Clearance Center, Inc. (CCC), 222
Rosewood Drive, Danvers, MA 01923, 978-750-8400. CCC is a not-for-profit organization that pro-
vides licenses and registration for a variety of users. For organizations that have been granted a photo-
copy license by the CCC, a separate system of payment has been arranged.
Trademark Notice: Product or corporate names may be trademarks or registered trademarks, and are
used only for identification and explanation without intent to infringe.
Visit the Taylor & Francis Web site at
http://www.taylorandfrancis.com
and the CRC Press Web site at
http://www.crcpress.com
To Reni
F. Ganovelli
To my grandmother, my parents and my wife
M. Corsini
To my parents
S. Pattanaik
To my family
M. Di Benedetto
Contents
List of Figures xvii
List of Listings xxvii
Preface xxxi
1 What Computer Graphics Is 1
1.1 Application Domains and Areas of Computer Graphics . . . 1
1.1.1 Application Domains . . . . . . . . . . . . . . . . . . . 2
1.1.2 Areas of Computer Graphics . . . . . . . . . . . . . . 2
1.2 Color and Images . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2.1 The Human Visual System (HVS) . . . . . . . . . . . 5
1.2.2 Color Space . . . . . . . . . . . . . . . . . . . . . . . . 6
1.2.2.1 CIE XYZ . . . . . . . . . . . . . . . . . . . . 8
1.2.2.2 Device-Dependent and Device-Independent
Color Space. . . . . . . . . . . . . . . . . . . 9
1.2.2.3 HSL and HSV . . . . . . . . . . . . . . . . . 10
1.2.2.4 CIELab . . . . . . . . . . . . . . . . . . . . . 11
1.2.3 Illuminant . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.2.4 Gamma . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.2.5 Image Representation . . . . . . . . . . . . . . . . . . 13
1.2.5.1 Vector Images . . . . . . . . . . . . . . . . . 13
1.2.5.2 Raster Images . . . . . . . . . . . . . . . . . 14
1.3 Algorithms to Create a Raster Image from a 3D Scene . . . 17
1.3.1 Ray Tracing . . . . . . . . . . . . . . . . . . . . . . . . 17
1.3.2 Rasterization-Based Pipeline . . . . . . . . . . . . . . 20
1.3.3 Ray Tracing vs Rasterization-Based Pipeline . . . . . 21
1.3.3.1 Ray Tracing Is Better . . . . . . . . . . . . . 21
1.3.3.2 Rasterization Is Better . . . . . . . . . . . . 22
2 The First Steps 23
2.1 The Application Programming Interface . . . . . . . . . . . . 23
2.2 The WebGL Rasterization-Based Pipeline . . . . . . . . . . . 25
2.3 Programming the Rendering Pipeline: Your First Rendering 28
2.4 WebGL Supporting Libraries . . . . . . . . . . . . . . . . . . 40
vii
viii Contents
2.5 Meet NVMC . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.5.1 The Framework . . . . . . . . . . . . . . . . . . . . . . 41
2.5.2 The Class NVMC to Represent the World . . . . . . . 42
2.5.3 A Very Basic Client . . . . . . . . . . . . . . . . . . . 42
2.5.4 Code Organization . . . . . . . . . . . . . . . . . . . . 48
3 How a 3D Model Is Represented 51
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.1.1 Digitalization of the Real World . . . . . . . . . . . . 52
3.1.2 Modeling . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.1.3 Procedural Modeling . . . . . . . . . . . . . . . . . . . 53
3.1.4 Simulation . . . . . . . . . . . . . . . . . . . . . . . . 53
3.2 Polygon Meshes . . . . . . . . . . . . . . . . . . . . . . . . . 53
3.2.1 Fans and Strips . . . . . . . . . . . . . . . . . . . . . . 54
3.2.2 Manifoldness . . . . . . . . . . . . . . . . . . . . . . . 54
3.2.3 Orientation . . . . . . . . . . . . . . . . . . . . . . . . 55
3.2.4 Advantages and Disadvantages . . . . . . . . . . . . . 56
3.3 Implicit Surfaces . . . . . . . . . . . . . . . . . . . . . . . . . 57
3.3.1 Advantages and Disadvantages . . . . . . . . . . . . . 58
3.4 Parametric Surfaces . . . . . . . . . . . . . . . . . . . . . . . 58
3.4.1 Parametric Curve. . . . . . . . . . . . . . . . . . . . . 59
3.4.2 B´ezier Curves . . . . . . . . . . . . . . . . . . . . . . . 59
3.4.2.1 Cubic B´ezier Curve . . . . . . . . . . . . . . 61
3.4.3 B-Spline Curves . . . . . . . . . . . . . . . . . . . . . 63
3.4.4 From Parametric Curves to Parametric Surfaces . . . 64
3.4.5 B´ezier Patches . . . . . . . . . . . . . . . . . . . . . . 66
3.4.6 NURBS Surfaces . . . . . . . . . . . . . . . . . . . . . 67
3.4.7 Advantages and Disadvantages . . . . . . . . . . . . . 67
3.5 Voxels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
3.5.1 Rendering Voxels . . . . . . . . . . . . . . . . . . . . . 69
3.5.2 Advantages and Disadvantages . . . . . . . . . . . . . 70
3.6 Constructive Solid Geometry (CSG) . . . . . . . . . . . . . . 70
3.6.1 Advantages and Disadvantages . . . . . . . . . . . . . 71
3.7 Subdivision Surfaces . . . . . . . . . . . . . . . . . . . . . . . 71
3.7.1 Chaikin’s Algorithm . . . . . . . . . . . . . . . . . . . 71
3.7.2 The 4-Point Algorithm . . . . . . . . . . . . . . . . . . 72
3.7.3 Subdivision Methods for Surfaces . . . . . . . . . . . . 73
3.7.4 Classification . . . . . . . . . . . . . . . . . . . . . . . 73
3.7.4.1 Triangular or Quadrilateral . . . . . . . . . . 73
3.7.4.2 Primal or Dual . . . . . . . . . . . . . . . . . 73
3.7.4.3 Approximation vs Interpolation . . . . . . . 74
3.7.4.4 Smoothness . . . . . . . . . . . . . . . . . . . 75
3.7.5 Subdivision Schemes . . . . . . . . . . . . . . . . . . . 75
3.7.5.1 Loop Scheme . . . . . . . . . . . . . . . . . . 76
3.7.5.2 Modified Butterfly Scheme . . . . . . . . . . 76