Scribd
Upload
13 views50 pages

EIT Module 5

Module 5 introduces HTML and its significance in web development, detailing its evolution from a text-based system to a user-friendly interface with hyperlinks and browsers. It explains the structure of HTML pages, the use of various elements like links, images, lists, tables, and forms, and emphasizes the importance of CSS for styling. The module highlights the foundational role of HTML in creating interactive and visually appealing websites, while also addressing best practices for accessibility and organization.

Uploaded by

prv.3339
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views50 pages

EIT Module 5

Module 5 introduces HTML and its significance in web development, detailing its evolution from a text-based system to a user-friendly interface with hyperlinks and browsers. It explains the structure of HTML pages, the use of various elements like links, images, lists, tables, and forms, and emphasizes the importance of CSS for styling. The module highlights the foundational role of HTML in creating interactive and visually appealing websites, while also addressing best practices for accessibility and organization.

Uploaded by

prv.3339
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Module 5 :

Introduction to HTML and the Web


The early internet in the 1960s and 70s was a vastly different place than what we know
today. It was entirely text-based, requiring users to type specific commands to navigate
between different computer systems. There were no clickable links, no images, and
certainly no user-friendly interfaces. Users needed technical knowledge just to access
basic information. This all changed in 1989 when Tim Berners-Lee, a British scientist
working at CERN, invented the World Wide Web. His revolutionary idea was to create a
system of hyperlinks that would allow users to simply click on text to jump from one
document to another, regardless of where those documents were stored in the world.
This concept, combined with HTML (HyperText Markup Language) and the first web
browsers like Mosaic in 1993, transformed the internet from a tool for researchers and
technicians into something anyone could use. The browser acted as a translator,
converting the HTML code that developers wrote into the beautiful, interactive
webpages that everyday users could see and navigate. Today, HTML remains the
absolute foundation of every single website you visit, from simple blogs to complex web
applications like Facebook and Amazon.

• Early Internet was text-only and command-based.


• Tim Berners-Lee (1989) introduced hyperlinks, making navigation simple.
• HTML + browsers (like Mosaic) made the web popular and usable.
• Today, HTML is the foundation of all websites.
What it shows:

• Google’s homepage rendered in a browser.

Why it matters:

• Demonstrates that every webpage you see is created using HTML.


• Browser converts HTML text into a visual webpage.

What is HTML?
HTML stands for HyperText Markup Language, and understanding what this means is
crucial. It is a markup language, not a programming language, which is an important
distinction. Programming languages like Python or Java contain logic, make decisions,
and perform calculations. HTML, on the other hand, simply describes and structures
content. It uses tags, which are special keywords enclosed in angle brackets, to tell the
browser what each piece of content represents. For example, tags can indicate that
something is a paragraph of text, an image, a clickable link, a table of data, or a form
where users can input information. The "HyperText" part of the name refers to text that
contains hyperlinks, those clickable elements that transport you from one webpage to
another with a simple click. This linking capability is what makes the web a "web" rather
than just a collection of isolated documents. When you right-click on any webpage and
select "View Page Source," you see the raw HTML code that created that page. What's
remarkable is that this same HTML code works consistently across all modern
browsers, whether you're using Chrome, Firefox, Safari, or Edge. This standardization is
what allows web developers to write code once and have it work everywhere.

• HTML (HyperText Markup Language) is a markup language, not a programming


language.
• Uses tags to describe:
• Text
• Images
• Links
• Tables
• Forms
• Hypertext = text containing clickable links.
What it shows:

• Right-click → “View Page Source” displaying raw HTML.

Why it matters:

• Proves that webpages are plain text files written in HTML.


• Same HTML works on all browsers → standardization

Structure of an HTML Page


Every HTML page follows a specific hierarchical structure that browsers expect and
understand. At the very top, you have the DOCTYPE declaration, which is not actually
an HTML tag but rather an instruction to the browser about which version of HTML the
page is using. For modern websites, this is simply "<!DOCTYPE html>". Next comes the
root HTML element, which wraps around everything else on the page. Inside the HTML
element, there are two main sections: the head and the body. The head section
contains metadata, which is information about the webpage that doesn't appear
directly on the screen. This includes the page title that appears in the browser tab, links
to CSS stylesheets that control the appearance, JavaScript files that add interactivity,
and meta tags that help search engines understand your content. The body section
contains everything that users actually see and interact with on the webpage, including
all the text, images, videos, links, forms, and other visible elements. Understanding this
structure is absolutely essential because browsers read HTML from top to bottom and
expect this organization. If you place elements in the wrong location or forget to close
tags properly, the browser may not display your page correctly. This hierarchical
structure also makes it easier for developers to organize their code logically and for
search engines to understand the content and purpose of each webpage.

Basic HTML Layout

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Page content
</body>
</html>

Components

• DOCTYPE – tells browser which HTML version


• HTML – root element
• HEAD – metadata (title, CSS, scripts)
• BODY – visible webpage content

Elements in HTML
HTML provides a rich variety of elements for formatting and structuring text content.
The paragraph tag creates blocks of text separated by space above and below, making
content readable and well-organized. Heading tags range from h1 through h6, with h1
being the largest and most important (typically used for page titles) and h6 being the
smallest (used for minor subheadings). These headings don't just change the size of
text; they create a semantic hierarchy that tells both users and search engines about
the structure and importance of your content. Search engines pay special attention to
headings when determining what a page is about. Beyond structure, HTML offers
formatting tags like bold for emphasis, underline for highlighting, and del or strike for
showing deleted or outdated information. For scientific and mathematical content,
subscript and superscript tags allow you to write chemical formulas like H₂O or
mathematical expressions like x². Each of these elements has a specific semantic
meaning, which means they convey information about the purpose of the content, not
just its appearance. Modern web development encourages using these semantic
elements correctly rather than just for visual effect, because this makes websites more
accessible to people using screen readers and easier for search engines to index
properly.

What it shows:

• Hierarchical structure of HTML tags.

Why it matters:

• Helps understand how browsers read and render pages.


• Essential for writing valid HTML.

Common Text Elements

• <p> – paragraph
• <h1> to <h6> – headings
• <b> – bold
• <u> – underline
• <del> / <strike> – strikethrough
• <sub> / <sup> – scientific notation

What they show:

• Code on left → rendered text on right.

Why they matter:

• Show how HTML tags affect formatting.


• Headings create logical structure for users & search engines.
Adding Links
The anchor tag is arguably the most revolutionary element in HTML because it's what
transforms a simple document into a webpage that's part of the interconnected World
Wide Web. The basic syntax includes an opening tag with an href attribute (which
stands for "hypertext reference") that specifies the destination URL, the clickable text
that users see, and a closing tag. When users click on this text, their browser navigates
to the URL specified in the href attribute. Links can point to external websites using
complete URLs starting with http:// or [Link] or they can point to other pages within
your own website using relative paths. You can also create links that jump to specific
sections within the same page by using anchor points identified by ID attributes. Links
can even trigger actions like opening an email client when clicked, by using "[Link]
URLs. The ability to link documents together is what makes the web fundamentally
different from traditional documents or books. It creates a network of interconnected
information where users can follow their curiosity and interests, jumping from topic to
topic seamlessly. This linking structure is also the foundation of how search engines
work, following links from page to page to discover and index content across the entire
internet.
What it shows:

• Clickable hyperlink text.

Why it matters:

• Hyperlinks are the core feature of the web.


• Enable navigation between webpages worldwide.
Adding Images
Images bring visual appeal and meaning to webpages that text alone cannot achieve.
The image tag is unique because it's a self-closing tag, meaning it doesn't have
separate opening and closing tags like most HTML elements. The src attribute (short for
"source") tells the browser where to find the image file, which could be stored on your
own server or hosted elsewhere on the internet. Width and height attributes allow you
to control the display size of the image, measured in pixels. You can specify both
dimensions to set an exact size, or just one dimension to resize proportionally. The alt
attribute, while optional, is extremely important for accessibility and SEO. It provides
alternative text that describes the image for users who can't see it, whether because
they're using screen readers due to visual impairment or because the image failed to
load due to a slow connection. Search engines also rely heavily on alt text to
understand what images contain, since they can't "see" images the way humans do.
Images are fundamental to modern web design, used for everything from company
logos and product photos to infographics and decorative elements. Without the ability
to include images, the web would be a far less engaging and useful place, unable to
showcase products, share photography, display charts and diagrams, or create visually
appealing brand identities.
What it shows:

• Image displayed with size control.

Why it matters:

• Images improve visual appeal & user engagement.


• Logos, banners, ads rely heavily on <img>.

Creating Lists
Lists are essential organizational tools in HTML that help present information in a clear,
scannable format. There are two main types: unordered lists, which display items with
bullet points, and ordered lists, which number items sequentially. Both types use list
item tags to define each individual entry. The power of HTML lists goes beyond simple
bullets and numbers, though. You can nest lists within other lists, creating hierarchical
structures that show relationships and subcategories. For example, a main category
might have several subcategories beneath it, each with their own items. This nesting
can go several levels deep, allowing you to create complex organizational structures.
Lists are used extensively in navigation menus, where each menu item is actually a list
element containing a link. They're perfect for presenting steps in a process, features of
a product, ingredients in a recipe, or any information that benefits from being broken
into distinct, ordered or unordered items. Properly structured lists also improve
accessibility, as screen readers can tell users how many items are in a list and which
item they're currently on, making navigation easier for visually impaired users. Search
engines also recognize lists and may display them specially in search results,
particularly for how-to content and recipes.

Types of Lists

• Unordered list <ul>


• Ordered list <ol>
• List item <li>

What it shows:

• Lists inside lists.

Why it matters:

• Helps organize information clearly.


• Common in menus and outlines.
Creating Tables
Tables provide a structured way to display data that has both rows and columns,
making comparisons and relationships clear. The basic structure starts with a table tag
that wraps everything. Inside, you use tr tags (table row) to define each row, and within
each row, you use td tags (table data) for regular cells or th tags (table header) for
header cells that label what each column contains. A simple table might show student
grades, with columns for name, assignment, and score. More complex tables can span
multiple pages and include merged cells, nested tables, and sophisticated formatting.
While tables were once misused to create entire webpage layouts before CSS became
standard, their proper use today is for tabular data: pricing comparisons, sports
statistics, financial reports, schedules, scientific data, and similar content where the
row and column structure adds meaning. Tables can include additional elements like
caption for a title, thead for header rows, tbody for the main data, and tfoot for
summary rows. This semantic structure helps screen readers navigate tables more
effectively and allows browsers to do things like keep headers visible while scrolling
through large amounts of data. Understanding tables is essential for any web
developer, as they remain the best way to present certain types of information despite
the availability of more modern layout techniques.

Table Elements

• <table> – table
• <tr> – row
• <td> – data cell

• <th> – header cell


What it shows:

• Structured data displayed in rows & columns.

Why it matters:

• Used for marks, pricing, rankings, etc.

Creating Forms
Forms are the primary mechanism for users to interact with websites and send
information back to web servers. Every time you log in to a website, search for
something, post a comment, make a purchase, or upload a file, you're using an HTML
form. The form element wraps all the input elements and specifies where the data
should be sent when submitted and what method to use. Inside forms, you use various
input types depending on what kind of information you're collecting. Text inputs allow
users to type short pieces of text like usernames or search queries. Password inputs
hide the characters as users type them for security. Checkboxes let users select
multiple options from a list, while radio buttons force them to choose just one option
from a group. Dropdown menus created with select tags save space while offering
many choices. Textareas provide larger spaces for longer text like comments or
messages. Modern HTML5 added specialized input types like date pickers, color
pickers, email fields with built-in validation, and number inputs with increment buttons.
The label element is crucial for accessibility, explicitly connecting descriptive text to
input fields so screen readers can tell users what each field is for. The submit button
triggers the form to send all the collected data to the server for processing. Forms are
what make the web interactive and dynamic, transforming it from a simple document
viewing system into a platform for communication, commerce, and collaboration.

Purpose of Forms

• Collect user input:


o Text
o Passwords
o Files
o Dates
o Choices

Important Tags

• <form>
• <input>
• <textarea>
• <select>
•

What they show:


• Google search box
• Radio buttons
• Checkboxes
• Date picker

Why they matter:

• Forms enable interaction with servers.


• Backbone of login, signup, search, checkout pages.

Cascading Style Sheets


CSS revolutionized web development by separating presentation from content. Before
CSS, all styling had to be done inline using HTML attributes, which meant that changing
the look of a website required editing potentially thousands of individual tags across
hundreds of pages. CSS introduced the concept of style rules that could be defined
once and applied to many elements automatically. You write a selector that targets
certain HTML elements, then specify what visual properties those elements should
have, like color, size, font, spacing, borders, and positioning. These style rules can be
embedded directly in HTML files, but the real power comes from external stylesheets,
which are separate CSS files that multiple HTML pages can link to. This means you can
control the appearance of an entire website from a single file, making updates
incredibly efficient. If you want to change your site's color scheme, you might only need
to modify a few lines in one CSS file rather than thousands of individual elements. CSS
also enables responsive design, where websites automatically adjust their layout
based on screen size, making the same site work well on phones, tablets, and desktop
computers. Modern CSS includes powerful features like animations, transitions, grid
and flexbox layouts, and even variables for maintaining consistency. The separation of
content and presentation isn't just about efficiency; it also improves accessibility
because the same HTML content can be styled differently for different needs, like a
high-contrast mode for visually impaired users or a print-friendly version.

Why CSS is Needed

• HTML = structure
• CSS = appearance

Benefits

• Consistency across pages


• Easy maintenance
• Cleaner HTML
What they show:

• Inline styling
• External CSS file linked to HTML

Why they matter:

• Demonstrates separation of content and design.


• Industry best practice.

Website Design and Storyboarding


Professional website development begins long before any code is written, with careful
planning and design work. Storyboarding involves mapping out the user journey,
thinking through how visitors will navigate your site and what actions they'll want to take
at each step. This helps identify what pages you need, how they should connect, and
what content each should contain. Wireframing takes this further by creating rough
sketches or diagrams of page layouts, showing where major elements like headers,
navigation, content areas, sidebars, and footers will appear, without getting distracted
by colors, images, or specific content. These wireframes can be created with paper and
pencil, but specialized tools like Balsamiq, Figma, or Adobe XD offer libraries of
common web elements that can be dragged and dropped to quickly create mockups.
The value of this planning phase cannot be overstated. It's much faster and cheaper to
revise a wireframe than to rebuild a website after it's been coded. Storyboards and
wireframes also facilitate communication between designers, developers, clients, and
stakeholders, ensuring everyone shares the same vision before expensive development
work begins. They help identify usability problems early, like navigation that's too
complex or important content that's buried too deep. User experience (UX) designers
specialize in this planning work, using principles of psychology and research about how
people interact with websites to create designs that are intuitive, efficient, and
pleasurable to use.

Concepts

• Storyboard – user journey


• Wireframe – layout without colors/images
What it shows:

• Rough webpage layout.

Why it matters:

• Planning saves time and cost.


• Identifies usability issues early.

Structure of a Website
A well-organized website isn't just a collection of random files; it follows a logical
structure that makes it maintainable and scalable. The root folder contains the main
landing page, almost always named "[Link]" because web servers are configured
to automatically serve this file when someone visits your domain without specifying a
particular page. Within the root, you create separate folders to organize different types
of files. A CSS folder holds all your stylesheets, keeping styling separate from content.
An images folder contains all graphics, photos, logos, and icons, often with subfolders
for different categories. A JavaScript folder stores scripts that add interactivity. Some
sites also have folders for fonts, documents, videos, and other resources. Additional
HTML pages should also be organized logically, perhaps with folders for different
sections of the site. This structure mirrors the URL paths that users see in their browser,
so a page at "[Link]/products/[Link]" would be stored in a products
folder in your website's root directory. This organization makes it much easier to
maintain the site because you know exactly where to find any file. It also makes
collaboration smoother when multiple developers work on the same project, and it's
essential for version control systems that track changes over time. When you
eventually deploy your website to a hosting server, this entire folder structure gets
uploaded, and the server knows how to serve files based on their locations and the
URLs that users request.

Folder Organization

• Root folder
• [Link] (default page)
• Separate folders for:
o CSS
o Images
o JavaScript
What they show:

• How webpages map to server folders.

Why they matter:

• Essential for deployment & maintenance.


Hosting a Website
Creating a website on your computer is just the first step; hosting makes it accessible
to the entire world. Web hosting means storing your website's files on a server, which is
essentially a powerful computer that's connected to the internet 24/7 and configured to
serve webpages to anyone who requests them. When someone types your domain
name into their browser, a system called DNS (Domain Name System) translates that
human-readable name into the numerical IP address of your hosting server, and the
browser then requests your files from that server. Most people use hosting providers
like GoDaddy, Bluehost, HostGator, or Wix, which offer various tiers of service from
shared hosting (where your site shares a server with many others) to dedicated servers
(where you rent an entire server just for your site). These providers handle the technical
complexities of server maintenance, security updates, backup systems, and ensuring
high uptime. Some offer additional services like email hosting, domain registration, SSL
certificates for secure connections, and website builders. Cloud platforms like AWS,
Google Cloud, and Microsoft Azure offer more sophisticated and scalable hosting
options for larger sites. Self-hosting, where you run your own server, is possible but
requires significant technical expertise, constant maintenance, robust security
measures, and reliable internet infrastructure, which is why it's rarely recommended
except for specific technical or privacy requirements. The hosting you choose affects
your website's speed, reliability, security, and ability to handle traffic spikes, making it a
crucial decision for any serious web project.

Hosting Means

• Storing website files on a webserver


• Making them accessible via domain name

Options

• Hosting providers (GoDaddy, Bluehost, Wix)


• Self-hosting (complex & risky)

Website Editors
The tools you use to build websites vary dramatically in complexity and approach.
Traditional code editors are text editors designed specifically for programming, with
features like syntax highlighting that colors different parts of your code to make it
readable, auto-completion that suggests code as you type, error detection that spots
mistakes before you save, and powerful find-and-replace functions. Popular code
editors include Visual Studio Code, Sublime Text, Atom, and Notepad++. These require
you to write HTML, CSS, and JavaScript by hand, giving you complete control but
requiring technical knowledge. On the other end of the spectrum are WYSIWYG (What
You See Is What You Get) editors like Adobe Dreamweaver, which provide a visual
interface where you drag and drop elements onto a canvas and see approximately how
the page will look in a browser. Website builders like Wix, Squarespace, and Google
Sites take this even further, offering templates and drag-and-drop interfaces that
require no coding knowledge at all. These tools democratize web development,
allowing small business owners, artists, educators, and others to create professional-
looking websites without learning to code. However, they sacrifice flexibility and control
compared to hand-coding. Modern development often uses a hybrid approach:
developers write code in editors but use tools like browser developer tools to inspect
and debug, preview servers to see changes in real-time, and version control systems
like Git to manage changes and collaborate with others. The choice of tool depends on
your project's complexity, your technical skills, your need for customization, and your
budget.

• Code editors (manual HTML)


• WYSIWYG editors (drag & drop)
What it shows:

• Visual website creation.

Why it matters:

• Enables non-programmers to build websites.


HTML Extensions
HTML has evolved far beyond its original purpose of displaying static documents.
Dynamic HTML (DHTML) isn't a separate language but rather a combination of HTML,
CSS, and JavaScript working together to create interactive, responsive webpages that
change based on user actions without requiring a page reload. When you hover over a
menu and a dropdown appears, or click a button and content animates into view, that's
DHTML at work. JavaScript manipulates the HTML structure and CSS styles in real-time,
creating the illusion of a dynamic, app-like experience. Single Page Applications (SPAs)
take this concept to its extreme, loading just one HTML page initially, then using
JavaScript to dynamically replace content as users navigate, making the site feel
incredibly fast and responsive. Gmail and Facebook are classic examples; they feel like
desktop applications despite running in a browser. SPAs rely heavily on JavaScript
frameworks like React, Angular, or Vue that manage the complexity of updating the
interface efficiently. They communicate with servers through APIs (Application
Programming Interfaces) to fetch data as needed, rather than loading entire new pages.
This approach provides excellent user experience but requires more sophisticated
development skills and creates challenges for search engine optimization since much
content doesn't exist in the HTML until JavaScript creates it. Modern web development
has evolved into a complex ecosystem where choosing between traditional multi-page
sites and SPAs depends on your specific needs, audience, and resources.

Dynamic HTML (DHTML)

• HTML + CSS + JavaScript


• Enables interactivity

Single Page Applications (SPA)

• One page, dynamic content updates


• Examples: Gmail, Facebook

XML and JSON


While HTML describes how to display data, XML and JSON are formats for storing and
transporting data between systems. XML (Extensible Markup Language) looks similar to
HTML with its angle-bracket tags, but instead of predefined tags like paragraph and
heading, you create custom tags that describe your data's meaning. A customer record
might have tags for name, address, and phone number. XML is self-descriptive, very
flexible, and used extensively in enterprise systems, financial services, publishing, and
anywhere different systems need to exchange complex, hierarchical data. However,
XML is verbose, with every piece of data surrounded by opening and closing tags, and
all those angle brackets make files larger and harder for humans to read quickly. This is
where JSON (JavaScript Object Notation) comes in. JSON represents data as key-value
pairs, looking more like simple text than markup. It's far more concise than XML, easier
to read, and maps directly to data structures used in most programming languages,
making it trivial for programs to parse and generate. Modern web APIs overwhelmingly
prefer JSON because it's lightweight, fast to transmit over networks, and natural to work
with in JavaScript, which powers most web interactivity. A social media app fetching
user data from a server almost certainly receives that data in JSON format.
Understanding these data formats is essential for anyone working with web services,
APIs, databases, or any system where applications need to communicate and share
information across the internet.

XML

• Tag-based
• Extensible
• Used in data exchange & finance

JSON

• Key-value format
• Lightweight
• Preferred for modern web apps
What they show:

• XML verbosity
• JSON simplicity

Why they matter:

• Understanding data formats is crucial for web & API development.

COMPUTER GRAPHICS
Chapter 10 - Study Notes
10.1 The Scope of Computer Graphics
Computer Graphics Definition
Computer graphics is the branch of computer science that applies computer
technology to the production and manipulation of visual representations.

2D Graphics
Focuses on converting two-dimensional shapes (circles, rectangles, letters, etc.) into
patterns of pixels to produce an image.
Key characteristics:
• Deals with flat, two-dimensional shapes and images
• Examples: Drawing programs (MS Paint), photo editing
• Produces images from 2D input

Image Processing
Focuses on analyzing pixels in an image to identify patterns for enhancement or
understanding.
Key characteristics:
• Analyzes existing images
• Examples: Removing red-eye, image enhancement, pattern recognition
• Deals with manipulating digital photographs

3D Graphics
Deals with converting three-dimensional shapes into images by constructing digitally
encoded versions of 3D scenes and simulating the photographic process.
Key characteristics:
• 'Photographs' virtual worlds that exist only as data and algorithms
• Used in video games and animated motion pictures
• Frees visual media from restrictions of reality

Comparison: 2D Graphics vs Image Processing vs 3D Graphics

2D Graphics Image Processing 3D Graphics

Producing images from Analyzing existing images Converting 3D shapes


2D shapes into 2D images
Circles → pixels Pixels → patterns Virtual 3D scene →
photograph

Two Major Steps in 3D Graphics


Step 1: Creative Process
Creation, encoding, storage, and manipulation of the scene to be photographed
(artistic process)

Step 2: Computational Process


Producing the image from the scene (computationally intensive process)

10.2 Overview of 3D Graphics


Three Steps of Creating and Displaying Images
1. Modeling
Designing and constructing a digital scene from encoded data and algorithms (like
building a virtual movie set)

2. Rendering
Computing how objects in the scene would appear when photographed by a camera
at a specified position

3. Displaying
Showing the rendered image to the viewer from the frame buffer

Key Concepts in Rendering


Perspective Projection
Objects are projected along straight lines (projectors) extending from a common
point (center of projection/viewpoint)
Contrast with parallel projection where projectors are parallel (useful for engineering
drawings)
Shows: Center of projection, projectors, projection plane, image window, object, and
projected image

Projection Plane
The flat surface onto which the 3D scene is projected (like film in a camera)

Image Window
The restricted portion of the projection plane that defines the boundaries of the final
image (like the rectangle in a camera viewfinder)

Frame Buffer
Storage area where the rendered image is stored as a bitmap representation
• May be in main memory or special-purpose memory circuitry
• Stores pixel-by-pixel appearance data
• Image is displayed or stored from this buffer

10.3 Modeling
Modeling is the process of constructing virtual objects and scenes (the 'set' and
'props' for 3D graphics)
Modeling Individual Objects
Shape Modeling: Polygonal Meshes
Polygonal Mesh: A collection of small flat surfaces (planar patches) that
approximate an object's shape
• Each patch is typically a polygon (often triangles)
• Triangles are popular: defined by 3 vertices (minimum for a flat surface)
• Represented as collection of vertices
• More precise models = better images but longer rendering times

Draw a sphere approximated by triangular patches

Methods to Create Polygonal Meshes


1. Geometric Formulas
Start with precise mathematical descriptions and convert to mesh
Example - Sphere: r² = x² + y² + z²
Use latitude/longitude lines intersection points as vertices

2. Bézier Curves and Surfaces


Curved lines/surfaces defined by control points
• Developed by Pierre Bézier (Renault, early 1970s)
• Two control points mark curve ends
• Additional control points distort the curve
• Can be extended to 3D surfaces (Bézier surfaces)

Draw a curve with 4 control points (2 endpoints, 2 distortion points)

3. Digitizing
Build physical model and record surface points using a pen device that records 3D
positions
Use collected points as vertices for polygonal mesh

4. Procedural Models
Programs that automatically construct shapes using algorithms
Why use procedural models?
• Some shapes are too complex for geometric/manual methods
• Examples: trees, mountain ranges, clouds, smoke, fire

Example - Mountain Range Generation:


1. Start with single triangle
2. Find midpoints of triangle edges
3. Connect midpoints to form 4 smaller triangles
4. Move midpoints in 3D space (distort triangles)
5. Repeat process recursively for detail
Show the 4-step process: initial triangle → midpoints → connected → distorted →
repeated

Tree Generation with Grammars:


Use branching rules (grammar) to 'grow' tree structures
• Similar to parser construction with grammar rules
• Different grammars for different tree types (pine vs oak)
• Produces similar yet unique trees

Particle Systems:
Model objects as large collections of particles with movement rules
• Example: Water simulation (bucket of marbles)
• Applications: fire flames, clouds, crowd scenes
• Outer particles form vertices of final mesh
Fractals in 3D Graphics
Geometric objects formed by 'packing together' copies of lower-dimension objects
• Formed by recursive processes
• Self-similar: each portion looks like a copy of itself when magnified
• Example: von Koch snowflake
• Applications: mountain ranges, vegetation, clouds, smoke

Surface Characteristics
Beyond shape, objects need surface properties for realistic rendering

Texture Mapping
Associating a predefined image with an object's surface (like applying wallpaper)
Process:
• Create simple polygonal mesh (e.g., rectangular wall)
• Supply 2D texture image (e.g., stone masonry photo)
• During rendering, map texture to surface
Common textures: brick walls, wood grain, marble
Limitations: Works best on flat surfaces; can look artificial on curves; seam
problems when wrapping
Advantage: Efficient for real-time applications (video games)

Advanced Realistic Surface Modeling


Human Skin: Model light penetration through epidermal/dermal layers
Hair: Individual strand modeling (~100,000 hairs on human head) with translucency,
texture, draping, wind response
Cloth: Weaving patterns, yarn properties, thread mechanics, draping physics

Modeling Entire Scenes


Scene Graph
A data structure containing all information needed to render the scene
Contents:
• All object models with location, size, orientation
• Light sources
• Camera object (location, orientation, focal properties)
Analogy: Like a traditional photography studio setup, but virtual

Camera Position and Detail


Object detail requirements depend on camera position:
• Foreground objects need more detail
• Background objects need less detail
• Moving cameras require adjustable detail levels
• Research area: 'intelligent' models that refine as camera moves

Virtual Reality Application


User experiences sensation of being inside 3D world
• Two cameras: one for each eye (left/right) for depth perception
• Cameras move as user moves
• Each eye sees different image for 3D illusion
• Can include audio and tactile sensations

Scene Graph Significance:


Marks transition from artistic modeling to computational rendering
Contains all info for final image
Rest of process is largely application-independent

10.4 Rendering
Rendering determines how objects in a scene graph would appear when projected
onto the projection plane

Light-Surface Interaction
Object appearance is determined by light emitted from it
Light striking a surface may be:
• Absorbed
• Reflected
• Refracted (pass through and bend)

Reflection
Law of Reflection: Angle of incidence = Angle of reflection (both measured from the
normal)
Incoming ray, reflected ray, and normal all lie in same plane
Show: incoming ray, normal, reflected ray, incidence angle, reflection angle

Specular Light
Reflected light from smooth surfaces
• Parallel incoming rays → parallel reflected rays
• Visible only when surface reflects light toward viewer
• Appears as bright highlights
• Minimal surface contact → shows light source color

Diffuse Light
Scattered reflected light from rough surfaces
• Light penetrates surface, ricochets among particles
• Scattered in different directions
• Visible from wide range of viewing angles
• Prolonged surface contact → shows object color

Ambient Light
'Stray' or scattered light not associated with particular source or direction
• Illuminates surfaces not facing direct light
• Appears as uniform dark color
Show ball with bright highlight (specular), illuminated hemisphere (diffuse), dark
opposite side (ambient)

Surface Reflection Characteristics


Smooth surfaces: More specular light → appear shiny
Rough surfaces: More diffuse light → appear dull

Isotropic Surfaces: Symmetric reflection patterns (same appearance regardless of


rotation)
Anisotropic Surfaces: Reflection varies by direction
• Examples: satin fabric (nap effect), athletic field grass (striped patterns)
• Appearance shifts from shiny to dull when rotated

Refraction
Light passing through transparent objects bends (refracts) as it enters/exits
Show: incoming ray, normal, refracted ray bending at boundary, angles labeled

Refractive Index
Related to material density
• Entering denser material (higher index) → bends toward normal
• Entering less dense material (lower index) → bends away from normal
• Rendering requires knowing inside vs outside of object
Technique: List polygon vertices counter-clockwise when viewed from outside

The Rendering Pipeline


Well-established sequence of steps used in most interactive graphics systems
Note: Handles opaque objects only (no refraction), ignores object interactions (no
mirrors/shadows)

Step 1: Identify View Volume


View Volume: Pyramid-shaped region containing objects visible to camera
Defined by lines extending from center of projection through image window corners
Show pyramid from projection center through image window, with objects
inside/outside

Step 2: Clipping
Process of trimming objects/patches that extend outside view volume
Process:
1. Discard objects totally outside view volume (entire branches of scene graph tree)
2. Compare each planar patch to view volume boundaries
3. Trim portions outside boundaries
4. Result: all patches lie entirely within view volume

Step 3: Scan Conversion (Rasterization)


Associating pixel positions with points on planar patches
Process:
1. Extend projectors from center through each pixel position
2. Find intersection points with planar patches
3. These points will be represented by pixels in final image
Important: Only points at pixel positions appear in final image
Raster: Array of pixels; scan lines are horizontal rows

Part a: Show projector from center through pixel to triangle patch


Part b: Show pixel grid with triangle pixels shaded (note jagged edges)

SIDEBAR: Aliasing
Inappropriate meshing between image pattern and pixel density
Example: Striped shirt on TV appears 'glittery' as stripes align/misalign with pixels
Solution: Render each pixel as average of small area instead of single point
Step 4: Hidden-Surface Removal
Identifying and discarding points blocked from camera view

Back Face Elimination


Discard patches on back side of objects (facing away from camera)
Relatively straightforward based on patch orientation

Painter's Algorithm (Simple but Limited)


Sort objects by distance from camera
Render distant objects first
Closer objects override previous results
Problem: Fails with intertwined objects (part behind, part in front)

Z-Buffer (Depth Buffer) - Better Solution


Extra storage with entry for each pixel storing distance to object
Algorithm:
1. Initialize all z-buffer entries to maximum distance
2. For each point being rendered:
a. Compare its distance to z-buffer value
b. If closer: compute appearance, store in frame buffer, update z-buffer
c. If farther: ignore (blocked by closer object)
Advantage: Handles all cases including intertwined objects

Step 5: Shading
Determining the appearance (color/brightness) of each point on a patch
Depends on surface orientation and light interaction

Flat Shading (Simple but Unrealistic)


Use patch orientation for all points on patch
Assumes surface is flat across entire patch
Result: Image appears faceted (shows polygonal mesh structure)
Show sphere with visible facets/polygons

Normal Vectors for Smooth Shading


Encode original surface orientation at mesh vertices
Normal vectors point perpendicular to original surface
Allow estimation of surface orientation between vertices

Show mesh with arrows (normal vectors) at vertices pointing outward

Gouraud Shading
Process:
1. Use vertex normal vectors to find surface orientation at vertices
2. Interpolate orientation along patch boundaries
3. Compute appearance (color) along boundaries
4. Interpolate boundary colors to find interior point colors
Summary: Orientation → Color → Interpolate color
Phong Shading (More Accurate)
Process:
1. Use vertex normal vectors to find surface orientation at vertices
2. Interpolate orientation along patch boundaries
3. Interpolate orientation to interior points
4. Compute appearance at each interior point
Summary: Orientation → Interpolate orientation → Color
Advantage: Better detects specular highlights within patch interior

Bump Mapping
Add randomness to surface orientation during interpolation
Creates appearance of rough/textured surface

Show sphere with textured/rough appearance

Rendering-Pipeline Hardware
Efficient algorithms implemented directly in electronic circuitry
• VLSI chips perform entire pipeline automatically
• Can render millions of patches per second
• Included in video game machines, graphics cards
• Graphics cards attached to computer bus as specialized controllers
Standard Software Interfaces
Convert standardized commands to specific hardware instructions
OpenGL: Open Graphics Library - nonproprietary, widely used in video games
Direct3D: Microsoft's system for Windows environments
Purpose: Reduce application dependence on specific graphics hardware

Local vs Global Lighting Models


Local Lighting Model (Rendering Pipeline)
• Renders each object independently
• Ignores object interactions
• Cannot produce shadows or reflections
• Fast - suitable for real-time applications

Global Lighting Model


• Considers interactions among objects
• Can produce shadows and reflections
• Computationally intensive - not real-time
• Covered in Section 10.5

Workarounds for Local Lighting Limitations


Drop Shadows:
1. Copy object's polygonal mesh
2. Flatten the copy
3. Place flat copy on ground
4. Color it dark
5. Render as another object
Result: Illusion of shadow using local lighting model

Chapter Summary
Key Distinctions

Aspect 2D Graphics Image Processing 3D Graphics

Input 2D shapes Pixel images 3D scene


descriptions

Output Pixel images Enhanced/analyzed 2D photo of 3D


images scene
Focus Producing images Analyzing images Virtual
photography

Rendering Pipeline Steps

Step Process Purpose

1. View Identify pyramid region visible Determine what can possibly


Volume to camera be seen

2. Clipping Trim patches extending outside Remove parts that won't


view volume appear in image

3. Scan Associate pixel positions with Identify which pixels represent


Conversion patch points which patches

4. Hidden- Remove points blocked from Show only visible surfaces


Surface view (z-buffer) (foreground over background)

5. Shading Compute color/brightness at Determine final appearance


each point based on lighting

Key Terms Reference


Modeling Terms:
• Polygonal Mesh: Collection of planar patches approximating shape
• Planar Patch: Flat polygon surface (often triangle)
• Bézier Curve/Surface: Curves defined by control points
• Procedural Model: Algorithm that generates shapes automatically
• Particle System: Object modeled as collection of particles
• Texture Mapping: Applying image to surface
• Scene Graph: Data structure with all scene information

Rendering Terms:
• Perspective Projection: Projection with converging projectors
• Center of Projection: Viewpoint where projectors converge
• Projection Plane: Flat surface receiving projected image
• Image Window: Bounded region defining final image
• Frame Buffer: Storage for rendered image bitmap
• View Volume: Pyramid region visible to camera
• Clipping: Trimming objects outside view volume
• Scan Conversion (Rasterization): Associating pixels with patches
• Z-buffer (Depth Buffer): Storage for distance information
Lighting Terms:
• Specular Light: Reflected light from smooth surfaces (highlights)
• Diffuse Light: Scattered reflected light (object color)
• Ambient Light: Stray scattered light (no specific source)
• Refraction: Light bending when passing through materials
• Refractive Index: Material property determining refraction degree
• Isotropic Surface: Symmetric reflection (same from all angles)
• Anisotropic Surface: Direction-dependent reflection

Shading Terms:
• Flat Shading: Using patch orientation for all points (faceted look)
• Normal Vector: Arrow perpendicular to surface
• Gouraud Shading: Interpolate colors (orientation→color→interpolate)
• Phong Shading: Interpolate orientations (orientation→interpolate→color)
• Bump Mapping: Adding texture appearance through orientation variation

Lighting Model Terms:


• Local Lighting: Renders objects independently (no shadows/reflections)
• Global Lighting: Considers object interactions (shadows/reflections)

Additional Notes and Diagrams

You might also like