Computer Graphics & Visualization Lecture 1

Course Information

• Course Title: Computer Graphics & Visualization
• Course Code: CSE-423
• Lecture Number: 1
• Instructor: Dr. Reda Elbasiony
• Semester: Fall, 2024
• University: Egyptian Research-Oriented University (E-JUST)
• Partnership: Japanese Partnership

What is Computer Graphics?

• Computer graphics deals with all aspects of creating images using a computer
• Includes hardware, software, and various applications
• The image displayed in the presentation originated from an artist's depiction of the sun for a planetarium animation
• Software used: Maya (built on top of OpenGL)
• Hardware: Personal computer with a graphics card

Basic Graphics System

• Input devices (e.g., keyboard, mouse, tablet) send data to the processor (CPU).
• Data is processed by the CPU and sent to the graphics processor (GPU).
• The GPU processes the data and stores it in a frame buffer.
• The output device (e.g., monitor) displays the image from the frame buffer

Computer Graphics: 1950-1960

• Computer graphics roots trace back to early computing days.
• Early methods included strip charts and pen plotters
• Simple displays relied on analog-to-digital (A/D) converters to communicate with cathode ray tubes (CRTs).
• CRT technology limitations (high refresh costs, slow/expensive/unreliable computers) hindered graphics development during this period.

Cathode Ray Tube (CRT)

• A CRT converts electrical signals into a visible image
• Electron gun produces electrons, which are focused and deflected to hit a phosphor coating
• Deflection in the x and y axes create the image
• The phosphor glows when struck by electrons

Shadow Mask CRT

• A shadow mask precisely directs the electron beams from the three electron guns
• Each beam excites the corresponding color dot in the triad grid
• This process creates a color image on the screen

Computer Graphics: 1960-1970

• Wireframe graphics, focusing on drawing lines only
• Sketchpad, a pioneering system in man-machine interaction
• Sketchpad introduced the idea of using a light pen to interact with the computer
• Development of display processors and storage tubes

Sketchpad

• Ivan Sutherland's PhD thesis at MIT
• Recognized potential of man-machine interaction
• Key aspect was the light pen
• Display processor was crucial in speeding up image generation
• Development of several common algorithms
• Further improved computational processing capabilities

Display Processor

• Special-purpose processor dedicated to refreshing display
• Graphics are stored in a display list (display file)
• The host computer compiles the display list and sends it to the display processor (DPU)

Computer Graphics: 1970-1980

• Introduction of raster graphics
• Development of graphics standards (IFIPS, GKS, Core)
• Beginning of the era of workstations and personal computers (PCs)

Raster Graphics

• Images are generated as an array of pixels stored in the frame buffer
• This method transitions from lines or wireframes to filled polygons

Computer Graphics: 1980-1990

• Emergence of realism in computer graphics
• Techniques: smooth shading, environment mapping, and bump mapping
• Advancement of special-purpose hardware (e.g., Silicon Graphics geometry engine) and VLSI implementation of graphical pipelines
• Emergence of industry-standard graphics systems (e.g., PHIGS, RenderMan) and networked graphics

Computer Graphics: 1990-2000

• Introduction of OpenGL
• Successful computer-generated movies (e.g., Toy Story)
• Advancements in hardware capabilities (texture mapping, blending, accumulation, and stencil buffers)

Computer Graphics: 2000-2010

• Rise of photorealism in computer graphics
• Graphics cards (e.g., Nvidia, ATI) became dominant in the market
• Games and game developers played a major role in driving market trends for computer graphics
• Programmable pipelines were crucial in movie industry (e.g., Maya, Lightwave)
• Displays technologies were greatly improved.

Generic Flat Panel Display

• Displays use a grid of light-emitting elements to produce an image

Computer Graphics 2011-

• Ubiquitous graphics in cell phones and embedded systems
• OpenGL ES and WebGL were key additions
• Advancements in 3D movies and TV production

Image Formation

• Images are formed analogously to physical imaging systems (e.g., cameras, microscopes, telescopes)
• Two-dimensional images are generated using computer graphics

Elements of Image Formation

• Objects in the scene
• Viewer's perspective
• Light source(s)
• Attributes affecting light interaction with materials

Light

• Light is part of the electromagnetic spectrum
• Visible light wavelengths range from 350 to 750 nm
• Wavelengths determine the perceived color (e.g., long wavelengths = red, short wavelengths = blue)

Ray Tracing and Geometric Optics

• Image formation can be achieved by tracing rays of light originating from a point source
• These rays are tracked as they interact with and reflect off different objects

Luminance and Color Images

• Luminance images: Monochromatic, using gray levels (like black and white film/television)
• Color images: Have perceptive attributes of hue, saturation, and lightness

Three-Color Theory

• Human vision relies on three types of color-sensitive cones
• Need only match these three values (red, green, and blue) to represent all colors

Shadow Mask CRT

• Electron beams from separate electron guns create a color image
• The shadow mask guides beams to precise locations (color dots)

Additive and Subtractive Color

• Additive color: mixing of primary colors (red, green, blue)
• Subtractive color: filtering white light using colors like cyan, magenta, yellow (useful for printing)

Pinhole Camera

• Geometry is used to project 3D points onto a 2D plane
• Perspective projections are useful in generating 2D image from a 3D model

Coding in WebGL

• WebGL runs on standard browsers (like Chrome, Firefox, Safari)
• JavaScript is the programming language used
• WebGL runs within the browser and utilizes local resources

JavaScript Notes

• JavaScript (JS) is the primary language of the web
• All browsers execute JavaScript code.
• JavaScript is an interpreted object-oriented language
• Numerous references on JavaScript are available, including books and countless online tutorials

JS Notes

• JS engines in modern browsers are significantly faster. These concerns do not apply as much to graphics programming, as the GPU will handle most processing.
• JavaScript (JS) is a versatile language that is often a little excessive in its use.
• It’s essential to use only the parts of JavaScript that you need. Avoid unnecessary complexity.
• Don't write your code to resemble the style of another language (like C or Java).

JS Notes (Continued)

• JavaScript has a limited number of native data types (e.g., numbers, strings, booleans).
• Only one numerical type (32-bit float). Using floating-point numbers to represent values may cause potential issues with loops.
• JavaScript utilizes two equality operators (== and ===).
• Type checking and system implementation details are frequently left to the browser.

JS Arrays

• JS arrays are objects and inherit methods like push and pop
• Length property gives the number of elements in the array
• The structure and syntax of JS arrays are different from what is used in C++ or Java.
• Arrays in JavaScript are fundamentally different from those used in typical C programs.

Typed Arrays

• Typed arrays exist for situations where data needs to be sent to the GPU, like in 3D graphics.
• Typed arrays are designed for passing numeric data directly to the GPU in the 3D graphics environment.
• Using JavaScript’s standard arrays for GPU data may be very disadvantageous from a performance standpoint. Converting standard JavaScript arrays into typed arrays is crucial to ensure efficient interactions with the GPU for 3D graphics processing.

A Minimalist Approach

• Focus solely on core JavaScript and HTML
• Avoid additional packages like jQuery or CSS

Explore the fundamentals of computer graphics in this first lecture of CSE-423. Learn about the hardware and software involved in creating images, as well as the basic graphics system that processes data. This class is crucial for understanding the principles of image generation for various applications.