Einführung Computergraphik (WS 2016/17) - Uni Salzburgheld/teaching/einfuehrung_graphik/cg_print.pdf · Einführung Computergraphik (WS 2016/17) ... 1965 Jack Bresenham introduced

Einführung Computergraphik(WS 2016/17)

Martin Held

FB ComputerwissenschaftenUniversität Salzburg

A-5020 Salzburg, [email protected]

28. Dezember 2016

Computational Geometry and Applications Lab

UNIVERSITAT SALZBURG

mailto:[email protected]

Personalia

Instructor: M. Held.

Email: [email protected].

Base-URL: http://www.cosy.sbg.ac.at/˜held.

Office: Universität Salzburg, Computerwissenschaften, Rm. 1.20,Jakob-Haringer Str. 2, 5020 Salzburg-Itzling.

Phone number (office): (0662) 8044-6304.

Phone number (secr.): (0662) 8044-6328.

c© M. Held (Univ. Salzburg) Einführung Computergraphik (WS 2016/17) 2

mailto:[email protected]

http://www.cosy.sbg.ac.at/~held

Formalia

URL of course: Base-URL/teaching/einfuehrung_graphik/cg.html.

Lecture times (VO): Thursday 900–1050.

Lecture times (PS): Thursday 800–850.

Venue: T03, Computerwissenschaften, Jakob-Haringer Str. 2.


http://www.cosy.sbg.ac.at/~held/teaching/einfuehrung_graphik/cg.html

Electronic Slides and Online Material

In addition to these slides, you are encouraged to consult the WWW home-page ofthis lecture:

http://www.cosy.sbg.ac.at/˜held/teaching/einfuehrung_graphik/cg.html.

In particular, this WWW page contains links to online manuals, slides, and code.


http://www.cosy.sbg.ac.at/~held/teaching/einfuehrung_graphik/cg.html

A Few Words of Warning

I hope that these slides will serve as a practice-minded introduction to various aspectsof computer graphics. I would like to warn you explicitly not to regard these slides asthe sole source of information on the topics of my course. It may and will happen thatI’ll use the lecture for talking about subtle details that need not be covered in theseslides! That is, by making these slides available to you I do not intend to encourageyou to attend the lecture on an irregular basis.


Acknowledgments

Several students contributed to the genesis of these slides, by assembling reports ongraphics projects, producing electronic transcripts of my own lectures, and by writingLATEX code and generating computer-based figures:

Richard Bauer, Stephan Czermak, Gerd Dauenhauer, Mohamed Elkattahf, Christian Gasperi, Martin Hargassner, Claudia Horner,

Christian Koidl, Florian Krisch, Claudio Landerer, Lothar Mausz, Kathrin Meisl, Oskar Schobesberger, Roland Schorn, Rolf Sint, Alex

Stumpfl, Oliver Suter, Florian Treml, Christian Zödl, and Gerhard Zwingenberger; Matthias Ausweger, Günther Gschwendtner, Herwig

Höfle, Balthasar Laireiter, Bernhard Salzlechner, and Gerald Wiesbauer; and Markus Amersdorfer, Martin Angerer, Matthias Ausweger,

Richard Bauer, Fritz Bischof, Ronald Blaschke, Michael Brachtl, Markus Chalupar, Walter Chalupar, Werner Dietl, Johann Edtmayr,

Gregor Haberl, Dorly Harringer, Sandor Herramhof, Martin Hinterseer, Hermann Huber, Gyasi Johnson, Wolfgang Klier, August Mayer,

Albert Meixner, Christof Meerwald, Michael Neubacher, Michael Noisternig, Christoph Oberauer, Christoph Obermair, Peter Palfrader,

Marc Posch, Christopher Rettenbacher, Herwig Rittsteiger, Gerhard Scharfetter, Josef Schmidbauer, Ingrid Schneider, Harald Schweiger,

Stefan Sodar, Gerald Stieglbauer, Marc Strapetz, Johanna Temmel, Christopher Vogl, Werner Weiser, Gerald Wiesbauer, Franz

Wilhelmstötter.

I would like to express my thankfulness for their help with these slides. My apologiesgo to all those who should be on this list and who I omitted by mistake.This revision and extension was carried out by myself, and I am responsible for allerrors.

Salzburg, October 2016 Martin Held


Legal Fine Print and Disclaimer

To the best of our knowledge, these slides do not violate or infringe upon somebodyelse’s copyrights. If copyrighted material appears in these slides then it wasconsidered to be available in a non-profit manner and as an educational tool forteaching at an academic institution, within the limits of the “fair use” policy. Forcopyrighted material we strive to give references to the copyright holders (if known).Of course, any trademarks mentioned in these slides are properties of their respectiveowners.

Please note that these slides are copyrighted. The copyright holder(s) grant you theright to download and print it for your personal use. Any other use, including non-profitinstructional use and re-distribution in electronic or printed form of significant portionsof it, beyond the limits of “fair use”, requires the explicit permission of the copyrightholder(s). All rights reserved.

These slides are made available without warrant of any kind, either express orimplied, including but not limited to the implied warranties of merchantability andfitness for a particular purpose. In no event shall the copyright holder(s) and/or theirrespective employers be liable for any special, indirect or consequential damages orany damages whatsoever resulting from loss of use, data or profits, arising out of or inconnection with the use of information provided in these slides.


Recommended Textbooks I

S. Marschner, P. Shirley.Fundamentals of Computer Graphics.Apple Academic Press, 4th edition, 2016; ISBN 978-1482229394.

E. Angel, D. Shreiner.Interactive Computer Graphics: A Top-Down Approach With Shader-BasedOpenGL.Addison-Wesley, 7th edition, Feb 2014; ISBN 978-0133574845.

D.D. Hearn and M.P. Baker and W. Carithers.Computer Graphics with OpenGL.Prentice Hall, 4th edition, 2010; ISBN 978-0136053583.

S. Guha.Computer Graphics Through OpenGL: From Theory to Experiments.Apple Academic Press, 2nd edition, 2014; ISBN 978-1482258394.

T. Akenine-Möller, E. Haines, and N. Hoffman.Real-Time Rendering.A.K. Peters, 3rd edition, 2008; ISBN 978-1-56881-424-7.http://www.realtimerendering.com


http://www.realtimerendering.com

Recommended Textbooks II

J. Kessenich, G. Sellers, and D. Shreiner.The OpenGL Programming Guide.Addison-Wesley, 9th edition, 2016; 978-0134495491.http://www.opengl-redbook.com/

G. Sellers, R.S. Wright, and N. Haemel.OpenGL SuperBible.Addison-Wesley, 7th edition, 2015; ISBN 978-0672337475.http://www.openglsuperbible.com/


http://www.opengl-redbook.com/

http://www.openglsuperbible.com/

Table of Content

Introduction

OpenGL

Representation and Modeling

Raster Graphics

Basic Rendering Techniques

Ray Tracing


IntroductionA First Step into Computer GraphicsBasics


What is Computer Graphics?

The term “computer graphics” was coined by William Fetter in 1960 to describe thework he was pursuing at Boeing.

“ . . . a consciously managed and documented technology directedtoward communicating information accurately and descriptively.”

William A. Fetter, “Computer Graphics” (1960).

Computer graphics is generally regarded as the creation, storage and manipulation ofobjects for the purpose of generating images of those objects.

“ . . . the use of computers to produce pictorial images. The imagesproduced can be printed documents or animated motion pictures, but theterm computer graphics refers particularly to images displayed on a videodisplay screen, or display monitor. ”

Encyclopedia Britannica.

Why Computer Graphics?

I Humans enjoy visual information.I Visual information is easy to comprehend.I Visual information is difficult to generate manually.


Photorealism

I What is a realistic image? What does it mean for a picture, whether painted,photographed, or computer-generated, to be “realistic”?

I Answer is subject to much scholarly debate!

Photorealism

I The term “photorealism” is normally used to refer to a picture that captures manyof the effects of light interacting with real physical objects.

I It is an attempt to synthesize the field of light intensities that would be focused onthe film plane of a camera aimed at the objects depicted.

I Hall&Greenberg (1983):“Our goal in realistic image synthesis is to generate an image thatevokes from the visual perception system a response indistinguishablefrom that evoked by the actual environment.”

I Physical properties of objects have to be taken into account!


Photorealism

I There exist applications, however, where perfection is not such a mandatoryfeature. For instance, flight simulators need a fairly believable output, but neednot to be perfect in every detail. The dominant challenge here is real-timeinteractive control.

I A more realistic picture is not necessarily a more desirable or useful one. E.g., toconvey information: A picture that is free of the complications of shadows andreflections may well be more successful than a tour de force of photorealism!

I In molecular modeling, the realistic depictions are not of “real” atoms, but ratherof stylized ball-and-stick and volumetric models that permit special effects, suchas animated vibrating bands and color change representing reactions.

I In many applications reality is intentionally altered for esthetic effect or to fulfill anaive viewer’s expectation.


Visualization

I Defined as the art to produce images of objects that could not (or hardly) be seenotherwise. E.g., since they are too small, too abstract, too slow or too fast, orsimply invisible for some other reason.

I Typical examples include weather forecast charts in meteorology, hearts, brainsand bones of living creatures in medicine, temperature distributions on brakes,the growth of plants over years, geological changes like volcano eruptions orcontinental movements.


Applications of Computer Graphics

I Entertainment: Games, Commercials, Movies (Tron, Toy Story, Jurassic Park,Ants, A Bug’s Life, Star Wars, Toy Story 2, Titanic, Gladiator, Troja, . . .), VirtualReality.

I Computer-Aided Design (CAD, CAM):I One of the earliest applications.I Car parts, Boeing 777, submarine design.I City models, architectural walk-throughs.I Control of robots and manufacturing cells.

I Education and Training: Simulated environment, Virtual Reality, AugmentedReality.

I Flight simulation, pilot training.I Maintenance and assembly training.I Military training (digitized battlefields, mission rehearsal).I Telemedicine

I 3D models of heart, brain, skeleton, etc.I Haptic interface.I Minimal non-invasive surgery.


Applications of Computer Graphics: Augmented Reality

[Image credit: BOEING FRONTIERS.]


Applications of Computer Graphics

I Scientific Visualization and Data Analysis:I Molecular graphics (protein structures)I Geographic information systems (maps, topographic maps).I Turbulence, temperature, stress, etc.I Weather models.

I Business Visualization: Data mining, visualization of massive commercial data.I Graphical User Interfaces (GUI).


History of Computer Graphics: 1959s and 1960s

early 1950s US military used an interactive CRT graphics called SAGE.

1959 Computer drawing system DAC-1 by IBM and GM.

1961 Sketchpad developed by Ivan Sutherland at MIT.

1963 Douglas Englebart used a mouse as an input device.

1965 Jack Bresenham introduced his line-drawing algorithm.

1966 First computer-controlled head-mounted display (HMD) designed byIvan Sutherland.


History of Computer Graphics: 1970s

1971 Henri Gouraud developed Gouraud shading.

1972 2D raster display for PC workstations at Xerox.

1973 First SIGGRAPH Conference. Roughly 600 attendees.

1974 Ed Catmull introduced texture mapping (and z-buffering).

1974 Phong Bui-Tong developed Phong shading.

1975 Benoit Mandelbrot published the paper “A Theory of Fractal Sets”.

1977 Nintendo entered the graphics market.



1980 “Bol Libre” (by Loren Carpentar) shown at SIGGRAPH.

1980 Ray tracing developed by Turner Whitted.

1982 “Tron” produced by Disney; Perlin noise.

1982 Silicon Graphics founded by Jim Clark. Sun Microsystems, Autodesk,and Adobe Systems founded.

1982 AutoCAD developed by John Walker and Dan Drake.

1984 Radiosity method developed at Cornell University by Ben Battaile,Cindy Goral, Don Greenberg, Ken Torrance.

1985 Adobe System introduced Postscript.

1986 Pixar founded.

1988 Pat Hanrahan implemented and released Renderman.



1990 Autodesk introduced 3D Studio.

1991 “Terminator 2” was released.

1991 JPEG and MPEG standards were introduced.

1992 SGI specified OpenGL.

1992 Wavelets were used for radiosity.

1994 Industrial Light and Magic won an Academy Award for TechnicalAchievement for its special-effects work on “Jurassic Park”.

1994 Sun Microsystems introduced Java.

1995 Pixar released “Toy Story”.

1997 SIGGRAPH’97 had more than 48 000 attendees.

1997 “Titanic” released.

1997 Ken Perlin won an Academy Award for Technical Achievement for“Perlin noise”.

1998 “Ants” and “A Bug’s Life” released.


History of Computer Graphics: 2000 and Beyond

2001 Microsoft’s “Xbox console” (based on NVIDIA graphics) makes itsdebut.

2003 Graphics cards (by NVIDIA, ATI, Matrox, and others) became widelyavailable.

2004 “Half Life 2” released; graphics cards for mobile phones and PDAs.

2004 OpenGL Shading Language formally included into OpenGL 2.0.

2005 “StarWars Episode III”.

2007 CUDA (Compute Unified Device Architecture) specified and releasedby NVIDIA.

2008 OpenCL (Open Computing Language) specified by the KhronosGroup.

2010 GPUs with native 64bit floating-point precision and support formassively-parallel computing become widely available.

2014 OpenGL 4.5 released.

2015 Vulkan introduced as “next generation OpenGL” at GDC 2015.

2016 Vulkan 1.0 released.

20?? Real-time radiosity rendering? Photo-realistic consumer graphics?Realistically rendered humans?


Foundations of Computer Graphics

I Computer Science:algorithms, data structures, programming, software engineering, architecture,artificial intelligence, 3D modeling.

I Mathematics:linear algebra, analytical geometry, complex analysis, numerical analysis,differential geometry, topology, 3D modeling.

I Physics:optics, fluid dynamics, energy, kinematics and dynamics.

I Psychology:human light and color perception.

I Biology:human body, behavioral and cognitive systems, nervous system.

I Art:realism, esthetics.


3D Graphics System: Software Components

A system for 3D graphics consists of three major (software) parts:I the modeler,I the renderer,I image handling and display.

Image Handling

I Image handling is often only a device driver to make the computed image visiblefor the user on a screen or on a hard copy device.

I It can also be an image processing system to improve the quality of images or toalter or transform them before displaying.


Modeling System

I Geometry-based modeling:I Lines, polygons, polyhedra,I Free-form curves and surfaces,I Quadtrees, octrees, bounding volumes,

I Physics-based modeling:I Kinematics and dynamics (contact detection, contact resolution, force

calculation, natural gait),I Fluid dynamics (e.g., for modeling water and waves),I Gas, smoke, fire,I Deformable objects (e.g., clothes, cords),I Haptics (e.g., touch sensors).

I Cognitive-based modeling:I Domain knowledge, learning.I Interaction with real world.

Wide-spread simple modelers

I CAD systems,I 3D editors,I object description languages.


Rendering System

The output of the modeler is used as input to the rendering system.

I Rendering is the process of reducing the 3D information of the scene to a 2Drepresentation, the image.

I A camera definition is necessary to project the 3D scene onto the desired imageplane.

I Conventional rendering is very simple: visibility determination and simpleshading are performed.

In a more realistic image synthesis system the rendering consists of several parts:

I Visibility determination,I Shading,I Texturing,I Anti-aliasing.


Rendering System

Shading: I It is the main part of every rendering system.I Shadows must be determined.I The intensity and color of light leaving an object, given the

incoming light distribution and the surface properties, must becomputed.

Texturing: I It achieves surface details which, in reality, are caused by varyingoptical properties of the object.

I Such variations are often stored in texture maps for fast access.I Texture mapping is the process of determining the transformation

from a texture map onto the surface of an object and then ontothe screen.

Anti-aliasing: I It tries to correct all errors that occur by aliasing.I Aliasing can be caused during various steps in the image

generation process.I Aliasing is, more or less, usually due to a discretization of a

continuum.


3D Graphics System: Hardware Components

1. Input devices (keyboard, mouse, joystick, data glove, eye tracker, . . .)2. Processor (CPU)3. CPU memory4. Output devices (monitor, printer, . . .)5. Graphics Processing Unit (GPU)6. GPU memory7. Frame buffer8. Output devices (monitor, printer, . . .)

CPU GPU Framebuffer

. . . -

- -

-

CPUmemory

GPUmemory

- -

?

-

-

-

-

. . .

?


Frame Buffer

I A common graphics technique is to use a frame buffer or refresh buffer.I In its simplest meaning, a frame buffer is simply the video memory that holds the

pixels from which the video display (frame) is refreshed.I The frame buffer can be manipulated by the rendering algorithm, and its contents

can be moved to the screen when desired.I Double buffering is a technique whereby the graphics system displays one

finished buffer while the hardware renders the next frame into a second buffer.Without double buffering, the process of drawing is visible as it progresses.

I Double buffering generally produces flicker-free rendering for simple animations.I Note, however, that double buffering may slow down the graphics performance on

high-end graphics systems, as buffer swaps (normally) can only happen whenboth buffers are untouched.

I Triple buffering makes use of one front buffer and two back buffers, thus enablingthe graphics hardware and the rendering algorithm to progress on their ownspeeds.

I Quadruple buffering means the use of double buffering for stereoscopic images.


Graphics Processing Unit

I By today’s definition, a “graphics processing unit” (GPU) is a graphics outputdevice that manipulates the frame buffer and provides accelerated 2D or 3Dgraphics.

I The frame buffer usually is stored in the memory chips on the GPU.I Modern GPUs provide much more than z-buffer memory! (E.g., a stencil buffer

for computing shadows and reflections has become common.)I Modern GPUs also offer a (comparatively cheap) hardware for massively parallel

computations, at a floating-point precision of 64 bits.


Device-Independent Graphics Primitives

I Since graphics output devices are many and diverse, it is imperative to achievedevice independence.

I Thus, it is generally preferred to work in world coordinates rather than devicecoordinates.

I Typical graphics commands will beI DrawLine(x1, y1, x2, y2);I DrawCircle(x1, y1, r );I DrawPolygon(PointArray);I DrawText(x1, y1, "A Message");

where x1, y1, x2, y2, r are specified in world coordinates.I Graphics primitives have attributes, such as style, thickness and color for a line,

or font, size and color for a text.


Application Programmer´s Interface (API)

I Graphic APIs provide the programmer with procedures for handling menus,windows and, of course, graphics.

I Well-known APIs for 3D graphics:I OpenGL,I Direct3D,I Java3D,I WebGL.

I Vulkan can be expected to replace OpenGL on standard consumer GPUs withinthe next few years.

I We will use OpenGL for practical work in this course.


OpenGLIntroduction to OpenGLBasic OpenGL 3.1+Coordinates and TransformationsEvent-Handling and CallbacksTexturesCrash Course in C


What is OpenGL?

I OpenGL stands for “Open Graphics Library”.I It is a high-performance system interface to graphics hardware.I OpenGL is the most widely used library for high-end platform-independent

computer graphics; de-facto industry standard.I Runs on different operating systems (including Unix/Linux, Windows, MacOS)

without requiring changes to the source code.I Platform-specific features can be implemented via extensions.I OpenGL is a C Library of several hundreds of distinct functions.I OpenGL is not object-oriented.I Several (commercial) versions of an OpenGL library have been implemented.I OpenGL functionality is also provided by Mesa, which is free. As of 08-July-2016,

Mesa 12.x implements the OpenGL 4.3 API. (OpenGL 3.3 and Mesa 10.x wouldbe perfectly fine for this course, though!)


http://www.mesa3d.org

What is OpenGL?

I OpenGL takes advantage of graphics hardware where it exists; whether or nothardware acceleration is used depends on the availability of suitable drivers.

I OpenGL does not come with any windowing functionality; it has to rely onadditional libraries (such as GLUT or GLFW).

I It ties into standard C/C++; various other language bindings exist, too. Inparticular, OpenGL can be used from within

I C, C++,I Java,I Fortran,I Ada.

I OpenGL supportsI polygon rendering,I texture mapping,I anti-aliasing,I shader-level operations.

I OpenGL does not provide or (directly) support high-level graphics likeI ray tracing,I radiosity calculations,I volume rendering.


What is OpenGL?

I Designed by Silicon Graphics Inc. (SGI) in 1991.I Initial design in 1982 (“IRIS GL”).I For many years, development of OpenGL had been coordinated by an

Architectural Review Board (ARB).I In 2006, the ARB and the Khronos Board of Directors voted to transfer control of

the OpenGL API standard to the non-profit technology consortium KhronosGroup.

I As of August 2016, the following companies were promoting members of theKhronos Group: AMD, Apple, ARM, Epic Games, Google, HUAWEI, ImaginationTechnologies Group, Intel, Nokia, NVIDIA, QUALCOMM, Samsung, Sony,VeriSilicon.

I The Khronos Group now controls the adaption/extension of OpenGL to reflectnew hardware and software advances,

“. . . to bring advanced 3D graphics to all hardware platforms andoperating systems — from supercomputers to jet fighters to cellphones.”

I Official website: https://www.opengl.org/.


http://www.khronos.org/

http://www.khronos.org/

https://www.opengl.org

What is OpenGL?

I Note that OpenGL 1.x and 2.x differ substantially from OpenGL 3.x and OpenGL4.x:

I Modern OpenGL is entirely shader-based.I Modern OpenGL no longer relies on tons of state variables.

Be careful . . .. . . when studying tutorials in the Web! A surprisingly large number of tutorials stillteach old-style “legacy” OpenGL.

I Hint: It is old-style OpenGL if you see statements like glBegin or glColor4f.


OpenGL Tutorials

Sample Tutorials

I https://open.gl/:Requires a GPU compatible with OpenGL 3.2, CMake; uses GLFW for contextand window creation and GLEW for access to newer OpenGL functions.

I http://www.opengl-tutorial.org:Requires a GPU compatible with OpenGL 3.3. Similar to https://open.gl/.

I LEARN OPENGL:Similar to http://www.opengl-tutorial.org.

I OpenGLBook.com:Taylored to work with OpenGL 4.x, uses GLUT.


https://open.gl/

http://www.opengl-tutorial.org/beginners-tutorials/

https://open.gl/

http://learnopengl.com

http://www.opengl-tutorial.org

http://openglbook.com

OpenGL Versions

Core Mode:I No pre-OpenGL 3.0 functions supported.I Vertex and fragment shader must be used.

Compatibility Mode:I Full Core functionality is available.I Pre-OpenGL 3.0 functions are supported.I Slower than Core!

OpenGL ES . . .

. . . for mobile/embedded systems only supports Core Mode!

I It seems best to start right with OpenGL 3.1+, even though it is a bit more difficultto learn than pre-OpenGL 3.0.


A Note on Direct X and Java 3D

I Direct X:I Advantages:

I More high-level functionality;I Better control of resources.

I Disadvantages:I Only supported by MS Windows machines;I Lack of backwards compatibility of newer versions.

I New developments in shader-based programming will (hopefully) lead to aconvergence with OpenGL.

I Java 3D:I Advantages:

I Based on true object-oriented approach.I Ties natively into Java.I 256-bit fixed-point coordinates (“locales” objects).I Open-source code since 2004.

I Disadvantages:I Runs atop of Java OpenGL (JOGL); delay in use of new GPU features.I Reputation and use has been badly hit by a pause in development

during 2003 and 2004.


OpenGL Libraries

I OpenGL proper does not provide any windowing functionality! That is, it does notsupport opening a window or getting input from the mouse or a keyboard.

I Quote taken from the OpenGL 3.1 Specification (chapter 2, first paragraph):OpenGL is concerned only with rendering into a frame buffer (andreading values stored in that frame buffer). There is no support for otherperipherals sometimes associated with graphics hardware, such asmice and keyboards. Programmers must rely on other mechanisms toobtain user input.

I Thus, a link to the underlying windowing system (GLX for X windows, WGL forWindows, AGL for Macintosh) and an add-on library (e.g., GLUT or GLFW) isrequired!

No GLU anymore

I OpenGL 3.0 deprecated the entire Graphics Library Utilities (GLU) of “legacy”OpenGL 1.x/2.x. It was removed in OpenGL 3.1. This means that GLU will fail towork in OpenGL 3.x/4.x contexts.

I Similarly, GLUT commands like glutSolidSphere() do no longer work.


OpenGL Libraries: GLUT

I GLUT usage: #include <GL/glut.h> will (or should) also include gl.h.I OpenGL commands start with the prefix gl while GLUT commands start withglut. E.g., glutReshapeWindow().

I GLUT code is portable, but it lacks a good toolkit for a specific platform.I In particular, GLUT does not offer ready-to-use widgets for constructing GUIs.I GLUT has not been actively maintained in recent years — its most recent release

dates back to 1998.I Hence, it makes sense to switch to freeglut.I Development of the more recent fork OpenGLUT seems to have stalled.I In any case, GLUT does not belong to OpenGL proper, but is an add-on library.

Xlib, Xtk Frame BufferGLXGL

GLUT

Program

ApplicationOpenGL

GLEW


http://freeglut.sourceforge.net/

OpenGL Libraries: GLFW

I GLFW is a light-weight multi-platform library for OpenGL.I It supports Windows (XP and later), OS X (10.7 Lion and later) and Unix-like

operating systems that run the X Window System.I Its commands start with the prefix glfw. E.g., glfwInit().I It can create and manage windows as well as handle standard input (via

keyboard, mouse or joystick).I It can control multiple monitors and enumerate video modes.I It does also work with pre-OpenGL 3.1.I In addition to portability, its single biggest advantage is its simplicity.I Its biggest disadvantage is its lack of menus and buttons.

Xlib, Xtk Frame BufferGLXGLProgram

ApplicationOpenGL

GLEW

GLFW


http://www.glfw.org/

OpenGL Libraries: GLEW

I The OpenGL Extension Wrangler Library (GLEW) is a cross-platform library thatprovides efficient run-time mechanisms for determining which OpenGLextensions are supported on the target platform.

I That is, it makes it easy to access OpenGL extensions that are available on aparticular system.

I GLEW commands start with the prefix glew.I Easy to use: Include glew.h and run glewInit().

Xlib, Xtk Frame BufferGLXGLProgram

ApplicationOpenGL

GLEW

GLFW


Compiling and Linking an OpenGL Program

I The source code for an OpenGL program has to contain the following directivesfor including OpenGL header files:

I If GLUT is used:

#include <GL/glut.h>

The file glut.h includes gl.h.I If GLEW is used:

#include <GL/glew.h>

I If GLFW is used:

#include <GLFW/glfw3.h>

I Note: When compiling and linking an OpenGL program, the OpenGL header filesand libraries have to be available for inclusion. This means, e.g., using the-lglut -lgl loader flags, and possibly, with -L flags for the X libraries.

I Better alternative: Resort to imake or cmake!I See the sample files in my WWW graphics resources.


http://www.cosy.sbg.ac.at/~held/teaching/graphik/resourcen.html

Basic OpenGL Program Structure

#include <HeadersOpenGL>

int main()

CreateWindow(title, width, height);CreateOpenGLContext(settings);

while (windowIsOpen) /* event processing and drawing */

while (event == GetNextEvent())HandleEvent(event); /* e.g., handle mouse clicks */

UpdateScene(); /* e.g., move objects */

RenderScene(); /* generate next image */

DisplayGraphics(); /* e.g., swap buffers */

I Every real-time graphics application will have a program flow that boils down tothis structure, no matter whether it uses OpenGL or some other library.


Creating an OpenGL Window and Context

I We use GLFW to create an OpenGL display window.I It comes as no surprise that you need to load the header file and initialize GLFW.

#include<GLFW/glfw3.h>

/* initialization of GLFW */

glfwSetErrorCallback(errorCallback);if (glfwInit() != GLFW_TRUE)

fprintf(stderr, "Cannot initialize GLFW\n");exit(EXIT_FAILURE);

.../* termination of GLFW */

glfwTerminate();

I GLFW error callback function:

static void errorCallback(int error, const char* logText)

fprintf(stderr, "GLFW error %d: %s\n", error, logText);



I The glfwWindowHint() function is used to set some GLFW options.

glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);glfwWindowHint(GLFW_RESIZABLE, GL_FALSE);

I Window creation:

const GLuint WIDTH = 800, HEIGHT = 600;GLFWwindow* myWindow = glfwCreateWindow(WIDTH, HEIGHT,

"OGL Demo", NULL, NULL);if (myWindow == NULL)

fprintf(stderr, "Cannot open GLFW window\n");exit(EXIT_FAILURE);

I The first two parameters specify the width and height of the drawing area.I The fourth parameter tells GLFW to use the monitor in windowed mode, and the

last parameter would allow to share resources with an existing OpenGL context.I Roughly, a context stores all of the state data associated with an instance of

OpenGL. A process can create multiple OpenGL contexts, and each context canrepresent a separate drawing area, e.g., a window in a graphics application.



I For fullscreen mode:

GLFWwindow* myWindow = glfwCreateWindow(WIDTH, HEIGHT,"OGL Demo",glfwGetPrimaryMonitor(), NULL);

I Making an OpenGL context active:

glfwMakeContextCurrent(myWindow);


Creating an OpenGL Window and Context: Event-Handling Loop

I This should be enough to get an OpenGL window mapped to your screen:

/* event - handling and rendering loop */

while (!glfwWindowShouldClose(myWindow)) /* poll events */

glfwPollEvents();/* Swap buffers */

glfwSwapBuffers(myWindow);/* close window upon hitting the escape key */

if (glfwGetKey(myWindow, GLFW_KEY_ESCAPE) == GLFW_PRESS)glfwSetWindowShouldClose(myWindow, GL_TRUE);

I The event-handling loop always needs to call glfwSwapBuffers() andglfwPollEvents().

I You can ignore events that you do not want to handle. (We’ll learn more on eventhandling later . . .)

I Do not forget to handle the escape key (or some other key) to return to thedesktop if using the fullscreen mode.



I One technical issue remains: At runtime a graphics application needs to checkwhich functionality is supported by a GPU, as specified in the driver provided bythe vendor of the GPU, and needs to link to them.

I This is tedious and is best handled by resorting to GLEW:

#include<GL/glew.h>

/* initialization of GLEW */

glewExperimental = GL_TRUE;GLenum glewStatus = glewInit();if (glewStatus != GLEW_OK)

fprintf(stderr, "Error: %s\n",glewGetErrorString(glewStatus));

exit(EXIT_FAILURE);

I Make sure to include glew.h prior to other OpenGL-related headers!I Setting glewExperimental forces GLEW to use a “modern” OpenGL method

for checking whether a function is available.I See window.cc in my WWW graphics resources.



Vertex Buffer Object

I Classical bottleneck in pre-OpenGL 3.1: Whenever a vertex is specified in apre-OpenGL 3.1 application, by means of glVertex, its coordinates need to besent to the GPU.

I Goal: Increase performance by using the GPU rather than the CPU and bydecreasing the amount of data that is exchanged between CPU and GPU.

I Basic idea:I We pack the vertex and attribute data into arrays.I A vertex array is transferred to the GPU and stored in the GPU memory.I Array data that is in the GPU memory can be rendered via a simple call to a

callback function: glDrawArrays()I This leads to vertex array objects and vertex buffer objects.

No object-oriented “object”OpenGL is fairly liberal in its use of the word “object”! That is, an OpenGL “object” isnot to be understood as an object in the object-oriented programming meaning.Rather, OpenGL objects tend to be simple arrays of data for which we get a handle(i.e., an identifier) to interact with.



I OpenGL expects vertices to be stored in arrays.

float vtx[] = 0.0f, 0.0f, /* x - and y - coords of 1 st vertex */

0.5f, 0.5f, /* x - and y - coords of 2 nd vertex */

0.5f, -0.5f /* x - and y - coords of 3 rd vertex */

;

I A Vertex Buffer Object (VBO) is an array of data, typically floats.I E.g., it may hold data like world coordinates, color, texture coordinates and,

possibly, application-specific data.I It will reside in the high-speed memory of the GPU.

GLuint myVBO;glGenBuffers(1, &myVBO);glBindBuffer(GL_ARRAY_BUFFER, myVBO);

I Since GPU memory is managed by OpenGL, you get a positive number as areference to it.

I The glBindBuffer() function turns a VBO into the active buffer.



I Once an VBO is active, we can copy the vertex data to it.

glBufferData(GL_ARRAY_BUFFER, sizeof(vtx),vtx, GL_STATIC_DRAW);

I Depending on the intended type of use, the last argument of glBufferData()determines the kind of GPU memory (relative to writing and drawing speed) inwhich the data is stored:GL_STATIC_DRAW: Generated once, no changes, drawn many times.GL_DYNAMIC_DRAW: Changed a few times, drawn many times.GL_STREAM_DRAW: Changed and drawn many times.

I We can store more than just the 2D or 3D coordinates of points in a VBO. E.g.,store 2D texture coordinates or 3D normals.

I Hence, it is likely that most of the VBOs will consist of arrays of two and threefloats.


Vertex Array Object

I A Vertex Array Object (VAO) is used to tell OpenGL how the VBO is arranged.E.g., it might be divided into variables of two floats each.

I That is, a VAO is not the actual object storing the data, but a descriptor of thedata.

GLuint myVAO;glGenVertexArrays(1, &myVAO);glBindVertexArray(myVAO);

I Once a VAO has been bound, every call to glVertexAttribPointer() willcause the attributes associated with a VBO to be stored in that VAO.

WarningOnly attribute bindings performed after binding a VAO refer to it! Thus, make sure tobind an VAO at the start of your code!


Shader Programs

I GPU-based rendering is envoked through so-called shader programs.I An application sends data to the GPU, and the GPU does all the rendering.I Starting with OpenGL 3.1, OpenGL is entirely shader-based:

I The state model is replaced by a data-flow model.I Several pre-OpenGL 3.1 functions are deprecated, and backwards

compatibility is not required. (At least not in Core Mode.)I No default shaders — but each application has to provide at least a vertex

and a fragment shader.I Vertex Shader:

I Processes input vertices (e.g., of triangles) individually.I Influences the attributes of a vertex, e.g., position, color, and texture

coordinates.I Performs the perspective transformation.

I Fragment Shader:I Calculates individual fragment colors.I E.g., it might sample a texture or simply output a color.I It may also be used for lighting and for creating advanced effects like

bump-mapping effects.I More shaders (e.g., Tesselation and Geometry Shaders) added with OpenGL 4.1.


Shader Programs: Execution Pipeline

vertex shader shape assemblygeometry shader

rasterization fragment shader tests and blending

vertex data

(arrays)

tesselation shaders

culling, clipping

I The geometry shader is optional. It can discard, modify or pass throughprimitives, or even generate new ones. E.g., it could generate squares out ofinput vertex data.

I In the shape assembly, the GPU forms primitives (e.g., triangles, line segments)out of the vertices. Up to this stage, all operations are carried out on the vertices.

I Rasterization converts the primitives into pixel-sized fragments.


OpenGL Shading Language

I Shaders are written in the OpenGL Shading Language (GLSL).I The GLSL is C/C++-like with overloaded operators.I New data types (e.g., matrices, vectors) and C++-like constructors.

E.g., vec3 myVec=vec3(1.0,0.0,1.0).I Similar in use to NVIDIA’s Cg and Microsoft’s HLSL.I GLSL code is sent to the shaders as source code.I New OpenGL functions added to compile and link that code and to exchange

information with the shaders.I Shaders can be written inside the C/C++ code, or can be stored in files and

loaded.

I We will only discuss vertex shader and fragment shader very briefly.


OpenGL Shading Language: Sample Vertex Shader

I Since the triangle in our sample is already given by 2D vertices, a vertex shadercan be fairly simple.

/* define the vertex shader */

const char* vertexShaderSource = GLSL(in vec2 position;void main()

gl_Position = vec4(position, 0.0f, 1.0f);

);/* compile the vertex shader */

GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);glShaderSource(vertexShader, 1, &vertexShaderSource,

NULL);glCompileShader(vertexShader);

I Since we deal with homogeneous coordinates, the last argument ofgl_Position() will, in general, be 1.0 . . ..


OpenGL Shading Language: Sample Vertex Shader

WarningNo error will be reported by glGetError() if a shader fails to compile!

I Hence, make sure to check explicitly!

/* check whether the vertex shader has compiled */

GLint status;glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &status);if (status != GL_TRUE)

fprintf(stderr, "Vertex shader did not compile\n");char vertexCompilerLog[512];glGetShaderInfoLog(vertexShader, 512, NULL,

vertexCompilerLog);fprintf(stderr, "%s", vertexCompilerLog);exit(EXIT_FAILURE);


OpenGL Shading Language: Sample Fragment Shader

I For simplicity, we’ll draw the triangle entirely red and get the following simplefragment shader.

/* define and compile the fragment shader : */

/* we ’ll get a red triangle */

const char* fragmentShaderSource = GLSL(out vec4 outColor;void main()

outColor = vec4(1.0f, 0.0f, 0.0f, 1.0f);

);

GLuint fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);glShaderSource(fragmentShader, 1, &fragmentShaderSource,

NULL);glCompileShader(fragmentShader);


Creating a Shader Program

I We form a shader program by linking the vertex and fragment shader into oneunit.

GLuint shaderProgram = glCreateProgram();glAttachShader(shaderProgram, vertexShader);glAttachShader(shaderProgram, fragmentShader);glBindFragDataLocation(shaderProgram, 0, "outColor");glLinkProgram(shaderProgram);

I To make the shader program active, we use the following statement:

glUseProgram(shaderProgram);


Creating a Shader Program

I Again, no error checking is done by OpenGL! Hence, make sure to checkwhether linking the shader program worked.

bool checkShaderProgramLinkStatus(GLuint programID)

GLint status;glGetProgramiv(programID, GL_LINK_STATUS, &status);if(status == GL_FALSE)

GLint length;glGetProgramiv(programID, GL_INFO_LOG_LENGTH,

&length);GLchar* log = new char[length + 1];glGetProgramInfoLog(programID, length, &length,

&log[0]);fprintf(stderr, "%s", log);return false;

return true;


Specifying the Vertex Atributes

I We obtain a reference to the position input in the vertex shader — in our examplethis will be 0 — and then use glVertexAttribPointer() to specify how theinput data is organized:

const char* attrName = "position";GLint posAttrib = glGetAttribLocation(shaderProgram,

attrName);if (posAttrib == -1)

fprintf(stderr, "Error for attribute %s\n", attrName);exit(EXIT_FAILURE);

glEnableVertexAttribArray(posAttrib);glVertexAttribPointer(posAttrib, 2, GL_FLOAT, GL_FALSE,

2*sizeof(float), 0);

I The arguments of glVertexAttribPointer() are as follows:1. Reference to the input.2. Number of values for that input, i.e., components ot vec.3. Type of each component.4. Normalization to [-1.0,1.0] requested?5. Stride: How many bytes are between every position attribute in the array?6. Offset : Byte offset for the first component of the first attribute.


Drawing the Sample Triangle

I Finally, we set the background to black and draw the triangle.

/* set the window background to black */

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);

/* draw the triangle */

glDrawArrays(GL_TRIANGLES, 0, 3);

I The call glClearColor(0.0,0.0,1.0,0.0) would set the background colorto “no red, no green, maximum blue”. (The fourth parameter pertains to blending,and can be ignored for the moment.)

I Each argument is a floating-point value in the range [0, 1], specifying the amountof red, green and blue.

I The arguments of glDrawArrays() are as follows:1. Type of primitives to be rendered.2. How many vertices shall be skipped at the beginning.3. Number of vertices. (Not the number of primitives!)


Cleaning Up in the End

I Do not forget to release all resources in the end:

glDeleteProgram(shaderProgram);glDeleteShader(fragmentShader);glDeleteShader(vertexShader);glDeleteBuffers(1, &myVBO);glDeleteVertexArrays(1, &myVAO);

I See drawing.cc in my WWW graphics resources.



Drawing a Colorful Triangle

I We will now modify the sample code to draw a colorful triangle, by assigning theRGB values for red, green and blue to the vertices; see colored_tri.cc in myWWW graphics resources.:

float vtx[] = 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, /* coords , red */

0.5f, 0.5f, 0.0f, 1.0f, 0.0f, /* coords , green */

0.5f, -0.5f, 0.0f, 0.0f, 1.0f /* coords , blue */

;

I Modified vertex shader:

const char* vertexShaderSource = GLSL(in vec2 position;in vec3 colorVtxIn;out vec3 colorVtxOut;void main()

colorVtxOut = colorVtxIn;gl_Position = vec4(position, 0.0, 1.0);

);




Drawing a Colorful Triangle

I Modified fragment shader:

const char* fragmentShaderSource = GLSL(in vec3 colorVtxOut;out vec4 outColor;void main()

outColor = vec4(colorVtxOut, 1.0f);

);

I Modified bindings:

GLint posAttrib = glGetAttribLocation(shaderProgram,"position");

glEnableVertexAttribArray(posAttrib);glVertexAttribPointer(posAttrib, 2, GL_FLOAT, GL_FALSE,

5*sizeof(float), 0);GLint colAttrib = glGetAttribLocation(shaderProgram,

"colorVtxIn");glEnableVertexAttribArray(colAttrib);glVertexAttribPointer(colAttrib, 3, GL_FLOAT, GL_FALSE,

5*sizeof(float), (void*)(2*sizeof(float)));


Index Buffer Object

I Typically, geometric objects will reuse vertices. E.g., the two triangles of arectangle share two vertices, and it is a waste of precious GPU memory to storethem twice.

I Index Buffer Objects (IBOs) are applied for re-using vertex data:I We model a rectangle formed by five vertices and four triangles:

float vtx[] = -0.5f, -0.5f, 1.0f, 0.0f, 0.0f, /* lower - left corner */

0.5f, -0.5f, 0.0f, 1.0f, 0.0f, /* lower - right corner */

0.5f, 0.5f, 0.0f, 0.0f, 1.0f, /* upper - right corner */

-0.5f, 0.5f, 1.0f, 1.0f, 1.0f, /* upper - left corner */

0.0f, 0.0f, 0.0f, 0.0f, 0.0f /* center */

;GLuint idx[] =

0, 1, 4,1, 2, 4,2, 3, 4,3, 0, 4

;


Index Buffer Object

I Creation of an IBO:

/* generate one Index Buffer Object */

GLuint myIBO;glGenBuffers(1, &myIBO);glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, myIBO);/* copy the element data to it */

glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(idx), idx,GL_STATIC_DRAW);

I For drawing we use glDrawElements() rather than glDrawArrays() in therendering loop:

glDrawElements(GL_TRIANGLES, 12, GL_UNSIGNED_INT, 0);

I The arguments of glDrawElements() are as follows:1. Type of primitives to be rendered.2. Number of element indices. (Not the number of triangles!)3. Type of element indices.4. Offset.

I See colored_quad.cc in my WWW graphics resources.I Note that the square appears to be a quad in the graphics window: distortion due

to mismatch of aspect ratios!



OpenGL Naming Conventions

I All OpenGL functions have the prefix gl, followed by one or more capitalizedwords to denote the function. E.g., glBindBuffer().

I GLEW and GLFW use the same scheme for naming their functions.I Recall that OpenGL is C-based and, thus, does not have function overloading.I As consequence, suffixes after the main part of a function name are used for

prodiving information on the specific number and type of arguments that afunction accepts. E.g.:

I glUniform2f() indicates that this function takes two parameters (inaddition to its standard arguments) which are of type GLfloat.

I glUniform2fv() indicates that these two floats are passed as aone-dimensional array rather than two individual parameters.

I All OpenGL constants begin with GL and use underscores to separate words.E.g., GL_STATIC_DRAW.


OpenGL Data Types

Data Type Min. Prec. Description SuffixGLbyte 8 bits signed integer bGLubyte 8 bits unsigned integer ubGLshort 16 bits signed integer sGLushort 16 bits unsigned integer usGLsizei 32 bits integer size iGLint 32 bits signed integer iGLuint 32 bits unsigned integer uiGLenum 32 bits enumeration type uiGLfloat 32 bits floating-point value fGLclampf 32 bits floating-point value clamped to [0.0, 1.0] fGLdouble 64 bits floating-point value dGLclampd 64 bits floating-point value clamped to [0.0, 1.0] d

I An OpenGL implementation must use at least the minimum number of bitsspecified. It may use more bits than the minimum number required to represent aGL type.

I An OpenGL data type may but need not match the “corresponding” C data typein a specific implementation.

I Thus, use the OpenGL types to assure portability!


OpenGL Graphical Primitives

OpenGL Primitive Description Min. #(vertices)

GL_POINTS 1

GL_LINES 2

GL_LINE_STRIP 2

GL_LINE_LOOP 2

GL_TRIANGLES 3

GL_TRIANGLE_STRIP 3

GL_TRIANGLE_FAN 3

I Make sure to pay close attention to how vertices are grouped for the strips andfans.

0

1

2

3

4

5

0

1 23

4

5


OpenGL Coordinate Systems

I The units of the coordinates of a vertex depend on the application; thosecoordinates are called world coordinates.

I A standard right-handed coordinate system is assumed for the world coordinates:the positive x-axis is to your right, the positive y -axis is up and the positive z-axispoints out of the screen towards you.

I Internally, OpenGL will convert to camera coordinates and later to windowcoordinates.

I OpenGL’s camera is placed at the origin pointing in the negative z-direction of theworld coordinate system.

I The camera cannot be moved. Rather, one has to apply an inversetransformation to the scene to be rendered.

I OpenGL supports the definition of a viewing volume: Only (those portions of)objects that are inside this 3D region will be drawn (“clipping”).


OpenGL Coordinate Transformation Pipeline

ModelingTransformation

ViewingTransformation

ProjectionTransformation

PerspectiveDivision

ViewportTransformation

OCS

DCS

WCS VCS

NDCS

CCS

CCS

I The coordinates of a 3D point p undergo several transformations until eventuallya pixel on the screen corresponding to its 2D equivalent p′ is set.

I This sequence of transformations is encoded in the OpenGL transformationpipeline: from object coordinate system (OCS) to world coordinate system(WCS), viewing coordinate system (VCS), clipping coordinate system (CCS),normalized device coordinate system (NDCS), and finally to device coordinatesystem (DCS).

p′ = Mproj ·Mview ·Mmodel · p


OpenGL Coordinate Transformations: Modeling Transformation




PerspectiveDivision


OCS

DCS

WCS VCS

NDCS

CCS

CCS

I The modeling transformation places an object somewhere in the world. Typically,this re-positioning of an object is carried out by

1. scaling it,2. rotating it, and3. translating it.

pWCS = Mmodel · pOCS , with Mmodel := T · R · S.

I It can be as simple as an identity transformation, though.


OpenGL Coordinate Transformations: Viewing Transformation




PerspectiveDivision


OCS

DCS

WCS VCS

NDCS

CCS

CCS

I Suppose that position and orientation of a camera are specified in worldcoordinates as a frame [p, < a, b, v >], where p is the position and < a, b, v >form a coordinate system such that a points right and b points up in a planeparallel to the image plane, and v is the direction of viewing.

I The viewing transformation Mview transforms the world coordinate system suchthat p becomes the origin, b points into the y -axis and v points into the negativez-axis. (Recall that the actual OpenGL camera is not moved!)


OpenGL Coordinate Transformations: Model View Transformation




PerspectiveDivision


OCS

DCS

WCS VCS

NDCS

CCS

CCS

I Modeling transformation and viewing transformation combined are called modelview transformation.

I Older versions of OpenGL forced the user to resort to model viewtransformations.


OpenGL Coordinate Transformations: Projection Transformation




PerspectiveDivision


OCS

DCS

WCS VCS

NDCS

CCS

CCS

I The projection transformation transforms the world such that the viewing volumespecified by the camera is mapped into an axis-aligned box as a canonicalviewing volume.

I This is the earliest time that clipping can be implemented (in hardware) in acamera-independent manner.


OpenGL Coordinate Transformations: Perspective Division




PerspectiveDivision


OCS

DCS

WCS VCS

NDCS

CCS

CCS

I The perspective division maps an axis-aligned viewing box to the axis-alignedcube [−1, 1]3.

I The projection transformation and the perspective division are carried out as onefunctional unit by OpenGL, in dependence on the type of perspective.


OpenGL Coordinate Transformations: Viewport Transformation




PerspectiveDivision


OCS

DCS

WCS VCS

NDCS

CCS

CCS

I In the final viewport transformation, OpenGL uses information obtained from thegraphics window or the parameters of

glViewport(x, y, width, height);

whereI (x , y) is the location of the lower-left corner of the viewport, andI width and height are its dimensions,

to map NDC to screen coordinates (DC).I All arguments of glViewport() are specified in pixels.


Handling Transformations within OpenGL: GLM

I OpenGL (internally) uses homogeneous coordinates and 4× 4 matrices to carryout transformations.

I There are several ways to handle the math related to transformations . . .I I find it easiest to employ GLM, the OpenGL Math library.I It is a headers-only library and provides vector and matrix classes for handling

the math of (likely) all the transformations that you will need, including support forquaternions.

I Since it is based on the GLSL specifications, it ties into GLSL neatly.I Usage:

#include<glm/glm.hpp>#include<glm/gtc/matrix_transform.hpp>#include<glm/gtc/type_ptr.hpp>

I The second header file provides functions that make the computation oftransformation matrices easy.

I The third file is used for converting an GLM matrix into an array of floats (forusage by OpenGL proper).

I Make sure to get a recent version of GLM in order to avoid tons of warningsabout deprecated functions.


Handling Transformations within OpenGL: GLM Constructors

I If a single scalar parameter is given to a vector constructor, it is used to initializeall components of the vector to that value:

glm::vec4 Position = glm::vec4(glm::vec3(0.1), 1.0);

I If a single scalar parameter is given to a matrix constructor, then all diagonalelements will be set to the value, and all other elements will be set to 0.0f:

glm::mat4 Model = glm::mat4(1.0);


Sample Model Transformation

I We rotate our colored square by 45 (around the z-axis):

/* define a model - view transformation */

glm::mat4 model = glm::mat4(1.0);model = glm::rotate(model, glm::radians(45.0f),

glm::vec3(0.0f, 0.0f, 1.0f));

The first command gives us a 4× 4 unit matrix, and the second commandmultiplies this matrix by a rotation around the z-axis.

Degree vs. radiansSome versions of GLM take the angle in degrees instead of radians. We force radiansby means of #define GLM_FORCE_RADIANS and use glm::radians(degrees).



I The next step is to instruct the shader program to apply this model transformationto every vertex:

const char* uniformName;uniformName = "model";/* pass the model matrix to the shader program */

GLint uniformModel = glGetUniformLocation(shaderProgram,uniformName);

if (uniformModel == -1) fprintf(stderr, "Error: could not bind uniform %s\n",

uniformName);exit(EXIT_FAILURE);

glUniformMatrix4fv(uniformModel, 1, GL_FALSE,

glm::value_ptr(model));

The first parameter of glUniformMatrix4fv() is the handle of the matrix, thesecond parameter specifies the number of matrices, the third parameterconcerns transposing of the matrix prior to its use, and the glm::value_ptr()function in the fourth parameter converts the matrix into 16 floats.



I We do also have to modify the code for the vertex shader:

/* vertex shader with model - view matrix added */

const char* vertexShaderSource = GLSL(in vec2 position;in vec3 colorVtxIn;out vec3 colorVtxOut;uniform mat4 model;void main()

colorVtxOut = colorVtxIn;gl_Position = model * vec4(position.x, position.y,

0.0, 1.0);

);

I See transformed_quad.cc in my WWW graphics resources.




I We now make the quad spin around the origin in a continuous fashion by addingan animation matrix anim in the vertex shader and in the event-handling loop:

const char* vertexShaderSource = GLSL(in vec3 position;in vec3 colorVtxIn;uniform mat4 anim;uniform mat4 model;out vec3 colorVtxOut;void main()

colorVtxOut = colorVtxIn;gl_Position = anim * model * vec4(position, 1.0);

);



I Definition and binding of animation matrix:

/* define a transformation matrix for the animation */

glm::mat4 anim = glm::mat4(1.0f);uniformName = "anim";GLint uniformAnim = glGetUniformLocation(shaderProgram,

uniformName);glUniformMatrix4fv(uniformAnim, 1, GL_FALSE, glm::value_ptr

(anim));

I Animation matrix in the event-handling loop, prior to the actual draw command:

/* make the quad spin around */

anim = glm::rotate(anim, glm::radians(0.1f),glm::vec3(0.0f, 0.0f, 1.0f));

glUniformMatrix4fv(uniformAnim, 1, GL_FALSE,glm::value_ptr(anim));

I Of course, a suitable value for the angular increment depends on the speed ofyour GPU.

I And, of course, this is a brute-force way to keep an object spinning . . .I See spinning_quad.cc in my WWW graphics resources.



Camera and View Transformation

I We now extend the code by adding matrices for the view and projectiontransformation.

I It is easiest to use GLM’s glm::lookAt() function to position the camera:

/* define a view transformation */

glm::mat4 view = glm::lookAt(glm::vec3(0.0f, 0.0f, 2.0f),glm::vec3(0.0f, 0.0f, 0.0f),glm::vec3(0.0f, 1.0f, 0.0f));

whereI the first parameter specifies the position of the camera,I the second parameter specifies a point towards the camera is aiming, andI the third parameter specifies a vector that is pointing up.

In our case, this is a trivial view onto the xy -plane.

CaveatRe-positioning the camera causes the appropriate reverse transformation to beapplied to the model. (The OpenGL-internal camera always stays at the origin!) Thistransformation can cause parts or all of the objects to become invisible if the viewportis not changed appropriately.


Camera and View Transformation

I Of course, we do have to pass the view and projection matrices to the shader:

/* pass the view matrix to the shader program */

GLint uniformView = glGetUniformLocation(shaderProgram,"view");

glUniformMatrix4fv(uniformView, 1, GL_FALSE,glm::value_ptr(view));

/* define a currently trivial projection transformation */

glm::mat4 proj = glm::mat4(1.0f);/* pass the projection matrix to the shader program */

GLint uniformProj = glGetUniformLocation(shaderProgram,"proj");

glUniformMatrix4fv(uniformProj, 1, GL_FALSE,glm::value_ptr(proj));


Moving to 3D

I We now use the following sample setting, see mvp_quad.cc in my WWWgraphics resources:

/* quad consisting of four triangles in the plane z =1 */

float vtx[] = -0.5f, -0.5f, 1.0f, 1.0f, 0.0f, 0.0f,0.5f, -0.5f, 1.0f, 0.0f, 1.0f, 0.0f,0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 1.0f,

-0.5f, 0.5f, 1.0f, 1.0f, 1.0f, 1.0f,0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f

;/* vertex shader */

const char* vertexShaderSource = GLSL(in vec3 position; /* quad is in 3D! */

uniform mat4 model; uniform mat4 view; uniform mat4 proj;in vec3 colorVtxIn; out vec3 colorVtxOut;void main()

colorVtxOut = colorVtxIn;gl_Position = proj*view*model * vec4(position, 1.0);

);




Moving to 3D

I Of course, with a modified definition of vtx[], we also have to adaptglVertexAttribPointer() accordingly:

glVertexAttribPointer(posAttrib, 3, GL_FLOAT, GL_FALSE,6*sizeof(float), 0);

glVertexAttribPointer(colAttrib, 3, GL_FLOAT, GL_FALSE,6*sizeof(float),(void*)(3*sizeof(float)));

I We put the camera at (0, 0, 2):

glm::mat4 view = glm::lookAt(glm::vec3(0.0f, 0.0f, 2.0f),glm::vec3(0.0f, 0.0f, 0.0f),glm::vec3(0.0f, 1.0f, 0.0f));

I We will continue with discussing different ways to project our 3D scene to 2D,again using functions provided by GLM.

Multiplication orderMatrix multiplication is not commutative. Watch the multiplication order of yourmatrices!


Orthographic Projection

I The viewing volume of an orthographic projection is set up by the following GLMcommand:

glm::mat4 proj = glm::ortho(-2.0f, 2.0f, /* left / right */

-1.5f, 1.5f, /* top / bottom */

0.5f, 1.5f); /* near / far */

Camera’s View!Note that near and far are specified as seen from the camera!

xy

z

(left,bottom,-near)

(right,top,-near)

(right,top,-far) I For a camera positioned atthe origin, a point with worldcoordinates (x , y , z) isrendered if and only if

left ≤ x ≤ right,

bottom ≤ y ≤ top,

−far ≤ z ≤ − near.


Perspective Projection: Frustum

I The viewing volume of a perspective projection can be set up by the followingGLM command:

glm::mat4 proj = glm::frustum(-2.0f,2.0f, /* left / right */

-1.5f,1.5f, /* top / bottom */

0.9f,1.1f);/* near / far */

Camera’s View!Note: near and far are positive and specified as seen from the camera!

x

yz

O rightleft

bottom

top

nearfar


Perspective Projection: Field-of-View

I The viewing volume of a perspective projection can also be specified in a moreintuitive manner (with 1.3 in radians being roughly 75):

glm::mat4 proj = glm::perspective(1.3f, /* angle */

4.0f/3.0f, /* aspect */

0.9f, /* near */

1.1f); /* far */

with height = 2 · near · tan(angle/2), and aspect = width/height.I Again, near and far both are positive terms that indicate the distance from the

camera!

x

yz

O height

width

nearfar


Perspective Projection: Field-of-View

I The angle specifies the field-of-view angle in the y -direction.I The availability of the aspect ratio in glm::perspective() makes it easier to

respond adequately to a reshaping of the graphics window.I Decreasing angle without moving the objects or changing the camera position

corresponds to switching from a wide-angle lens to to a telephoto lens, i.e., tozooming in.

I Increasing angle corresponds to zooming out.I Re-positioning the camera causes the appropriate reverse transformation to be

applied to the objects. This transformation can cause parts or all of the objects tobecome invisible if near and far are not also changed appropriately.

I Recall that distortion may occur if the aspect ratios do not match!

x

yz

O height

width

nearfar


Event Handling: GLFW Callback Functions

I As virtually all other graphics APIs, OpenGL/GLFW also handle events (such asthe pressing of a mouse button or a keystroke) by means of callback functions.

I Roughly, an OpenGL program runs in a loop, polling the hardware for newevents, and calling callback functions for those events for which callbackfunctions were declared. (All other events are ignored!)

I Each callback function has to be registered. The command

glfwSetXXXCallback(myWindow, YYY);

tells OpenGL to use the function YYY() as callback function for events related toXXX.

I GLFW provides two ways to check for events:I glfwPollEvents() continually checks for events and processes events

upon receipt.I glfwWaitEvents() puts the thread that runs the OpenGL program to

sleep until at least one event has been received.I A decent OpenGL program will always offer a way to terminate it gently, e.g., by

reacting appropriately if “Q(uit)” or “ESC” was pressed by a user.I See GLFW’s documentation of input handling for more details.


http://www.glfw.org/docs/3.0/group__input.html

Event Handling: Keyboard Input

I GLFW recognizes two types of events related to keys — key events and characterevents (related to Unicode code) — but we will focus only on key events.

I The following callback function instructs OpenGL to close the window if the userhas pressed “Q”, “q” or “ESC”:

static void keyCallback(GLFWwindow* myWindow, int key,int scanCode, int action, int mod)

if (((key == GLFW_KEY_ESCAPE) || (key == GLFW_KEY_Q)) &&

(action == GLFW_PRESS))/* close window upon hitting the escape key or Q/q */

glfwSetWindowShouldClose(myWindow, GL_TRUE);

The scancode is system-specific stuff, and mod is a bit field describing whichmodified keys were held down. E.g., GLFW_MOD_SHIFT, GLFW_MOD_CONTROL.

I We register this callback function by using the following command:

glfwSetKeyCallback(myWindow, keyCallback);

I Key and button actions are GLFW_RELEASE, GLFW_PRESS and GLFW_REPEAT.(The last action means that a key was held pressed until it repeated.)


Event Handling: Mouse Input

I Whenever the mouse cursor is moved, a callback is triggered and the currentposition is passed to a callback function (if registered):

static void cursorPosCallback(GLFWwindow* window,double x_pos,double y_pos)

printf("Mouse is at (%6.1f,%6.1f)\n", x_pos, y_pos);

glfwSetCursorPosCallback(myWindow, cursorPosCallback);

I The coordinates can be converted to integers with the floor function.I One can also query the cursor coordinates directly:

double x_pos, y_pos;glfwGetCursorPos(window, &x_pos, &y_pos);

Mouse coordinates . . .. . . have their origin at the upper-left corner of the window!



I An enter/leave callback provides notification when the mouse cursor enters orleaves a window:

static void cursorEnterCallback(GLFWwindow* myWindow,int entered)

if (entered) printf("Cursor entered window!\n");else printf("Cursor left window!\n");

glfwSetCursorEnterCallback(myWindow, cursorEnterCallback);

I A scroll callback notifies about scrolling:

static void scrollCallback(GLFWwindow* myWindow,double x_off, double y_off)

printf("Scrolled by (%6.1f,%6.1f)\n", x_off, y_off);

glfwSetScrollCallback(myWindow, scrollCallback);



I A mouse button callback provides information on button presses and releases:

static void mouseButtonCallback(GLFWwindow* myWindow,int button, int action,int mods)

if ((button == GLFW_MOUSE_BUTTON_LEFT) &&

(action == GLFW_PRESS)) double x_pos, y_pos;glfwGetCursorPos(myWindow, &x_pos, &y_pos);printf("Lft mouse button pressed at (%6.1f,%6.1f)\n",

x_pos, y_pos);

glfwSetMouseButtonCallback(myWindow, mouseButtonCallback);

I See callbacks_quad.cc in my WWW graphics resources.



Loading a Texture Image

I OpenGL does not directly support the loading of textures. Rather one has toresort to third-party libraries.

I Up to version 2.0, GLFW allowed to load some types of texture files. However,this feature has been removed from GLFW 3.0.

I We resort to SOIL, the Simple OpenGL Image Library, for loading images:

/* load texture image */

GLint texWidth, texHeight;GLint channels;unsigned char* texImage = SOIL_load_image("katze.png",

&texWidth,&texHeight,&channels,SOIL_LOAD_RGB);

if (texImage == NULL) fprintf(stderr, "Image file could not be loaded\n");exit(EXIT_FAILURE);

I SOIL also offers SOIL_load_OGL_texture but this function dates back to2008 and uses features that are not supported by modern OpenGL.


http://www.lonesock.net/soil.html

Generating a Texture

I Once the image has been loaded, we can generate the texture:

GLuint textureID;glActiveTexture(GL_TEXTURE0); /* texture unit 0 */

glGenTextures(1, &textureID);glBindTexture(GL_TEXTURE_2D, textureID);glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texWidth, texHeight,

0, GL_RGB, GL_UNSIGNED_BYTE, texImage);SOIL_free_image_data(texImage);

I The function glActiveTexture() specifies which texture unit a texture objectis bound to when glBindTexture() is called. (Unit 0 is default.)

I Parameters of glTexImage2D:1. Texture target.2. Level-of-detail, with 0 being the base image. Can be used for mipmaps.3. Internal pixel format to be used by GPU.4. Width of texture image.5. Height of texture image.6. According to the specification, it should always be 0 . . .7. Format of the pixels in the image array.8. Format of the pixels in the image array.9. Image array.


Using a Texture

I Texture coordinates — denoted by s and t for a 2D texture — are, by default,normalized and range in the interval [0.0, 1.0].

I By convention, (0.0, 0.0) corresponds to the lower-left corner of the texturespace, and (1.0, 1.0) corresponds to the upper-right corner.

I The simplest approach to supplying texture coordinates is to specify them on aper-vertex basis, as we did in the case of color for our colored quad(colored_quad.cc):

float vtx[] = /* vertex coords texture */

-0.5f, -0.5f, 1.0f, 0.0f, 0.0f, /* lower - left */

0.5f, -0.5f, 1.0f, 1.0f, 0.0f, /* lower - right */

0.5f, 0.5f, 1.0f, 1.0f, 1.0f, /* upper - right */

-0.5f, 0.5f, 1.0f, 0.0f, 1.0f, /* upper - left */

0.0f, 0.0f, 1.0f, 0.5f, 0.5f /* center */

;

I Note that sharing vertices within different faces becomes problematic oncedifferent texture coordinates are supposed to be used.


Using a Texture

I Wrapping is needed for texture coordinates that are outside of the unit square.GL_CLAMP_TO_BORDER: Specified color is used outside of border.GL_CLAMP_TO_EDGE: Texture values at the border are extended.GL_REPEAT: Texture image is repeated.GL_MIRRORED_REPEAT: Texture image is repeated in mirrored fashion.GL_MIRROR_CLAMP_TO_EDGE: One repetition, then clamp to edge.

I Texture options/parameters are set by means of glTexParameter():

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S,GL_CLAMP_TO_BORDER);

GLfloat bdColor[] = 0.0f, 1.0f, 0.0f, 1.0f ;glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR,

bdColor);


Using a Texture

I It is unlikely that the resolution of the texture image will match the resolutionrequired during rendering: Filtering:GL_NEAREST: Take color information from texel closest to query point.GL_LINEAR: Interpolate the colors of the four neighboring texels.

I Filters can be specified both for maximizing and minimizing if the pixel maps toan area smaller (greater, resp.) than one texel:

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,GL_NEAREST);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER,GL_LINEAR);

I Alternatively, OpenGL can be instructed to use mipmaps. E.g.,

glGenerateMipmap(GL_TEXTURE_2D);glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,

GL_LINEAR_MIPMAP_LINEAR);


Adapting the Shaders for a Texture

I We need to adapt our shaders to deal with vertices. Vertex shader:

const char* vertexShaderSource = GLSL(in vec3 position;in vec2 textureCoordIn;uniform mat4 mvp;out vec2 textureCoordOut;void main()

textureCoordOut = vec2(textureCoordIn.x,1.0 - textureCoordIn.y);

gl_Position = mvp * vec4(position, 1.0);

);

I The inversion of the y -coordinates of the texture image is a technical twist (orhack) to deal with the problem that images tend to have their coordinate origin inthe upper-left corner . . .


Adapting the Shaders for a Texture

I Modified fragment shader:

const char* fragmentShaderSource = GLSL(in vec2 textureCoordOut;out vec4 outColor;uniform sampler2D textureData;void main()

outColor = texture(textureData, textureCoordOut);

);

I Texture uniform to be passed to shader:

uniformName = "textureData";GLint uniformTex = glGetUniformLocation(shaderProgram,

uniformName);if (uniformTex == -1)

fprintf(stderr, "Error: could not bind uniform %s\n",uniformName);

exit(EXIT_FAILURE);glUniform1i(uniformTex, 0);


Crash Course in C

I This introduction to OpenGL is targeted at using OpenGL in conjunction withGLUT within a C (or C++) program in a Unix/Linux environment. Thus, we startwith a short introduction to C.

I Save the following lines in a file named “HelloWorld.c”:

#include <stdio.h>

int main(int argc, char *argv[]) printf("Hello, world!\n");return 0;

I Compile using the command:

gcc -o HelloWorld -W -Wall HelloWorld.c


Crash Course in C: Functions

I Functions can be called from main() or from any other function.I They have to be (or should be) declared beforehand, though.

#include <stdio.h>

void PrintGreeting(void) printf("Hello, world!\n");return;

int main(int argc, char *argv[]) PrintGreeting();return 0;


Crash Course in C: Branching

I A case-statement exists in addition to the if-construct.

#include <stdio.h>

int main(int argc, char *argv[]) int i;

printf("Please enter an integer value:\n");scanf("%d", &i);if (i == 42)

printf("You entered the correct answer!\n");else

printf("You entered %d!\n", i);

return 0;


Crash Course in C: Loops

I C knows for-loops. (Note that the following code requires the math library forlinking: use -lm as a command-line parameter for gcc.)

#include <stdio.h>#include <math.h>

int main(int argc, char *argv[]) int i;double x;

for (i = 2; i < 10; ++i) x = sqrt((double) i);printf("%d^2 = %d, sqrt(%d) = %f\n", i, i * i, i, x);

return 0;



I C knows while-loops. (Note that the following code requires the math library forlinking: use -lm as a command-line parameter for gcc.)



i = 2;while (i < 10)

x = sqrt((double) i);printf("%d^2 = %d, sqrt(%d) = %f\n", i, i * i, i, x);++i;

return 0;



I C knows do-while-loops. (Note that the following code requires the math libraryfor linking: use -lm as a command-line parameter for gcc.)



i = 2;do

x = sqrt((double) i);printf("%d^2 = %d, sqrt(%d) = %f\n", i, i * i, i, x);++i;

while (i < 10);

return 0;


Crash Course in C: Pointers and Arrays

I C relies heavily on pointers, both for output parameters of functions and forconstructing arrays and more complex data structures. Pointers are powerful butdangerous!

void ComputePowers(float *powers, float *sum)

powers[0] = 4.0; powers[1] = 9.0; powers[2] = 16.0;

*sum = *powers + *(powers+1) + *(powers+2);return;

int main(int argc, char *argv[])

float powers[3], sum;

ComputePowers(powers, &sum);printf("The sum of %f and %f and %f is %f\n",

powers[0], powers[1], powers[2], sum);return 0;


Representation and ModelingPrimitive ObjectsRegions in 2DCurved Surfaces in 3DSolids in 3DMiscellaneous Modeling Schemes


Line Segments

I A line segment can be specified by its endpoints.

PSfrag replacements

y

z

a b c

u v w

x

1

I A polygonal curve (or polygonal chain) is a sequence of finitely many verticesconnected by line segments such that each segment (except for the first) starts atthe end of the previous segment.


Polygons

I A polygon is a closed polygonal curve where every vertex belongs to exactly twosegments. (We will always assume that all vertices of a polygon lie in one plane.)

simple polygonno polygon not a simple polygon

star-shaped polygon convex polygon x-monotone polygon


Circular Arcs

Circular arcs can be represented in several ways. (And none of them is universallygood!)

I Center C, start point S, end point E , orientation (CW or CCW): redundancyproblem!

E SCCW

SE

CWCC

I Center C, radius r , start angle α, end angle β, orientation: start and endunknown, potential numerical problems!

αβ

αβ

x

y

C C

SE SE


Circular Arcs

I Start point S, end point E , as : suggested by Sabin, no redundancy and

numerically reliable, but center and radius unknown (and difficult to compute)! Aline segment can be treated as a degenerate arc, but a full circle cannot berepresented.

E Sas

C

a > 0: CCWa < 0: CW

r

I Wide-spread practical problem if start point and end point coincide: full circle ordegenerate circle?


General Curves

I In addition to lines, circular arcs, and quadrics, more general types of curves areused in CAD systems.

I Well-known representatives of so-called free-form curves includeI Bézier curves,I B-splines,I NURBS.

uniform clamped cubic B-spline

I We will not discuss free-form curves in this lecture — see my lecture ongeometric modelling.


Half-Space

I The closed half-space defined by a point P in 3D and a unit vector n is given by

H(p, n) := u ∈ R3 : 〈n, u〉 − 〈n, p〉 ≤ 0.

If 〈n, u〉 − 〈n, p〉 = 0 then u ∈ ε(p, n) := u ∈ R3 : 〈n, u〉 − 〈n, p〉 = 0,〈n, u〉 − 〈n, p〉 > 0 then u in the half-space , into which n points,〈n, u〉 − 〈n, p〉 < 0 then u in the half-space , into which n does not point.

VoidMaterial

Void

Universe

Material


Sample Half-Plane in 2D

(

45

)

(

62

)

n = 1√13

(

32

)

h : 1√13

(3x+2y−22) ≤ 0


Cylinder

I An upright circular cylinder is specified by:I two points (xc , yc , zmin) and (xc , yc , zmax ) on the axis of rotation (parallel to

the z-axis),I radius r .

I Implicit representation:

(x − xc)2 + (y − yc)2 = r 2 with zmin ≤ z ≤ zmax .

I Parameterization:

(xc + r cosϕ, yc + r sinϕ, z) with ϕ ∈ [0, 2π[ and zmin ≤ z ≤ zmax .

r


Cone

I An upright frustum of a cone is specified by:I two points (xc , yc , zmin) and (xc , yc , zmax ) on the axis of rotation (parallel to

the z-axis),I radii r1 and r2.

I Parameterization:

(xc + (r1 + λ(r2 − r1)) cosϕ, yc + (r1 + λ(r2 − r1)) sinϕ, zmin + λ(zmax − zmin)),

where ϕ ∈ [0, 2π[ and 0 ≤ λ ≤ 1.

r

r1

2


Sphere

I A sphere is specified by:I center (xc , yc , zc),I radius r .


(x − xc)2 + (y − yc)2 + (z − zc)2 = r 2.

I Parameterization:

(xc + r cos δ cosϕ, yc + r cos δ sinϕ, zc + r sin δ),

with ϕ ∈ [0, 2π[, δ ∈ [−π2 ,π2 ]. z

y

x

δ

ϕ


Torus

I A torus is specified by:I a center point (xc , yc , zc) on the axis of rotation (parallel to the z-axis),I radii R and r .


(√

(x − xc)2 + (y − yc)2 − R)2 + (z − zc)2 = r 2.

I Surface blending may generate portions of the surface of a torus.


Parameterization of a Torus

I Parameterization:

((R + r cos δ) cosϕ, (R + r cos δ) sinϕ, r sin δ),

with ϕ ∈ [0, 2π[, δ ∈ [0, 2π[.

ϕ δ

y

x

R R

x

z

r


Parameterization of a Torus

m = (R cosϕ,R sinϕ, 0)

p = m + r cos δ(cosϕ, sinϕ, 0)

= (mx + r cos δ cosϕ,my + r cos δ sinϕ, 0)

q = (px , py , r sin δ)

= (R cosϕ+ r cos δ cosϕ,R sinϕ+ r cos δ sinϕ, r sin δ)

= ((R + r cos δ) cosϕ, (R + r cos δ) sinϕ, r sin δ)

x

y

R

r Q

MP

z

ϕ

δ


Quadrics: Ellipsoid

I General implicit representation of a quadric:

a11x2 + a22y2 + a33z2 + a12xy + a13xz + a23yz + a1x + a2y + a3z + b = 0.

I Implicit representation after coordinate transformation:

a11x2 + a22y2 + a33z2 + b = 0.

I Implicit representation of an ellipsoid:

x2

a2 +y2

b2 +z2

c2 = 1.

I If a = b or a = c or b = c: ellipsoid of revolution.I If a = b = c: sphere.

z

y

x

b

a

cO


Quadrics: Hyperboloid

I One-sheet hyperboloid:I Implicit representation:

x2

a2 +y2

b2 −z2

c2 − 1 = 0.

I a = b: hyperboloid of revolution.

x

y

z

a b

c

x

y

z

I Two-sheet hyperboloid:I Implicit representation:

x2

a2 +y2

b2 −z2

c2 + 1 = 0.

I If a = b: hyperboloid of revolution.c© M. Held (Univ. Salzburg) Einführung Computergraphik (WS 2016/17) 141

Quadrics: Elliptical Paraboloid


x2

a2 +y2

b2 − 2z = 0.

I a = b: paraboloid of revolution.

x

y

za b


Superellipsoids

I Implicit representation (dependent on the shape parameters e1, e2):

(|xa|2/e1 + |y

b|2/e1 )e1/e2 + |z

c|2/e2 = 1.

I Parameterization (based on the convention st := sign(s) · |s|t for s, t ∈ R):

(a cose2 δ cose1 ϕ, b cose2 δ sine1 ϕ, c sine2 δ),

with δ ∈ [−π2 ,π2 ] and ϕ ∈ [0, 2π[.

I If e1 ≤ 2 and e2 ≤ 2: convex solid.I If e1 = e2 = 2: polyhedron.


Sample Superellipsoids

a = 1.0b = 1.0c = 1.0e1 = 0.5e2 = 0.5

a = 1.0b = 1.0c = 1.5e1 = 2.0e2 = 1.0

a = 1.0b = 1.0c = 1.5e1 = 3.0e2 = 3.0

a = 1.0b = 1.0c = 1.0e1 = 3.0e2 = 2.0


Exact Representation of the Boundary

I When representing a planar region by its boundary curves the key issue is to beable to extract its interior unambiguously.

WarningDifferent interpretations of “interior” are in practical use for the regions depicted above!


Exact Representation of the Boundary

I The boundary curves of a planar region R should meet the following conditions:I all curves are simple and closed,I one of them is the “outer” boundary,I all other boundary curves (“islands” or “holes”) lie strictly in the interior

region of the outer boundary,I the island curves (and their interior regions) are pairwise disjoint,I all curves are oriented such that R lies on the same side of every curve.

I In mathematical terms, a collection of curves that meets these conditions boundsa multiply-connected region.


Bridge Edges

I We may find it convenient to transform a multiply-connected region into asimply-connected region by means of zero-width bridges.

I Note that the resulting curve is not a simple polygon in the strict meaning of ouroriginal definition!


Cell Decomposition in 2D

I A cell decomposition provides an approximate representation of a region R.I A user-defined subset of the plane (“workspace”) is overlayed with a regular grid.I Every cell is classified as full, empty, or partially full depending on whether it lies

completely in the interior or exterior of R, or whether it intersects the border of R.I The region is modeled as the union of those cells that are classified as full.I Whether or not the cells that are partially full are added to the approximate

representation depends on the application.

1 2 3 4 · · · · · · n− 1 n

1

2

3

4

...

...

n− 1

n


Cell Decomposition in 2D

I There is an obvious trade-off between modeling accuracy and memoryconsumption.

I The high memory consumption tends to be a serious problem unless a verycoarse approximation suffices: for an n × n grid, the number of cells increases bya factor of four if the resolution of the grid is doubled!

1 2 3 4 · · · · · · n− 1 n

1

2

3

4

...

...

n− 1

n


Quadtree

I Goal: Model the boundary of a region R with sufficient detail, but use larger cellswithin the interior of R.

I We subdivide the rectangular workspace recursively into four sub-rectangles bybisecting it in both x and y .

I Again, a cell is classified as full, empty, or partially full.I The recursive subdivision of cells that are partially full continues until a minimum

resolution or maximum depth of the quadtree is reached.

1 2

3

4 5

67 8

9 1011 12

1314 15 16 17 18 19

20 21 22 23 24 25


Quadtree: Construction

Input Region

3

Level 1

full empty


Quadtree: Construction

1 2

3

4 5

6 9 10

13

Level 1+2

1 2

3

4 5

67 8

9 1011 12

14 15 16 17 18 19

20 21 22 23 24 2513

Level 1+2+3

full empty


Quadtree: Tree Structure

I It is natural to store a quadtree as a tree.

1 2

3

4 5

67 8

9 1011 12

1314 15 16 17 18 19

20 21 22 23 24 25

3

tree nodeempty leaffull leaf

1 2 4 5 6 13 9 10

7 8 11 12 14 15 20 21 16 17 22 23 18 19 24 25


Quadtree: Boolean Operations

S T

Union(S,T)Int(S,T)


Quadtree for Curved Data

I It is natural to extend quadtree representations to regions with curvedboundaries.

WarningA recursive quadtree decomposition will, in general, never terminate unless aminimum cell size is specified.


Quadtree: Pros and Cons

Pros: I Standard advantages of hierarchical modeling, such as a fast testfor disjointness.

I Boolean operations are easy to compute (provided that thequadtrees are aligned).

I Point-in-region test is straightforward.

Cons: I The representation is coordinate-dependent and not invariantunder transformations!

I The representation is only approximate, and memory maybecome an issue.

I A suitable approximation accuracy may be hard to predict.I Graphical “zooming in” is only supported until the representation

accuracy is reached.I Neighbor finding is tricky.


Ruled Surface

I Consider two curves C1, C2 : [α, β]→ R3, for α, β ∈ R with α ≤ β.I The ruled surface (Dt.: Regelfläche) S : [α, β]× [0, 1]→ R3 defined by C1, C2 is

given by the linear interpolation of C1 and C2:

S(s, t) := (1− t)C1(s) + tC2(s) with s ∈ [α, β], t ∈ [0, 1].

I Note that S may be curved even if C1, C2 are line segments!

C1

C2


Ruled Surface

I Example:

C1(s) :=

001

+ s

100

, C2(s) :=

011

+ s

100

, with s ∈ [0, 1].

I We get the ruled surface S : [0, 1]× [0, 1]→ R3

S(s, t) = (1− t)

001

+ s

100

+ t

011

+ s

100

=

001

+ s

100

+ t

010

,i.e., the “top” of the unit cube.


Surface of Revolution

I Consider the 3D curve C(s) :=

C1(s)0C2(s)

parameterized by C1, C2 : [α, β]→ R.

I Obviously, C is constrained to the xz-plane of R3.I A rotation of C about the z-axis yields the surface of revolution (Dt.:

Rotationsfläche)

S(s, ϕ) :=

C1(s) · cosϕC1(s) · sinϕC2(s)

, where s ∈ [α, β], ϕ ∈ [0, 2π[.

I Properties:I Every point of C which does not lie on the z-axis creates a circle in a plane

parallel to the xy -plane;I A line segment which is parallel to the xy -plane creates a disk or circular

annulus;I A line segment which is parallel to the z-axis creates a cylinder;I Any other line segment creates a cone;I A circular arc that is part of C creates a portion of a torus.


Surface of Revolution

I For s ∈ [−π2 ,π2 ], let C1(s) := cos s and C2(s) := sin s.

I This yields

S(s, ϕ) =

cos s · cosϕcos s · sinϕ

sin s

with ϕ ∈ [0, 2π] and s ∈ [−π2,π

2]

as surface of revolution, i.e., the surface of the unit sphere.


General Surfaces

I In addition to quadratic surfaces, ruled surfaces, or surfaces of revolution, moregeneral types of surfaces are used in CAD systems.

I Well-known representatives of so-called free-form surfaces includeI Bézier surfaces,I B-splines and T-splines,I NURBS.

I We will not discuss free-form surfaces in this lecture — see my lecture ongeometric modeling.


Wire-frame Model

I Wire-frame models “represent” solids by specifying the set of edges of the solid.I Outdated nowadays — mentioned for historical reasons only!


Spatial Decomposition

I Divide the space into cells, aka voxels.I Often, the collection of cells forms a regular grid.I Represent all cells lying in the object.I Popular representation in volume rendering.I High storage requirement.I Similar pros and cons as in 2D.


Octree

I Hierarchical representation.I Requires much less space than a standard spatial decomposition.I Extension of 2D quadtree.I Each cube is divided into eight octants.

PSfrag replacements

2 36 2 3

6 7

66 7 7

3 3

4 5 51

4 55

1

y

z

x

1

I Useful for many operations, e.g., collision detection, ray tracing.I Similar pros and cons as quadtrees.


CSG

I Constructive Solid Geometry (CSG) combines simple solids — so-calledprimitives — by using Boolean operations.

∪ ∩ \

∪

\


CSG Tree

I CSG models are commonly used to describe man-made shapes.I Sample primitives include

I half-space,I sphere,I cylinder,I cone,I pyramid,I cube,I box,I ellipsoid.

I A CSG object is stored as a tree with operators at interior nodes, and theprimitives at the leaves.

I Every interior node stores the position and orientation of its children, and theBoolean operation to be applied to them.

I Edges of the tree are ordered.


CSG and Boolean Set Operations

I CSG combines solid objects by using three or sometimes four different Booleanoperations:Union: Create a new solid that is the union of two solids; denoted by ∪ or

+.Intersection: Create a new solid that is the intersection of two solids; denoted

by ∩ or ?.Difference: Create a solid by subtracting one solid from another solid;

denoted by \ or −.Complement: Create a new solid by subtracting a solid from the universe.

I In theory, the set-theoretic difference can be replaced by a complement andintersection operation.

I In practice, the difference is often more intuitive as it corresponds to removing asolid volume.


CSG Representation Caveats

Not commutativeBoolean operations are not commutative!

Not uniqueA CSG representation is not unique.


Problems of Standard Boolean Operations

I Boolean operations may create dangling faces or edges, or result inlower-dimensional “solids”.

I Possible types of intersection of two solids:

PlaneSolid Line

Point Empty Set


Regularized Boolean Operations

I To eliminate those lower-dimensional sets, the Boolean set operations areregularized:

1. Compute the interior of the solids. This yields objects without theirboundaries.

2. Apply the standard Boolean set operation.3. Compute the closure of the resulting object. This will add back the boundary.

I More formally, let ∪,∩, \ be the standard Boolean operations. We define theirregularized counterparts ∪∗,∩∗, \∗ as follows:

I A ∪∗ B := int(A) ∪ int(B),I A ∩∗ B := int(A) ∩ int(B),I A \∗ B := int(A) \ int(B).


Pros and Cons of CSG

Pros: I A CSG tree mimics the design and construction process.I Boolean operations are trivial for CSG objects.

Cons: I The surface of a CSG object is not readily available.I Rendering a CSG objects is difficult unless (massively parallel)

ray tracing is used.I CSG trees are not unique: same-object detection and null-object

detection are difficult.I Support for free-form surfaces requires complicated mathematics.


Boundary Representation

I Describes a solid in a graph-like structure in terms of its surface boundaries:vertices, edges, faces.

I Common abbreviation: b-rep.I It is imperative to model the full set of topological and numerical properties.

Solid

PSfrag replacements

f1

f1 f2 f3 f4

v1v1 v2

v2

v3

v3

v4

v4

e1

e1

e2

e2

e3e3

e4

e4

e4

e5e5

e6

e6

x1

y1

z1

x2

y2

z2

x3

y3

z3

x4

y4

z4


Boundary Representation

I If curved faces are involved then the supporting surfaces of the faces have to bestored, too. Similarly for the edges of a b-rep model.

I Most b-rep modelers support only solids whose boundaries are 2-manifolds.I So-called Euler operators can be used to guarantee that b-rep modeling

produces 2-manifolds.I Boolean operations require sophisticated mathematical tools in order to

represent the resulting object as a (valid) b-rep model.

I In practice, dual and hybrid representation schemes are often used in order to beable to benefit from the advantages of the individual schemes.


Polyhedra

I A polyhedron is bounded by a set of polygonal faces, where each edge isadjacent to an even number of faces.

I Faces do not intersect except in common edges.I In order to guarantee a 2-manifold surface, every edge has to be shared by

exactly two faces.I All faces are required to be planar.

Deficiences of polyhedral modelsBe warned that (freely available) polyhedral models that are used purely for renderingpurposes tend to be of extremely low quality, and may violate our rules drastically!


Polyhedra of Genus 0 and Euler’s Formula

I Polyhedron of genus 0: Can be deformed to a ball; no holes.I Examples: Cube, tetrahedron, pyramid.I Torus is not a genus-0 polyhedron.

I Euler’s formula for genus-0 polyhedra: V − E + F = 2.

V = 8

E = 12

F = 6

V = 5

E = 8

F = 5

V = 6

E = 12

F = 8

1

I The validity of Euler’s formula is necessary but not sufficient for a polyhedron tobe of genus 0.


Polyhedra of Higher Genus

I Euler’s formula generalizes to polyhedra of higher genus with 2-manifoldboundaries:

V − E + F − H = 2(C −G),

whereI H: #(holes in 2D faces),I G: #(holes passing through the polyhedron), i.e., the genus of the

polyhedron,I C : #(connected components).

PSfrag

24 36 15 3 1 1

1

V − E + F −H = 2(C −G)


Winged-Edge Representation

I Common way to represent 2-manifold polyhedra of genus 0.I Each edge e stores

I Two faces f1, f2 adjacent to e,I Two endpoints v1, v2 of e,I Two edges incident to v1 immediately before and after e in clockwise

direction,I Two edges incident to v2 immediately before and after e in clockwise

direction.

PSfrag replacements

f1 f2

v1

v2

e1

e2 e3

e4 e5

I Each vertex v stores a pointer to one of the edges incident to v .I Each face f stores a pointer to one of the edges bounding f .


Particle Systems

I Points (aka “particles”) that follow laws of physics are used to model an object.I Sample phenomena generated by particle systems:

I Smoke, fire, fog;I Deformable objects: clothes, elastic objects, rope;I Waves, turbulent air flow, storm.

I Independent particles: Position of a particle does not depend on others, e.g.,particles under gravity. A time step for an n-particle simulation requires Θ(n) time.

I Interactive particles: Position of a particle depends on the others; particles are“linked”. Each time step requires Θ(n2) time.

I In practice the dynamics of aparticle do often depend on itsneighbors, e.g., clothing simulation,ropes, stars.

I Spring forces can be used to modelthe interaction of adjacent particles.

pi,j

pi,j+1

pi,j−1

pi+1,j

pi−1,j


Fractal Models

I The term “fractal” is used for self-similar objects.I Sample fractals: Mandelbrot and Julia sets.

I When constructed by an algorithm, we repeat the same construction schemerecursively.

I E.g., Koch Curve.


Fractal Models

I Fractals are used to model mountains, rocks, trees, coast-lines, etc.I Fractal dimension: We use the formula

d =log nlog s

to calculate the fractal dimension d , where n is the number of small pieces thatgo into the larger one, and s is the scale at which the smaller pieces compare tothe larger one.

I A line in the Koch Curve breaks up into four smaller pieces, which are three timesas short as the original. This yields d = 1.2619. . . as the fractal dimension of theKoch Curve.


Fractals: Modeling Peaks

I Fournier, Fussel and Carpenter [1982] first used recursive subdivision to modelpeaks.

PSfrag replacements

y

0(a)

1 x

y

0(b)

1 x

y

0(c)

1 x

1

! !

"#

$%

&'()

*+


Grammar Models

I Generalization of fractals.I Sample grammar with alphabet A,B, [, ], (, ), where A is a vertical segment, B

is a horizontal segment, (, ) models a right branch, [, ] models a left branch, andrules

I A→ AA,I B → A[B]AA[B],I B → A[B]AA(B).

I Sample grammar model relative to those rules, where only the left branch isused:

1. B,2. A[B]AA[B],3. AA[A[B]AA[B]]AAAA[A[B]AA[B]].

PSfrag replacements

B

BAA

BA

B

A A

B

A

AA

AAAAA

B BAA

1


Grammar Models

I Another sample grammar model: Both left and right branches, where B models adiagonal segment.

1. B,2. A[B]AA(B),3. AA[A[B]AA(B)]AAAA(A[B]AA(B)).

PSfrag replacements

B

B

AA

BA

BB AAA

AAAA

BA

AB

AAA

1


Raster GraphicsLight and ColorColor ModelsScan Conversion


The Physical Nature of Light

CaveatThe following slides present a simplified view of the physical nature of light. Consult aphysics textbook for an in-depth coverage of these topics!

I Light is electromagnetic energy that is visible to humans.I According to physicists, light exhibits a wave-particle duality.

I The wave model: makes an analogy comparing light to water waves.I The particle model: light is made up of many little particles.

I Neither model is really complete or correct.I Under some circumstances light behaves like a wave.I Under other circumstances light behaves like a particle.

I The particle model alone can go a long way towards understanding andexplaining light, though.

I The basic particle of light is called a photon: We can see it as an object thatmoves along a straight line and vibrates during its move.

I This vibration is a kind of mathematical abstraction.I It is useful since much of the mathematics that describe vibrations seem to work

in describing the behavior of light.



I With every photon we can associate a particular frequency f of vibration.I The frequency is measured in Hertz (Hz).I Visible frequencies are within 4.3× 1014 − 7.5× 1014Hz.

I An alternate way to characterize the vibration of a photon is to consider itswavelength λ.

I The wavelength is measured in meters, or nanometers (with 1nm = 10−9m).I Visible wavelengths lie in the 400− 740nm range, or, at best, within

380− 780nm.I Long wavelengths are perceived as reds and short wavelengths are

perceived as blues.

360 380 400 420 440 460 480 500 520 540 560 580 600 620 640 660 680 700 720 740 760 780 800



I Wavelength and frequency are closely related:

λ · f = c,

where c = 299 792 458ms−1 is the speed of light traveling in vacuum.I The energy, E , of a photon is directly related to its frequency (Planck-Einstein

relation):

E = hf ,

where h ≈ 6.63× 10−34Js is Planck’s constant (Dt.: PlanckschesWirkungsquantum); energy is measured in Joule (J).

360 380 400 420 440 460 480 500 520 540 560 580 600 620 640 660 680 700 720 740 760 780 800


Color and Spectra

I Have you ever seen awhite band in a rainbow?

I Likely not. White is not apure spectral color : Nosingle photon can giveus the impression ofwhite light.

I A prism can be used toshow that white light isreally a mixture ofdifferent spectral colors.

red

sunlight

glass prism

orangeyellowgreenblueindigoviolet

Wavelength is import!Reflection and refraction of light depend on the wavelength!

I White light:I photons of many different spectral colorsI strike the same region of our eyeI nearly simultaneously.


Color and Spectra

I How can we characterize different amounts of photons at different wavelengths?I We could

I set up a measuring instrument,I count the average number of photons,I at each visible wavelength,I over some period of time,I and then plot the results.

I Such an intensity versus wavelength plot is often called a frequency spectrumplot, which is often abbreviated simply as spectrum.

I Hence, one way to describe color is to attach a spectrum with each light ray,describing the light traveling along that ray.

I Except for a few cases, such as fluorescent light that has spikes, the spectrum(regarded as a function of wavelength) tends to be smooth.


Color and the Eye: Rods and Cones

I Human vision relies on light sensitive cells (“sensors”) in the retina of the eye:rods and cones.Rods (Dt.: Stäbchen) are cells which can work at low intensity, but cannot

handle color.Cones (Dt.: Zäpfchen) are cells which can handle color, but require brighter

light to function.I Cones are concentrated near the fovea (Dt.: Sehgrube) of the retina (Dt.:

Netzhaut).I Many more rods (≈ 120M) than cones (≈ 6M).


Color and the Eye: Trichromatic Theory

I First proposed by Thomas Young (1801), refined by Hermann von Helmholtz(1861).

I The standard assumption is that the retina has three different types of cones,with peak sensitivity to

I yellow – the peak response is around 580nm, most commonly but notcorrectly also referenced as red;

I green – the peak response is around 545nm; andI blue – the peak response is around 440nm.

I Every single wavelength triggers all three kinds of cones, but by differentamounts.

I The trichromatic theory helps to explain color blindness:I Protanope (red blindness),I Deuteranope (green blindness),I Tritanope (blue blindness, very rare).


Color and the Eye

B

GR

400 480 560 6400

.20

.18

.16

.14

.12

.10

.08

.06

.04

.02

400 500 600 700

100

80

60

40

20

0

Left: Spectral-response functions of each of the three types of cones on the humanretina, describing the fraction of light absorbed by each cone with respect towavelength.Right: Luminous-efficiency function for the human eye, describing the relativesensitivity of the eye with respect to wavelength.


Color and the Eye

I We have a peak sensitivity to yellow-green light of wavelengths around 550nm:I About two thirds of the cones are sensitive to yellow.I Almost one third is sensitive to green.I Only a few percent have a sensitivity to blue.

400 500 600 700

100

80

60

40

20

0

I Thus, the eye’s response to blue light is much weaker than its response to yellowor green.


Human Color Perception

I The human eye can distinguish about 350 000 different colors in color space:I about 128 different hues,I for each hue around 20-30 different saturations, depending on the hue,I 60–100 different brightness levels.

I When colors differ only in hue, the difference in wavelength, between justnoticeably different colors varies from more than 10nm at the extremes of thespectrum to less than 2nm around 480nm (blue) and 580nm (yellow).

400 500 600

Wavelength

700

2468

10121416

∆(λ)


Optical Illusions

I The human visual system is very susceptible to optical illusions!I Humans are not particularly good at judging absolute quantities, such as angles

or areas. E.g., we tend to overestimate small angles and underestimate largeangles.

I Subjective contours: Our visualsystem fills in the missing portions ofthe edges in order to allow us to seetriangles (“Kanizsa triangles”).

I Müller-Lyer Illusion: The horizontalline segments are of the same length!


Optical Illusions

I Colors and shapes can fool humans easily.

I Ebbinghaus Illusion: The two innercircles are of the same size!

I Simultaneous contrast: the two innersquares are colored equally!


Optical Illusions

I Checker shadow illusion (Adelson 1995): The two cells labelled A and B are ofexactly the same color. (E.g., a color picker returns the hex value 787878, or 47%each of red, green and blue.)

[Image credit: Wikipedia]


Optical Illusions

I Ambiguous garage roof illusion (Sugihara 2015): The garage roof is neitherround nor corrugate. The illusion exploits the fact that a single image does notconvey depth information, and that the human brain prefers to take the silhouettecurve of the roof as the intersection of the roof with a plane normal to the obviousaxis of the roof.

[Image credit: K. Sugihara]

I More information (plus a video) onhttp://home.mims.meiji.ac.jp/~sugihara/.


http://home.mims.meiji.ac.jp/~sugihara/

http://home.mims.meiji.ac.jp/~sugihara/

Light and Color: Recommendations

I As blue gives only poor contrast, it is not appropriate for text, fine lines, or smallobjects.

I Neighboring colors should vary in more than their value of blue.I Red or green should be avoided on the boundary of large displays.I Associated objects should be shown on the same background.I Similar colors should signal similar meaning: consistency is vital!I Keep in mind that the meaning of a color may be dependent on the cultural or

national background of the user.I Too many colors with different meanings demand too much from the human

perception. The magic number of objects recognized at a single glance: 5± 2.I Kiss – keep the color scheme simple! The magic number for short-term memory

of colors is 7± 2.

Unfortunately . . .. . . it is more difficult to use color effectively than to use it ineffectively.


Primary Colors

I It is natural to attempt to model colors as a “mixture” of a small number ofprimary colors.

I There are two basic ways of mixing color: one is additive, by combining emittedlight of different colors, while the other is subtractive, by preventing certainportions of white light from being reflected.

I Additive representation: Starting from black, create colors by adding differentamounts of the primaries. E.g., adding red and blue generates magenta.

I Subtractive representation: Starting from white, create colors by subtractingportions of white. E.g., magenta dye blocks green from being reflected.


Perceptual Color Matching: CIE-XYZ

I Long before the advent of computers, the need for a succinct specification ofprimaries became apparent.

I In 1931, CIE (Commission Internationale de l’Eclairage) defined a “standardobserver”:

I Roughly, a standard observer is a small group of 15–20 individuals. It issupposed to be representative of normal human color vision.

I The observer viewed a split screen with (close to) 100% reflectance.I On one half, a test lamp casts a pure spectral color on the screen.I On the other half, three lamps emitting varying amounts of red, green, and

blue light attempted to match the spectral light of the test lamp.I The observer determined when the two halves of the split screen were

identical, thus defining the tristimulus values for each distinct spectral color.I It was realized that a linear combination (with non-negative coefficients) of the

red, green and blue primary lamps could not reproduce all spectral light.I Since negative coefficients were considered inadequate, CIE defined three

(artificial) additive primaries and a corresponding color model, CIE-XYZ , in 1931.I The CIE color model was developed to be completely independent of any means

of emission or reproduction and is based as closely as possible on how humansperceive color.

I In 1960, CIE-XYZ model was modified, and again revised in 1976 to becomeCIE-1976-L*a*b and CIE-1976-L*u*v, in an attempt to linearize the perceptibilityof color differences. (The basic principles remained the same, though.)


CIE Chromaticity Diagram

I Every visible color (and some invisible ones, too) can be expressed as acombination of the CIE primaries: α · X + β · Y + γ · Z .

I This defines a 3D linear color space with respect to X ,Y and Z .I It is common to project this space onto the plane X + Y + Z = 1.I The coordinates of this projected 2D plane are usually called x and y , where

x =X

X + Y + Zand y =

YX + Y + Z

and z = 1− x − y =Z

X + Y + Z.

I The resulting diagram is known as chromaticity diagram.I Note that this diagram captures only color but not luminance of the light source.


CIE Chromaticity Diagram

I Spectral colors are on theboundary of the “horseshoe”.

I The line joining violet andred, the purple line, is notpart of the spectrum.

I White is near the middle.(CIE D6500 is at position(0.313,0.329).)

I Any color that results fromadditive mixing of two colorsand will lie on the linesegment joining these twocolors.

I Any color that results fromadditive mixing of threecolors will lie in the triangleconnecting these threecolors.

780620

610600

590

580

570

560

550540

530520

510

500

490

480

470460 380

0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0

x

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

1.0y

white

green

cyan

yellow

blue

violet

purple

pink

orange

red


RGB Color Model

I The RGB color space is given by the unit cube, where the primaries red (R),green (G), and blue (B) correspond to the coordinate axes.

I In this system, (0, 0, 0) corresponds to black and (1, 1, 1) is white.

Red = (1,0,0)

Yellow = (1,1,0)

Green = (0,1,0)

Cyan = (0,1,1)

Blue = (0,0,1)

Magenta = (1,0,1)

Black = (0,0,0)

White = (1,1,1)


RGB Color Model

I The RGB model is the most widely used color model for specifying the color of apixel on a monitor.

I Its practical importance is derived from the fact that triads of three phosphor dotsor LCD/LED cells – with colors red, green, and blue – are used to produce a colorin an additive way on a standard monitor.

I Although the arithmetic interpolation between two RGB triples is geometricallylinear, such an interpolation need not be linear perceptually: An incrementalchange of an RGB triple may produce no perceivable difference in one part of theRGB cube, while it may create visually different colors in some other part of thecube.

I Always bear in your mind that the class of all colors that can be displayed on amonitor is a subset of the colors perceivable by humans.

I Recall that an RGB image may look different on different monitors.


CMYK for Color Printing

I When a white surface is coated with cyan ink, no red light is reflected: Cyansubtracts red from the reflected white light.

I CMY color model: The inks used in color printing are cyan (light blue), magenta(purple), and yellow.

I To maintain black color purity, and to speed-up the drying process, a separateblack ink is used rather than to rely on cyan, magenta, and yellow to generateblack: CMYK.

Dye Color Absorbs Color Reflects ColorsCyan (C) Red Blue and Green

Magenta (M) Green Blue and RedYellow (Y) Blue Green and RedBlack (K) All None

I As the RGB model, the CMY model can be regarded as a unit cube, where(0, 0, 0) corresponds to white and (1, 1, 1) is black.


RGB-to-CMYK Conversion

I Given intensity values R,G,B, where each value is between 0 and 1, we canconvert to CMY using the following masking equations:

C = 1− R and M = 1−G and Y = 1− B.

I This is approximate: It assumes that the printed cyan is equal to white minus thered of the monitor, and this is rarely the case.

I Adding black (K) as an additional color further complicates the matter.I Typically, a color printer cannot print all colors a computer monitor can display,

and a computer monitor cannot display all colors a color printer can!I E.g., pure green or pure blue is outside of the gamut of printers.I Consequently, the same image displayed on a computer monitor may not match

to that printed in a publication.I Color shifts may occur when the RGB-to-CMYK conversion takes place.I Nevertheless, this “four-color process” or “full-color” printing generates the vast

majority of magazines and marketing publications.I High-fidelity conversions from RGB to CMYK currently require careful tweaking to

compress and stretch the RGB gamut of a particular image so that it fits into theavailable CMYK gamut.

I This is an area of active research!


Color Gamut

I The color gamuts of films, monitors and color printers form (fairly small) subsetsof the chromaticity diagram: gamut mapping may be required! (Note thathardware vendors sometimes prefer to claim larger/different gamuts!)

780620

610600

590

580

570

560

550540

530520

510

500

490

480

470460 380

0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0

x

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

1.0y

Adobe-RGB (1998)

sRGB

CMYK (DIN 16539)


Other Color Models

I The CIE color diagram is a scientific formalism, but it does not provide a naturaluser interface for specifying colors.

I RGB and CMY(K) are great from a technical point of view, but both are equallybad from an artist’s perspective.

I Several other color models have been developed:I HSV: Hue, Saturation, Value.I HLS: Hue, Lightness, Saturation.


Hue, Saturation, Value

I The HSV dates back to a color notation proposed by Munsell in 1905:I Hue: “It is that quality by which we distinguish one color from another, as red

from yellow”. It is given by the dominant wavelength of the light in that color.I Saturation: “The degree of departure of a color sensation from that of white

or gray”. It models the purity of the color.I Value: “It is that quality by which we distinguish a light color from a dark

one”. It models the brightness (i.e., amount of energy) of the light.

Red0

YellowGreen120

Cyan

Blue240

Magenta

SH

V

o

o

o

Black


HSV Pyramid

I Hue is measured from 0 to 360 degrees counter-clockwise, with red at 0.I Saturation is the distance away from the center line; decreasing S corresponds to

adding white.I Value is the vertical distance above black; decreasing V corresponds to adding

black.I The spectral colors are given by V = S = 1 and arbitrary H.

Red0

YellowGreen120

Cyan

Blue240

Magenta

SH

V

o

o

o

Black


HSV-to-RGB Conversion

I A hexagonal cross-section of the HSV pyramid can be regarded as a sub-cube ofthe RGB cube projected onto a plane that is normal to its main diagonal.

I This establishes a one-to-one mapping between RGB and HSV.I Thus, the arithmetic interpolation between two HSV triples is neither

geometrically linear nor perceptually linear.

Red Yellow

Green

CyanBlue

Magenta


Hue, Lightness, Saturation

I Developed at Tektronix, the HLS model is very similar to HSV.I It accounts for the fact that as light gets too bright or too dark, the range of

perceivable colors narrows to only white or only black.

Red0

YellowGreen120

Cyan

Blue240

Magenta

SH

L

o

o

o

Black


Raster Devices

I The most common graphics output device is the raster display.I An image is generated by a 2D array of small dots or squares: pixels (shorthand

for “picture elements”).I Every pixel can be set individually; a typical (API) command might be

I SetPixel(x ,y ,color )where x and y are pixel coordinates.

I Depending on the number of different color and intensity values of every pixel wedistinguish among the following displays.

I Monochrome display:Each pixel can either be on or off. Can only display one color.Typical device: laser printer.

I Grey-scale display:Each pixel can have one of n possible brightness values (“intensities”).

I Color display:Each pixel can have one of 2k possible colors (if k bits per pixel are used).Each pixel is composed of a cluster of single-color pixels that fool the eye.Typical device: color monitor.


Different Device Coordinate Systems

I Unfortunately not all systems adopt the same pixel addressing conventions:some systems have the origin at the upper-left corner, some have it at thelower-left corner.

100x

50

y

y

50

100x

1

WarningX11 has its coordinate origin in the upper-left corner, while OpenGL coordinates havetheir origin in the lower-left corner!


Drawing a Line

I We will always assume that the end-points of a straight-line segment L are givenin integer coordinates relative to the resolution of the output device.

I Which pixels should be turned on?I Pixels should be as close to L as possible!

L


Specifying the Desired Output

I The general goal isI to minimize the stair-case effect (“jaggies”) due to the replacement of a

continuum of width zero by a discrete set of pixels of non-zero area,I to have a uniform line density,I to make sure that a line drawn is independent of whether we draw it from P1

to P2 or from P2 to P1,I to cast the conversion into an algorithm that is fast.

I The following two specifications are widely used:I The set of pixels whose centers are covered by a parallelogram of width 1

centered on the line.I The shortest sequence of eight-connected pixels that most closely

approximate the line.I The simple fact that a continuum is replaced by a discrete set of pixels is the

source of many serious problems in graphics that are known as aliasingproblems!


Specifying the Desired Output

Parallelogram Coverage: Select pixels within strip of width 1.

Eight-Connectedness: Used by Bresenham’s algorithm.


Brute-Force Scan Conversion

I Consider a line segment between(

x1

y1

)and

(x2

y2

), where x1, y1, x2, y2 ∈ N,

and x1 ≤ x2 and y1 ≤ y2.I The equation of the line is given by

y = s · x + c,

where

s =y2 − y1

x2 − x1and c =

y1 · x2 − y2 · x1

x2 − x1.

I We get a simple scan-conversion algorithm by incrementing x , computing thecorresponding y , and rounding it to the nearest integer value.


Brute-Force Scan Conversion

Algorithm Brute-Force Scan ConversionInput: P1,P2: point(∗ P1 = (x1, y1),P2 = (x2, y2) ∗)1. var s, c: real;2. var x , y : integer;3. s ← (y2 − y1)/(x2 − x1);4. c ← (y1 · x2 − y2 · x1)/(x2 − x1);5. for x ← x1 to x2 do6. y ← bs · x + cc;7. SetPixel(x , y);

I The rounding operation b c is expensive.I The algorithm involves floating-point arithmetic.I In any case, this simple algorithm will not work particularly well . . .


Handling Different Inclinations

I We need a different algorithm depending on whether the change in y is biggerthan the change in x .


Bresenham’s Algorithm for Drawing a Line

I Developed in the early 1960s to control the pen movements of plotters.I Be warned that several improvements to Bresenham’s original algorithm have

been proposed since its invention. So, by now, dozens of slightly differentscan-conversion algorithms are denoted as “Bresenham’s Algorithm”.

I The following description is limited to line segments that lie in the first octant, i.e.

y = s · x + c where 0 ≤ s ≤ 1.

I Let ∆x := x2 − x1 and ∆y := y2 − y1, where x1, x2, y1, y2 ∈ N, and x1 ≤ x2 andy1 ≤ y2. Furthermore, ∆y ≤ ∆x .

I We will draw the segment from left to right.I Assume that pixel (xi , yi ) has been set. Which pixel is next? The pixel (xi + 1, yi )

or the pixel (xi + 1, yi + 1)?I Remember that we seek an eight-connected set of pixels. Thus, (xi , yi + 1) is no

option once (xi , yi ) was drawn.


Basic Idea of a Midpoint Algorithm

previouspixel

choices

pixelcurrentfor

pixelnextforchoices

E

NE

M

E

M

NE

E

NE

M


The Mathematics of Bresenham’s Line Algorithm

I In implicit form we get

F (x , y) := x ∆y − y ∆x + c ∆x

for the equation of the line through(

x1

y1

)and

(x2

y2

), where

F (x , y)

<=>

0 ⇔

(x , y) above line,(x , y) on line,(x , y) below line.

I Bresenham’s Algorithm always increments x . Whether or not y is incrementeddepends on the position of the midpoint relative to the line.

ei := F (xi + 1, yi +12

)

< 0 : xi+1 := xi + 1, yi+1 := yi (E),≥ 0 : xi+1 := xi + 1, yi+1 := yi + 1 (NE).



I Goal: derive the error variable ei+1 directly from the last error variable ei .I Case (E):

ei+1 = F (xi + 2︸︷︷︸xi+1+1

, yi +12︸︷︷︸

yi+1+12

) = xi ∆y + ∆y + ∆y − yi ∆x − 12 ∆x + c ∆x

= F (xi + 1, yi + 12 ) + ∆y = ei + ∆y .

I Case (NE):

ei+1 = F (xi + 2︸︷︷︸xi+1+1

, yi +32︸︷︷︸

yi+1+12

) = xi ∆y + ∆y + ∆y − yi ∆x − 12 ∆x −∆x + c ∆x

= F (xi + 1, yi + 12 ) + ∆y −∆x = ei + ∆y −∆x .



I The first error variable e1 is initialized as

e1 := F (x1 + 1, y1 + 12 ) = x1 ∆y + ∆y − y1 ∆x − 1

2 ∆x + c ∆x

= F (x1, y1)︸︷︷︸=0

+∆y − 12 ∆x = ∆y − 1

2 ∆x .

I For the purposes of Bresenham’s algorithm we may replace F (x , y) by 2F (x , y),thus eliminating the division by 2:

e1 = 2∆y −∆x ,

ei+1 :=

ei + 2∆y if (E),ei + 2∆y − 2∆x if (NE).


Bresenham’s Line Algorithm

Algorithm BresenhamInput: P1,P2: point(∗ P1 = (x1, y1),P2 = (x2, y2) ∗)1. var x , y ,∆x ,∆y , error , c1, c2 :integer;2. ∆x ← x2 − x1; ∆y ← y2 − y1;3. x ← x1; y ← y1;4. c1 ← 2 ·∆y ; error ← c1 −∆x ; c2 ← error −∆x ;5. repeat6. SetPixel(x , y);7. inc(x);8. if error < 0 then (∗ (E) ∗)9. error ← error + c1;10. else (∗ (NE) ∗)11. inc(y);12. error ← error + c2;13. until x > x2;


Drawing a Circle

I The standard parameterization of a circle with radius r centered at the origin isgiven by

x(ϕ) = r cosϕ and y(ϕ) = r sinϕ,

with 0 ≤ ϕ < 2π.I Discretization based on ϕi := i · 2π

n for 0 ≤ i ≤ n − 1 yields

xi+1 := x(ϕi+1) = x(ϕi + δ) = r(cosϕi cos δ−sinϕi sin δ) = xi cos δ−yi sin δ,

yi+1 := y(ϕi+1) = y(ϕi +δ) = r(sinϕi cos δ+ cosϕi sin δ) = xi sin δ+ yi cos δ,

where

δ :=2πn

and x0 := r and y0 := 0.

I A brute-force scan-conversion algorithm for circular arcs and ellipses is easilyderived from these equations.


Bresenham’s Algorithm for Drawing a Circle

I We consider the second octant of circles with integer radius centered at theorigin.

I The circular arc is drawn from 90o to 45o!I Use symmetry to draw the other portions of the circle.

PSfrag replacements

(x,y)(−x,y)

(−x,−y) (x,−y)

(y,x)

(y,−x)

(−y,x)

(−y,−x)

45o


The Mathematics of Bresenham’s Circle Algorithm

I We have

F (x , y) := x2 + y2 − r 2

> 0= 0< 0

⇔

(x , y) outside the circle,(x , y) on the circle,(x , y) inside the circle.

I Once again, we use the idea of a midpoint algorithm.I If the midpoint lies inside the circle then (E) else (SE).

previous currentchoice

pixel

pixelfor

nextpixel

E

M

SE



I The error variable is defined as

ei := F (xi + 1, yi −12

) = (xi + 1)2 + (yi −12

)2 − r 2.

I Furthermore,

ei

< 0 : xi+1 := xi + 1, yi+1 := yi (E),≥ 0 : xi+1 := xi + 1, yi+1 := yi − 1 (SE).

I We get

(E): ei+1 = F (xi + 2, yi − 12 ) = (xi + 2)2 + (yi − 1

2 )2 − r 2

= F (xi + 1, yi − 12 ) + 3 + 2xi = ei + 2xi + 3

= ei + 2xi+1 + 1.

(SE): ei+1 = F (xi + 2, yi − 32 ) = . . . = ei + 2xi − 2yi + 5

= ei + 2xi+1 − 2yi+1 + 1.



I The first error variable is initialized as e1 := F (1, r − 12 ) = 5

4 − r .I Once again, we substitute F (x , y) by 2F (x , y). Also, we add 1

2 to e1. Thus, weend up with

ei+1 =

ei + 4xi+1 + 2 (E),ei + 4xi+1 − 4yi+1 + 2 (SE).

and

e1 := 3− 2r .


Bresenham’s Circle Algorithm

Algorithm BresenhamInput: rad : integer1. var x , y , error : integer;2. x ← 0; y ← rad ;3. error ← 3− 2rad ;4. while x ≤ y do5. SetPixel(x , y);6. inc(x);7. if error ≥ 0 then8. dec(y);9. error ← error − 4y ;10. error ← error + 4x + 2;


Basic Rendering TechniquesClippingHidden-Surface RemovalIllumination ModelIncremental Shading TechniquesAliasing and Anti-AliasingTexture Mapping


View Volume and Clipping

I The portion of the view plane (or image plane) that we are interested in is definedby the view window.

I Together with the view point the view window defines a pyramid-shaped portionof the space: the so-called view volume (or view frustum).

I Typically, a near plane (or front plane) and a far plane (or back plane) are addedin order to exclude objects from being projected that are very far from or veryclose to the viewer.

I The process of restricting an object to the view volume/window is called clipping.

VolumeView

Plane

Near

FarPlane

ViewWindow

Plane

View

PointView


View Volume and Clipping

I The view volume is a frustum of a pyramid in the case of perspective projection,and a parallelepiped in the case of parallel projection.

I Since clipping objects to a box is much simpler than clipping to a genuinepyramid, it is common to apply a perspective normalization in order to convert aperspective projection into an orthographic projection.

I Clipping can be performed in 3D prior to projecting the objects onto the viewplane, or in 2D after projecting the objects onto the view plane.

VolumeView

Plane

Near

FarPlane

ViewWindow

Plane

View

PointView


Clipping in 2D

I The task of clipping is to replace line segments with shorter segments that fitneatly into the view/clip window.

(xmin, ymin)

(xmax, ymax)

I Clipping can be performed in object space or in image space:Object-space clipping: Compute intersections analytically, and scan-convert

only clipped segments.Image-space clipping: scan-convert full segments and perform point clipping

afterwards.I We assume that the window is given by the axis-parallel rectangle

W := [xmin, xmax ]× [ymin, ymax ].I Point clipping:

I xmin ≤ x ≤ xmax ,I ymin ≤ y ≤ ymax .


Line Clipping

I Let W := [xmin, xmax ]× [ymin, ymax ] be the clip window, and consider the clipping ofa line segment ` := AB.

(xmin, ymin)

(xmax, ymax)

I Cases:I A ∈ W ,B ∈ W : Accept `.I A ∈ W ,B /∈ W : Compute P = ` ∩ ∂W , accept AP.I A /∈ W ,B ∈ W : Compute P = ` ∩ ∂W , accept BP.I A /∈ W ,B /∈ W :

I If A,B lie outside the same boundary line of W then reject `.I Otherwise, a more complicated test is needed . . ..


Cohen-Sutherland Algorithm

I We classify the position of every point P with respect to the supporting lines of Wby assigning a 4-bit out code, OC(P), as follows:

0001 : P to the left of x = xmin.0010 : P to the right of x = xmax .0100 : P below of y = ymin.1000 : P above of y = ymax .

0000

PSfrag replacements

xmin xmax

ymin

ymax

0001

1001

0010

01100101 0100

1000 1010

0000


Cohen-Sutherland Algorithm

I If OC(A) |OC(B) = 0000 then accept `, where | is the bitwise OR operator.I If OC(A) & OC(B) 6= 0000 then reject `, where & is the bitwise AND operator.I Otherwise:

I If OC(A) = 0000 then swap A and B.I Find the rightmost bit i such that OCi (A) = 1.I Compute intersection P of ` with the supporting line of W which defines bit i .I Let A := P, and update OC(A).

I Repeat the above steps until ` is accepted or rejected.I Easily generalized to more general convex clip windows.

0000

PSfrag replacements

xmin xmax

ymin

ymax

0001

1001

0010

01100101 0100

1000 1010

0000


Cyrus-Beck-Liang-Barsky Algorithm

I We consider the standard parameterization p(t) := (1− t)A + tB, with t ∈ [0, 1].I Goal: Compute tE , tL ∈ [0, 1] such that W ∩ ` = p(tE )p(tL).I We pick an arbitrary point Wi on clip edge Ei , and denote the outwards normal

vector of Ei by ni .I Where does p(t) lie relative to Ei?

I 〈ni , p(t)−wi〉 = 0 ⇐⇒ p(t) on Ei .I 〈ni , p(t)−wi〉 > 0 ⇐⇒ p(t) outside,I 〈ni , p(t)−wi〉 < 0 ⇐⇒ p(t) inside,

possibly insideclip window

A

B

ni

Ei

Wi

〈ni, p(t)−wi〉 > 0〈ni, p(t)−wi〉 = 0

〈ni, p(t)−wi〉 < 0`



I Thus, the equation for the intersection of ` with Ei is

〈ni , p(ti )−wi〉 = 0.

I Suppose that d := b− a 6= 0. We get

〈ni , a−wi〉+ ti〈ni , b− a〉 = 0,

that is

ti =〈ni , a−wi〉−〈ni , d〉

if 〈ni , d〉 6= 0.I If 〈ni , d〉 = 0 then Ei ‖ `.

possibly insideclip window

A

B

ni

Ei

Wi

〈ni, p(t)−wi〉 > 0〈ni, p(t)−wi〉 = 0

〈ni, p(t)−wi〉 < 0`



I We define the predicates "‘potentially entering"’ (PE) and "‘potentially leaving"’(PL) for each intersection:

I (PL)i ⇐⇒ 〈ni , d〉 > 0,I (PE)i ⇐⇒ 〈ni , d〉 < 0.

PE

PE

PE

PE

PLPLPLPL

Line 3Line 2

Line 1

A

B

AA

B

B

Line 4

B APE

PL



I This yields the parameters tE , tL as

tE := max (ti : (PE)i ∪ 0) ,

tL := min (ti : (PL)i ∪ 1) ,

where

ti :=〈ni , a−wi〉−〈ni , d〉

.

I If the clip edge Ei is parallel to a coordinate axis then the term for ti is muchsimpler. E.g., for Ei ≡ x = xmin we get

〈ni , d〉 = ax − bx and ti =ax − xmin

ax − bx.

I Similar to the Cohen-Sutherland algorithm, also the CBLB algorithm can easilybe generalized to general convex clip windows.


Polygon Clipping

I Clipping the edges of a polygon individually is not good enough.

I Note that the clipped polygon may be disconnected!


Polygon Clipping

I Two main options, and none of them is ideal . . .


Sutherland-Hodgeman Algorithm

I A conventional line-clipping algorithms would clip one edge of the polygon withrespect to the entire clip window, and would loop over all edges of the polygon.

I The Sutherland-Hodgeman Algorithm clips the entire polygon with respect to oneclip edge of the clip window, and loops over all clip edges.



I We distinguish four cases, depending on how the start-point A and end-point B ofan edge E are located relative to the clip edge.

AB A

BB’

A

B

B’A B



I Initialize the output list L for the clipped polygon: L := /0.I For all clip edges of the clip window:

1. Pick an edge E of the polygon, and let E0 := E .2. Let A be its start-point and B be its end-point. .3. Distinguish the following four cases:

I If both A and B are on the interior side of the clip edge, then add B to L.I If point A is on the interior side of the clip edge and point B is on the

exterior side of the clip edge, then add the intersection B′ := AB ∩ E toL.

I If point A is on the exterior side of the clip edge and point B is on theinterior side of the clip edge, then add both the intersectionB′ := AB ∩ E and point B to L.

I If both A and B are on the exterior side of the clip edge, then no outputis generated.

4. Let E be the polygon edge starting in B.5. If E0 6= E then goto Step 2.


Clipping in 3D

I The Cohen-Sutherland Algorithm and the Cyrus-Beck-Liang-Barsky Algorithmare straightforward to extend to 3D.

I E.g., for the Cohen-Sutherland Algorithm it suffices to maintain a six-bit out code,where Bit 5 is set if pz < zmin, and Bit 6 is set if pz > zmax .


Invisible Polygons

I A point P1 is occluded by a point P2 ifI P1 and P2 project onto the same point in the view plane.I P2 is closer to the viewer than P1.

I Why can a polygon be invisible?I The polygon is outside of the view frustum.I The polygon is on the back side (with respect to the viewer) of an opaque

object.I The polygon is occluded by some other polygon(s) that are closer to the

viewer.I For the sake of efficiency, we want to know whether a polygon is outside of the

view frustum: view frustum culling!I Also for the sake of efficiency, we want to know whether a polygon is occluded by

some other polygon(s): occlusion culling!I For correctness reasons, we need to know when a polygon is invisible —

hidden-surface removal (HSR) and visible-surface determination!


Invisible Polygons

I In the subsequent slides on hidden-surface removal, we will always assume thatthe canonical orthographic projection from z = −∞ onto the xy -plane is used.

I Recall that a coordinate transformation and perspective normalization suffices totransform any projection to this canonical set-up.

I Thus, P1 occludes P2 exactly if x1 = x2 and y1 = y2 and z1 < z2.I For simple rendering of complex scenes, hidden-surface removal accounts for a

substantial portion of the total rendering time. Thus, efficiency is a key issue!I A major step on the path to efficiency is to avoid sending many polygons to the

HSR algorithm that are “obviously” not visible — and this is true even withhardware support for HSR!


Back-Face Culling

I On the surface of a closed manifold, polygons whose exterior normal vectorspoint away from the viewer are always invisible.

I The process of removing all back-facing polygons is called back-face culling orback-face removal.

I Note that back-face culling does, in general, not solve the HSR problem for anon-convex object!

I Also, note that back-face culling may not be applied if the surface is not a closedmanifold!


Back-Face Culling

I Consider the supporting plane of a polygon. To check whether the polygon isback-facing under a parallel projection, it suffices to check whether the view pointis in the “inside half-space”.

I For a general parallel projection, this test is quickly performed by computing thesign of the dot product between the normal vector n and the viewing direction.

I For the canonical orthographic projection, this test boils down to checkingwhether nz > 0.

Inside Outside


Hidden-Line Removal and Hidden-Surface Removal

I Knowing the visible edges does not really help with HSR.


Object Space Versus Image Space

Object-Space HSR Algorithm:I For each polygon σ in the scene:

1. Compute the visible portion σ′ of σ analytically.2. Project σ′ onto the image plane and scan-convert the

projection.3. Use σ to assign the appropriate color to each pixel

corresponding to σ′.

Image-Space HSR Algorithm:I For each pixel π in the image plane:

1. Find the polygon σ closest to the view point that is pierced bythe projector through π.

2. Use σ to assign the appropriate color to this pixel.

I Several algorithms employ a hybrid strategy: the polygons are re-arranged andsubdivided in object space, until drawing them in proper order suffices to solvethe visibility problem in image space. E.g., Binary Space Partitioning.

I Even in the presence of hardware support (mostly for image-space algorithms),there still is a need for object-space algorithms!


Object Space Versus Image Space

I A lower bound on the worst-case complexity of object-space algorithms is Ω(n2)for a scene consisting of n polygons.

I A lower bound on the worst-case complexity of image-space algorithms isΩ(n · p), where p denotes the resolution of the image. (Typically, p ≈ 106.)

I Note that both Ω-terms are not very realistic for practical applications, and thatthey hide multiplicative constants!


Painter’s Algorithm

I For objects that can be placed in an occlusion-compatible order, the painter’salgorithm combined with depth sorting is sufficient:

1. Sort all of the potentially visible polygons by decreasing z-coordinates2. Draw them in this order.3. Polygons in front of other polygons will be drawn later, so they will be visible,

and they will occlude the polygons behind them.I The painter’s algorithm fails for polygons that interpenetrate each other, or in the

case of cyclic overlaps.

x

y


Hidden-Surface Removal for Octrees

I Recursively visit and draw the cells of an octree in the proper order.

0 1

2 3

x

y

x

z

y

1 5

3 7

3 72 6

7

5

6

4


Bounding-Box Test

I The (axis-aligned) bounding box (AABB) of an object is the smallest axis-alignedrectangle (in 2D) or box (in 3D) that encloses the object.

I If the bounding boxes do not intersect then the objects do not intersect.I If two objects intersect then their bounding boxes intersect.I Two objects cannot occlude each other if the projections of their bounding boxes

do not intersect.I No conclusion is possible if the bounding boxes intersect each other.I This idea can be generalized to other bounding volumes, like oriented bounding

boxes (OBB), discrete-orientation polytopes (k -dop), spheres, etc.

x

y

x

y

x

y


Binary Space Partitioning

I A binary space partition tree (BSP-tree) subdivides 3D space along thesupporting planes of particular polygons [Fuchs&Kedem&Naylor 1980].

CA

B

B C

A

I Appropriately traversing this tree enumerates the polygons from back to front.I Analogously for 2D and edges of polygons.


Constructing BSP Trees

I BSP trees are constructed much like Quicksort works.I Suppose that all polygons are triangular.I We use the supporting plane of a (randomly selected) triangle to split the space

into triangles on one side and triangles on the other side.I Triangles must be split (and re-triangulated) if they cross the plane.


Constructing BSP Trees

I This process continues recursively until every cell contains at most one triangle,or until the depth of the tree exceeds a threshold.

I Care has to be taken to keep the vertices of new triangles in consistent order.I Ideally, a BSP tree should be small in size and balanced!I Note that naive splitting of n input triangles (that do not intersect) may cause

O(n3) output polygons in the worst case.I Paterson&Yao (1990): O(n2) size can be achieved.


Sample BSP Tree in 2D

I Left children are “left of” the splitting line segment; right children are “right of” thesplitting line segment.

I Each node stores all line segments that are collinear with the splitting linesegment.

I All resulting cells I,II,. . .,VII are convex.

A

B

C

D

E

F

IV

II

III

I

V

VI

VII

A

B C

D E

F


Sample BSP Tree in 2D: Tree Traversal

I Locate the viewpoint in the BSP subdivision.I At each splitting plane, first draw the stuff on the farther side, then the polygon

that defines the splitting plane, and finally the stuff on the nearer side.I Moving the viewpoint does not render the BSP tree invalid, but changes the

traversal order.

A

B

C

D

E

F

IV

II

III

I

V

VI

VII

BSP Tree Traversal

VI

E

V

F

I

B

III

D

II

A

VII

C

IV

A

B C

D E

F


Depth-Buffer Algorithm

I Idea: Determine visibility independently for each pixel.I The depth-buffer algorithm, aka z-buffer algorithm, makes use of two buffers:

I Frame/color buffer: F [i, j] contains the color of pixel (i, j).I Z buffer: Z [i, j] contains the z-coordinate of the object visible at pixel (i, j).

Algorithm Depth-Buffer1. ∀i, j : Z [i, j]← +∞. (∗ initialization of z buffer ∗)2. ∀i, j : F [i, j]← background color. (∗ initialization of frame buffer ∗)3. for each polygon π do4. for each pixel (i, j) in projection of π do5. z ←z-coordinate of point P of π that projects onto pixel (i, j).6. if z ≤ Z [i, j] then7. Z [i, j]← z.8. compute color at P and assign it to F [i, j].

I Interpolation can be used to speed-up the computation of the z-values.


Depth-Buffer Algorithm: Pros and Cons

I Pros:I Simple, easy to implement, and ideally suited for hardware implementation.I Primitives can be processed in arbitrary order.I Interpenetration of primitives poses no problem.

I Cons:I The basic z-buffer algorithm does not handle translucency.I Most GPUs offer only 32-bit floating-point precision; 64-bit precision not yet

mandatory!I A perspective-to-orthogonal transformation tends to reduce z precision.I Aliasing problems if different polygons share the same pixel.I Co-planar primitives are handled unpredictably (“z-buffer fighting”).


Depth-Buffer Algorithm: z-Buffer Fighting


Depth-Buffer Algorithm: Handling Translucent Objects

I Translucent objects require a modification of the standard z-buffer:1. Draw all the opaque objects first, using the standard z-buffer.2. Draw translucent objects with blending:

I Translucent objects behind an opaque object do not have any effect.I Translucent objects in front of all opaque objects do not change the

z-value.I Blend colors appropriately.

I E.g., “alpha blending” as utilized by OpenGL:I (R,G,B) ; (R,G,B,A), where smaller values of A denote higher

translucency.I A = 0 means transparent and A = 1 means opaque.

I Modern GPUs use several other specialized buffers to simulate other specialeffects, e.g., an accumulation buffer for simulating multiple exposures, motion bluror depth of field.


Light Interacting with an Object

Light in

Reflection(diffuse)

Reflection(specular)

B

Absorption

Internalreflection

Transmittedlight

A

Scattering and Emission (Fluorescence)


Surface Characteristics and Types of Reflection

Light

Perfectly matt surface:

Incident

Perfect mirror: specular reflection

IncidentLight

Slightly specular (shiny) surfacediffuse reflection

LightIncident

LightIncident

Highly specular (shiny) surface

DirectionReflected

DirectionReflected

DirectionReflected

I Perfectly diffuse or perfectly specular surfaces hardly occur in practice.


Modeling Reflection

I A reflectance spectrum indicatesI for a particular angle of incidenceI the percentage of the incoming lightI reflected at each wavelength by the surface.

I To find the color of the light leaving the surface, we multiply the amount ofincoming light by the percentage reflectance of the surface at each wavelength.

I Generalization: Bidirectional reflectance distribution function (BRDF).

400 500 600 700 800nm

%

1020

30

405060

7080

90100

reflectance of a “greenish” surface400 500 600 700 800

nm

%

1020

30

405060

7080

90100

reflectance of copper at normal incidencec© M. Held (Univ. Salzburg) Einführung Computergraphik (WS 2016/17) 283

Basics of Illumination Models

I An illumination model defines the nature of the light emanating from a point, e.g.,the geometry of its intensity distribution, etc.

I An illumination model can be expressed by an illumination equation in variablesassociated with the point on the object being shaded.

I An illumination equation can be interpreted as an equation for intensities – e.g.,in a grey-scale image – as well as an equation for colors, for example RGB.

I This makes the illumination equation a vector equation, which must be evaluatedfor the red, green, and blue component separately.

I Obvious trade-off between the accuracy and complexity of a physics-basedmodel and the convenience and speed of a purely heuristic model.


Phong’s Illumination Model

I The standard illumination model in computer graphics that compromises betweenacceptable results and processing cost is the Phong model [Phong 1975].

I This model handles reflected light in terms of a diffuse and specular componenttogether with an ambient term:

I = Ia + Id + Is

I . . . intensity at a point,Ia . . . ambient part of I,Id . . . diffuse part of I,Is . . . specular part of I.


Diffuse Reflection

I Diffuse reflection: Light is scattered uniformly in all directions from a point on thesurface of the object.

I The amount of reflected light seen by the viewer does not depend on the viewer’sposition. Such surfaces are dull.

N

LV


Diffuse Reflection

I The intensity of diffusely reflected light is given by Lambert’s Cosine Law:

Id = Il · kd · cos θ (0 ≤ θ ≤ π

2)

whereI Il . . . intensity of the light source,I θ . . . angle between surface normal N and vector L (pointing to the light),I kd . . . diffuse-reflection coefficient, ranging between 0 and 1.

I The value kd depends on the material and the wavelength of the incident light.

N

LV


Diffuse Reflection

I For simplicity, all vectors are normalized!I Since cos θ = 〈L,N〉, the illumination equation Id = Il · kd · cos θ can be rewritten

using the dot product:

Id = Il · kd · 〈L,N〉

I If a point light is sufficiently distant from the objects:I It makes essentially the same angle with all surfaces sharing the same

surface normal.I In this case, L is a constant for the light source.

I If L does not vary then two parallel surfaces with identical surface normal will beshaded the same, no matter how different their distances from the light source orviewer are.

I This effect can be mitigated by using a light-source attenuation factor.(Problematic in practice, though.)

I Perfect Lambertian diffusers do not exist in nature.


Ambient Light

I Using the diffuse illumination model, any surface visible by the viewer but notdirectly lit by the light (since 〈N, L〉 = 0) is . . . . . .. . . . . . black!

N3

N2

N1

L

I This does not match reality!


Ambient Light

I Ambient light is the result of multiple reflections from walls and objects, and it isincident on a surface from all directions.

I It is modeled as a constant term Ial for a particular object using a constantambient-reflection coefficient ka ranging between 0 and 1:

Ia = Ial · ka

I The ambient-reflection coefficient is a material property.

CaveatThe ambient-light term is an empirical convenience and does not correspond directlyto any physical property of real materials.


Specular Reflection

I The law of reflection tells us that the reflected ray remains within the plane ofincidence, and the angle of reflection equals the angle of incidence. The plane ofincidence includes the incident ray and the normal to the point of incidence.

Surface

Reflected BeamN

θ θ

RL

I Glossy surfaces differ from dull surfaces in a number of important aspects: Inparticular, light reflected from a glossy surface leaves the surface at angle θ,where θ is the angle of incidence.


Specular Reflection

I However, most surfaces – and their reflectance properties – are somewhere inbetween a perfect diffuser and perfect glossiness, i.e., a perfect mirror.

I In practice, specular reflection is not perfect and reflected light can be seen forviewing directions close to the direction of the reflected beam.

I Thus, the degree of specular reflection seen by a viewer depends on the viewpoint.

I The area over which specular reflection is seen for a given view point iscommonly referred to as highlight.

I The color of the specularly reflected light is different from the color of the diffuselyreflected light.

I In simple models the specular component is assumed to be the color of the lightsource.


Specular Reflection

I For a perfect mirror, a highlight is only visible if φ – the angle between the viewingdirection V and the reflection vector R – is zero.

I In practice, however, specular reflection is seen over a range of φ that dependson the glossiness of the surface.

R

V

L

N

θ θφ

R

V

L

N


Coefficient of Glossiness

I Phong modeled this behavior empirically by a term cosnφ:

Is = Il · ks · cosnφ (0 ≤ ks ≤ 1; 0 ≤ n ≤ ∞)

where ks is the specular reflection coefficient, usually taken to be amaterial-dependent constant.

I Note that large values of n are required for a tight highlight to be obtained: Formetals values between 100 and 200 are common, while values between 5 and10 will result in a plastic appearance.

I For a perfect mirror surface, this coefficient of glossiness is infinite.

R

V

L

N

θ θφ

R

V

L

N


Specular Reflection

I The expense of the specular illumination equation can be considerably reducedby making some geometric approximations.

I Since the vector R is expensive to compute, Blinn [J. Blinn 1977] suggested touse the vector H instead: Blinn-Phong reflection model.

I H is the mean vector of L and V . The specular term then becomes a function of〈N,H〉 rather than 〈R,V 〉.

θ

θ

LN

H

V


Specular Reflection

I Thus,

Is = Il · ks · (〈N,H〉)n.

I As the angle between R and V is twice the angle between N and H, the use of Nand H spreads the highlight over a greater area.

I Like the diffuse term this simple model of specular reflection is a local model.I Light reflected onto the surface that originates from specular reflections in other

objects is not considered!

θ

θ

LN

H

V


Specular Reflection

I Summarizing, for colored objects the easiest way to model the specularhighlights is to use the color of the light source, and to control the color of theobjects by setting the diffuse reflection coefficients appropriately:

Ir = Ia · kar + Ii [kdr 〈L,N〉+ ks(〈N,H〉)n]

Ig = Ia · kag + Ii [kdg〈L,N〉+ ks(〈N,H〉)n]

Ib = Ia · kab + Ii [kdb〈L,N〉+ ks(〈N,H〉)n]

I Combining these three equations in a single vector expression yields:

Ir,g,b = Ia · ka(r , g, b) + Ii [kd (r , g, b)〈L,N〉+ ks(〈N,H〉)n]


Discussion of Phong’s Illumination Model

I Light sources are assumed to be point sources. Any intensity distribution of thelight source is ignored.

I All geometry except the surface normal is ignored and no distance information isconsidered. That is, light source(s) and viewer are (assumed to be) located atinfinity.

I The diffuse and specular terms are modeled as local components.I No reflections of other objects in the surface of the object being rendered are

considered.I Phong’s model lacks shadows!I Lack of shadows means not only that objects do not cast a shadow on other

objects, but self-shadowing within an object is omitted.I Concavities in an object that are hidden from the light source are

erroneously shaded simply on the basis of their surface normal.I An empirical model is used to simulate the decrease of the specular term around

the reflection vector modeling the glossiness of the surface.I The color of the specular reflection is assumed to be that of the light source. That

is, for white light highlights are rendered white regardless of the material.I Phong’s illumination model (or some variant thereof) is in wide-spread use due its

apparent main advantage: Its simplicity is unruled, and it produces acceptableresults for many applications.


Flat Shading

I The simplest shading model for a polygon is flat shading, also known as facetedshading or constant shading.

I This approach applies an illumination model once for a polygon to determine asingle intensity value (or color value) that is then used to shade an entire polygon.

I Basically, the illumination equation is sampled once for each polygon, and thisvalue is used across the polygon to reconstruct the polygon’s shade.

I This approach is only valid if the following assumptions are true:I The light source is at infinity, so 〈N, L〉 is constant across the polygon’s face.I The viewer is at infinity, so 〈N,V 〉 is constant across the polygon face.I The polygon represents the actual surface being modeled, and is not an

approximation to a curved surface.I Otherwise, constant shading produces a “faceted” appearance.


Flat Shading

I The simple solution of using a finer surface mesh turns out to be surprisinglyineffective:

I The perceived difference in shading between adjacent facets is accentuatedby the Mach band effect (E. Mach ≈ 1860).

I Mach banding is caused by lateral inhibition of the receptors in the eye: Themore light a receptor receives, the more that receptor blocks the response ofthe receptors adjacent to it.

I That is, the human visual system performs some form of edge enhancementby exaggerating the intensity change at any edge where there is adiscontinuity of intensity.

I As a result, at the border between two facets the dark facet appears evendarker and the light facet appears even lighter.

I The two shading models discussed next, Gouraud shading and Phong shading,take advantage of the information provided by adjacent polygons to simulate asmooth surface. Virtually all modern GPUs support one or both of these modelsthrough a combination of hardware and firmware.


Gouraud Shading

I Gouraud shading [H. Gouraud 1971], also called intensity interpolation shading,eliminates intensity discontinuities up to some extent.

I Gouraud shading extends the concept of interpolated shading applied toindividual polygons by interpolating polygon vertex illumination values that takeinto account the surface being approximated.

I The technique first calculates the intensity at each vertex of the polygon byapplying an illumination model.

I These vertex intensities are afterwards interpolated over the polygon.I The normal vector N used in these equations is the so-called vertex normal: It is

calculated as the average of the normals of the polygons that share the vertex.I This is an important feature of the method since the vertex normal is an

approximation to the true normal of the surface (which the polygon represents) atthat point.


Gouraud Shading

I The interpolation process that calculates the intensity over a polygonal surfacecan then be integrated with a scan-conversion algorithm that evaluates thescreen position of the edges of a polygon from the vertex intensities, and theintensities along a scan line from these.

I This yields the following bilinear interpolation scheme:

Ia =1

y1 − y2[I1(ys − y2) + I2(y1 − ys)]

Ib =1

y1 − y4[I1(ys − y4) + I4(y1 − ys)]

Is =1

xb − xa[Ia(xb − xs) + Ib(xs − xa)]

I These equations can beimplemented as incrementalcalculations.

I Gouraud shading handlesspecular reflection onlycorrectly if the highlightoccurs in one of the polygonvertices. I3(x3, y3)

I4(x4, y4)

I1(x1, y1)

I2(x2, y2)

Ia(xa, ys)

Ib(xb, ys)Is(xs, ys)

scan line at ys


Phong Shading

I Phong shading [B.T. Phong 1975], which is also known as normal-vectorinterpolation shading, makes use of the vertex normal vectors for bilinearinterpolation in the following steps:

1. Interpolation of the normal vectors along the edges between the vertices.2. By sliding a horizontal scan line from, say, bottom to top the normal vectors

of the surface inclosed by the edges are interpolated.3. So there exists a normal vector for each point of the polygon surface. This

normal vector can then in turn be used for evaluating the illuminationequation.

Interpolated normals

Vertexnormal

Vertexnormal

Original surface

I The interpolation of the normal vectors tends to “restore” curvature.


Bilinear Interpolation of the Vertex Normals

I With Phong shading, normal vectors are interpolated rather than the vertexintensities.

Current scan linePSfrag replacements

N1

N2

N3

N4

Ns

Na Nb

Scan Line


Characteristics of Phong Shading

I With Phong shading, vector interpolation replaces intensity interpolation.I The normal vectors are interpolated rather than the vertex intensities.I Interior points are calculated incrementally by using bilinear interpolation.I A separate intensity is evaluated for every pixel from the interpolated normals.I Specular reflection can be successfully incorporated into this scheme.I Results of normal vector interpolation are in general superior to intensity

interpolation, because an approximation to the normal is used at each point.(This is true even without taking into account specular reflection.)

I Phong shading tends to be much more expensive as Gouraud shading. Inparticular, the illumination equation has to be evaluated at every pixel.

I To avoid the costs of normalizing the interpolated normals, approximationtechniques (such as Taylor series expansion [Bishop&Weimer 1986]) may beused.


Sample Shading: Ellipsoid

I The images show, from left to right, line drawing, flat shading, Gouraud shading,and Phong shading.


Sample Shading: Torus


Problems of Interpolated Shading

I Silhouette edges: No matter how good a polygonal approximation an interpolatedshading model offers to the actual shading of a curved surface, the silhouetteedges of the mesh are still clearly polygonal.

I Orientation Dependencies: The results of interpolated shading are notindependent of the projected polygon’s orientation.

I This problem can be mitigated by using a larger number of smaller polygons, orby decomposing the polygon into triangles and using barycentric coordinates forthe interpolation.

1

1

0

0scan line

1

1

0

0

≈ 0

≈ 1

dark midpoint

light midpoint


Problems with Interpolated Shading

I Perspective distortion: Anomalies can appear in animated sequences becausethe intensity/normal-vector interpolation is carried out in screen coordinates fromvertex-normals as calculated in world coordinates. This is not invariant withrespect to transformations, and may cause frame-to-frame disturbances inanimations.

I Problems with shared vertices: Shading discontinuities can occur when twoadjacent polygons fail to share a vertex that lies along their common edge.

I Thus, a vertex has to be shared by all adjacent areas. As further improvement,such a vertex is connected to other vertices of the adjacent polygon.

0 0

1

1≈ 0 0 0

1

1

≈ 1≈ 1≈ 1


Problems with Interpolated Shading

I Unrepresentative surface normals: The process of averaging surface normals toprovide vertex normals for the intensity calculation can cause errors which resultin corrugations being smoothed out. This would result in a visually flat surface.

Surface normals


Aliasing and Anti-Aliasing

I Aliasing is the collective term for any form of visual artifact caused by mapping acontinuum to a discrete set of samples.

I The aliasing problem thoroughly permeates computer graphics. Its most familiarmanifestations are

I spatial aliasing,I temporal aliasing.

I Sample spatial aliasing: In the figure, the first letter suffers from aliasing andlooks coarse compared to the second letter.

I Anti-aliasing is one of the most important classes of techniques for makinggraphics visually pleasing and text easy to read.

I It is a way of fooling the eye into seeing straight lines, smooth curves, andsmooth motions where there are none.


Spatial Aliasing

I Spatial aliasing is due to the discrete nature of pixels on a monitor, and results insilhouette edges that do not look smooth: “jaggies” and “stair-casing”.

I A silhouette edge is the boundary of a polygon, or of any surface unit thatexhibits a high contrast over its background. (In general, contrast means light anddark areas of the same color.)

I A long thin object may break up depending on its position with respect to thepixel array.

Long thin objects may break up unpredictably!

I Another aliasing artifact occurs when small objects, whose spatial extent is lessthan the area of a pixel, are rendered or not depending on whether they areintersected by a sample point.


Temporal Aliasing

I New problems may occur when still images are shown in an animated sequence:I “Crawling” edges (i.e., moving jaggies);I “Scintillating” objects (i.e., objects (dis-)appearing during a move).

I A slight change in the position of a line in world coordinates can cause a huge“jump” in the position of the digitized line in screen coordinates, i.e., a “crawling”of the pixels that represent the line.

!

" "# $%&' ()

*+,-

./01

2 23 4 45 67 89: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;

< < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < << < < < < < < < < < < < < < < < < < < < < < < < < < < < < < < <= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = == = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

I Such changes can be very distracting and are intolerable in some applications(e.g., flight simulators).


Temporal Aliasing: Scintillating and Jumping

suddenly ’pops’

Time = 0

Time = 1

Time = 2

Screen Moving Polygon

Flow oftime(successiveframes)

This row

on when the moving edgecovers the pixel centers


Temporal Aliasing: Spinning Wheel

I In the third row, the wheel is spinning at 5 revolutions per second, but appears tobe spinning backward at 1 revolution per second. Thus, the fast speed is aliasingas a slower speed after sampling.

Time: t=0 t=1/6 t=2/6 t=3/6 t=4/6 t=5/6 t=1

No. rev.:

No. rev.:

0 1/6 2/6 3/6 4/6 5/6 1

0 1/2 1 1 1/2 2 2 1/2 3

No. rev.: 0 5/6 1 4/6 2 3/6 3 2/6 4 1/6 5


Nyquist-Shannon Sampling Theorem

Nyquist-Shannon sampling theorem (Dt.: Abtasttheorem)The Nyquist-Shannon sampling theorem tells us that a periodic signal can be properlyreconstructed from equally-spaced samples if the the sampling rate is greater thantwice the frequency of the highest-frequency component in its spectrum. This lowerbound on the sampling rate is known as the Nyquist rate.

be sampled

x

x

aliased sine wave

f (x)

x

f (x)

f (x)f (x)

x

aliased sine wave

sampling interval

function to

sample points

I The phenomenon of high frequencies masquerading as low frequencies in thereconstructed signal is aliasing.


Anti-Aliasing: Area Sampling

I Area sampling (aka prefiltering), which is one of the more prominent anti-aliasingmethods, attempts to assign an intensity to a pixel that depends on thepercentages of the areas that are covered by the objects.

I The actual pixel intensity is obtained as a weighted average of the objectintensities, by using the overlap areas as weights.

0 1 2 3 4

0

1

2

3 pixel %(intensity)(1,0) 10%(1,1) 20%(2,1) 80%(3,1) 40%

I Despite several advances, prefiltering is rarely used since it tends to becomputationally expensive.


Anti-Aliasing: Supersampling

I In supersampling (aka postfiltering) more than one sample per pixel is evaluated.I In practice, supersampled images are computed by applying standard

image-generation techniques to an n-times increased resolution, and byobtaining the value of an actual pixel as the (weighted) average of itscorresponding n2 supersampled pixels.

I Rather than combining samples with an unweighted average one might use aweighted filter: (a) Box filter (unweighted average), (b) Bartlett filter (linearlyweighted average), (c) Gaussian filter.

(a) (b) (c)


Anti-Aliasing: Supersampling

I Note that n × n supersampling increases the number of samples and theimage-generation time by a factor of n2!

I Supersampling works well with most computer graphics images and is easilyintegrated into a depth-buffer algorithm.

I Main draw-backs:I Non-adaptive supersampling does not work with images whose spectral

energy does not fall off with increasing frequency. (Texture rendered inperspective is a common example of an image that does not exhibit a fallingspectrum with increasing spatial frequency.)

I Blurring effects occur because information is integrated from a number ofneighboring samples.

I The fixed, regular grid used for supersampling may create a variety of newaliasing artifacts in an image: Humans tend to recognize regular patterns!

I Variants: Adaptive supersampling and stochastic/jittered supersampling.


Anti-Aliasing: Sample Images

[Image credit: SIGGRAPH Educator’s Slide Sets.]








Adding Surface Details

I All the shading techniques dealt with so far produce uniform and smooth surfaces– in sharp contrast to real-world surfaces.

I The simplest approach to add gross detail is to use so-called surface-detailpolygons.

I Every surface-detail polygon is coplanar with its base polygon, and is marked inorder to exclude it from hidden-surface removal.

I As details become finer and more intricate, explicit modeling with polygons orother geometric primitives becomes less feasible.

I Catmull (’74) suggested as an alternative to map an image, either digitized orsynthesized, onto a surface.

I This approach is known as texture mapping (or pattern mapping).


Adding Surface Details

I Even rudimentary textures make an image much more pleasing and conveyadditional information! (Both images shown below are based on the samenumber of polygons.)



Dimensionality of Texture Space

I The process of mapping a texture onto an object is called texture mapping.I The texture space can be one-dimensional, two-dimensional, or

three-dimensional.

T uT u vT u v w

x y z x y

Texture Object Screen

I For the sequel, except for the slides on “solid texturing”, we will focus on a 2Dtexture space.


Texture Map

I The 2D image that is mapped onto an object is called a texture, and its individualelements are often referred to as texels.

I A one-to-one mapping between pixel and texel need not exist!

Texture domain Screen domain

Texels

Pixel


Texture Mapping Caveats

I A simple-minded approach to texture mapping assigns texture coordinates tovertex coordinates and uses a sweep line (scan line) for the interpolation of thetexture coordinates

I This approach results in horrible anomalies, e.g., the “bent” checkerboard.I An improved approach performs the interpolation in texture and screen space in

parallel.I This approach avoids bent lines, but still gives way to incorrectly spaced lines,

i.e., to incorrect perspective views.


Texture Mapping Caveats

I The bent checkerboard is caused by the scan-line interpolation (in image space)of the texture coordinates assigned to the vertices of the quadrilateral (in objectspace).

u = 0

u = 1

u = 1

u = 0

v = 1

v = 1

v = 0

v = 0

lines of constant u lines of constant v

direction of scan line


Correct Texture Mapping

I The only remedy applicable is to determine the texture coordinates explicitly forevery pixel via transformations from screen space to object space, and fromobject space to texture space.

x

y

u

v

Texture mapSurface of object

Four corners ofpixel on screen


Texture Mapping Problems: Fixed Resolution

I A major problem of texturing is that the texture space has a fixed resolution!I Too small a resolution causes zooming to result in poor-quality images.I Too high a resolution causes blurring and other aliasing problems, and is a

source for computational inefficiency.I What is a good resolution??I Even if the resolution of the texture space has been chosen judiciously, an

extremely large number of texels may have to be weighted and summed just totexture a single pixel.

I This phenomenon may arise when a large number of texels maps onto a surface,but the projection of the surface in screen space is small, either because of itsdepth or because of its orientation with respect to the viewing direction.


Texture Mapping Problems: Inverse Mapping

I In general, the inverse mapping from screen to the object surface and to thetexture space is highly non-trivial. This is particularly true for curved objects.

I Two approaches are commonly used:I Unfolding the polygon mesh – The dimensionality is reduced from 3D to 2D

by “unfolding” adjacent polygons, thus generating a flat polygonal meshwhich is easier to project into the texture space.

I Two-part mapping – the 3D object surface is mapped to an intermediatesurface (such as a cylinder), and then into the texture space.

I For texturing a parametric surface its parametric representations can beemployed. Note, though, that parametric mapping does not take care ofperspective foreshortening!



Texture Mapping Problems: Aliasing

I Even if the inverse mapping is performed accurately, serious aliasing errors mayoccur, and, in the worst case, may ruin the visual appearance of a textured object.




I Aliasing is due to the point sampling problem in texel space and due toperspective foreshortening.

I Typically, all texels that correspond to the area of a pixel are summed by applyinga weighing process (such as a box filter).

I However, neighboring pixels need not map to neighoring texels, and informationof the texture map may be lost.

I This is particularly problematic if the texture contains thin curves or small details.I Also, simple box filtering is not sufficient in the case of perspective foreshortening

because texels in the back have the same weight as texels in the front.I Such aliasing artifacts are particularly noticeable for textures that exhibit

coherence or regularity (e.g., a checkerboard).I Correct filtering of non-linearly mapped areas would require space-variant filters,

i.e., filters whose shape and area change as they move across the texturedomain.

I However, prefiltering, supersampling or mipmapping go a long way to reducealiasing artifacts.



I Prefiltering and supersampling to cope with the point sampling problem in texelspace.



Mipmapping

I Mipmapping computes and stores textures at diverse resolutions.



Mipmapping

I To compute the color of a pixel, we determine the number of texels thatcorrespond to the pixel in the original texture map, find the two texture mapsclosest in size, and average the pixel colors obtained from those two texturemaps.



Solid Texturing

I For wood, granite, marble, and other natural materials, simply pasting a 2Dtexture onto the exterior of the object does not give the desired result: the texturedoes not appear to be seamless!


2D Textures Versus Solid Textures

I 3D (“solid”) textures allow the user to “carve” an object out of a solid block.



Solid Texturing

I In order to avoid gaps and inconsistencies, and also to circumvent the mappingproblem, a 3D texture space can be employed.

I Imagine that a texture value exists for every point in 3D object space.I We may then assume that the texture coordinates of a point on a 3D surface are

given by the identity mapping.I The color of the object is determined by the intersection of its surface with the

predefined 3D texture field of the block.I This is equivalent to sculpting or carving an object out of a solid block of material.I A major advantage of the elimination of the mapping problem is that objects of

arbitrary complexity can receive a texture on their surface in a “coherent” fashion.I In an animated sequence, the texture space would have to be transformed in the

same way as the object space. (The “incorrect” approach of moving the objectthrough the texture space can produce unique visual effects, though.)

I A digitizing approach is not applicable to generate solid textures due to memoryconstraints.

I Typically, 3D textures are generated procedurally.I A 3D texture can also be generated by sweeping a 2D texture through 3D space.


Sample Solid Texture: Marble

I Marble textures are typically generated as procedural textures, based on noisefunctions, e.g., Perlin noise [1982] or Perlin simplex noise [2001].



Sample Solid Texture: Perlin Noise

I Initialization:I Allocate a regular 3D grid within [0, 1]3 or within [−1, 1]3.I Assign a random unit vector (“gradient vector”) to each node of the grid.

I Noise function:I Determine the (cubic) grid cell that contains a texture point p := (u, v ,w).I For each node of that cell:

1. Compute a “distance vector” between p and the node.2. Compute the dot product between the distance vector and the

corresponding gradient vector.I Compute a bilinear interpolation of the values obtained.

Standard and fractional Perlin noise. [Image credit: Wikipedia.]


Sample Solid Texture: Perlin Noise

I Developed by Ken Perlin for “TRON”, with work started in 1981.I Published in 1985 as a SIGGRAPH paper on “An Image Synthesizer”.I Computational costs: O(2d ) for the bilinear interpolation in Rd .I Perlin noise is coherent, i.e., the noise function changes smoothly as one moves

across the texture space.

[Image credit: Matt Zucker’s “The Perlin noise math FAQ”]I Simplex noise:

I Replaces an d-dimensional cube by a a simplex, i.e., by an d-dimensional“triangle”.

I The complexity can be brought down to O(d2).I Simplex noise has no directional artifacts. (At least none that are easily

visible.)I Perlin was awarded an Academy Award for Technical Achievement in 1997, and

received a patent for the use of 3D+ implementations of simplex noise.


Sample Solid Texture: Black&White

I Again assign random numbers to the vertices of a regular (coarse) grid.I Obtain intermediate texture values by (bilinear) interpolation. If a texture value is

above a threshold then paint the pixel white, else black.



Sample Solid Texture: Wood Grain

I Wood grain can be simulated by a set of concentric cylinders, whose referenceaxis is, in general, tilted with respect to a reference axis of the object.

I The texture field is given by a modular function of the radius, returning a color fortexture space coordinates (u, v ,w).

r :=√

u2 + v2

α := arctanuv

r := r + 2 sin(20α +w

150)

c := brc mod 60

I Assign a dark brownish color if c > 40, and a light color, otherwise.


Example: Wood Grain



Example: Wood Grain


Bump Mapping

I Texture mapping affects the shading of a surface, but the surface will still looksmooth: It changes the color, diffuse, and specular reflection properties, but itdoes not change the surface normal.

I How can we make a surface look rough?I If a photograph of a rough surface is used as a texture map then the shaded

surface will not look quite right because the direction to the light source used tocreate the texture map is likely different form the direction to the light sourceilluminating the surface.

I Blinn’s bump mapping (1978) is a way to provoke the appearance of a roughsurface geometry that avoids explicit geometric modeling.

I It involves perturbing a surface normal before it is used in the illumination model,just as a slight roughness in a surface would perturb the surface normal in thereal world.

I A bump map is an array of displacements, each of which can be used to simulatedisplacing a point on a surface a little above or below that point’s actual position.


Bump Mapping

Original surface

A bump map

Simulate the displacementof the surface

Normal vectors to the’new’ surface


Bump Mapping for a Parametric Surface

I Let P(s, t) = [x(s, t), y(s, t), z(s, t)] be a parametric surface.I To compute its surface normal at point P(s, t), we compute

Ps(s, t) =∂P(s, t)∂s

,

Pt (s, t) =∂P(s, t)∂t

,

N(s, t) = Pt (s, t)× Ps(s, t),

n(s, t) = N(s, t)/||N(s, t)||.

PSfrag replacements

ABPS

LALB∆A

θφr

XYZxyz

N jNiA jAi

dA jdAi

φiφ j

N

s

t

Pt(s, t) Ps(s, t)

I Let B(s, t) be the bump map value that will be applied at P(s, t). (For simplicity,we assume that the bump map is also parameterized over s, t .)

I We add this amount in the direction normal to P(s, t):

P ′(s, t) = P(s, t) + B(s, t) · n(s, t).


Bump Mapping for a Parametric Surface

I Compute partial derivatives of the altered surfaceP ′(s, t) = P(s, t) + B(s, t) · n(s, t):

P ′s(s, t) :=∂P ′(s, t)

∂s= Ps(s, t) + Bs(s, t) · n(s, t) + ns(s, t) · B(s, t),

P ′t (s, t) :=∂P ′(s, t)

∂t= Pt (s, t) + Bt (s, t) · n(s, t) + nt (s, t) · B(s, t).

I Blinn showed that a good approximation to the new (unnormalized) normal N ′ isobtained by ignoring the last term in each partial derivative and by taking theircross-product. (Recall that (A + B)× (C + D) = A×C + A×D + B×C + B×D.)

N ′(s, t) := P ′t (s, t)× P ′s(s, t)

≈ [Pt (s, t) + Bt (s, t) · n(s, t)]× [Ps(s, t) + Bs(s, t) · n(s, t)]

= Pt (s, t)× Ps(s, t) + Pt (s, t)× (Bs(s, t) · n(s, t)) +

(Bt (s, t) · n(s, t))× Ps(s, t) + (Bs(s, t) · Bt (s, t) · (n(s, t)× n(s, t))

= N(s, t) + Bs(s, t) · (Pt (s, t)× n(s, t)) + Bt (s, t) · (Ps(s, t)× n(s, t))


Computing the Altered Surface Normal

I By dropping the parameters, we obtain the more concise formula

N ′ = N +Bs(Pt × N)− Bt (Ps × N)

||N|| .

s

t

N

N ′

Ps×nPt ×n

Ps

Pt

I N ′ is then normalized and substituted for the true surface normal in theillumination equation.

I Note we do not actually compute the altered surface – it suffices to compute only(an approximation of) the altered normal!


Sample Bump Map


Bump Mapping: Embossing

I Embossing, a technique borrowed from 2D image processing, can be used toachieve a chiseled look on 3D surfaces.


I Varying the surface normal on a per-pixel basis tends to be too time-consumingfor real-time imaging.

I Real-time embossing avoids the modification of surface normals by using, e.g.,the so-called dot-product method.


Displacement Mapping

I A method similar to bump mapping for adding wrinkles to a surface isdisplacement mapping.

I Displacement mapping is applied to a surface by first dividing the surface up intoa mesh of coplanar polygons.

I The vertices of these polygons are then perturbed according to the displacementmap.

I The resulting model is then rendered with any standard polygon renderer.I Displacement mapping can be used to convert the visual appearance of a

cylinder into a screw.I However, to achieve a fine resolution in the texture of the wrinkles, the additional

polygons would get ever smaller and more numerous, placing a tremendousburden on the renderer.


Displacement Mapping

I Displacement mapping does alter the object’s geometry!



Reflection Mapping

I Reflection mapping (aka “environment mapping”) refers to the process ofreflecting the surrounding environment on a shiny, reflective object withoutresorting to ray tracing (or similar means).

I Let V ′ be the reflection vector of aviewer direction V for a particularpoint on the surface of the reflectiveobject.

I The intersection of V ′ with a surface,such as the interior of a sphere thatcontains an image of the environmentto be reflected in the object, gives theshading attributes for the point P onthe object surface. reflective object

V NE

V’

P


Reflection Mapping

I In practice, four rays through the pixel point define a reflection “cone” with aquadrilateral cross-section. The region that subtends the environment map isthen filtered to give a single shading attribute for the pixel.

Surface

View point

Area subtendedin environment map

Pixel


Reflection Mapping: Cube Mapping

I Nowadays, the environmentis mostly mapped into a cube(“cube mapping”) or someother polyhedral object.

I E.g., “sky box”.

[Image credit: Wikipedia.]


Reflection Mapping: Sample Cube Maps



Problems with Reflection Mapping

I A practical difficulty is in the production of the environment map. Predistorting an(photographed) environment to fit the interior surface of a sphere is difficult, andstoring a reflection on the six sides of a cube requires tricks to produce seamlessreflections.

I A general disadvantage is that reflection mapping is geometrically accurate onlyfor (rather) small reflective objects located at the center of the surroundingenvironment sphere/cube.

I As the object size becomes large with respect to the environment sphere/cube,reflections tend to appear in the wrong place on the reflected object.

I If the reflective object is positioned away from its center then the geometricdistortion increases.

I Also, reflection mapping works well only if the reflective object is mostly convex.(A non-convex object does not appear as self-reflection in the reflection!)


Ray TracingBasics of Ray TracingRay CombinationRecursive Ray TracingRay Tracing CSG ObjectsEfficiency Considerations and Acceleration TechniquesExtending Conventional Ray TracingRefined Monte Carlo Methods


Ray Tracing for Image Synthesis

I Real images are formed when light rays exit a light source, bounce off variousobjects in the scene, and are reflected into the eye.

I The more accurately we simulate the physics of light transfer, the more realisticour images will be.

I Ray tracing can correctly model shadows and multiple specular reflections.I It can handle refraction and transparent objects.

I It can deal withCSG objects, i.e.,with Booleancombinations ofobjects.

I It can handlenon-polygonalobjects providedthat normal vectorscan be computed.

I It tends to be rathertime consuming.



Ray Tracing for Image Synthesis

I Ray tracing supports the generation of fairly realistic images.



Pinhole Camera Model and Screen Pixels

I Every pixel on the screen in the computer graphics camera model correspondsdirectly to a region of film in the pinhole camera.

I For convenience in programming the classic computer-graphics version of thepinhole camera moves the plane of the film out in front of the pinhole andrenames the pinhole as the eye.


Light-Based and Eye-Based Ray Tracing

I Consider a particular pixel in the image plane.I Photons in a three-dimensional scene originate at light sources.I Photons leave a light source and bounce around the scene.I Usually, light gets a little dimmer on each bounce.I Only photons that eventually hit the screen and then pass into the eye (when they

are still bright enough) actually contribute to the image.I Light-based ray tracing (aka “forward ray tracing”) means tracing the path of

photons from the light sources via reflections at objects to the eye.

I Efficiency problem: Most of the photons emitted by a light source will never passinto our eye . . .

I This problem has been partially overcome by clever algorithms, e.g., GPU-basedimplementations of Metropolis light transport. Still . . .


Light-Based and Eye-Based Ray Tracing

I The key insight for computational efficiency is to reverse the algorithm by tracingphotons backward instead of forward: We would like to trace only those photonswhich certainly contribute to the image.

I The relevant photons are the photons that actually strike the image plane andthen pass into the eye.

I Finding the path taken by a photon is easy:I We follow rays from the eye to objects to the light sources.I If we extend the ray taken by the photon into the world, we can look for the

nearest object along the path of the ray.I The photon must have come from this object.

I Thus, we follow a ray not forward, from the light source to the eye, but backward,from the eye to the objects to the light sources.

Ambiguous TerminologyNote that there is some controversy about the terminology and, in particular, themeaning of backward ray tracing, since early ray tracing was always done from theeye. Hence, it seems best to talk about eye-based versus light-based ray tracing.


Ray Casting

I Ray casting: Every ray is stopped at the first object intersected.I Ray casting solves the hidden-surface problem: The object first encountered by a

ray is the visible object.I The scene consists of a checkerboard and of a reflective sphere. All eye rays

were stopped at their first intersection with the scene.

[Image credit: SIGGRAPH Educator’s Slide Set (Slide #10).]


Light and Ray Combination

I There are three components that contribute to the color of light at a point on thesurface of an object:

1. Reflected contribution: Light originating at some (light) source that isreflected into the eye, based on the physical laws of specular reflection.

2. Transmitted contribution: Light originating at some (light) source that isrefracted through the object into the eye.

3. Local contribution: Light resulting from direct exposure to light sources.Ambient light can be used as a simple alternative for multiply reflected light thatfinds its way into the eye.

I Hence, we divide the rays into four classes:1. Reflection rays, which carry light reflected by an object surface; and2. Transparency rays, which carry light passing through an object;3. Illumination rays (or shadow rays), which carry light from a light source

directly to an object surface;4. Pixel rays (or eye rays), which carry light directly to the eye through a pixel

on the screen.


Illumination Rays and Shadow Feelers

I Imagine yourself at the point P on the surface of an object. Question: Is any lightcoming to you from the light sources?

I To determine the illumination at P, we ask if photons could possibly travel fromeach light source to P.

I Shadow rays are like any other ray, except that we use them to “feel around” forlight. That is why they are often called shadow feelers.

I Illumination ray: When a shadow ray is able to reach a light source withoutinterruption, then we stop thinking of it as a “shadow feeler” and prefer to think ofit as an illumination ray which carries light to us from the light source.

Point lightsNote that standard ray tracing deals only with point light sources!



I Which light sources are visible from P in the example setting below?I We answer this by sending the shadow ray LA towards light source A. It arrives at

A, so LA is actually an illumination ray from P to A.I On the other hand, ray LB is blocked from light source B by sphere S. Thus, no

light arrives at P from B.

P

A

B

SL

LB

A



I If the ray reaches the light source, then we apply a suitable illumination model forcomputing the contribution of the light source to the light reflected in the directionof the eye.

I E.g., we may use Phong’s rule to compute a (partial) specular highlight forspecular surfaces, or use a diffuse reflection model for dull surfaces.

LN

V

Ray

P Viewpoint

E

R


Illumination Rays and Shadow Feelers: Sample

I The scene consists of a checkerboard and of a reflective sphere. All eye rayswere stopped at their first intersection with the scene, and illumination rays wereconsidered.



Reflection Rays

I When determining the illumination at a point, recall that we originally found thatpoint by following a ray to the object: incident ray.

I Our goal is to find the color of the light leaving the object in the direction oppositeto the incident ray: reflection ray.

I Note that perfect specular reflection is assumed.I Recall that the angle of reflection is equal to the angle of incidence for a perfect

mirror surface.

Q = (L · N) · N where ||N|| = 1

R = L + 2(Q − L)

= L + 2((L · N) · N − L)

= 2(L · N) · N − L

Surface

α α

N

Q

RL


Reflection Rays

I At point P we want to know the color of the light coming in on ray A, since thatlight is then bounced into the eye. Other rays passing through P, such as B, donot have any impact on what is reflected towards the eye.

A

Image plane

reflectedThrice

ReflectedB

B

P

Twicereflected

reflected

Lightsource

Once

I For finding the color of a reflection ray, we follow it backwards to determine theobject where it originated.

I The color of the light leaving that object along the line of the reflected ray is thecolor of the reflected ray.

I When we know the reflected ray’s color, we add it to any other light leaving theoriginal surface struck by the incident ray.


Reflection Rays: Sample

I The scene consists of a dull checkerboard and of a reflective sphere. Illuminationrays and first-level reflection rays were considered.



Reflection Rays and Backface Culling

I It is important to observe that "back" surfaces of an object may be visible in aray-traced scene.

I Thus, back-face culling is not applicable when ray tracing is applied!


Transparency Rays

I There a single direction from which light can be perfectly transmitted into thedirection of the incident ray.

I The ray created to determine the color of this light is called the transmitted ray, ortransparency ray.

I One has to pay attention to the refraction of light as it passes from one mediumto another: Each material has an index of refraction, η, given by the ratio of thespeed of light in a vacuum and the speed of light in the material.

I In general, the index of refraction depends on the wavelength of the light — thiscauses dispersion in a prism!

I Snell’s law tells us that thetransmitted ray remains within theplane of incidence, and that the sineof the angle of refraction is directlyproportional to the sine of the angleof incidence:

sinαsinβ

=ηb

ηa.

material

material

N

L

α

β b

a

R


Transparency Rays: Sample



Transparency Rays: Math

N

L A

MB

R-N

C

β

α

D ||L|| = ||N|| = 1

A = N · cosα = N · (L · N)

D = A− L

M = D/ sinα (and we have ||M|| = 1)

B = M · sinβ with sinβ =ηa

ηbsinα

C = −N · cosβ with cosβ =

√1− sin2 β

R = B + C

Summarizing, R = N

ηa

ηb(L · N)−

√1−

(ηa

ηb

)2

(1− (L · N)2)

− ηa

ηbL.


Transparency Rays: Total Internal Reflection

I When a light ray hits a boundary between a dense region to a less dense region,the square root in the formula for R may not exist.

I If this happens, the light ray is reflected internally, and we compute reflectioninstead of refraction.

material

material b

a


Recursive Ray Tracing

I The colors of the reflected and the transmitted light were found by finding theobjects from which they originated.

I What was the color of light leaving those objects? It was a combination of thelight rays reaching them, which can be found with the same analysis.

I This suggests a recursive algorithm and we we get (recursive) ray tracing, asopposed to mere ray casting:

I First we send an eye ray through every pixel of the screen.I This ray is stopped at the first intersection with any object.I From this intersection point we send shadow feelers to the light sources of

the scene.I In addition, we send a reflection ray and a transparency ray.I For objects hit by these two rays we apply this scheme recursively.I No recursive rays are spawned if a dull surface is hit.I With every reflection, the brightness of light is reduced and after a number of

reflections the contribution to our top object’s brightness and color is notsignificant anymore.

I Thus, we may terminate the recursion after a certain number of recursivecalls, e.g., 10–15.


Recursive Ray Tracing

I An eye ray E propagated through a scene. Many of the intersections spawnreflected, transmitted and shadow rays.

E

6

3

4

9

R2

S4

S2

R1

S3

S1

S5

T2

S6

R3

LA LB

T1


Recursive Ray Tracing: Ray Tree

I Recursive ray tracing generates a ray tree.

Eye ray

R2

S4

S3

T2

S6

R3

Object 9Object 6

S1

R1

S5

T1

S2Object 3


Recursive Ray Tracing: Samples

[Image credit: SIGGRAPH Educator’s Slide Set (Slides #24–26).]


Recursive Ray Tracing: Samples

I The Sphereflake consists of 7381 spheres; the floor’s texture was modeled by aprocedural function.

[Image credit: Eric Haines]


Ray Tracing CSG Objects

I Basic idea:I Shoot a ray toward each of the primitives and compute hit lists of linked lists

where the ray enters and exits each primitive.I Use the hit lists to compute where the ray enters and exits the combined

solid and adjust the surface normals properly.I At this point a shading calculation must be performed, and, if necessary,

secondary rays have to be generated.I The hit lists for the left and right children of a node are combined by using

the so-called Roth Diagram.

I CSG trees can be pruned during raytracing:

I If the left or right subtree of anintersection operation returns anempty list, then the othersubtree need not be processed.

I If the left subtree of a minusoperation returns an empty list,then the right subtree need notbe processed.


Ray Tracing CSG Objects: Hit Lists and Roth Diagram

Left Right


Ray Tracing CSG Objects: Hit Lists and Roth Diagram

C

BA

2

3

1

2

3

4

5

B

A

2

2

5

54

3

5+ C

1


Efficiency Considerations

I One of the greatest challenges of ray tracing is efficient execution. Efficiency hastherefore been the focus of much research from the early days on.

I For accelerating the process of ray tracing, there are three very distinct strategiesto consider:

1. Reducing the average cost of intersecting a ray with the environment: Fasterintersection tests and fewer intersection tests.

2. Reducing the total number of rays intersected with the environment: FewerRays.

3. Replacing individual rays with a more general entity : Generalized Rays. Thisincludes approaches like pencil tracing, cone tracing (with both circular andpolygonal cross-sections), and beam tracing. The main idea of all theseapproaches is to trace many rays simultaneously.


Fewer Rays Due to Intensity Attenuation

I In order to end recursion, in a naive ray tracer it is necessary to define amaximum depth — e.g., 10–15 — to which rays are traced recursively.

I For a particular scene this maximum depth is preset to a value which will dependon the nature of the scene. (Highly reflective surfaces and transparent objectsneed greater maximum depth than scenes with lots of opaque objects.)

I Hall and Greenberg (’83) pointed out that the percentage of the scene thatconsists of highly transparent or reflective surfaces is, in general, small and it isthus inefficient to trace every ray to the maximum depth.

I In particular, light is attenuated in various ways as it passes through a scene.E.g., a ray that is reflected at a surface is attenuated by the global specularreflection coefficient of this surface.

I A ray that is examined as a result of ray tracing will make a contribution to the eyeray that is attenuated by several of these coefficients.

I If the product of these coefficients falls below some threshold value then there isno point in tracing back further than the actual ray: the recursion can be stopped.

I Limiting the recursion based on the attenuation factors accumulated is calledadaptive-tree depth control.

I Hall and Greenberg report that adaptive tree-depth control results in an averagedepth of about two for a highly reflextive scene.

I However, there are theoretical arguments (and practical examples) that show thatadaptive tree-depth control can be arbitrarily wrong.


Faster Intersection Tests

I The main goal is to reduce the average cost of computing an intersection.I We distinguish between the following two sub-goals:

I Faster Tests for Ray/Object Intersections: The number of intersection tests isnot reduced, but conservative pre-tests (e.g., by means of boundingvolumes) are employed in order to reduce the average cost of anintersection test.Note that such an approach will not be of much help if the sheer magnitudeof the number of intersection tests constitutes a problem: In terms of theO-notation, we would only change the multiplicative constants but could notdecrease the order!

I Fewer Tests for Ray/Object Intersections: Bounding volume trees and similarconcepts are employed in order to reduce the average number ofintersection tests.


Faster Intersection Tests: Bounding Volumes

I The most fundamental and ubiquitous tool for ray tracing acceleration is thebounding volume: A bounding volume is a volume which contains a given objectand permits a simpler ray intersection check than the object.

I Common bounding volumes are spheres, axis-aligned bounding boxes (AABBs),oriented bounding boxes (OBBs), discrete-orientation polytopes (k -dops,plane-sets), convex hulls, . . .

I Only if a ray intersects the bounding volume the object itself need to be checkedfor intersection.

I Normally, the use of bounding volumes results in a significant net gain in speed.



I Virtually all bounding volumes form convex objects: This is a desirable factbecause it guarantees that any ray will intersect the object at most twice.

I Intersection (and union) of multiple bounding volumes can be used to obtain abetter fit.

I Each approach requires a different ray-intersection algorithm for bestperformance.



I A plane-set normal defines a family of parallel planes orthogonal to it. Two valuesassociated with a plane-set normal select two of these planes and define a slab.

I The intersection of several such slabs form a parallelepiped bounding volume.I For normals chosen among a given set of k

2 normals, the resulting boundingvolume is also known as a discrete-orientation polytope, or k -dop for short.

Min

Max


Faster Intersection Tests: Bounding Volume Trees

I By enclosing a number of bounding volumes within a larger bounding volume itmay be possible to eliminate many objects from consideration with a singleintersection check: If a ray does not intersect the parent volume, there is no needto test it against the bounding volumes or objects contained within.

I A hierarchy is formed by repeated application of this principle.I Since a hierarchy of bounding volumes forms a tree, the resulting structures are

commonly called bounding-volume trees (BVTs).I BVTs are also widely employed in other applications, e.g., for collision detection.


Faster Intersection Tests: Bounding Volume Trees


Blurring Effects: Motivation

I In the real world many things are not so discrete or sharp as we assumed so far:I light sources are no points,I times of exposure are not zero,I aperture and focal length of an optical system are badly modelled by a

camera “hole” that is infinitely small,I mirrors are not perfect, andI mirrors are not even.

I These issues cause blurring effects, i.e., some amount of fuzziness that makesphotographs look natural in detail.

I Since our visual system is accustomed to look for these visual cues, we tend toperceive pictures as unreal if most or even all of these blurring effects aremissing.


Blurring Effects: Penumbra and Soft Shadows

I Real light sources are never pure point lights. They do not produce sharpshadows, but instead a penumbra region occurs:

I That part of a light source’s shadow that is totally blocked from the lightsource is the shadow’s umbra (Dt.: Kernschatten).

I That part of the shadow that is only partially shielded from the source is theshadow’s penumbra (Dt.: Halbschatten).

Penumbra

Umbra


Blurring Effects: Penumbra and Soft Shadows

I Real light sources can be handled by tracing several rays to points on the lightsource, and by averaging over all these rays.

I In order to avoid regular anomalies in the darkness of the shadow, the points onthe light source are usually randomly distributed.


Blurring Effects: Diffuse Reflection and Transparency

I The mirrored view of an object will always exhibit some diffusion.I The diffusion caused by an uneven mirror can be simulated by tracing rays from

the surface in the mirror direction, where each ray is slightly perturbed.I The distribution is weighted according to the same function that determines

highlights.

I The problem of translucency is similar to the problem of diffuse reflection.I Translucency is calculated by distributing the secondary rays about the main

direction of the transmitted light.I The distribution of the transmitted rays is defined by a specular transmittance

function.


Blurring Effects: Depth of Field

I A camera never produces a sharp image of all objects in a scene.I Rather, only those objects that are located within a range determined by the focal

length and the aperture of the camera’s optical system will appear sharp: depthof field.

I Depth of field can be generated by distributing several rays along the main raydirection, using a weighted distribution.

I That is, more rays are cast with a small variation and less rays are cast with alarger variation.

I This corresponds to several rays entering a real world camera since the apertureis always greater than a single point.

I The wider the rays are distributed, the fewer objects will appear sharp.


Blurring Effects: Motion Blur

I The image of any moving object will always be blurred to some extent as soon asthe time of exposure is a finite interval.

I This effect is easy to simulate, too: Instead of calculating one picture only for onedistinct moment, several pictures are calculated for different moments within theexposure time.

I The mean of these calculations will yield a picture with motion blur.I Motion blur is particularly important when generating animations. Without motion

blur, figures in animated still frames move cartoon-like, i.e., they do not movesmoothly.


Distributed Ray Tracing

I To render pictures with all the effects described on the previous slides is verycostly, if not impossible, if they are calculated in a straightforward way.

I For example, if one usesI 10 points of time per pixel for motion blur,I 10 reflectance directions per ray for gloss,I 10 shadow feelers per intersection point, andI 10 points on the lens for the depth-of-field effect,

then one will have to cope with 10 000 rays per pixel, and with some 10 billionrays for only the very top part of the ray tree when ray-tracing a scene on a1000× 1000 pixel display.

I The number of rays needed sky-rockets once truly recursive ray tracing isapplied.

I Obviously, such a simple-minded approach is hardly feasible even onstate-of-the-art rendering platforms . . .



I Distributed ray tracing utilizes the following theoretical results: The true value of apixel can be written as a multi-dimensional integral

I over time,I over the lens aperture,I over the light sources,I over the pixel area (for anti-aliasing), andI over all reflectance (and transparency) directions.

I If r reflectance/transparency directions are considered, we get a(7 + 2r)-dimensional integral.

I This integral can be estimated as a whole with the Monte Carlo method:I For every sample during this integration only one discrete value in each

dimension is needed.I This one value can be a random value from the relevant interval in the

respective dimension.I For the example of the previous slide, the effort is reduced from billions of rays to

millions, which can be calculated quite easily.



1. Determine the spatial location of the starting point of the ray randomly within thepixel.

2. Determine the time for the ray randomly within the relevant time interval, and setup the scene and camera at that time.

3. Randomly determine a point of the lens for the ray to go through and calculatethe refraction of the ray.

4. Intersect this ray with the scene and evaluate the closest intersection point to thelens, using standard ray tracing.

5. For each light source determine a random point on it and trace a ray to this point.If no object is intersected, include the influence of the light source to the color ofthe ray.

6. Determine a reflection ray randomly, evaluate the reflection ray with distributedray tracing and include the influence of this ray to the color.

7. Determine a transparency ray randomly, evaluate it with distributed ray tracingand include the influence of this ray to the color.

8. Repeat Steps 1–7 until the mean of the obtained colors fulfills some qualitycriterion.



Samplepoint

Film plane

Lens

Reflected ray

Transmittedray

Light

Surface

I The random selections in Steps 1–3 and 5–7 depend on different distributionfunctions for different dimensions, of course:

I for Steps 1 and 2, the Gaussian turns out to be well suited,I for Steps 3 and 5, a uniform distribution is obvious, whileI for Steps 6 and 7, the distributions correspond to the specular reflection term

of the underlying shading model.


Refined Monte Carlo Methods

I Distributed ray tracing is a fine example of a Monte Carlo method used toapproximate the solution to the rendering equation (Kajiya 1986).

I Some more recent approaches that also make use of Monte Carlo techniques:I Bidirectional path tracing (Lafortune 1996),I Metropolis light transport (MLT, Veach&Guibas 1997),I Photon mapping (Jensen 1996),I Progressive photon mapping (PPM, Hachisuka&Ogaki&Jensen 2008).

I Both bidirectional path tracing and Metropolis light transport are unbiasedrendering techniques: They do not introduce a systematic error into the(approximate) solution.

I Note, though, that a biased rendering technique need not necessarily be wrongand, thus, generate “worse” results.

I E.g., photon mapping (and its more recent variants) is biased but allows toreproduce caustics. And since it is consistent, any desired accuracy can beachieved by increasing the number of photons.


Refined Monte Carlo Methods: Caustics Generated by Photon Mapping

[Image credits: Wikipedia.]


The End!

I hope that you enjoyed this course, and I wish you all the best for your future studies.

Computational Geometry and Applications Lab

UNIVERSITAT SALZBURG


Documents

Einführung Computergraphik (WS 2016/17) - Uni Salzburgheld/teaching/einfuehrung_graphik/cg_print.pdf · Einführung Computergraphik (WS 2016/17) ... 1965 Jack Bresenham introduced