UNIT NO.

V
Shading, Animation & Gaming

Name of the Subject : Computer Graphics

Name of The faculty : Prof. Swati N. Firame
Name of the Department : IT
Name of the Institute : SITS, NARHE

* 1
 Constant Shading

• Constant Intensity or Flat Shading

• One color for the entire triangle
• Fast
• Good for some objects
• What happens if triangles are small?
• Sudden intensity changes at borders

* 2
 Gouraud Shading

• Intensity Interpolation Shading

• Calculate lighting at the vertices. Then
interpolate the colors as you scan convert

* 3
 Gouraud Shading

• Relatively fast, only do three calculations

• No sudden intensity changes
• What can it not do?
• What are some approaches to fix this?
• Question, what is the normal at a vertex?

* 4
 Gourad Shading

• IP=(YP-YB/YA-YB) IA + (YA-YP/YA-YB)IB
• IQ=(XR-XQ/XR-XP) IP + (XQ-XP/XR-XP)IR
• A

• P Q R

• B C

* 5
 Phong Shading

• Interpolate the normal, since that is

the information that represents the
“curvature”
• Linearly interpolate the vertex
normals. For each pixel, as you scan
convert, calculate the lighting per
pixel.
• True “per pixel” lighting
• Not done by most
hardware/libraries/etc
* 6
 Phong Shading

N2

P Q R

N1 N3

* 7
 Difference Between Phong & Gouraud
Shading
Sr. No. Phong Shading Gouraud shading
1 It displays more realistic 1. It removes the intensity
highlights on a surface. discontinuities exist in constant shading
model.
2 It greatly reduces the Mach-Band 2. It can be combined with a hidden
effect. surface algorithm to fill in the visible
polygons along each scan line.
3 It gives more accurate results. 3. Highlights on the surface are
sometimes displayed with wrong
shapes.
4 It requires more calculations and 4. The linear intensity interpolation can
greatly increases the cost of result bright or dark intensity streaks to
shading steeply. appear on the surface. These bright or
dark intensity streaks are called “Mach
bands”. The Mach Band effect can be
reduced by breaking the surface into a
* greater number of smaller polygons. 8
 Difference Between Phong & Gouraud
Shading
Sr. No. Phong Shading Gouraud shading
5 In this method we can calculate In this method we can calculate vertex
the pixel intensity of each scan intensity.
line.
6 This method interpolates the Polygon surfaces are rendered by
normal vectors at the bounding linearly interpolating intensity values.
points along scan line.
7 Using interpolation of two We can calculate normal vector N at
normal vector, we can get vertex V using average of normal vectors
normal vector N. of polygons.
8 It is very effective in dealing with It is effective for shading surfaces.
specular highlights.
9 It is very expensive than gouraud It is less expensive.
shading.

* 9
 Difference Between Phong & Gouraud
Shading
Sr. No. Phong Shading Gouraud shading
10 It works better in reflective It does not work better in reflective
model. model.
11 Phong interpolates the Gouraud interpolates the calculated
calculated vertex normals. vertex colours.
12 It is independent on the It is dependent on the relative positions
underlying polygons. of underlying polygons.

* 10
 Halftone Shading

• Introduction to Halftone Shading

• Applications

* 11
 Animation

Definition of Animation

• Visual change in a scene with respect to

time is called as animation.

* 12
 Types of Animation

• Hand-drawn Animation
• Stop-motion Animation
• Computer animation
• Motion-capture animation
 Hand-drawn Animation
• In this type of animation, a series of drawings is
photographed
• Each drawing makes up one frame of the film
• The position of the character or object changes very
slightly from frame to frame
• This technique is known as cell animation because
the first animations were drawn on thin plastic
sheets called celluloid
• In 1937, Walt Disney released Snow White and the
Seven Dwarfs, the first full-length animated film
using cell animation
Stop-Motion Animation
• In Stop-Motion Animation,
models are photographed on a
set one frame at a time.
• The frames are played in
sequence to create movement
• Early stop-motion models were
made of modeling clay (ex.
Gumby)
 Computer Animation

• Computer Animation
software can be used to
create an animation scene,
cartoon, a video game, or
even a full-length movie
• Computer Animation
reduces the time needed to
produce an animated film
• Software can be
two-dimensional (2D) or
three-dimensional (3D)
 Motion Capture Animation

• Motion Capture
Animation is a 3D
representation of a live
performance
• It can be done using 3
different technologies:
» Magnetic
» Optical
» Electro-Mechan
ical
 Principles of Animation
• Squash and Stretch
• Illustration of the "squash and stretch"-principle:
Example A shows a ball bouncing with a rigid, non-dynamic movement. In
example B the ball is "squashed" at impact, and "stretched" during fall and
rebound. The movement also accelerates during the fall, and slows down
towards the apex (see "slow in and slow out").
• Animated sequence of a race horse galloping. Photos taken by Eadweard
Muybridge. The horse's body demonstrates squash and stretch in natural
musculature.
• The most important principle is "squash and stretch",[4] the purpose of
which is to give a sense of weight and flexibility to drawn objects. It can be
applied to simple objects, like a bouncing ball, or more complex
constructions, like the musculature of a human face.[5][5][6] Taken to an
extreme point, a figure stretched or squashed to an exaggerated degree
can have a comical effect.[7] In realistic animation, however, the most
important aspect of this principle is the fact that an object's volume does
not change when squashed or stretched. If the length of a ball is stretched
vertically, its width (in three dimensions, also its depth) needs to contract
correspondingly horizontally.
* 18
 Anticipation

• Anticipation is used to prepare the audience for an

action, and to make the action appear more
realistic.[9] A dancer jumping off the floor has to bend
his knees first; a golfer making a swing has to swing
the club back first. The technique can also be used
for less physical actions, such as a character looking
off-screen to anticipate someone's arrival, or
attention focusing on an object that a character is
about to pick up.[10]

* 19
 Staging

• This principle is akin to staging in theatre, as it is known

in theatre and film.[11] Its purpose is to direct the
audience's attention, and make it clear what is of
greatest importance in a scene;[12] Johnston and Thomas
defined it as "the presentation of any idea so that it is
completely and unmistakably clear", whether that idea is
an action, a personality, an expression, or a mood.[11]
This can be done by various means, such as the
placement of a character in the frame, the use of light
and shadow, or the angle and position of the camera.[13]
The essence of this principle is keeping focus on what is
relevant, and avoiding unnecessary detail

* 20
 Straight Ahead Action and Pose to Pose

• These are two different approaches to the actual drawing process.

"Straight ahead action" means drawing out a scene frame by frame from
beginning to end, while "pose to pose" involves starting with drawing a
few key frames, and then filling in the intervals later.[12] "Straight ahead
action" creates a more fluid, dynamic illusion of movement, and is better
for producing realistic action sequences. On the other hand, it is hard to
maintain proportions, and to create exact, convincing poses along the
way. "Pose to pose" works better for dramatic or emotional scenes, where
composition and relation to the surroundings are of greater
importance.[16] A combination of the two techniques is often used.[17]
• Computer animation removes the problems of proportion related to
"straight ahead action" drawing; however, "pose to pose" is still used for
computer animation, because of the advantages it brings in
composition.[18] The use of computers facilitates this method, and can fill
in the missing sequences in between poses automatically. It is, however,
still important to oversee this process and apply the other principles
discussed

* 21
 Follow Through and Overlapping Action

• Follow through and overlapping actionFollow through and overlapping action is a general
heading for two closely related techniques which help to render movement more
realistically, and help to give the impression that characters follow the laws of physicsFollow
through and overlapping action is a general heading for two closely related techniques which
help to render movement more realistically, and help to give the impression that characters
follow the laws of physics, including the principle of inertiaFollow through and overlapping
action is a general heading for two closely related techniques which help to render
movement more realistically, and help to give the impression that characters follow the laws
of physics, including the principle of inertia. "Follow through" means that loosely tied parts of
a body should continue moving after the character has stopped and the parts should keep
moving beyond the point where the character stopped to be "pulled back" only subsequently
towards the center of massFollow through and overlapping action is a general heading for
two closely related techniques which help to render movement more realistically, and help
to give the impression that characters follow the laws of physics, including the principle of
inertia. "Follow through" means that loosely tied parts of a body should continue moving
after the character has stopped and the parts should keep moving beyond the point where
the character stopped to be "pulled back" only subsequently towards the center of mass
and/or exhibiting various degrees of oscillationFollow through and overlapping action is a
general heading for two closely related techniques which help to render movement more
realistically, and help to give the impression that characters follow the laws of physics,
including the principle of inertia. "Follow through" means that loosely tied parts of a body
should continue moving after the character has stopped and the parts should keep moving
* beyond the point where the character stopped to be "pulled back" only subsequently 22
towards the center of mass and/or exhibiting various degrees of oscillation damping.
 Slow In and Slow Out

• The movement of the human body, and most other

objects, needs time to accelerate and slow down. For
this reason, animation looks more realistic if it has
more drawings near the beginning and end of an
action, emphasizing the extreme poses, and fewer in
the middle.[12] This principle goes for characters
moving between two extreme poses, such as sitting
down and standing up, but also for inanimate,
moving objects, like the bouncing ball in the above
illustration.[

* 23
 Arc

• Most natural action tends to follow an arched trajectoryMost natural

action tends to follow an arched trajectory, and animation should adhere
to this principle by following implied "arcs" for greater realism. This
technique can be applied to a moving limb by rotating a joint, or a thrown
object moving along a parabolic trajectory. The exception is mechanical
movement, which typically moves in straight lines.[23]
• As an object's speed or momentum increases, arcs tend to flatten out in
moving ahead and broaden in turns. In baseball, a fastball would tend to
move in a straighter line than other pitches; while a figure skater moving
at top speed would be unable to turn as sharply as a slower skater, and
would need to cover more ground to complete the turn.
• An object in motion that moves out of its natural arc for no apparent
reason will appear erratic rather than fluid. For example, when animating
a pointing finger, the animator should be certain that in all drawings in
between the two extreme poses, the fingertip follows a logical arc from
one extreme to the next. Traditional animators tend to draw the arc in
lightly on the paper for reference, to be erased later.

* 24
 Secondary Action

• Secondary Action: as the horse runs, its maneSecondary

Action: as the horse runs, its mane and tail follow the
movement of the body.
• Adding secondary actions to the main action gives a scene
more life, and can help to support the main action. A person
walking can simultaneously swing his arms or keep them in
his pockets, speak or whistle, or express emotions through
facial expressions.[24] The important thing about secondary
actions is that they emphasize, rather than take attention
away from the main action. If the latter is the case, those
actions are better left out.[25] For example, during a dramatic
movement, facial expressions will often go unnoticed. In
these cases it is better to include them at the beginning and
the end of the movement, rather than during.
* 25
 Timing

• "Timing (animation)" redirects here. For the animation

technique, see Blocking (animation).
• Timing refers to the number of drawings or frames for a
given action, which translates to the speed of the action
on film.[12] On a purely physical level, correct timing
makes objects appear to obey the laws of physics; for
instance, an object's weight determines how it reacts to
an impetus, like a push.[27] Timing is critical for
establishing a character's mood, emotion, and
reaction.[12] It can also be a device to communicate
aspects of a character's personality.[28]

* 26
 Exaggeration

• Exaggeration is an effect especially useful for animation, as

perfect imitation of reality can look static and dull in
cartoons.[12] The level of exaggeration depends on whether
one seeks realism or a particular style, like a caricature or the
style of a specific artist. The classical definition of
exaggeration, employed by Disney, was to remain true to
reality, just presenting it in a wilder, more extreme form.[29]
Other forms of exaggeration can involve the supernatural or
surreal, alterations in the physical features of a character; or
elements in the storyline itself.[30] It is important to employ a
certain level of restraint when using exaggeration. If a scene
contains several elements, there should be a balance in how
those elements are exaggerated in relation to each other, to
avoid confusing or overawing the viewer.[

* 27
 Solid drawing

• The principle of solid drawing means taking into account

forms in three-dimensional space, or giving them volume and
weight.[12] The animator needs to be a skilled artist and has to
understand the basics of three-dimensional shapes, anatomy,
weight, balance, light and shadow, etc.[32] For the classical
animator, this involved taking art classes and doing sketches
from life.[33] One thing in particular that Johnston and Thomas
warned against was creating "twins": characters whose left
and right sides mirrored each other, and looked lifeless.[34]
Modern-day computer animators draw less because of the
facilities computers give them,[35] yet their work benefits
greatly from a basic understanding of animation principles,
and their additions to basic computer animation.

* 28
 Appeal

• Appeal in a cartoon character corresponds to what would

be called charisma in an actor.[36] A character who is
appealing is not necessarily sympathetic – villains or
monsters can also be appealing – the important thing is
that the viewer feels the character is real and
interesting.[36] There are several tricks for making a
character connect better with the audience; for likable
characters a symmetrical or particularly baby-like face
tends to be effective.[37] A complicated or hard to read
face will lack appeal, it may more accurately be described
as 'captivation' in the composition of the pose, or the
character design.

* 29
 Introduction to Animation

Computer Animation

* 30
 Animation Sequences

• Conventional Animation
• Storyboard
• Key frames
• In-between
• Pencil Test
• Cels
• Route-Sheet
• Exposure Sheet

* 31
 Steps in Design of Animation Sequence

• Story of Animation
• Detailed Layout
• Sound Recording
• To draw Key frames
• To obtain pencil test frames
• To transfer pencil test frames to cels.
• To give color & prepare a film.

* 32
 Animation sequences

1. Storyboard layout:
– a series of sketches or photographs
showing the sequence of shots or images
planned for a film
• It is outline of the action
• Set of basic events that are to take place in specific order
• It gives motion sequence
• It consists of rough sketches

* 33
 Animation sequences

2.object definition :

– Given for each participant in the action

– Each active section is treated as object
– It is defined in terms of basic shapes, such as
polygon
– Along with object , motion associated with object
is also defined

* 34
 Animation sequences
3.Key frame specification
– Key frame is detailed drawing of the scene at certain time in
animation sequence
– They are positioned according to time for that frame
4 . In-between frames
– These are intermediate frames between the key frames
– Usually there are 3 to 5 in-between frames between two key
frames
– E.g. film requires 24 frames per second

* 35
 Computer Based Animation
• Digitization
• Composition
• In-Between Frames
• Equivalent of pencil test
• Generation of In-between Frames.

* 36
 Methods of Controlling Animation

• Full Explicit Control

• Procedural Control
• Constraint Based System
• Tracking Live Action
• Actors
• Kinematics and Dynamics
• Physically Based animation

* 37
 Guidelines of Animation
• Illustration
• Effect
• Relationship
• Transition
• Feedback

* 38
 Rules Required for Animation

• Do’s
• Illustration animations
• Effect Animations
• Relationship Animations
• Transition Animations
• Feedback Animations
• Don’ts

* 39
 Animation Languages
• Linear List Notations

• General Purpose Languages

• Graphical Languages

* 40
 Computer animation Languages

• General purpose languages C,C++,Pascal or Lisp can be

used to design and control the animation sequences.
• Specialized animation languages allows us to design
and modify object shapes, setting camera properties
such as position, orientation and lens characteristics.
• A typical task in animation specification is scene
description i.e. positioning of objects and light sources
and setting camera properties.
• Another function is action specification i.e. motion
path.
* 41
 Motion specification

• Direct motion specification

– In this method rotation angle and
translation vectors are specified so that
geometrical transformations can be
applied to the object in the scene to
generate animation sequence
– E.g. bouncing ball
• Goal-directed systems
– In this method instead of specifying
motion parameters , abstractly describe
the actions. These systems are known as
Goal-directed systems
– Example: we could specify that we want
an object to walk or to run to particular
destination
* 42
 Motion Specifications
• Method Based on Geometric Information

• Method based on Kinetic Information

• Method based on Physical Information

• Method based on Behavior Information

* 43
 Gaming Platforms
• A gaming Platform is also called as a videogame platform or videogame system
• There are some advantages and disadvantages of PC & console gaming Platform.
• Advantages of PC:
• 1. Multiple uses other than gaming.
• 2. Great multi-player capability via the Internet.
• 3. Upgradeable.
• Disadvantages of PC:
• 1. Expensive
• 2. Smaller library of games
• Advantages of Console:
• 1. Relatively inexpensive
• 2. Huge variety of games
• 3. Sports games thrive on consoles.
• Disadvantages of Console:
• Not upgradeable
• Limited multi-player capability.

* 44
 Intel i860

• The Intel i860 is also known as 80860. The i860 was a RISC
microprocessor from Intel, first released in 1989.
• Features : VLIW & Powerful support for high speed floating
point operations.
• The design mounted a 32 bit ALU “Core” along with a 64 bit
FPU that was itself built in three parts: an adder, a multiplier
and a graphics processor.
• The system had separate pipelines for the ALU, floating point
adder and multiplier.
• The CPU could execute the majority of floating-point
instructions either in pipelined mode or in scalar mode.

* 45
 Intel i860

• In scalar mode the instructions executed one after another,

which took from 3 to 4 clock cycles per instruction.
• In pipelined mode instruction execution was broken into three
or four stages, the CPU could execute different stages of
different instructions at the same time.
• All of the buses were at least 64 bits wide. The internal
memory bus to the cache, for instance, was 128 bits wide.

* 46
 Workstation
• Introduction

• GPGPU (General Purpose GPU)

• CUDA ( Compute Unified Device

Architecture)

* 47
 Block Diagram of NVDIA Workstation

* 48
 Graphics Memory Pipeline
Modeling
Transform Prevertex Viewing Primitive
ation Lighting Transformation Generation

Projection
Transformation Clipping Rasterization

Texturing, Graphics Pipeline

Fragment Display in Hardware
Shading
* 49
 Introduction to OPENGL

* 50
 Functions of OpenGL
• Display List
• Feedback
• Alpha Bending
• Pixel Operations
• Texture Mapping
• Color Index Mode
• Polynomial Evaluators
* 51
 Features of OpenGL
• Scaling & Rotation
• Performance
• Transparency
• Alpha Bending
• Rendering in 3D
• Primitive Operations
• Hardware

* 52
 Sample Program

• #include<stdio.h>
• #include<GL/gl.h>
• #include<GL/glu.h>
• #include<GL/glut.h>
• int x,y;
• void Init()
• {
• glClearColor(1,1,1,0);
• glColor3f(0,0,0);
• /* glViewport(0 , 0 , 640 , 480); */
• /* glMatrixMode(GL_PROJECTION); */
• /* glLoadIdentity(); */
• gluOrtho2D(0 , 640 , 0 , 480);
• }
•

* 53
 Sample Program

• void renderBitmapString(float x,float y, char *text)

• {
• char *c;
• glRasterPos3f(x, y,0);
• for (c=text; *c != '\0'; c++)
• {
•
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_10,
*c);
• }
• }

* 54
 Sample Program
• void draw(void)
• {
• char *text;
• text = "Sandeep";
• //Background color
• glClearColor(0,1,0,1);
• glClear(GL_COLOR_BUFFER_BIT );
• //Draw order
• glBegin(GL_LINES);
• glVertex2i(10,10);
• glVertex2i(100,100);
• glEnd();

• glBegin(GL_LINES);
• glVertex2i(glutGet(GLUT_WINDOW_WIDTH)/2,0);
• glVertex2i(glutGet(GLUT_WINDOW_WIDTH)/2,glutGet(GLUT_WINDOW_HEIGHT));
• glEnd();
• glBegin(GL_POINTS);
•
• glVertex2i(x,y);
• glEnd();

• renderBitmapString(200,200, text);
• glFlush();
• }

* 55
 Sample Program

• int main(int argc,char ** argv)

• {
•
• printf("\nEnter x, y:");
• scanf("%d%d",&x,&y);
• glutInit(&argc,argv);
• glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
• /* Set the initial window position and size */
• glutInitWindowPosition(0,0);
• glutInitWindowSize(640,480);
• /* Create the window with title "DDA_Line" */
• glutCreateWindow("bresenham_circle");
• Init();

• glutDisplayFunc(draw);

• glutMainLoop();
• return 0;
• }

* 56
 Output

Sandeep

* 57
 DDA Line Drawing Program Using
OpenGL
• #include <stdio.h>
• #include <math.h>
• #include <GL/glut.h>
• #include <GL/glu.h>
• #include <GL/gl.h>

• double X1, Y1, X2, Y2;

• float round_value(float v)
• {
• return floor(v + 0.5);
• }

* 58
 DDA Line Drawing Program Using
OpenGL
• void LineDDA(void)
• {
• double dx=(X2-X1);
• double dy=(Y2-Y1);
• double steps;
• float xInc,yInc,x=X1,y=Y1;
• /* Find out whether to increment x or y */
• steps=(abs(dx)>abs(dy))?(abs(dx)):(abs(dy));
• xInc=dx/(float)steps;
• yInc=dy/(float)steps;

• /* Clears buffers to preset values */

• glClear(GL_COLOR_BUFFER_BIT);

• /* Plot the points */

• glBegin(GL_POINTS);
• /* Plot the first point */
• glVertex2d(x,y);
• int k;
• /* For every step, find an intermediate vertex */
• for(k=0;k<steps;k++)
• {
• x+=xInc;
• y+=yInc;
• /* printf("%0.6lf %0.6lf\n",floor(x), floor(y)); */
• glVertex2d(round_value(x), round_value(y));
• }
• glEnd();
* 59
• glFlush();
 DDA Line Drawing Program Using
OpenGL
• void Init()
• {
• /* Set clear color to white */
• glClearColor(1.0,1.0,1.0,0);
• /* Set fill color to black */
• glColor3f(0.0,0.0,0.0);
• /* glViewport(0 , 0 , 640 , 480); */
• /* glMatrixMode(GL_PROJECTION); */
• /* glLoadIdentity(); */
• gluOrtho2D(0 , 640 , 0 , 480);
• }

* 60
 DDA Line Drawing Program Using
OpenGL
• void main(int argc, char **argv)
• {
• printf("Enter two end points of the line to be drawn:\n");
• printf("\n************************************");
• printf("\nEnter Point1( X1 , Y1):\n");
• scanf("%lf%lf",&X1,&Y1);
• printf("\n************************************");
• printf("\nEnter Point1( X2 , Y2):\n");
• scanf("%lf%lf",&X2,&Y2);
•
• /* Initialise GLUT library */
• glutInit(&argc,argv);
• /* Set the initial display mode */
• glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
• /* Set the initial window position and size */
• glutInitWindowPosition(0,0);
• glutInitWindowSize(640,480);
• /* Create the window with title "DDA_Line" */
• glutCreateWindow("DDA_Line");
• /* Initialize drawing colors */
• Init();
• /* Call the displaying function */
• glutDisplayFunc(LineDDA);
• /* Keep displaying untill the program is closed */
• glutMainLoop();
• }

* 61
* 62