MODULE 5

Prepared by:[Link] Abraham

What is HTML?
• HTML (Hypertext Markup Language) is the standard markup
language used for creating webpages and web applications.
• A markup language is a computer language that is used to apply
layout and formatting conventions to a text document.
• HTML allows us to specify the placement of images, tables, links,
etc. on webpages using simple text descriptions.
• HTML provides the structure and content of a webpage,
specifying how text, images, hyperlinks, tables, and other media
should be displayed on a browser
• Hypertext, means “text within text.” In the context of the World
Wide Web, hypertext refers to text with a link to another page
within it.
• Hypertext is the Internet’s way to link two or more webpages
Prepared by:[Link] Abraham
Structure of an HTML Page
• HTML essentially encloses text within tags to tell the browser
how to render the enclosed text.
• For example, the browser will render <b>this is bold text</b> as
this is bold text. <i>this is italicized text</i> will be rendered
as this is italicized text

Prepared by:[Link] Abraham

Structure of HTMl ( cont..)
DOCTYPE Declaration: This is the first line of an HTML page, and it tells
the browser what kind of document to expect, particularly, which
version of HTML.
HTML tag: All code in HTML is declared using tags. A tag is a special
keyword that is enclosed by <>.
Head tag: This section includes the title of the page, any information
about the page such as author information and version history
Elements in HTML : basic tags, heading tags, images, links, lists,
tables, form elements.

Prepared by:[Link] Abraham

Prepared by:[Link] Abraham
 Unordered list

Table

UnOrdered List and Table

Prepared by:[Link] Abraham
 Text box

Drop down menu

Radio button

Checkbox

Prepared by:[Link] Abraham

Cascading Style sheet

Prepared by:[Link] Abraham

 What is XML?
XML (eXtensible Markup Language) is a language used to store and transport data in a
structured way.
It is not for displaying data like HTML, it is only for organizing data.

XML is a format used to store data using tags (like HTML), but the tags are custom-made
by the user.

Example of XML
<student>
<name>John</name>
<age>20</age>
<course>Computer Science</course>
</student>

Prepared by:[Link] Abraham

Difference between XML and HTML

Prepared by:[Link] Abraham

 10.1 Scope of Computer Graphics

Computer Graphics is the field of creating, editing, and displaying images using computers.
It is used in:
•Digital photo editing
•Movies and TV special effects
•Drawing software
•Video games
•Animation
•Virtual reality

1. Digital Image Editing 2. Special Effects in Movies

Today, digital cameras and editing software Computer graphics are heavily used in movies and
allow us to: television.
•Remove blemishes Applications include:
•Remove red-eye •Removing wires
•Cut and paste parts of images •Combining multiple images
•Create fake or modified images •Creating action scenes
Example: •Creating imaginary creatures and worlds
You can combine two photos into one image. This is one reason movies shifted from film to digital
technology.
Prepared by:[Link] Abraham
3. 2D Graphics
2D graphics deal with flat images.
Examples:
•Paint drawings
•Shapes
•Logos
•Cartoons
•Text

Functions include:
•Drawing lines
•Drawing circles and rectangles
•Filling colors
•Copy-paste operations

Example software:
•Microsoft Paint Prepared by:[Link] Abraham
Difference Between 2D Graphics and Image Processing

(remove blur,increase brightness)

Prepared by:[Link] Abraham

4. 3D Graphics
3D graphics deal with creating three-dimensional virtual
objects and scenes.

Instead of photographing real objects, computers create

virtual worlds.
Then the computer produces images of those worlds.

Examples:
•Video games
•Animated movies
•Flight simulators
•VR environments

Prepared by:[Link] Abraham

Two Main Steps in 3D Graphics

Step 1: Modeling
Creating the virtual world.
Includes:
•Designing objects
•Giving shapes
•Positioning objects

Step 2: Rendering
Producing the final image from the virtual world.
This involves:
•Light calculations (Where is the light coming from? How bright should objects look?)
•Shadows(Which areas should be dark?)
•Colors (What color should each surface appear under light?)
•Surface appearance (Is it shiny, rough, smooth, or reflective?)
Rendering is mathematically complex.
Prepared by:[Link] Abraham
10.2 Overview of 3D Graphics

The complete process has 3 stages:

1. Modeling
Create the scene and objects.
Example:
Creating a car, house, road, trees.

2. Rendering
Convert the 3D scene into a 2D image.
The computer acts like a camera.

3. Displaying
Show the final image on screen.

Prepared by:[Link] Abraham

 Parallel projection:
• It is Not a 3d scene
• Drawn on paper
Eg: plan of house

Prepared by:[Link] Abraham

Perspective Projection

Perspective projection is a way of showing a 3D scene (real world) on a flat 2D surface, just like a
camera or human eye.
Objects farther away look smaller, and closer objects look bigger.

Prepared by:[Link] Abraham

Important Terms
1. Center of Projection (COP)
This is the viewing point or camera position.
•It is where the “eye” is located.
•All rays of light are imagined to come from here.
Example:
Like your eye or camera lens looking at a scene.

2. Projection Plane
This is the flat surface where the 3D image is formed.
•It acts like a screen or canvas.
•The 3D world is “projected” onto it.
Example:
Like a movie screen where the image is displayed.

3. Image Window
This is the visible part of the projection plane that you actually
see.
•The full plane may be large, but only a section is shown.
•It defines what part of the scene is visible.
Example:
Like looking through a camera frame or window—you only see
part of the full scene.
Prepared by:[Link] Abraham
Prepared by:[Link] Abraham For reference
Frame Buffer
After the computer finishes drawing a scene, it needs a place to temporarily store the image
before showing it.
That place is called the frame buffer
Frame Buffer = a special memory that stores the final image (pixel by pixel)
Real-time rendering
generating images instantly while you interact, like in video games.
Think of a video game
When you play a game (like racing or shooting):
•You move your character
•The camera moves
•Enemies move
•Everything changes continuously
And you see it instantly on screen
That “instant updating” is: Real-time rendering
Eg:Video games ,Flight simulators
Prepared by:[Link] Abraham
Because of speed limitations: graphics quality may be lower than movies.
10.3 Modeling
Modeling means constructing virtual objects and scenes.
Scene and Objects
Scene
Entire virtual environment.
Objects
Individual items in the scene.
Example:
•Car
•Tree
•Human
•Building

Modelling Techniques
Modeling Individual Objects can be done with shape,surface characteristics,realism
Objects can be:Simple,Highly detailed
More detail → Better quality Prepared by:[Link] Abraham
Modeling Individual Objects can be done with shape
Techniques are:
• Polygonal Mesh
• Procedural Models
• Digitizing

Modeling Individual Objects can be done with surface characteristics

Technique is:
• Texture Mapping
Modeling Individual Objects can be done with realism
Techniques are:
• Hair Modeling
• Cloth Modeling

Prepared by:[Link] Abraham

a)Shape
Polygonal Mesh
Objects are usually built using many small flat
surfaces.
These small surfaces are called polygons.
Together they form a polygonal mesh.
Most common polygon:
•Triangle
Because 3 points define a flat surface.

Prepared by:[Link] Abraham

Procedural Models
Some objects are too complex to model manually.
Examples:
•Mountains
•Trees
•Clouds
•Smoke
•Fire
So programs automatically generate them.
These programs are called procedural models.
Example:1. Mountain Generation
Start with:
•One triangle
Then:
•Divide it into smaller triangles
•Move points randomly
Repeatedly doing this creates realistic mountains.

Prepared by:[Link] Abraham

Example 2. Particle Systems
Particle systems simulate many tiny particles.
Used for:
•Water
•Smoke
•Fire
•Clouds
•Crowd effects
Example:
Water simulation behaves like moving marbles.

Prepared by:[Link] Abraham

Digitizing
Sometimes a real object is scanned physically.
A device records points on the surface.
Then those points are used to build a polygon mesh.

Prepared by:[Link] Abraham

b)Surface Characteristics
Shape alone is not enough.
Objects also need:
•Color
•Texture
•Reflection properties

Texture Mapping
Texture mapping applies images onto surfaces.
Like wallpaper on walls.
Examples:
•Brick wall texture
•Wood texture
•Marble texture

Prepared by:[Link] Abraham

 c) Realism
Researchers work on making:
•Skin
•Hair
•Cloth
•Fur
look realistic.

Hair Modeling Cloth Modeling

Realistic hair is difficult because: Modern graphics simulate:
•Hair moves •Fabric texture
•Hair reflects light •Stretching
•Hair bends with wind •Folding
Some systems model individual hair strands. •Draping
Human head ≈ 100,000 hairs.
Prepared by:[Link] Abraham
Scene Graph Virtual Reality (VR)
creates the illusion of being inside the virtual
After objects are created:
world.
•They are placed in the scene
•Camera is positioned
•Lights are added VR uses:
All this information forms a scene graph •Two cameras (left eye and right eye)
•3D scenes
A scene graph contains: •Motion tracking
•Objects
•Camera
•Lights
•Positions
•Orientations

Prepared by:[Link] Abraham

10.4 Rendering
Light Reflection
There are 3 important lighting types.
1. Specular Reflection
Mirror-like reflection.
Produces shiny highlights.
Examples:
•Metal
•Polished surfaces
2. Diffuse Reflection
Light spreads in many directions.
Makes surfaces appear matte.
Examples:
•Paper
•Walls
3. Ambient Light
Background scattered light.
Helps us see dark regions. Prepared by:[Link] Abraham
Anisotropic Surfaces
Some surfaces change appearance based on
direction.
Examples:
•Satin cloth
•Grass fields

Refraction
Transparent objects bend light is called
refraction
Examples:
•Water
•Glass

Refractive Index
Determines how much light bends.
Dense materials:
•higher refractive index. Prepared by:[Link] Abraham
Rendering Pipeline
The rendering pipeline is the sequence of steps used to create the final image.

Main stages:
[Link] Volume Identification
[Link]
[Link] Conversion
[Link] Surface Removal
[Link]

Prepared by:[Link] Abraham

Prepared by:[Link] Abraham
1)View Volume
The visible region seen by the camera.
Objects outside this region are ignored.

2)Clipping
Removing parts outside the visible area.
Like cutting unnecessary portions.

3)Scan Conversion (Rasterization)

Converting shapes into pixels.
The computer determines:which pixels belong to which object.

Raster means The full grid of pixels.

Prepared by:[Link] Abraham

4) Hidden Surface Removal
Removes surfaces hidden behind others.
Example:
•Car in front of building
•Building behind car should not appear.

Two types of Hidden Surface Removal –Painter’s Algorithm and Z buffer

Painter’s Algorithm Z-Buffer

Draw distant objects first. Stores depth(how far the object) information
Then closer objects. for each pixel.
Problem: Also called:depth buffer
Fails when objects overlap irregularly. If a new object is closer:it replaces the old
pixel.
Now if a new object comes:
If it is closer (3m) → replace pixel
If it is farther (8m) → ignore it
This is widely used today.
Prepared by:[Link] Abraham
5) Shading
Shading determines the color and brightness of surfaces.
Depends on:
•Light
•Surface orientation
•Material
Different types of shading are flat shading ,Gouraud Shading and Phong Shong
Flat Shading
•One color for entire surface
Gouraud Shading
•Calculate color at corners (vertices)
•Blend smoothly across surface
• Smoother than flat shading, Good quality
Phong Shading (Best quality)
•Instead of colors, we interpolate surface normals
•Don’t color the surface roughly. Instead, calculate light at EVERY tiny point
•Very smooth + shiny look
•Most realistic (used in many real-time systems)
Prepared by:[Link] Abraham
Bump Mapping
This is a trick:
Bump mapping is a trick used in graphics to make a flat surface look bumpy or rough without actually changing its
shape.
Example:
•Brick wall looks bumpy
Shadow Simulation Trick
Games often fake shadows by:
•copying object mesh
•flattening it
•coloring it dark
This creates the illusion of shadows efficiently.

Graphics Hardware Graphics APIs

Modern systems use specialized graphics hardware. Software communicates with graphics hardware using
Examples: APIs.
•GPUs Examples:
•Graphics cards •OpenGL
•Direct3D

Prepared by:[Link] Abraham

THANK YOU

Prepared by:[Link] Abraham