Introduction to Computer Graphics with WebGL

Similar documents
Image Formation. Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

3D graphics, raster and colors CS312 Fall 2010

Lecture 1. Computer Graphics and Systems. Tuesday, January 15, 13

Game Programming. Bing-Yu Chen National Taiwan University

Computer Graphics. Bing-Yu Chen National Taiwan University The University of Tokyo

Computer Graphics. Bing-Yu Chen National Taiwan University

INTRODUCTION. Slides modified from Angel book 6e

CS452/552; EE465/505. Image Formation

Introduction to Computer Graphics with WebGL

Graphics Systems and Models

Survey in Computer Graphics Computer Graphics and Visualization

National Chiao Tung Univ, Taiwan By: I-Chen Lin, Assistant Professor

Models and Architectures. Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

Introduction to Computer Graphics with WebGL

Introduction to Computer Graphics with WebGL

CSE4030 Introduction to Computer Graphics

Computer Graphics and Visualization. Graphics Systems and Models

VTU QUESTION PAPER SOLUTION UNIT -1 INTRODUCTION

Overview CS Plans for this semester. References. CS 4600 Fall Prerequisites

Computer Graphics - Chapter 1 Graphics Systems and Models

Models and Architectures

CS452/552; EE465/505. Color Display Issues

Image Formation. Introduction to Computer Graphics. Machiraju/Zhang/Möller/Klaffenböck

Image Formation. Introduction to Computer Graphics Torsten Möller. Machiraju/Zhang/Möller

Digital Image Processing COSC 6380/4393. Lecture 19 Mar 26 th, 2019 Pranav Mantini

Reading. 2. Color. Emission spectra. The radiant energy spectrum. Watt, Chapter 15.

CS354 Computer Graphics Introduction. Qixing Huang Januray 17 8h 2017

Color and Shading. Color. Shapiro and Stockman, Chapter 6. Color and Machine Vision. Color and Perception

(0, 1, 1) (0, 1, 1) (0, 1, 0) What is light? What is color? Terminology

Image Formation. Camera trial #1. Pinhole camera. What is an Image? Light and the EM spectrum The H.V.S. and Color Perception

The Display pipeline. The fast forward version. The Display Pipeline The order may vary somewhat. The Graphics Pipeline. To draw images.

Illumination and Shading

Lecture 12 Color model and color image processing

CS635 Spring Department of Computer Science Purdue University

Introduction to color science

Computer Graphics Lecture 2

CSE 167: Lecture #6: Color. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011

The Elements of Colour

SNC 2PI Optics Unit Review /95 Name:

Lecture 1 Image Formation.


INFOGR Computer Graphics. J. Bikker - April-July Lecture 10: Shading Models. Welcome!

Physical Color. Color Theory - Center for Graphics and Geometric Computing, Technion 2

CS 445 HW#6 Solutions

Introduction to Computer Graphics with WebGL

The Viewing Pipeline Coordinate Systems

Visible Color. 700 (red) 580 (yellow) 520 (green)

Lecture 15: Shading-I. CITS3003 Graphics & Animation

782 Schedule & Notes

Announcements. Lighting. Camera s sensor. HW1 has been posted See links on web page for readings on color. Intro Computer Vision.

Color Vision. Spectral Distributions Various Light Sources

Visualisatie BMT. Rendering. Arjan Kok

Announcements. Camera Calibration. Thin Lens: Image of Point. Limits for pinhole cameras. f O Z

Light Transport Baoquan Chen 2017

Global Illumination. Frank Dellaert Some slides by Jim Rehg, Philip Dutre

CSE 167: Lecture #6: Color. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012

Computer Vision Course Lecture 02. Image Formation Light and Color. Ceyhun Burak Akgül, PhD cba-research.com. Spring 2015 Last updated 04/03/2015

Color. Reading: Optional reading: Chapter 6, Forsyth & Ponce. Chapter 4 of Wandell, Foundations of Vision, Sinauer, 1995 has a good treatment of this.

OUTLINE. Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for a graphics system

Why does a visual system need color? Color. Why does a visual system need color? (an incomplete list ) Lecture outline. Reading: Optional reading:

Chapter 4. Chapter 4. Computer Graphics 2006/2007 Chapter 4. Introduction to 3D 1

3D Viewing. Introduction to Computer Graphics Torsten Möller. Machiraju/Zhang/Möller

CS130 : Computer Graphics Lecture 2: Graphics Pipeline. Tamar Shinar Computer Science & Engineering UC Riverside

CS770/870 Spring 2017 Color and Shading

Color and Light CSCI 4229/5229 Computer Graphics Fall 2016

COMP Preliminaries Jan. 6, 2015

Digital Image Processing. Introduction

CS130 : Computer Graphics Lecture 8: Lighting and Shading. Tamar Shinar Computer Science & Engineering UC Riverside

Midterm Exam CS 184: Foundations of Computer Graphics page 1 of 11

Chapter 2 - Fundamentals. Comunicação Visual Interactiva

Chapter 5 Extraction of color and texture Comunicação Visual Interactiva. image labeled by cluster index

One or more objects A viewer with a projection surface Projectors that go from the object(s) to the projection surface

Stereoscopic Systems Part 1

Lecture 16 Color. October 20, 2016

Color. making some recognition problems easy. is 400nm (blue) to 700 nm (red) more; ex. X-rays, infrared, radio waves. n Used heavily in human vision

The topics are listed below not exactly in the same order as they were presented in class but all relevant topics are on the list!

Color and Light. CSCI 4229/5229 Computer Graphics Summer 2008

Color. Computational Photography MIT Feb. 14, 2006 Bill Freeman and Fredo Durand

Exam Review: Geometric Optics 1. Know the meaning of the following terms and be able to apply or recognize them:

What is it? How does it work? How do we use it?

Reflection and Refraction of Light

MET71 COMPUTER AIDED DESIGN

Understanding Variability

Colour Reading: Chapter 6. Black body radiators

Image Analysis and Formation (Formation et Analyse d'images)

CS354 Computer Graphics Ray Tracing. Qixing Huang Januray 24th 2017

Classical and Computer Viewing. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico

Reading. 4. Color. Outline. The radiant energy spectrum. Suggested: w Watt (2 nd ed.), Chapter 14. Further reading:

Texture Mapping. Images from 3D Creative Magazine

Orthogonal Projection Matrices. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

Spectral Adaptation. Chromatic Adaptation

3D Viewing. CMPT 361 Introduction to Computer Graphics Torsten Möller. Machiraju/Zhang/Möller

Global Rendering. Ingela Nyström 1. Effects needed for realism. The Rendering Equation. Local vs global rendering. Light-material interaction

All forms of EM waves travel at the speed of light in a vacuum = 3.00 x 10 8 m/s This speed is constant in air as well

Lecture #2: Color and Linear Algebra pt.1

Image Formation. CS418 Computer Graphics Eric Shaffer.

Fall 2015 Dr. Michael J. Reale

Color to Binary Vision. The assignment Irfanview: A good utility Two parts: More challenging (Extra Credit) Lighting.

When this experiment is performed, subjects find that they can always. test field. adjustable field

Computer Graphics and Visualization. What is computer graphics?

Transcription:

Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico

Image Formation Ed Angel Professor Emeritus of Computer Science, University of New Mexico 2

Objectives Fundamental imaging notions Physical basis for image formation - Light - Color - Perception Synthetic camera model Other models 3

Image Formation In computer graphics, we form images which are generally two dimensional using a process analogous to how images are formed by physical imaging systems - Cameras - Microscopes - Telescopes - Human visual system 4

Elements of Image Formation Objects Viewer Light source(s) Attributes that govern how light interacts with the materials in the scene Note the independence of the objects, the viewer, and the light source(s) 5

Light Light is the part of the electromagnetic spectrum that causes a reaction in our visual systems Generally these are wavelengths in the range of about 350-750 nm (nanometers) Long wavelengths appear as reds and short wavelengths as blues 6

Ray Tracing and Geometric Optics One way to form an image is to follow rays of light from a point source finding which rays enter the lens of the camera. However, each ray of light may have multiple interactions with objects before being absorbed or going to infinity. 7

Luminance and Color Images Luminance Image - Monochromatic - Values are gray levels - Analogous to working with black and white film or television Color Image - Has perceptional attributes of hue, saturation, and lightness - Do we have to match every frequency in visible spectrum? No! 8

Three-Color Theory Human visual system has two types of sensors - Rods: monochromatic, night vision - Cones Color sensitive Three types of cones Only three values (the tristimulus values) are sent to the brain Need only match these three values - Need only three primary colors 9

Shadow Mask CRT 0

Additive and Subtractive Color Additive color - Form a color by adding amounts of three primaries CRTs, projection systems, positive film - Primaries are Red (R), Green (G), Blue (B) Subtractive color - Form a color by filtering white light with cyan (C), Magenta (M), and Yellow (Y) filters Light-material interactions Printing Negative film

Pinhole Camera Use trigonometry to find projection of point at (x,y,z) x p = -x/z/d y p = -y/z/d z p = d These are equations of simple perspective 2

Synthetic Camera Model projector p image plane projection of p center of projection 3

Advantages Separation of objects, viewer, light sources Two-dimensional graphics is a special case of three-dimensional graphics Leads to simple software API - Specify objects, lights, camera, attributes - Let implementation determine image Leads to fast hardware implementation 4

Global vs Local Lighting Cannot compute color or shade of each object independently - Some objects are blocked from light - Light can reflect from object to object - Some objects might be translucent 5

Why not ray tracing? Ray tracing seems more physically based so why don t we use it to design a graphics system? Possible and is actually simple for simple objects such as polygons and quadrics with simple point sources In principle, can produce global lighting effects such as shadows and multiple reflections but ray tracing is slow and not well-suited for interactive applications Ray tracing with GPUs is close to real time 6