Republic of the Philippines

POLYTECHNIC UNIVERSITY OF THE PHILIPPINES

INSTITUTE OF TECHNOLOGY
Engineering Technology Department

INSTRUCTIONAL MATERIAL FOR

CMPE 40042

COMPUTER ENGINEERING
TECHNOLOGY 4:
ANIMATION

COMPILED BY:
JOHN MICHAEL V. LEGASPI. MSIT
FRESCIAN C. RUIZ, MSIT

i | CMPE 20042 Computer Engineering Technology 4 - Animation

Introduction
Graphic design is applied to everything visual, from road signs to technical
schematics, from interoffice memorandums to reference manuals. Design can aid in selling
a product or idea. It is applied to products and elements of company identity such as logos,
colors, packaging and text as part of branding (see also advertising). Branding has become
increasingly more important in the range of services offered by graphic designers. Graphic
designers often form part of a branding team.

Today animation is advanced art which plays important vital role in the education,
industry business world as well as touches the lives of society. In this world a lot of
animation is used on the internet for advertisement and promotion among the target
audience. It come across animation on other mediums such as print media and television
as it is one of the most versatile and flexible means. The need for animation arises as a
form of an excellent means of interaction that helps to communicate the concept of any
kind to a large number of audiences, whether young or old.

The modern animation is a mixture of imagination, storyline, creativity, and

meaning conveyed using storytelling talent that can have 2 -D or 3-D effects and
characters, based upon the requirements of the people behind such video and their
budget. When business houses use animation for their product promotion, these are
usually referred to as explainer videos or animation videos. These videos are a very
crisp and engaging manner of increasing viewership for product promotion. These
videos can reach the masses within a short time span for making the desired impact.
Animation videos have been used by almost every industry, be it business,
education, films, gaming or entertainment, and many more. Due to its ex tensive and
ever-expanding field, animators and animation have gained popularity among
masses.

ii | CMPE 20042 Computer Engineering Technology 4 - Animation

iii | CMPE 20042 Computer Engineering Technology 4 - Animation
 Table of Contents
Chapter I. Introduction to Computer Graphics............................................................................................ 6
Introduction ................................................................................................................................................ 7
Computer Graphics ................................................................................................................................... 8
Application of Graphics ............................................................................................................................. 8
Graphics Artists ........................................................................................................................................ 8
Types of Graphics ..................................................................................................................................... 9
History and Development of Computer Graphics............................................................................ 10
Assessment 1 ........................................................................................................................................ 118

Chapter II. Introduction to 3D and Animation Overview ...................................................................... 119

Introduction ............................................................................................................................................ 119
Used of 3D Animation .............................................................................................................................. 19
What is 3D .............................................................................................................................................. 20
Difference between 2D and 3D ............................................................................................................... 21
3D Modelling ........................................................................................................................................... 21
Types of 3D Modelling Software ............................................................................................................. 23
Assessment 2 .......................................................................................................................................... 24

Chapter III. The Animation Production Pipeline ........................................................................................ 25

Introduction ............................................................................................................................................. 25
The Preproduction .................................................................................................................................. 26
The Production ....................................................................................................................................... 30
The Post Production ................................................................................................................................ 33
Assessment 3 .......................................................................................................................................... 35

Chapter IV. Learning Blender 3D Basic Layout and Appearance ........................................................... 37

Introduction .............................................................................................................................................. 37
Blender Appearance. .............................................................................................................................. 37
Layout Breakdown .................................................................................................................................. 39
Header Areas........................................................................................................................................... 39
Workzone Area ........................................................................................................................................ 40
Toolbar Pannel ........................................................................................................................................ 41
Timeline ..................................................................................................................................... 43
Assessment 4 ........................................................................................................................................ 444

Chapter V. The 3D Space ............................................................................................................................. 45

Window Control ....................................................................................................................................... 47
The 3D Viewer ............................................................................................................................ 47
Creating View Ports ..................................................................................................................... 48
Typical Buttons ........................................................................................................................... 49
Assessment 5 .......................................................................................................................................... 50

Chapter VI. Starting Creating and Editing Objects ......................................................................................... 51

Introduction to Objects ............................................................................................................................. 51
Placing Object on Screen ............................................................................................................ 52
The Mesh Types ......................................................................................................................... 53
The Edit Mode ............................................................................................................................ 55
The Tool Shelt ........................................................................................................................................ 57
Proportional Editing .................................................................................................................... 58
macOS ....................................................................................................................................... 54

iv | CMPE 20042 Computer Engineering Technology 4 - Animation

Chapter VII. Setting Color, Stars and Mist ................................................................................................. 60
Introduction ............................................................................................................................................. 56
The Stas Settings ................................................................................................................................... 57
Using Images as Background ................................................................................................................ 57
Panels ...................................................................................................................................................... 58
Importing Footage ................................................................................................................................... 58

Chapter VIII. Setting Cameras and Lights ................................................................................................ 61

Conceptual Lights Types ........................................................................................................................ 61
Spotlight Portion ..................................................................................................................................... 66
Indirect Lighting ...................................................................................................................................... 67

Chapter IX. Rendering Concepts ............................................................................................................... 64

Basic Setup ............................................................................................................................................. 70
Scene Settings ...................................................................................................................................... 71ß
Creating MPEG Movie File ..................................................................................................................... 71
Asessment 6 ............................................................................................................................................ 72

Chapter X. ANIMATION Basic Setup .......................................................................................................... 68

Introduction ............................................................................................................................................ 73
The Key Framing .................................................................................................................................... 74
Moving, Rotating , and Scaling ............................................................................................................... 74
Viweing Animation .................................................................................................................................. 75
Drop Sheet ............................................................................................................................................... 77
Graph Editor ........................................................................................................................................... 77
Animating Materials, Lamps, and World Settings .................................................................................. 79

Midterm: .......................................................................................................................................................... 81
Quiz no.1 ................................................................................................................................................. 82
Finals: ............................................................................................................................................................. 84
Grading System .............................................................................................................................................. 85
References...................................................................................................................................................... 85

v | CMPE 20042 Computer Engineering Technology 4 - Animation

 Learning Objective
This course teaches the basic 3D computer
animation techniques such as key framing, rigging and
posing, path animation, motion capture, particle system,
fluid simulation, deformation, hair, cloth, and soft bodies.
Students will use the open source 3D modeling and
animation tool Blender to study these techniques and
develop course
projects.

vi | CMPE 20042 Computer Engineering Technology 4 - Animation

 Chapter I. Introduction to Graphics

Overview:
Graphic design is so much a part of our modern
world that it is hard to imagine living without it. And in
some ways, we never have: visual communication is
about as old as our opposable thumbs, though it’s been
a long journey from stone tools to digital tablets. In short,
the history of graphic design is a story that spans the
entirety of h uman existence and it has the power to
inspire and inform even modern graphic designers.

Learning Outcomes:
After successful completion of this lesson, you should be
able to:
• Learn what are the concepts of computer graphics
• Discover the use of Computer graphics
• Identify software tools used in computer graphics
• Learn the types of computer graphics
• Identify the sources used

Course Materials:

Introduction

Graphics is defined as any sketch or a drawing or a special network that

pictorially represents some meaningful information.
In general term :
In general, the term graphic refers to a design or visual image displayed on a
variety of surfaces, including canvas, paper, walls, signs, or a computer monitor. They
are created for entertainment, branding, or providing information
CG or computer graphics are any image media, usually movies and pictures that
are created through the use of hardware and software. They are often referred to as
computer-generated imagery; more commonly known as CGI. An example of a
computer graphic is the picture shown on this page.
Graphic may also be used to describe a phrase, gesture, or image that is
considered obscene or offensive.
Other Terms :
Computer Graphics is used where a set of image needs to be manipulated or
the creation of the image in the form of pixels and is drawn on the computer.
Computer Graphics can be used in digital photography, film, entertainment,
electronic gadgets and all other core technologies which are required. It is a
vast subject and area in the field of computer science.

7 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Computer Graphics can be used in UI design, rendering, geometric object,
animation and many more.
In most area, computer graphics is an abbreviation of CG. There are several
tools used for implementation of Computer Graphics. The basic is the
<graphics.h> header file in Turbo-C, Unity for advanced and even OpenGL
can be used for it’s Implementation.
It was invented in 1960 by great researchers Verne Hudson and William Fetter
from Boeing.
Computer Graphics refers to several things:
• The manipulation and the representation of the image or the data in a
graphical manner.
• Various technology required for the creation and manipulation.
• Digital synthesis and its manipulation.
Applications
• Computer Graphics are used for aided design for engineering and
architectural system- These are used in electrical automobile, electro-
mechanical, mechanical, electronic devices. For example: gears and bolts.
• Computer Art – MS Paint.
• Presentation Graphics – It is used to summarize financial statistical
scientific or economic data. For example- Bar chart, Line chart.
• Entertainment- It is used in motion picture, music video, television
gaming.
• Education and training- It is used to understand operations of complex
system. It is also used for specialized system such for framing for captains,
pilots and so on.
• Visualization- To study trends and patterns.For example- Analyzing
satellite photo of earth.

A graphic artist is an individual who specializes in or has a profession of

designing computer graphics.
Alternatively referred to as graphic software or photo software, an image
editor is a software program used to edit or otherwise manipulate
an image, picture or graphic. One of the most popular and powerful image editors
is Adobe Photoshop. A free alternative to Photoshop is GIMP.
Users using Microsoft Windows may also use the pre-installed MSPaint program as
a basic image editor.

The Two Types of Computer Graphics: Bitmaps and Vector Drawings

Types of Computer Graphics

• Raster Graphics: In raster graphics pixels are used for an image to be
drawn. It is also known as a bitmap image in which a sequence of image
is into smaller pixels. Basically a bitmap indicates a large number of pixels
together.

8 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Raster graphics are best used for non-line art images; specifically digitized
photographs, scanned artwork or detailed graphics. Non-line art images are best
represented in raster form because these typically include subtle chromatic
gradations, undefined lines and shapes, and complex composition.

However, because raster images are pixel-based, they suffer a malady called
image degradation. Just like photographic images that get blurry and imprecise
when blown up, a raster image gets jagged and rough. Why? Ultimately, when you
look close enough, you can begin to see the individual pixels that comprise the
image. Hence, your raster-based logo, magnified to 1000, becomes bitmapped
before you know it. Although raster images can be scaled down more easily,
smaller versions often appear less crisp or “softer” than the original.

Figure
1.1
Example of Raster Graphics

• Vector Graphics: In vector graphics, mathematical formulae are used to

draw different types of shapes, lines, objects and so on.

Figure 2 : Sample Vector Graphics

9 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Unlike pixel-based raster images, vector graphics are based on mathematical
formulas that define geometric primitives such as polygons, lines, curves,
circles and rectangles. Because vector graphics are composed of true
geometric primitives, they are best used to represent more structured images,
like line art graphics with flat, uniform colors. Most created images (as opposed
to natural images) meet these specifications, including logos, letterhead, and
fonts.
Inherently, vector-based graphics are more malleable than raster images —
thus, they are much more versatile, flexible and easy to use. The most obvious
advantage of vector images over raster graphics is that vector images are
quickly and perfectly scalable. There is no upper or lower limit for sizing vector
images. Just as the rules of mathematics apply identically to computations
involving two-digit numbers or two-hundred-digit numbers, the formulas that
govern the rendering of vector images apply identically to graphics of any size.

History Development of Computer Graphics

Before the printing press: Prehistory to the Renaissance

Graphic design proper really began after the invention of the printing press in 1440, but
the roots of visual communication stretch all the way back to caveman times. In this section,
we’ll run down the events of early history that paved the way for graphic design centuries
before the world was ready for it.

• Cave paintings
• It seems like humans have always had an inherent drive towards art, evidenced
by the early cave paintings dating back to prehistoric times. Subjects vary from
animals to hand imprints to events like hunting, and they’ve been found all over
the world (Australia, Spain, Indonesia, France, Argentina, just to name a few).
Historians debate the fine details as to who these were meant to
communicate with (whether each other or their gods), but one thing that’s clear
is, right from the start, humanity displayed a knack for communicating with
visuals.

Cueva de las Manos in Perito Moreno,

Argentina. Via Wikipedia

10 | CMPE 20042 Computer Engineering Technology 4 - Animation

• Sumerian written language
• As you read this article, interpreting all these tiny, abstract marks of the Latin Alphabet
into words and sentences, it’s easy to forget that alphabets are a man-made invention.
As far as we know, the Sumerians created one of the first written languages, most likely
as a means of recording trader inventories to ensure couriers didn’t steal anything on
deliveries.
• These earliest languages were logographic—icons represented entire words instead
of phonetic sounds. This suggests a natural ability of humans to use visual
representation to communicate complex ideas, a cornerstone of modern graphic
design. And in the last few millennia, not much has changed: designers still rely on
icons like hamburger menus or magnifying glasses to represent entire words and
concepts in limited space.

An ancient Sumerian tablet bearing sad news: a letter written to the king of Lagash informing
him of his son’s death in battle.

11 | CMPE 20042 Computer Engineering Technology 4 - Animation

• Chinese printing
• China holds most of the records for printing discoveries,
including non-papyrus paper making, woodblock
printing, and movable type—all of which occurred earlier
than you might have guessed.
• As far back as 200 CE, China used wood reliefs to print
and stamp designs on silk clothes, and later paper. In
1040, Bi Sheng invented the world’s first movable type
printing press out of porcelain, more than 400 years
before Gutenburg brought a similar technology to
Europe

A woodblock print of a Chinese play from the Yuan

dynasty.

• Medieval calligraphy

In the Middle Ages, typography started to take off as humanity started

expanding its aesthetic horizons into the letters and words themselves. Because
texts in this period were produced and replicated by hand, a little artistry made the
books more valuable and set certain scholars apart from others. In Islamic cultures,
typography was doubly important because figurative art was seen as sacrilegious,
meaning typography was one of only a few permissible ways of artistic expression.

12 | CMPE 20042 Computer Engineering Technology 4 - Animation

Famous sixteenth-century Persian calligrapher Mir Emad Hassani, demonstrating the Nasta’liq
style.
• European heraldry

Technically, the world’s first logo is the coat of

arms, used as a symbol to represent family
houses or territories. Scholars theorize the
practice was popularized during the Crusades,
where intermingling soldiers from different
countries and houses incentivized a means to tell
everyone apart, particularly on armor and battle
flags.
Like logos, a house’s coat of arms aimed to
represent the values, characteristics and styles of
the people. Later, these emblems took on more
practical purposes, such as wax seals to reflect
authenticity.

15th century German coats-of-arms. Via Wikipedia

• Storefronts
• In the 14th century, beer and ale were viable if not
preferable alternatives for drinking water at a time
when most water sources were polluted. King
Richard II of England made a law that ale houses
must have signs out front so the public could find
them easier.
• Not only were these the first signage that actually
represented companies rather than houses, but
they’re also the origin of a beautiful tradition that
survives to this day.

Sign outside
the Green
Dragon pub. Via Pinterest

13 | CMPE 20042 Computer Engineering Technology 4 - Animation

• The birth of graphic design: Renaissance and Industrial Era
• With the advent of the printing press in Europe, humanity was able to recreate
text, art and design on a massive scale, and for relatively cheap. The ancestors
of modern companies—also on the rise—soon took notice of how such visuals
could affect shopping behaviors and increase profits, thus modern graphic
design was born.

o Gutenberg press
• Johannes Gutenberg brought moveable type to Europe in 1439, introducing
mass communication to Western culture and forever changing civilization. With
the Gutenberg press, people no longer had to rely on lengthy scholarly
reproductions of books, opening up literature (and literacy) to the masses and
making it affordable. The Gutenberg press paved the way for more commercial
uses of design, which ushered in the era of graphic design as we know it.

o First logos
• It was the printing industry that first used logos, although they were limited to
just marks on their own documents. It wasn’t just a branding device, but also a
means to show off your printing skill—how well your logo was printed reflected
how well everything was printed.

o First Print Advertisements

• The printing press gave way to the “coranto,” the precursor to the newspaper. And in
the early 1600s, these corantos featured the first printed advertisements.
• (To be fair, written advertisements date back to ancient Egypt, but this is the first time
we see images in mass-produced ads.)
o Chromolithography
• Technological advancements continued to fuel the progression of graphic
design, such as the ability to print in color, or chromolithography. While used
primarily for recreating paintings for home decor, chromolithography also
opened new doors for advertising.
• Brands were now able to use a lot of the familiar marketing tools we know
today, such as characteristic color schemes and building emotional
connections through slice-of-life scenes. Before, visuals were stilted by the
tech of the time (see the ink blot coranto image in the previous section) and
prioritized basic clarity instead of touching on complex emotions. But
chromolithography enabled some degree of realism, allowing advertising to
capitalize on attractive models, fashions of the day and artistic usage of colors.

• Graphic design in the modern era

• Graphic design as we know it today really started developing in the modern
era, roughly the late 1800s up until the end of World War II. While the 19th
century was more about technological advancements and new capabilities, the
modern era was about learning how to exploit these advancements for more
artistic aims. With printing now a common tech and competition fueling

14 | CMPE 20042 Computer Engineering Technology 4 - Animation

 innovation, artists and designers were pushed to explore new styles and
techniques, which quickly trickled into advertising and branding.

o The Wiener Werkstätte

• With more and more companies recognizing the benefit of graphic design, it
was just a matter of time before the first graphic design agency emerged. That
honor belongs to Austria’s Wiener Werkstätte, an organization who made
contributions to design style and business alike.
Meaning simply “Vienna workshop,” the Wiener Werkstätte was the first such
organization of visual artists, including painters, architects, and early graphic

designers.
Left to right: Werkstätte monogram, rose logo and the Galerie Miethke logo. Via Smashing
Magazine

• Organizationally, it set the precedent for all other collaborative agencies to follow.
• Perhaps its greatest legacy was stylistic innovation, such as cubism. And as a group
of professional artists working together, they held great influence over establishing
design standards for upcoming generations of artists, particular those after World War
I when cultural attitudes were changing worldwide. The work done at the Wiener
Werkstätte set the stage for the popular Bauhaus and Art Deco styles that soon
followed.
•
The term “graphic design” appears for the first time – 1922
William Addison Dwiggins. Via Wikipedia

15 | CMPE 20042 Computer Engineering Technology 4 - Animation

 In his article “New Kind of Printing Calls for
New Design” (printed in the Boston Evening
Transcript, August 29, 1922), book designer
William Addison Dwiggins first used the term
“graphic design” to describe exactly what his
role was in structuring and managing the
visuals in book design. From day one,
designers were struggling to explain to non-
designers what, exactly, they did.

o Paul Rand
• With one foot in modernism and the
other in post-modernism, legendary
designer Paul Rand helped lead graphic
design into its current form. He posted his
theories and ideologies in the seminal
work Thoughts on Design, which largely
shaped the future of the entire graphic
design industry.
• His book candidly explains his design
philosophies he used throughout the latter
half of the twentieth century, namely a call for “functional-aesthetic perfection,”
an ideal balance between a logo looking good and communicating its points
effectively, seen in his popular logo designs for brands like Ford,
Westinghouse, Yale, ABC, UPS, and IBM.

• A glimpse into the digital era

• From the 1950s onward, the world began its slow approach to the digital era
we’re currently enjoying. The mass-adoption of home computers is a
technological advancement comparable to the invention of the printing press,
ushering in a new age for mass communication and granting access to esoteric
art styles and digital software for new methods of creating art.

16 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Adobe Photoshop—first released in 1990—even on its own changed the face of
graphic design. Photo manipulation created a whole new subcategory of graphic design,
blending together elements of photography, illustration, and CGI (it would have made the
Gesamtkunstwerk artists proud).

Simultaneously, the nature of branding also evolved to meet the changing times. We
partially have MTV to thank for this—they brought a fresh new take on logo usage, particularly
in constantly changing theirs while retaining recognizable characteristics.

When the internet came into prominence around the turn of the century,
designers took a page out of MTV’s book and adopted youthful and at times edgy
designs to draw the younger generation into the world wide web. This can be seen in
online trends like flat design, which incorporates bright colors and cartoonish figures.

The history of graphic design is ongoing

That pretty much brings us up to date with graphic design, but one area still remains a
mystery: what is the future of graphic design?

The progression of visual communication from cave paintings to digital software can
serve as great inspiration, but what fruit that bears is up to you, whether you’re the next
generation of designer or the client whose brand might lend itself to a new leap in design
thinking. Though today the process is hard work, tough feedback, countless late nights in front
of a glowing screen, the result might just bring about the Bauhaus or Thoughts on Design of
tomorrow…

17 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Assessment 1

INSTRUCTION : Write Capital “T” if the statement correct and “F” if not.

True or false
______ 1. A graphic artist is an individual who specializes in or has a profession of
designing computer graphics.
______2. In raster graphics It is also known as a bitmap image in which a sequence
of image is into smaller pixels. Basically a bitmap indicates a large number of pixels
together.

______3. Computer Graphics can be used in UI design, rendering, geometric object,

animation and many more.

______4. In vector graphics, mathematical formulae are used to draw different

types of shapes, lines, objects
______5. graphic software or photo software, an image editor is a software program
used to edit or otherwise manipulate an image, picture or graphic

18 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Chapter II.

Introduction to 3D and Animation Overview

Overview:
Computer graphics, one of the fastest growing industries today, drives
the technology and determines what computers are going to be able to do
tomorrow. 3D animation has become a mainstay in film, television, and
video games, and is becoming an integral part of other industries that may
not have found it all that useful at first.

Learning Outcomes:
After successful completion of this lesson, you should be able to:
• Understand what 3D Animation is all about
• Identify the difference 2D and 3D
• Be familiar on what available and open source 3D Software’s
• Distinguish the importance in 3D modelling

Course Materials:

Introduction
3D animation, which falls into the larger field of 3D computer graphics, is a
general term describing an entire industry that utilizes 3D animation computer software
and hardware in many types of productions. This book uses the term 3D animation to
refer to a wide range of 3D graphics, including static images or even real solid models
printed with a 3D printer called a rapid prototype. But animation and movement is the
primary function of the 3D animation industry. 3D animation is used in three primary
industries:
Entertainment
The entertainment industry is the most widely recognized of the three
primary 3D animation industries and includes film, television, video games, and
advertising—each of which has subfields within it. The entertainment industry
is dedicated to creating and selling entertainment to an audience.
Example are : Film , Television, Video game, advertising
Scientific
The scientific industries utilizing 3D animation include medicine, law,
archi- tecture, and product visualization. The use of 3D in these industries is not
well known, however, because the final products are aimed at a specific
audience and rarely are seen by the general public.
Example : Medicine, Law, Architecture and Product Visualization

Other

19 | CMPE 20042 Computer Engineering Technology 4 - Animation

 The 3D animation industry is in its infancy, and the technology that is
driving this art form is changing on a yearly basis. This rapid pace of change
necessitates the “other” category because some fields are so new that they do
not fit into established mainstream categories. A trio of these new 3D animation
fields are art, augmented reality, and projection mapping.
Using 3D animation in art is just what it sounds like: the creation of 3D
elements incorporated in a final product to be shown in a gallery or other art-
exhibition venue. This could include still imagery to be framed and posted on
the gallery walls or a 3D statue created in 3D software and then rapid-
prototyped and placed into the gallery as sculpture. Typically today 3D art
animation is video installations that will use animated forms in a non-story-
based structure. Sculpture might utilize moving 3D animations to enhance the
piece. These types of 3D anima- tions are typically not character- or story-
based, but simply moving forms projected onto the sculptures.

What is 3D ?
3D (or 3-D) means three-
dimensional, or having three
dimensions. For example, a box is
three-dimensional; it is solid, and not
thin like a piece of paper. It has
volume, a top and bottom, left and
right (sides), as well as a front and
back.

In geometry, a three-dimensional
shape can be defined as
a solid figure or an object
or shape that has three dimensions – length, width and height. Unlike
two-dimensional shapes, three-dimensional shapes have thickness or
depth.
The attributes of a three-dimensional figure are faces, edges
and vertices. The three dimensions compose the edges of a 3D
geometric shape.

20 | CMPE 20042 Computer Engineering Technology 4 - Animation

Difference between 2D and 3D

Therefore :

A 2D, or two-dimensional, shape has length and height as its dimensions. Also known as
plane shapes, they can be plotted in a graph on the x- and y-axes. Circle, triangle, and
square are some of the most common examples of 2D figures.

A 3D, or three-dimensional, shape has length, height, and width (depth) as its dimensions.
Mathematically, 2D figures are plotted on the x-, y-, and z-axes of a graph. Cylinders,
pyramids, and cubes are some of the most common examples of 3D shapes.

What is 3D Modeling and What’s it used for ?

In 3D modeling is like a technique in computer graphics for producing a 3D
digital representation of any object or surface. Surface modeling gives you the ability
to build out a visual representation of an object’s exterior and its contours.
While objects can be mechanical components like an engine - or complex organic
shapes
Some artist uses special software to manipulate points in virtual space(called
vertices) to form a mesh: a collection of vertices that form an object.
These 3D objects can be generated automatically or created manually
by deforming the mesh, or otherwise manipulating vertices.
3D models are used for a variety of mediums including video games, movies,
architecture, illustration, engineering, and commercial advertising.
The 3D modeling process produces a digital object capable of being fully
animated, making it an essential process for character animation and special effects.
The core of a model is the mesh which is best described as a collection of points
in space.

How Does 3D Modeling Work?

21 | CMPE 20042 Computer Engineering Technology 4 - Animation
 An artist usually begins by generating some type of primitive like a cube, sphere, or
plane. The primitive is just a starting shape to begin modeling.
The artist will build upon this basic form and manipulate it using various modeling tools.
For 3D modeling it’s almost always a good idea to start simple and work towards complexity.

Tutorial source. : https://www.youtube.com/watch?v=CuuK6IbsgcU

3D modeling is a precise workflow often involving the painstaking placement of

individual vertices to achieve the correct contours of the desired object.
The exterior of the mesh is composed of polygons which can be subdivided into
smaller shapes to create more detail. These subdivisions are especially necessary if
the 3D model is to be animated.
Several tools exist to speed up the modeling process. Most programs include a
mirroring technique that lets the artist build a symmetrical model by only working on
one half—or even one quarter—of the object.
This is especially useful in character design as an artist only needs to model
one side of the character and the software will mirror their work along the desired axis
creating a perfectly symmetrical object.
Other tools allow for the quick deformation of a model’s surface

22 | CMPE 20042 Computer Engineering Technology 4 - Animation

Intro To 3D Modeling Software
There’s no shortage of 3D modeling programs to choose from. Whether you’re
looking to make animated characters, game models, or design a house, there’s a
program out there to fit any budget.
Maya by Autodesk is the industry standard in 3D modeling and animation.
If you were to take a 3D modelling course at a university this is probably
the software you’d use. Most professional studios look for experience with Maya
when hiring new talent, so any artist looking to break into the industry should
seriously consider learning Maya.

Cinema4D is another very popular choice.

The learning curve isn’t as steep as with Maya and it supports a more
streamlined integration with tools like Adobe After Effects, making it an excellent
choice for those interested in motion graphics.

Blender is a free and open-source 3D modeling and animation program.

It comes with a robust toolset capable of producing professional-quality
assets and animations. No price tag.
Blender’s learning curve is quite steep, however, and the software is
considered non-standard in the industry.

SketchUp is a tool popular among architects and landscape designers.

It boasts an easy-to-use interface that makes it perfect for beginners
looking to get started with 3D modeling for architectural work.

Source : https://conceptartempire.com/3d-software/

Either way, 3D modeling is an essential part of the modern digital media landscape.
It is also an exciting and rewarding means of artistic self-expression. Though often daunting
for beginners, the growing body of tutorials and learning resources means it’s never been
easier to learn 3D modeling from scratch.
Now is the perfect time to get started on your own journey with modeling and bring your
unique ideas to life as part in our course .

23 | CMPE 20042 Computer Engineering Technology 4 - Animation

Links of Animation Software
3D animation techniques, you can get demo versions of 3D animation software from
various software companies, including the following:

Autodesk Maya, 3ds Max, Softimage, Mudbox, and MotionBuilder at

http://usa.autodesk.com/ and http://students.autodesk.com/

Blender at www.blender.org
Maxon Cinema 4D at www.maxon.net
NewTek LightWave 3D at www.newtek.com/lightwave.html Side Effects Software
Houdini at www.sidefx.com
Luxology modo at www.luxology.com/modo/

-----

Assessment 2

True or false
______1. 3D modeling is a precise workflow often involving the painstaking placement
of individual vertices to achieve the correct contours of the desired object.
______2. 3D models are used for a variety of mediums including video games, movies,
architecture, illustration, engineering, and commercial advertising.
______3. A 2D, or two-dimensional, shape has length and height as its dimensions
______4. The attributes of a three-dimensional figure are faces, edges and vertices
______5. Surface modeling gives you the ability to build out a visual representation of
an object’s exterior and its contours.

Research :
Identify the Timeline of Animation and write every milestone per year

24 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Chapter 3.

Animation Production Pipeline

Overview:
The animation production pipeline is the path by which a movie goes from a
creator’s brain to the screen for the world to see. Understanding all the elements of the
process is the first step to creating your own vision.
Before you start your animation project, you need to have a plan that will include
the scope of the project, the budget, and the team you will need to help bring your
production to life.
Understanding the animation workflow is essential to successfully managing your
team and your production so that it can get made in a timely manner and can be
completed on budget.

Learning Outcomes:
After successful completion of this lesson, you should be able to:
• know how to produce an animation
• Identify each component to design animated film
• understand how it prepare to produce
• delivered each function and used

Course Materials:
Understanding Components of Production pipeline
A 3D animation production pipeline is a group of people, hardware, and software
aligned to work in a specific sequential order to create a 3D anima- tion product or asset. The
final product could be a traditional one such as a feature film, short film, television show, or
video game, or it could be some- thing totally different. For example, a startup company looking
to fund its new idea or product may hire a 3D product visualization studio to model and then
rapid-prototype a final product model for investors.
The specific hardware and software used may differ between project types, but the
fundamental stages of the 3D animation pipeline are the same throughout. The three main
stages of the production pipeline are as follows:
Preproduction
Production
Postproduction

Each segment of the 3D animation industry uses the three main stages of the
production pipeline slightly differently. The entertainment industries of film, TV, video
games, advertising, and visual effects utilize the three stages in a similar fashion. The
preproduction team will take its time to make sure to tell an engag- ing story with
interesting characters. The production team, if the preproduction plans are laid out
correctly, will then create the project. The postproduction team will make the project

25 | CMPE 20042 Computer Engineering Technology 4 - Animation

that looked acceptable in the production stage look fantastic by adding 2D visual
effects and color corrections.

Image © Brian Ludwick

F i G U R E 2 . 1 A graphical breakdown of the 3D animation pipeline

The Preproduction
The preproduction stage is divided into five components and, depending on the
type of project you are working on, you may use all of them or only some of them. The
components of the preproduction stage can also be completed in a different order or
can be completed all at once to aid the overall creative process. The typical order of
these components is as follows:

Idea/story
The idea for a project can come from just about anywhere and from
almost anything. An idea can be sparked by a single word, a sentence, a color,
a smell, a sound, passing conversations with a stranger, or eavesdropping on
someone else’s conversation. That spark just needs to be enough to ignite a
dialogue within yourself or with others to want to work out that idea.

26 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Ideas should be something fun and simple, and not something
you settle in on yet. I tell my students in my classes, “You must be willing
to kill your babies at any time.” I know it sounds horrifying and disturbing,
but this phrase expresses that you should never get so attached to one
idea that you would not be willing to kill it if it is not good enough.
Attachment to a bad idea can get you stuck in a proverbial corner that
you may not be able to get out of.

Example : https://blog.artella.com/index.php/2016/03/17/141211270456/

The following are some questions to ask yourself during this idea/ story component:

• Who are the characters?

• What is this project for?
• Who is your audience?
• What is the conflict? What is the final product?
• Who will want to use my idea?
• Who will want to buy my idea?
• What is the payoff for my audience?

REMINDER : If you can answer these questions, you are ready to move a
step forward in the production pipeline.

Script/screenplay

The script or screenplay is the formal written form of the final story. It has
writ- ten within it the basic character movements, environment, time, actions,
and dialogue. This literary form is intended for the preproduction and production
team to create a visual idea of the overall story. Many people on the
preproduction and production teams will look at the script and will need to be
able to gather information from it quickly.
3D animation final products are usually stories you are showing—not telling—
the audience. Therefore, a script is not typically the final product for an audience to sit
and read. Most people who do not work in a visual storytelling industry would not
understand why some descriptions are included in a script or left out of a script. The
script must describe what will be seen and heard onscreen for different production
teams to know what will be created. The script format is a specific one, and knowing
what should and should not be described in a good script or screenplay takes practice.
The final script is the written backbone structure for the rest of the production.
The typical format for a written script usually equals about 1 minute of screen time per
page. This format is fairly standard among the 3D animation and film industries.

Script format
A script consists of 3 main elements:

• Location
27 | CMPE 20042 Computer Engineering Technology 4 - Animation
 o At the beginning of each scene we must declare the location. We do
this in the following format:
o (a) interior or exterior? (b) a description of the location (c) is it day
time of night time?

• Action
o This is the place to describe the action that precedes or follows the
dialogue. It is written without indention at the body of the script.
• Dialogue
o Indented to the center of the page, the name of the character would be
written with capital letters and the lines of dialogue would be under it,
indented as well.

Storyboards
o The storyboard is the visual story form of the script/screenplay. You can
think of it as a comic book of your script. A storyboard is also the first visual
representation of your entire story. It includes early ideas of camera
staging, early representations of possible visual effects, and some key
character poses or scene events that will be in the project.
o Each image in a storyboard visually depicts a story beat, or moment, from
the script. Figure 2.3 shows an example of a storyboard.

Animatic/pre-visualization
An animatic is a moving form of the storyboard. If you think of a
storyboard as a comic book, an animatic is a limited animation of your entire
story. The animatic can be created in just about any way you create a simple
movie on the computer. It is, in its most simple form, just the storyboard images
timed out to temporary dialogue and simple sound effects, to show the
sequence pacing of the project. The preproduction team will go back and forth
between the story- boards and animatic to create the final edit of the entire
project.
28 | CMPE 20042 Computer Engineering Technology 4 - Animation
 An example of an animatic video can be viewed from the book’s
companion files, available at www.sybex.com/
go/3danimationessentials.

The pre-visualization, or pre-vis, is typically utilized for visual

effects in live- action films. Because the amount of 3D animation or 3D
visual effects that go into these types of films and television shows is
expensive, producers of these projects like to know what all of the shots
will look like before they are shot. This can be helpful to the director and
director of photography in knowing what type of camera angles to shoot
on set to match the visual effects. It also can help the actors understand
what kind of big scary monster is about to eat them or throw them through
a building. A lot of live-action directors have a hard time at first making
the jump into animation and visual effects–heavy films because of the
complexity of these projects in the preproduction stage.

Design
In the design component, the final look of the project is decided.
For the entertainment industries, this includes the character design, prop
design, costumes, and environment designs. Preproduction designers or
concept artists use just about any medium to create their conceptual
art—from pen, pencil, charcoal, pastels, or traditional paints to computer
software such as Adobe Photoshop or Corel Painter. Figure 2.4, Figure

2.5, show examples of concept art.

29 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Working with Production

The budgets have been made, the plans have been created, and 3D
production artists have been hired. Now the production stage can start. At this
stage, all of your planning and decision making from the preproduction stage pays
off. All of the preproduction material and designs are handed off to the appropriate
artist to be brought to fruition. This stage is where all of the final visual elements of
a 3D animation project are created. This is when the assembly-line concept truly
comes into play. Each artist is responsible for a small part of the project and then
must hand it off for the next artist’s contribution.

30 | CMPE 20042 Computer Engineering Technology 4 - Animation

The production stage includes the following components:
• Layout
o In the 3D layout stage, you create a 3D version of the animatic. This
component is vital because in the 2D animatic, you can often cheat in
terms of factors such as perspective angles, scale of characters to
camera, or the distance objects are from one another—but in 3D, it is
sometimes difficult to cheat these things. A 3D layout artist starts with
the 2D animatic and begins matching the different shots with a 3D
camera, 3D characters, and a 3D environment. The 3D layout becomes
the new blueprint guide for the rest of the 3D animation production team.
An added bonus to this 3D layout stage is that the director can now work

out any complex camera moves that you just cannot draw out easily in a
tradi- tional storyboard and 2D animatic.
• Research and development (R&D)
o Research and development (also known as R&D) is a component that
also spans the entire 3D animation pipeline, from preproduction to
postproduction. In R&D, a team of artists from many different
components work with technical directors on upcoming technical
challenges in the project.
• Modeling
Modeling is the process of creating a three dimensional representation
of any object, from humans and animals to machines and natural
environments. In an animated film, all the characters, props, and sets are
composed of 3d models. Modeling is in the early part of the production
stage of a film, since characters need to be completed before they can
be rigged and animated and environments need to be in place to
determine the final layout and composition of shots.
It is important for the models to have appeal. It is of utmost importance
that characters look cute, attractive, or alternatively gross and scary
depending on what the intent of the work is. Environments need to look
beautiful and epic, foreboding and gloomy, or again whatever intent the
filmmakers have for them. Props need to look interesting, accurate or
once again whatever specific quality the film needs them to be.
2 Key Areas of 3D Modeling: Organic and Hard Surface
Organic models constitute characters, animals, and even plants
and other natural objects in the environment.
31 | CMPE 20042 Computer Engineering Technology 4 - Animation
 Hard surface modeling comprises human made objects:
vehicles, weapons, buildings parts of machines, anything that’s
manufacture or constructed.
• Texturing
o In the texturing component, texture artists apply color and surface
properties to the geometric models. The models generally come to the
texture artist in a pro- gram’s default shaded flat color. The texture artist’s
job is to make the model’s
surface look like it does in
the concept art or to match
its real-world counterpart. If
the model is to be a wood
table, for example, the
texturing artist will make
sure that the tabletop when
rendered looks like the
wood it would be made of.
Or if the director changes
his or her mind, as directors
often do, and now wants
that tabletop to be metal,
the texture artist must make
it look like metal.

• Rigging/setup
o Rigging is the component of the production pipeline during which a
control rig is put into a geometric object so the animators can move that
object. It is the rigger’s job to aid the animators by creating a system of
controls that allow the animators to work as quickly and efficiently as
possible. Every object that moves in any 3D animation project will have
some kind of system to control it.
o This control system can range from a simple parent/child hierarchy to a
very complex character rig including joints, controllers,
skinning/enveloping, a muscle system, and a floating GUI (graphical user
interface) in the work view
to aid the animator’s selections and keyframing. If you have no idea
about the meaning of any of the terms in the preceding sentence, do not
worry. I explain it all in the next few chapters.

32 | CMPE 20042 Computer Engineering Technology 4 - Animation

 o This component is quite technical and requires an artist with good
problem- solving skills. The rigging artist often works closely with or on
the R&D team. Figure 2.15 shows a final character model with its control
rig—the curves the animators can select to assist moving the object.

• Animation
o Character animators bring the characters to life. 3D animators use a
computer to pose the character using the rig that was created by the
rigging department. Character Animators are the actors in the animation.
Their job is to figure out how to tell the story through movements and
expressions. The character animators will often act out scenes via video
to use as reference for their animation.

• 3D visual effects (VFX)

o The 3D visual effects (VFX) artist animates everything but the characters
or props the characters interact with—for example, fur, hair, cloth, fire,
water, and dust, to name just a few. This component, like rigging/setup,
is a technical job that also needs an artistic eye. Most 3D visual effects
are based on a dynamic physics engine within software that uses natural
physics such as air, gravity, and drag to manipulate these systems.
o After setting up all the lights, the lighter will break the scene into render
passes, which are individual parts of the rendering process. In these
render passes, you can render out parts of the whole scene, such as
individual objects, shadows, highlights, color, and much more. These

33 | CMPE 20042 Computer Engineering Technology 4 - Animation

 passes are put back together again in the compositing component of the
postproduction stage.

• Lighting/rendering
o Lighting is the painting component of the production stage. The lighting
artists look at the color guides from the preproduction stage and create
the lighting and mood for a scene or sequence. Lighting in a 3D
application is similar to the real-world lighting of film or photography. 3D
lighters have access to multiple light types that mimic lights in the real
world—for example spotlights, lightbulbs, and sunlight.

Working on Post Production

Postproduction is the completion and output stage of a 3D animation
project, but again this can mean different outcomes for different industries. The
entertainment industries use this stage to really make a project stand out through
visual effects and color corrections. This is the icing on the cake that makes a
project look polished and professional. The scientific industries use this stage to
double-check the accuracy of projects and to output projects to their chosen
media.
The postproduction stage includes the following components:
• Compositing
o In compositing, the postproduction artist can layer all of the imagery
created and filmed to make a final output image. This layering can be a
simple task with only a few layers to manage, or it can become a complex
task with hundreds of layers matched together. The imagery can be all
3D generated images; 3D and 2D graphics mixed; or 3D, 2D, and live-
action film plates.

• 2D visual effects (VFX)/motion graphics

2D visual effects and motion graphics are often mixed into the compositing
stage. The compositor and 2D visual effects artists can be the same artist, but
at some studios they are not. The lighting artist may complete the initial
composite for a shot and then pass the pre-comp on to the 2D visual effects
artist to work on and finalize. The 2D visual effects artist will add effects that
are much simpler to achieve at the end of a project in a 2D application than in
a 3D application.

The following are examples of such effects:

• Sparks
• Pixie dust
• Dust

34 | CMPE 20042 Computer Engineering Technology 4 - Animation

 • Rain drops
• Background replacements
• Camera shake
• Green-screen removal
• Rotoscoping

A motion-graphics artist uses the same techniques as a 2D visual artist, and

again may be the same artist as the 2D visual effects artist. But the motion-
graphics art- ist’s job is to create the graphical design elements of a shot if
needed. This type of work can be seen in film title sequences and in television
station bumpers.

• Color correction
Color correction, also known as color timing or color grading, is when the
entire project is adjusted to make sure all imagery color is consistent and
matches the final output source. All 3D animation projects are worked on as
individual shots, and then looked at in sequences and finally as a whole project.
A shot is created every time the camera changes, and there are thousands of
shots in a feature film. Each shot needs to be corrected to achieve the look of
the film. Color cor- rection can be very artistic and highly technical at the same
time. It takes an expert eye and lots of practice to become good at color
correction.

• Final output
o The final output of 3D animation can come in many different forms: film,
video, Internet, rapid prototyping, 3D stereoscopic film and print media.
Each of these output types have different workflows and technical
limitations that are beyond the scope of this book. But the most common
output type is digital video that can be played on the computer or Internet.
The largest technical limitation to this type is color correction because
not everyone’s computer and monitor is calibrated and will look different

Source : https://www.artella.com/index.php/2017/09/21/animation-production-step-
step-guide-making-3d-animated-movie/

35 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Assessment 3

Multiple Choice : Select the correct answer and avoid any form of erasures

1. Preproduction includes which component?

A. Storyboards C. Modeling
B. Animation D. Lighting
2. True or false: A 3D animation production pipeline is similar to a car assembly line.
3. Which of these is not one of the three main stages of a production pipeline?
A. Postproduction C. Visual effects
B. Preproduction D. Production

4. What is typically the longest stage to complete in the production pipeline?

A. Animation C. Postproduction B. Preproduction D. Modeling
5. What tool might a concept artist use to create art?
A. Pencil C. Computer
B. Paint D. All of the above
6. Which stage of the production pipeline is the most important?
A. Preproduction C. Postproduction
B. Production D. Rigging
7. The ______________ component of the preproduction and production stages will
create a 3D animatic.
A. Animation C. Layout
B. Storyboard D. Character design

Question : Based on production pipeline lessons, what do you think is the

most crucial part on development process ? and Why ?

36 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Chapter IV.
Learning Blender 3D - Basic Layout and Appearance
Overview:
In creating graphics, color plays a great part in expressing concepts, ideas, and
even emotions. The right choice what styles of fonts and effects are necessary to
deliver thoughts to your audience. Included in this unit are the different ways to put text
and colors to your graphics. Applying styles to text and using appropriate colors
improve the way of conveying the message.
Learning Outcomes:
After successful completion of this lesson, you should be able to:
• produce informative layouts using text with an appropriate color for a theme
• construct and design graphics with styles
• create a suitable font for a specific event
• play with the color combinations using gradients
• create and design your own logo

Course Materials:

Introduction : Blender 3D's Default Appearance

On starting Blender 3D a start screen appears displaying a number of useful options;

a "Recent" list which provides the user with a way to quick launch previously opened
projects; a "Links" list which has a number of other miscellaneous functions, including
a selection of 'help' based initiatives. Users can choose an option from this opening
panel or close it by clicking anywhere on-screen. Note: the screen changes depending

on the version being used

Blender start screen options (image used changes with each update)

37 | CMPE 20042 Computer Engineering Technology 4 - Animation

Blender 2.71's appearance on start-up, note 'splash screen' and other minor differences
Closing the start screen then reveals Blenders default scene composed of a large
centralized main view surrounded by a number of other panels and elements.
The main area in the centre of the screen is the '3D View' which, by default, contains a
'cube primitive', a single 'light' and a scene 'camera' object, all of which are displayed to
the user in 'User Persp' ('User Perspective') mode. These are Blenders scene defaults,
loaded every time a new project is started.

38 | CMPE 20042 Computer Engineering Technology 4 - Animation

Blenders default layout when open - applicable to Blender 2.50 thru 2.69

Default appearance of Blender 2.71 which has some minor differences (on the left side in
particular) compared to previous version shown above
Blenders Layout Breakdown
39 | CMPE 20042 Computer Engineering Technology 4 - Animation
 Blenders layout is divided into a number of areas by default, each of which serves
a particular function or purpose depending on what the user is doing at the time. There
are 'Header' areas, highlighted red below; 'Toolbar' elements highlighted blue; the main
'Work Zone' highlighted green and finally the 'Timeline' highlighted in yellow.

Blenders default layout broken down into sections

Header Areas
The "Header" area elements generally contain menu functions (such as "File",
"View", "Object" and so on) that are contexts-sensitive, that is the options and functions
made available for use change depending on the activity being carried out at any given
time (the one slight exception to this is the main application header at the top of the screen,
this generally stays 'as is' throughout). For example tools associated with editing and
selecting polygons only appear when editing a mesh, similarly, UVW tools only appear
when unwrapping a model (more on both to follow). Each type of 'view' has a 'Header' that
can be positioned at the top or bottom of that individual view unit by right clicking (RMB)
the header and selecting "Flip to Top"/"Flip to Bottom".

40 | CMPE 20042 Computer Engineering Technology 4 - Animation

Blenders "Header" bars and areas
1) The main header element displays information about an entire scene and the objects
visible within it. Most useful are 'Vertex' ("Ve:[n]"), 'Edge' ("Ed:[n]"), 'Face' ("Fa:[n]") and
'Object' ("Ob:[n]") count details which relates information about either objects as they stand
in a scene or elements of the same objects when in Edit mode.
2) Changes 'View' (or 'Editor') type. All views and editor types have this button allowing for
the layout to be fully customised and changed to suit the activity being undertaken.
4-7) Change depending on the view type - a different set of buttons and options appear
when in Edit mode as does for using the Node editor etc.
The Work Zone (And View Header)
Although Blender can be organised to suit the user, the default 'Work Zone' is generally
where all the actual work inside the application is done in terms of modeling, meshing and
editing. Being a 'view' it has a 'header' element that changes depending on the activity
being carried out; for instance, the 3D view which is shown by default, has a series of
options and actions applicable to activities done whilst editing a mesh or when doing
general object manipulation.

41 | CMPE 20042 Computer Engineering Technology 4 - Animation

Blenders main work zone area
2) 'View' ('Editor') type. Changes a particular 'View' between available options such as
"Dopesheet", "Outliner", etc. Currently displays a small cube denoting "3D View".
4) 'Mode' type displays a drop down list of different core activities such as "Edit Mode",
"Sculpt Mode", "Weight Paint", etc.
5) 'View Shading' determines how objects are displayed in the 3D View, whether they are
shown "Textured", as "Solid" shaded, in "Wireframe" only, etc.
6) 'Pivot Point' options change the point around which objects are rotated and scaled.
Using the different settings, objects can be manipulated relative to their physical "Individual
Origins" (centre points), "3D Cursor" placement, etc.
7) 'Layers' are used to organise a scene so that separate elements placed in different
layers can be made visible or hidden at the click of a 'Layer Buttons' (each button toggles
the respective layer hidden/visible).
Toolbars And Panels
It's important to point out here that although the main toolbar on the right hand side of
Blender appears to be a tool 'bar', it is in fact a set of positioned 'views' (in the same way
as the main 3D 'view'). By default this 'Toolbar' contains a 'Properties' view (the lower
section) and an 'Outliner' view (upper section) each with their own respective buttons,
panels, tools and information.
The 'Properties' view is generally where most tool options are located when working.
The section itself is headed by a series of user interface (UI) button activated
panels that contain specific tools per activity, function or action needing to be done or
being used; editing a mesh would use the "Object Data" panel buttons for example,

42 | CMPE 20042 Computer Engineering Technology 4 - Animation

texturing would use "Material" and/or "Texture" panel buttons and tools and so on, the
user clicking on each to switch between panels.
The tool bar on the left hand side of the 3D view is a context sensitive 'Tool Shelf' that
provides quick access to common tools and functions; it generally only appears when
modeling and mesh editing in the 3D view and can be toggle hidden/visible ("T").

Blenders "Properties" tool bar and panels - in Blender 2.70+ the Toolbar (Tool
Shelf) is organised into 'Tabs', related tools are grouped together an place on separate
tabbed pages, accessed by click a 'Tab', i.e. "Tools" carries most of the general
manipulation functions, "Create" carries the basic shapes and Object types that can be
added to a Scene, and so on. Prior to this tools and options are simply listed on a
scrollable panel
3) 'Properties' view provides access to the core tool set of Blender used to carry out
different types of activities, editing or creative functions; the "Render" panel contains
options and controls for render still images and movies; the "Object" controls provide
editing options for objects in a scene; the "Modifiers" provides options to apply filters and
functions to objects, scenes and so on.
8) Choosing any given 'Property' option displays the relevant tools for a range of functions
associated that activity. For example, "Object Data" displays "Vertex Groups" and "UV
Texture" information which is related to the with manipulation of objects in Edit mode.

The Timeline
The Timeline is an additional view "Type" specifically related to animating, used as a
means to playback and display data related to the scene being animated. The Timeline
uses the same fundamental components as other view types so it too has a 'Header'
where the various context-sensitive options appear, accompanying the main 'work zone',
43 | CMPE 20042 Computer Engineering Technology 4 - Animation
the area where the manipulation of data relative to animating is done. As this project
doesn't use the Timeline there's no need to explain it beyond the basics mentioned above.

Blender and default "Timeline" section.1) View type. 2) context-sensitive menu options. 3)
Playback buttons. 4) animation length (frame numbers). 5) Timeline

Assessment 4

True or false
______1. Character panel is used to change the formatting of columns ang
paragraphs.
______2. Kerning adjusts spacing uniformly over a range of characters.
______3. Sans serif fonts have designs at the end of letter strokes.
______4. Small size fonts in an article, book, or any document are meant not to be
read.
______5. The default unit to measure a typeface is called point.

44 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Chapter V.
The 3D Space

Overview:
In two-dimensional space, such as a drawing, every object has two
coordinates (X and Y) that define the horizontal and vertical space the object
occupies, and its location. Blender lets you work in three-dimensional space,
but our monitor screens are only two-dimensional. To be able to work in three
dimensions, you must be able to change your viewpoint as well as the viewing
direction of the scene. This is possible in all of the 3D Viewports.

Learning Outcomes:
After successful completion of this lesson, you should be able to:
• learn how to manipulate the viewports
• enhance viewports process
• demonstrate each windows function in blender
• learn how to adjust typical views and buttons
• know some techniques in windows arrangement
Course Materials:

Moving Around in 3D Space

In a 3D program, not only do you have to worry about where you are in 2
dimensions (height and width), but you also need to consider depth (how close or
far away). Before you can work in 3D space, you should have some skills in 2D
drawing and layout.
Moving around in the 3D window is controlled by the mouse and the
keyboard number pad (NOT the numbers across the top of the keyboard-
these change layers). Think of a standard 3-view orthographic drawing- top, front
and right side views. These views match up with the number pad 7,1 and 3 keys
(look at their arrangement on the keyboard- just like the views). Put your cursor in
the 3D window and try typing those numbers. Typing “0” will put you into camera
view (what the camera sees).

45 | CMPE 20042 Computer Engineering Technology 4 - Animation

 By default, the camera is
represented by a single
line, representing the
edge of what is
rendered and shaded
to the outside. You also
have the option of
turning on an additional
dashed line box to
represent a Title Safe
box (helpful in
planning).

Changing these settings

will be discussed in a
later chapter. You will
also notice a small note
in the upper-left corner
of the viewport telling
you the view name and
if it orthographic or
perspective.
The number pad 5 key will always toggle you between perspective
and orthographic views. The number pad arrow keys (2,4,6,8) will rotate you
around in 3D space. The “+” and “-” keys on the number pad will zoom in
and out. The number pad “.” (period) key will center your view up on the
selected object on your screen. “Ctrl” and 7,1, or 3 will give the opposite
view.
The mouse serves a number of functions. The Left Mouse Button (LMB)
will move the 3D cursor around on the screen and for dragging windows for
selecting objects. Wherever the 3D cursor is located is where the next item
you create will be placed. The 3D cursor serves other purposes that we will
discuss later. The Right Mouse Button (RMB) is used to select object or
vertices (in edit mode). The mouse wheel serves 2 purposes. Scrolling the
wheel zooms in and out (like the + and - keys). Holding down the mouse
wheel will let you rotate the view. Holding down Shift and Mouse Wheel will
let you pan around on the screen.
Note :
Practice using these controls before moving on to other
lessons. Without getting a grasp on working in 3D space, you will
have a difficult

46 | CMPE 20042 Computer Engineering Technology 4 - Animation

Window and Button Control

Creating Viewports (also called windows)

47 | CMPE 20042 Computer Engineering Technology 4 - Animation
 Most times, you need more than one 3D window to work with since you’re trying to
locate objects in three dimensions. Most rendering and animations programs allow for multiple
viewports along with graphical views of various data. Blender allows the same. Remember that
Blender starts with 5 viewports, but only one 3D View window (discussed on pages 1-1 and 1-
2). You can change the size of any of these windows by using the LMB and dragging on the
line between the viewports. In order to split a viewport, move your cursor over the small triangle
in the upper right corner of the 3D View

Window. When the cursor turns into a “+”, drag with your LMB to split your
screen into 2 viewports. Joining viewports together works the same way.
Click on the triangle and drag over the viewport you wish to remove.
There’s no limit to the number of times you can split your windows. I like to
traditionally work with 2 views like the example shown below. I use the left view to flip
between my principle views (top, front, side) and the right view for camera view and
animation tracks (which we’ll discuss later). In the view shown below, I've minimized
the
Tool Shelf and Transform Panel to maximize screen space.

Windows can also be split

along a vertical line. Some
3D programs traditionally
give you 4 viewports that
are set-up as front, top,
right side, and perspective
or camera views. Basically,
it is up to what you want to
work with.

48 | CMPE 20042 Computer Engineering Technology 4 - Animation

Typical Views and Buttons:
Here are some typical views used to model in 3D and the buttons on the
number pad to go along with them. In order to make them work, you need to have the
“Num Lock” button pressed. Get use to working with the principle views (top, front,
side) in orthographic mode when locating the 3D cursor. You will usually need to check
the location of the cursor in at least 2 views when placing objects. New to Blender 2.6
is that the name of the view is displayed in the upper left corner of the viewport

NOTE :

49 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Assessment 5

In order to get some experience with these commands, set up a screen with four
viewports using a top, front, side and camera or perspective views as displayed below:

50 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Chapter VI.

Starting Creating and Editing Objects

Overview:
In computer graphics a polygon mesh is the collection of vertices,
edges, and faces that make up a 3D object. A polygon mesh defines the shape
and contour of every 3D character & object, whether it be used for 3D animated
film, advertising, or video games.
Learning Outcomes:
After successful completion of this lesson, you should be able to:
• understand the use of mesh elements;
• know how to perform different techniques in mesh
• identify the commands use when editing objects
• distinguish the use of mesh in 3D space
• learn how to editing and manipulate objects using mesh

Course Materials:

NOTE

What is Mesh ?
According to wikibooks, mesh is a collection of vertices, edges, and faces that
describe the shape of a 3D object: A vertex is a single point. (The plural of
vertex is "vertices") An edge is a straight line segment connecting two vertices.
A face is a flat surface enclosed by edges.

51 | CMPE 20042 Computer Engineering Technology 4 - Animation

52 | CMPE 20042 Computer Engineering Technology 4 - Animation
Mesh Types

NOTE

Using Main Modifiers to Manipulate Meshes

Before we look at actually changing the shape of the meshes and turning them
into other shapes, we should become comfortable with creating, moving, rotating
and scaling basic meshes. The three main modifying commands used in Blender
(in Object mode) are:

53 | CMPE 20042 Computer Engineering Technology 4 - Animation

 NOTE :

54 | CMPE 20042 Computer Engineering Technology 4 - Animation

 NOTE :

55 | CMPE 20042 Computer Engineering Technology 4 - Animation

Using the Shading Smooth-Flat Options and Auto Smooth

56 | CMPE 20042 Computer Engineering Technology 4 - Animation

57 | CMPE 20042 Computer Engineering Technology 4 - Animation
 NOTE:

58 | CMPE 20042 Computer Engineering Technology 4 - Animation

 NOTE:

59 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Chapter VII.

Setting Color, Stars and Mist

Overview:
Mist can greatly enhance the illusion of depth in your rendering. To
create mist, Blender basically mixes the background color with the object color and
enhances the strength of the former, the further the object is away from the
camera.
Learning Outcomes:
After successful completion of this lesson, you should be able to:
• learn the use of color settings
• identify the advantage of using Mist
• use the Star in designing

Course Materials:

60 | CMPE 20042 Computer Engineering Technology 4 - Animation

61 | CMPE 20042 Computer Engineering Technology 4 - Animation
62 | CMPE 20042 Computer Engineering Technology 4 - Animation
63 | CMPE 20042 Computer Engineering Technology 4 - Animation
 Chapter VIII.

Setting Camera and Lighting

64 | CMPE 20042 Computer Engineering Technology 4 - Animation

65 | CMPE 20042 Computer Engineering Technology 4 - Animation
66 | CMPE 20042 Computer Engineering Technology 4 - Animation
67 | CMPE 20042 Computer Engineering Technology 4 - Animation
 Unit IX.

Rendering Settings

Overview:
Blender supports interactive 3D viewport rendering for all render
engines, for quick iteration on lighting and shading. Once this is done, the final
quality image or animation can be rendered and output.

Learning Outcomes:
After successful completion of this lesson, you should be able to:
• Create rendering settings
• Animate the audio level of a file to change volume over time
• Remove audio from a video file to create an independent audio file for editing
• Improving and cleaning up audio

Course Materials:

68 | CMPE 20042 Computer Engineering Technology 4 - Animation

69 | CMPE 20042 Computer Engineering Technology 4 - Animation
70 | CMPE 20042 Computer Engineering Technology 4 - Animation
71 | CMPE 20042 Computer Engineering Technology 4 - Animation
Assessment

72 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Unit XI.

ANIMATION BASIC

Overview:
According in many books and online research computer animation is
a general term for a kind of visual digital display technology that simulates
moving objects on-screen. Modern forms of computer animation evolved from
more primitive computer graphics over the last few decades, as huge advances
in computer technology led to much more sophisticated imaging methods.
Modern computer animation can achieve dazzling results with three-
dimensional figures acting against a three-dimensional background.
.

Learning Outcomes:
After successful completion of this lesson, you should be able to:
• Create rendering animation
• Demonstrate Basic Key-framing and Auto Key-framing
• Identify Moving, Rotating and Scaling
• Viewing animation procedure
• Improving and cleaning animation settings

Course Materials:

73 | CMPE 20042 Computer Engineering Technology 4 - Animation

74 | CMPE 20042 Computer Engineering Technology 4 - Animation
75 | CMPE 20042 Computer Engineering Technology 4 - Animation
76 | CMPE 20042 Computer Engineering Technology 4 - Animation
77 | CMPE 20042 Computer Engineering Technology 4 - Animation
78 | CMPE 20042 Computer Engineering Technology 4 - Animation
79 | CMPE 20042 Computer Engineering Technology 4 - Animation
 ===== end of module ====

80 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Midterm:

Draw in the space provided your ideas and express about a simple story board
that possible your produce. With main point of view, plot, settings and characters
involved. This is under sketching or drawing only with proper content and
characterization about the story. You can use separate A4 bond paper to this task.

By:
Date:

81 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Quiz no.1

Save in our official drive

Rename it as SURNAME_HOUSE_QUIZ1

82 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Quiz no.2

1. Animate the material on the ground (size and/or offset).

2. Animate at least one lamp size and/or color.
3. Animate the world with mist, stars or texture keys.

After you have your scene ready to animate, you will make an AVI file of your work.
Set up the following Render Window settings:

1.StartFrame-1;EndFrame250; Frames/second25(a10secondmovie) 2. OSA turned

on, set to 8
3. Render Size- PC (640x480)
4. File Type- AVI Codec; Indeo Video 5.1 Codec at 100%

5. Save movie in your document as Animation1.avi

6. Remember to have shadows on if you have any spotlights. 7. Finally, hit the
Animate key to make the move.

83 | CMPE 20042 Computer Engineering Technology 4 - Animation

 Finals:

Create a script of a short film discussing what happen in our present society.
Include all the details regarding the duration of each scene, text or font of your
preference, image, audio etc. Explain the affects you will apply in all aspect our
lessons covered.
You can form a group with 5 to 6 members only . And used the animation
pipelines model.

84 | CMPE 20042 Computer Engineering Technology 4 - Animation

Grading System

1st Grading

Class Standing
• Assessment……………..40
• Quiz………………………60
100 x 70% ……….. 70%
Midterm Exam
• Drawing/Sketch…………………………….…..30%
Midterm Grade…………………………………………………..100%

2nd Grading

Class Standing
• Assessment……………..40
• Quiz………………………60
100 x 70% ……….. 70%
Final Exam
• Script……………………………..………….…..30%
Finals Grade……………………………………………………..100%

SIS Grade = (1st Grading + 2nd Grading)/2

References

Resources links :
https://www.computerhope.com/jargon/g/graphic.htm
https://www.geeksforgeeks.org/introduction-to-computer-graphics/
https://deseng.ryerson.ca/dokuwiki/mec222:brief_history_of_computer_graphi
cs
http://www.teklibri.com/the-two-types-of-computer-graphics-bitmaps-and-
vector-drawings/
https://www.splashlearn.com/math-vocabulary/geometry/3-dimensional
: Difference Between 2D and 3D | Difference
Between http://www.differencebetween.net/language/difference-between-2d-and-
3d/#ixzz6pppdilp9
https://conceptartempire.com/what-is-3d-
modeling/#:~:text=3D%20models%20are%20used%20for,character%20animation%
20and%20special%20effects.
85 | CMPE 20042 Computer Engineering Technology 4 - Animation
https://www.thejigsaw.in/blog/importance-of-animation-in-todays-world
https://www.thejigsaw.in/blog/what-are-the-various-stages-of-2d-animation-
productionhttps://conceptartempire.com/polygon-mesh/

Blender instruction :

https://docs.blender.org/manual/en/latest/editors/3dview/introduction.html#header-
region
Blender 3D Modeling Tutorials For Beginners: The Ultimate Collection
https://conceptartempire.com/blender-modeling-tutorial

Chapter
Bleder Interface
https://www.cdschools.org/cms/lib/PA09000075/Centricity/Domain/81/4th_Chapter1.
pdf
Working with Viewports
https://www.cdschools.org/cms/lib/PA09000075/Centricity/Domain/81/4th_Chapter2.
pdf
Working with Basic Meshes
https://www.cdschools.org/cms/lib/PA09000075/Centricity/Domain/81/4th_Chapter3.
pdf
Materials and Textures
https://www.cdschools.org/cms/lib/PA09000075/Centricity/Domain/81/4th_Chapter4.
pdf
Using Color, Stars and Mist
https://www.cdschools.org/cms/lib/PA09000075/Centricity/Domain/81/4th_Chapter5.
pdf
Lighting and Cameras
https://www.cdschools.org/cms/lib/PA09000075/Centricity/Domain/81/4th_Chapter6.
pdf
Render Settings
https://www.cdschools.org/cms/lib/PA09000075/Centricity/Domain/81/4th_Chapter7.
pdf
Ray-Tracing
https://www.cdschools.org/cms/lib/PA09000075/Centricity/Domain/81/4th_Chapter8.
pdf

Animation Basic
https://www.cdschools.org/cms/lib/PA09000075/Centricity/Domain/81/4th_Chapter9.
pdf

86 | CMPE 20042 Computer Engineering Technology 4 - Animation