Welcome! []Intro to Computer Graphics • 2D imaging • Computer Graphics (usually 3D with a virtual camera involved) • Visual Arts (Digital Photography, Sculpture, and Sketching)

Welcome!

Intro to Computer Graphics

© 2020 Enrique Rosales

What is computer graphics?



Imaging



Any technology to create, preserve or duplicate images

Imaging (creation)



• 2D imaging

• Computer Graphics (usually 3D with a virtual camera involved)

• Visual Arts (Digital Photography, Sculpture, and Sketching)

• LIDAR Imagery (3D scanner for environments)

• Medical imaging




The study of algorithms and systems for generating images with

Computers.




The study of algorithms and systems for generating images with

Computers.

Almost every synthetic image that you can produce with a

computer is computer graphics.

Topics in Computer Graphics



• Imaging (2D)

• Modeling (dgp)

• Rendering

• Animation

• Interaction

• Simulation

• Digital Characters

• Virtual Reality

• Augmented Reality

• Capture

• Sketching

2D Imaging



Raster Images

Composed of

Individual pixels

Computer Graphics / 2D Imaging / Raster images

2D Imaging



Raster Images

Composed of

Individual pixels

Computer Graphics / 2D Imaging / Raster images

2D Imaging



Vector Images

Composed of Curves

Computer Graphics / 2D Imaging / Vector images

Modeling (3D surfaces)



CAD Models

Surfaces defined by

curves

Computer Graphics / Modeling / CAD models




Polygon Meshes

Surfaces defined by

faces

Computer Graphics / Modeling / Polygon Meshes





Polygon Meshes

Surfaces defined by

faces





Example

Modeling (3D volumes)



Voxels

The equivalent of

pixels in 3D

Computer Graphics / Modeling / Voxels




Voxels

The equivalent of

pixels in 3D

Computer Graphics / Modeling / Voxels




Tetrahedral meshes

Computer Graphics / Modeling / Tetrahedral meshes




Hexahedral meshes

Computer Graphics / Modeling / Hexahedral meshes

HexaLab.net: an online viewer for hexahedral meshes

Matteo Bracci, Marco Tarini, Nico Pietroni, Marco Livesu, Paolo Cignoni

Procedural Modeling



Objects created from a

set of rules

Computer Graphics / Modeling / Procedural Modeling

Procedural Modeling of Buildings

[Müller et al. 2006]

Procedural Modeling



Computer Graphics / Modeling / Procedural Modeling

Cities Skylines

Objects created from a

set of rules

Rendering



Computer Graphics / Rendering /

Online Rendering

(Real-time rendering)

http://madebyevan.com/webgl-water/

Rendering




Offline Rendering

(Pre-rendering)

Animation



Computer Graphics / Animation /

More in CPSC 426

Interaction



Computer Graphics / Interaction /

HCI

(Human Computer

Interaction)

Simulation



Computer Graphics / Simulation /

Physics simulation

(RealFlow example)

Simulation




Simulation




http://david.li/fluid/

Digital Characters




Virtual Reality



Computer Graphics / VR /

Surface reconstruction

from VR drawings

Augmented Reality




Education

Capture



Computer Graphics / Capture /

LIDAR scanning

Sketching




Sketch cleanning

Applications of Computer Graphics


Movies

Games

CAD

Computer-Aided Analysis

Geomatics

ML training

Education

Training


Museography

Medical imaging

Information visualization

Architecture

VR

Therapy

Fabrication

SIGGRAPH



What you will learn


Computer Graphics Algorithms that usually NOT stay forever…

New Alternative Mathematical Tools

3D shapes

Transformations

Rendering algorithms

Shading models

Basic animation algorithms

Raytracing


How much math we will cover?


• Vectors

• Matrices

• Coordinate systems

• Transformations (linear, Affine)

• Forward kinematics

• Inverse kinematics

• Quaternions

• Rotors (A bit of Geometric Algebra)

• Intersections (A bit of Projective Geometric Algebra)

• Barycentric coordinates

• Bézier curves

• And more…


What you will not learn


• Hardware details

• OpenGl, three.js or DirectX tricks and hacks

• Software packages

• Artistic skills

• Deep theoretical proofs

• Machine Learning


What do you need to take this course?


Pre-requisites

CPSC 221 and one of MATH 200, MATH 217, MATH 226, MATH 253 and one of MATH 152, MATH 221, MATH 223.

Linear Algebra

Algorithms

Basic Data structures

Basic Geometry


https://courses.students.ubc.ca/cs/courseschedule?pname=subjarea&tname=subj-course&dept=CPSC&course=221

https://courses.students.ubc.ca/cs/courseschedule?pname=subjarea&tname=subj-course&dept=MATH&course=200







Staff


Instructor

Enrique Rosales

Office hours:

Wednesday

4:30 – 5:30 pm


Teaching Assistant

Yibo JiaoTeaching Assistant

Tianxin Tao

Teaching Assistant

Jake Wong

Teaching Assistant

Mandy Wong

RequiredSoftware


• Geogebra

• 3ds Max

• Maxscript

• Blender

• Photoshop

• Illustrator

• Meshlab


• Javascript

• GLSL

• C++

• WebGL

• Three.js

SupportingSoftware

Communication


• Lectures on zoom TWF 3:00 to 4:00 pm (recorded)

• Labs on zoom

• Website: https://www.students.cs.ubc.ca/~cs-314/Vsep2020/

Lectures, assignments and other resources

• Piazza

• Canvas

• Textbooks (links on the website)


https://www.students.cs.ubc.ca/~cs-314/Vsep2020/

Grading


1 - Intro 5% (1 extra late day)

2 - Theory 1 4%

3 - Theory 2 4%

4 - Transformations 7% (4 bonus points)

5 - Shading 7% (4 bonus points)

6 - Theory 3 5%

7 - Raytracing 10% (8 bonus points)

8 - Theory 4 7% (4 bonus points)

midterm 1 12% (two-stage-exam TBD)

midterm 2 12% (two-stage-exam TBD)

Participation 2%

final exam 25%

3 late days for use during the term.


Expected outcome


A lot of fun learning!

SIGGRAPH Faculty Submitted Student Work


Next lecture


Topic:

Math review

We recommend:

• Check Piazza

• Check the Intro Assignment

• Check a couple of WebGl tutorials

• Play with Three.js• Optional reading: Chapters 4 and 5 from 3D math primer for graphics and game development


http://resolve.library.ubc.ca/cgi-bin/catsearch?bid=9174390

Questions?

Enrique Rosales

Thanks

Enrique Rosales

Documents

Welcome! []Intro to Computer Graphics • 2D imaging • Computer Graphics (usually 3D with a virtual camera involved) • Visual Arts (Digital Photography, Sculpture, and Sketching)