The document explains the use of Vertex Array Objects (VAOs) in OpenGL ES 3 and higher to store vertex attribute states, enhancing efficiency by reducing function calls and managing shared vertices. It details how VAOs enable the use of various OpenGL functions, including glDrawArrays, glDrawElements, and glDrawRangeElements, allowing for more streamlined rendering processes. Additionally, it outlines the initialization, management, and benefits of using vertex arrays and VAOs in rendering geometric primitives.

1. Vertex Array Objects (VAOs)
If you are using OpenGL ES 3 or higher, you should use
Vertex Array Objects (or "VAOs") to store your vertex
attribute state.
• Using a VAO allows the drivers to compile the vertex description format
for repeated use. In addition, this frees you from having to cache the vertex
format needed for glVertexAttribPointer.
• Instead you specify individual vertex data in immediate mode (between
glBegin() and glEnd() pairs), you can store vertex data in a set of arrays
including vertex positions, normals, texture coordinates and color
information. And you can draw only a selection of geometric primitives by
dereferencing the array elements with array indices.

2. VAO’S
Take a look the following code to draw a cube with immediate mode.
Each face needs 6 times of glVertex*() calls to make 2 triangles, for
example, the front face has v0-v1-v2 and v2-v3-v0 triangles. A cube
has 6 faces, so the total number of glVertex*() calls is 36. If you also
specify normals, texture coordinates and colors to the corresponding
vertices, it increases the number of OpenGL function calls.
The other thing that you should notice is the vertex "v0" is shared
with 3 adjacent faces; front, right and top face. In immediate mode,
you have to provide this shared vertex 6 times, twice for each side as
shown in the code.

3. VAO’S
• glBegin(GL_TRIANGLES); // draw a cube with 12 triangles
• // front face =================
• glVertex3fv(v0); // v0-v1-v2
• glVertex3fv(v1);
• glVertex3fv(v2);
• glVertex3fv(v2); // v2-v3-v0
• glVertex3fv(v3);
• glVertex3fv(v0);
• // right face =================
• glVertex3fv(v0); // v0-v3-v4
• glVertex3fv(v3);
• glVertex3fv(v4);
• glVertex3fv(v4); // v4-v5-v0
• glVertex3fv(v5);
• glVertex3fv(v0);
• // top face ===================
• glVertex3fv(v0); // v0-v5-v6
• glVertex3fv(v5);
• glVertex3fv(v6);
• glVertex3fv(v6); // v6-v1-v0
• glVertex3fv(v1);
• glVertex3fv(v0); ...
• // draw other 3 faces
• glEnd();

4. VAO’S
Using vertex arrays reduces the number of function calls and redundant usage
of shared vertices. Therefore, you may increase the performance of rendering.
Here, 3 different OpenGL functions are explained to use vertex arrays;
glDrawArrays(), glDrawElements() and glDrawRangeElements(). Although,
better approach is using vertex buffer objects (VBO) or display lists.

5. VAO’S
• Initialization
• OpenGL rovides glEnableClientState() and glDisableClientState() functions
to activate and deactivate 6 different types of arrays. Plus, there are 6
functions to specify the exact positions(addresses) of arrays, so, OpenGL
can access the arrays in your application.
• glVertexPointer(): specify pointer to vertex coords array
• glNormalPointer(): specify pointer to normal array
• glColorPointer(): specify pointer to RGB color array
• glIndexPointer(): specify pointer to indexed color array
• glTexCoordPointer(): specify pointer to texture cords array
• glEdgeFlagPointer(): specify pointer to edge flag array

6. VAO’S
• glVertexPointer(GLint size, GLenum type, GLsizei stride, const
GLvoid* pointer)
1. size: The number of vertex coordinates, 2 for 2D points, 3 for 3D
points.
2. type: GL_FLOAT, GL_SHORT, GL_INT or GL_DOUBLE.
3. stride: The number of bytes to offset to the next vertex (used for
interleaved array).
4. pointer: The pointer to the vertex array.

7. VAO’S
glNormalPointer(GLenum type, GLsizei stride, const GLvoid* pointer)
• type: GL_FLOAT, GL_SHORT, GL_INT or GL_DOUBLE.
• stride: The number of bytes to offset to the next normal (used for
interleaved array).
• pointer: The pointer to the vertex array.
Notice that vertex arrays are located in your application(system memory),
which is on the client side. And, OpenGL on the server side gets access to
them. That is why there are distinctive commands for vertex
array; glEnableClientState() and glDisableClientState() instead of
using glEnable() and glDisable().

8. VAO’S
glDrawArrays()
• glDrawArrays() reads vertex data from the enabled arrays by marching
straight through the array without skipping or hopping.
Because glDrawArrays() does not allows hopping around the vertex arrays,
you still have to repeat the shared vertices once per face.
• glDrawArrays() takes 3 arguments.
• The first thing is the primitive type.
• The second parameter is the starting offset of the array.
• The last parameter is the number of vertices to pass to rendering pipeline of
OpenGL.
For above example to draw a cube, the first parameter is GL_TRIANGLES, the
second is 0, which means starting from beginning of the array. And the last
parameter is 36: a cube has 6 sides and each side needs 6 vertices to draw 2
triangles, 6 × 6 = 36.

9. VAO’S
GLfloat vertices[] = {...}; // 36 of vertex coords ...
// activate and specify pointer to vertex array
glEnableClientState(GL_VERTEX_ARRAY);
glVertexPointer(3, GL_FLOAT, 0, vertices);
// draw a cube
glDrawArrays(GL_TRIANGLES, 0, 36);
// deactivate vertex arrays after drawing
glDisableClientState(GL_VERTEX_ARRAY);

10. VAO’S
glDrawElements()
• glDrawElements() draws a sequence of primitives by hopping around vertex arrays
with the associated array indices. It reduces both the number of function calls and
the number of vertices to transfer. Furthermore, OpenGL may cache the recently
processed vertices and reuse them without resending the same vertices into
vertex transform pipeline multiple times.
• glDrawElements() requires 4 parameters. The first one is the type of primitive, the
second is the number of indices of index array, the third is data type of index array
and the last parameter is the address of index array. In this example, the
parameters are, GL_TRIANGLES, 36, GL_UNSIGNED_BYTE and indices respectively.

11. VAO’S

12. VAO’S
glDrawRangeElements()
• Like glDrawElements(), glDrawRangeElements() is also good for hopping around
vertex array. However, glDrawRangeElements() has two more parameters
(start and end index) to specify a range of vertices to be prefetched. By adding this
restriction of a range, OpenGL may be able to obtain only limited amount of vertex
array data prior to rendering, and may increase performance.
• The additional parameters in glDrawRangeElements() are start and end index, then
OpenGL prefetches a limited amount of vertices from these values: end - start + 1.
And the values in index array must lie in between start and end index. Note that not
all vertices in range (start, end) must be referenced. But, if you specify a sparsely
used range, it causes unnecessary process for many unused vertices in that range.

13. VAO’S

14. VAO’S

15. VAO’S

16. VAO’S

17. VAO’S

18. • https://www.glprogramming.com/red/chapter0
1.html
• https://www3.ntu.edu.sg/home/ehchua/
programming/opengl/cg_introduction.html

19. OpenGL Functions
• A software API consisting of around several
hundred functions that allow you to talk to
your graphics hardware.
• It is cross-platform and the most commonly
used in professional graphics applications

20. OpenGL Functions
• 1.Primitive functions
• 2.Attribute functions
• 3.Viewing functions
• 4.Transformation functions
• 5.Input functions
• 6.Control functions
• 7.query functions.
• Primitive functions

21. OpenGL Functions
• Primitive functions-To perform operations ranging from choosing the
color with which we display a line segment.
• Depending on the API,the primitives can include points, line, segments,
polygons, pixels, text , and various type of curves and surfaces.
• Example
glBegin(GL_POINTS);
glVertex2f(100.0,200.0);
glEnd();

22. OpenGL Functions
glVertex2d, glVertex2f, glVertex2i,
glVertex2s,
glVertex3d, glVertex3f, glVertex3i,
glVertex3s,
glVertex4d, glVertex4f, glVertex4i,
glVertex4s,
glVertex2dv, glVertex2fv, glVertex2iv,
glVertex2sv,
glVertex3dv, glVertex3fv, glVertex3iv,
glVertex3sv,
glVertex4dv, glVertex4fv, glVertex4iv,
glVertex4sv

23. OpenGL Functions
• The postfix specifies the format of parameters used by each
function:
• 2 means a 2D point x, y.
• 3 means a 3D point x, y, and z.
• 4 means a 3D point in homogeneous coordinates x, y, z, and w.
[Homogeneous coordinates will be discussed in the lecture on Chapter 5.]
• d means double type.
• f means float type.
• i means integer type.
• s means short type.
• v means vector type.
• u[bsi] means unsigned version of that type

24. OpenGL Functions
Example: using vector type parameter
double P1[2], P2[2], P3[2];
/* set values to P1, P2, P3. */
P1[0] = 1.5; P1[1] = -0.3;
......
glBegin(GL_POINTS);
glVertex2dv(P1);
glVertex2dv(P2);
glVertex2dv(&P3[0]); /* This is equivalent. */
glEnd()

25. OpenGL Functions
• OpenGL lines
• Three different line primitives can be created:
• GL_LINES-draws a line segment for each pair of vertices.
• GL_LINE_STRIP-draws a connected group of line segments from
vertex v0to vn connecting a line between each vertex and the
next in the order given.
• GL_LINE_LOOPSimilar to GL_LINE_STRIP, except it closes the
line fromvn to v0, defining a loop.
glBegin(GL_LINE_LOOP); //make it a connected close line segment
glVertex2f(0.0f, 2.0f); //note 2D form
glVertex2f(1.0f, 2.0f);
glVertex2f(0.0f, -2.0f);
glVertex2f(-1.0f, 0.0f);
glEnd();

26. OpenGL Functions

27. OpenGL Functions
• OpenGL polygons
• Front faces, back faces and rendering modes
• glCullFace() -- specify whether front- or back-facing sides (faces) should
be drawn
• glFrontFace( ) -- define front- and back-facing polygons
• glPolygonMode( ) -- select a polygon rasterization mode
• Polygon Types
• GL_POLYGON -- draws a polygon from vertex v0 to vn-1
• GL_QUADS -- draws a series of separate four-sided polygons
• GL_TRIANGLES -- draws a series of separate three-sided polygons
• GL_QUAD_STRIP -- draws a strip of connected quadrilaterals
• GL_TRIANGLE_STRIP -- draws a strip of connected triangles
• GL_TRIANGLE_FAN -- draws a strip of triangles connected about a
common origin

28. OpenGL Functions
• OpenGL polygons
The following code constructs a filled in
parallelogram on the x-y plane:
glBegin(GL_POLYGON);
glVertex2f(0.0f, 2.0f); //note 2D form
glVertex2f(1.0f, 2.0f);
glVertex2f(0.0f, -2.0f);
glVertex2f(-1.0f, 0.0f);
glEnd();

29. OpenGL Functions
• The following draws a rectangle:
glRectf(0f, 0f, 1f, 1f); // x0,
y0, x1, y1: two opposite corners
// of the rectangle.
glBegin(GL_QUADS);
glVertex2f(0.0f, 0.0f); //note 2D form
glVertex2f(1.0f, 0.0f);
glVertex2f(1.0f, 1.0f);
glVertex2f(0.0f, 1.0f);
glEnd();

30. OpenGL Functions
• Attribute functions-Define the low
level objects or atomic entities that our
system can display.
Eg glColor3f(1.0,0.0,0.0);
glLineWidth(1.0);

31. OpenGL Functions
• Viewing functions-The viewing functions allows us
to specify various views,although APIs differ in the
degree of flexibility they provide in choosing a view.
• Example
• glViewport (xvmin, yvmin, vpWidth,
vpHeight);
• gluOrtho2D (xwmin, xwmax, ywmin,
ywmax);
• gluLookAt(…);

32. OpenGL Functions
• Transformation functions-Transformation
function that allows to carry out
transformations of objects,such as
rotation, translation and scaling.
• Example
• glTranslatef (tx, ty, tz);
• glRotatef (theta, vx, vy, vz);
• glScalef (sx, sy, sz);

33. OpenGL Functions
• Input function- Allows us to deal with the
diverse forms of input that characterize
modern graphics systems.
• void glutKeyboardFunc(void (*func)
(unsigned char key, int x, int y));

34. Animations
Animation is the art of making drawings move or the
method of photographing successive drawings, models,
and puppets and manipulating them to appear as moving
images.
Animation refers to the movement on the screen of the
display device created by displaying a sequence of still
images. Animation is the technique of designing,
drawing, making layouts and preparation of
photographic series which are integrated into the
multimedia and gaming products.

35. Animations
A person who creates animations is called
animator.
He/she use various computer technologies to
capture the pictures and then to animate these
in the desired sequence.

36. Animations
Animation includes all the visual changes on the
screen of display devices. These are:
• 1. Change of shape as shown in fig:

37. Animations
Animation includes all the visual changes on the
screen of display devices. These are:
• 2. Change in size as shown in fig:

38. Animations
Animation includes all the visual changes on the
screen of display devices. These are:
• 3. Change in color as shown in fig:

39. Animations
Animation includes all the visual changes on the
screen of display devices. These are:
• 4. Change in structure as shown in fig:

40. Animations
Animation includes all the visual changes on the
screen of display devices. These are:
• 5. Change in angle as shown in fig:

41. Animations

42. Animation: Introduction
Images are manipulated to create moving
images.

43. Application Areas of Animation
1. Education and Training: Animation is used in school, colleges and training
centers for education purpose. Flight simulators for aircraft are also
animation based.
2. Entertainment: Animation methods are now commonly used in making
motion pictures, music videos and television shows, etc.
3. Computer Aided Design (CAD): One of the best applications of computer
animation is Computer Aided Design and is generally referred to as CAD.
One of the earlier applications of CAD was automobile designing. But now
almost all types of designing are done by using CAD application, and
without
animation, all these work can't be possible.

44. Application Areas of Animation
4.Advertising: This is one of the significant applications of computer animation.
The most important advantage of an animated advertisement is that it takes very
less space and capture people attention.
5. Presentation: Animated Presentation is the most effective way to represent an
idea. It is used to describe financial, statistical, mathematical, scientific &
economic data.

45. Animation Functions
Morphing: Morphing is an animation function which is used to transform
object shape from one form to another is called Morphing. It is one of the
most complicated transformations. This function is commonly used in
movies, cartoons, advertisement, and computer games.

46. Animation Functions

47. Animation Functions
The process of Morphing involves three steps:
1. In the first step, one initial image and other final image are added to
morphing application as shown in fig: Ist
& 4th
object consider as key
frames.
2. The second step involves the selection of key points on both the
images for a smooth transition between two images as shown in
2nd
object.
3. In the third step, the key point of the first image transforms to a
corresponding key point of the second image as shown in 3rd
object
of the figure.

48. Animation Functions
2. Wrapping: Wrapping function is similar to morphing function. It
distorts only the initial images so that it matches with final images and no
fade occurs in this function.
3. Tweening: Tweening is the short form of 'inbetweening.'
Tweening is the process of generating intermediate frames between the
initial & last final images. This function is popular in the film industry.

49. Animation Functions

50. Animation Functions
4. Panning: Usually Panning refers to rotation of the camera in
horizontal Plane. In computer graphics, Panning relates to the movement
of fixed size window across the window object in a scene. In which
direction the fixed sized window moves, the object appears to move in the
opposite direction as shown in fig:

51. Animation Functions
If the window moves in a backward direction, then the object appear to
move in the forward direction and the window moves in forward direction
then the object appear to move in a backward direction.

52. Animation Functions
5. Zooming: In zooming, the window is fixed an object and change
its size, the object also appear to change in size. When the window is
made smaller about a fixed center, the object comes inside the window
appear more enlarged. This feature is known as Zooming In.
When we increase the size of the window about the fixed center, the
object comes inside the window appear small. This feature is known
as Zooming Out.

53. Animation Functions
6. Fractals: Fractal Function is used to generate a complex picture
by using Iteration. Iteration means the repetition of a single formula again
& again with slightly different value based on the previous iteration result.
These results are displayed on the screen in the form of the display
picture.

54. General purpose Languages
C
C++
Java
Javascript
Pascal
LISP

55. Animation Tools
Open source Tools
• Blender
• Containerize
• openToonz
• Pencil2D
• Synfig
• K-3D
• Krita

56. Animation Tools
Paid Tools
• Animate CC
• Cartoon Animator

57. HISTORY
• Many people were involved in the history of
animation and creating the first animations. However,
there is only one person who is considered as
the “Father of Animation.”
• He is the French cartoonist, Émile Eugène Jean Louis
Courtet, known as Émile Cohl. Cohl is the creator of
the first fully animated movie
called Fantasmagorie. It premiered in Paris on
August 17, 1908.

58. Types Of Animation
• There are four main types of animation:
1. 2D animation
2. 3D animation
3. Stop motion animation
4. Motion graphics
There is an additional type of animation called traditional animation.
However, since traditional animation is the first type of 2D animation
Traditional Animation
Traditional animation is also called hand-drawing animation, classical
animation, or cel animation. It consisted of drawing everything frame
by frame, be it a character, a background, and everything in between.

59. Types Of Animation
• TRADITIONAL ANIMATION
Traditional animation is also called hand-drawing animation, classical
animation, or cel animation. It consisted of drawing everything frame
by frame, be it a character, a background, and everything in between.
These drawings were made on sheets of transparent paper and then
photographed on an animation camera.
After that, the final photographs were used to create movement in a
two-dimensional space, animated on 12 frames per second (fps).
Sometimes they were animated on 24fps for smoother movements and
faster action.

60. Types Of Animation
• 2D ANIMATION
• With traditional animation, animators were required to
keep drawing the same characters over and over again.
• That is not needed with vector-based 2D animation
since the motion is controlled by vectors.
• With vectors, every creation can be reused as many
times as the animator wishes, without having to re-
create the same backgrounds, characters, and so on.
• Moreover, the movement of the characters is
controlled by vectors.

61. Types Of Animation
• 3D ANIMATION
• Also called CGI or Computer Animation, 3D
animation is one of the most popular types of
animation. 3D animation is used not only for feature
films but also for short films, video games, ads, and
more.

62. 3D Animation vs. 2D Animation
• Technical skillsets:excellent drawing skills to
become a 3D designer. However, you will need
to have a clear understanding of animating in
3D.
• Moving instead of drawing:Compared to 2D
animation, 3D animation will mainly consist of
moving the character in a 3D program rather
than drawing for different frames.

63. Stop Motion Animation
• Stop motion animation is similar to traditional
animation since it also combines a series of images
that document slight movements.
• However, stop motion animation uses photographs
of real objects and not drawings or vector
animations.
• Artists take pictures of real-life objects and scenes.
After each object they move in the scene they have
set up, they take a picture before making the next
move or the next moves.

64. Stop Motion Animation
• They continue this process until they have a photo for
each frame they want to use for their animation.
• Similar to traditional 2D animation, when all frames
are shown in a sequence right after the other, the
objects seem like they are moving on their own. That’s
how the illusion of movement is created with stop
motion animation.
• Before CGI animation, stop motion animation was the
only animation type that gave viewers that “special
effects” feeling.

65. Motion Graphics
• Motion graphics can be 2D and 3D and are
mainly used to animate text, logos, and video
clips. Motion graphics are called all digital
graphics that create the illusion of motion.
• Unlike 2D animation and 3D animation, you
do not need to follow a particular storyline or
focus on key characters with motion graphics.