🖼️

Computer Graphics (CG)

Resources

Foundations

Computational geometry.

3D impressions

Artistic skills and product management

https://www.khanacademy.org/computing/pixar/

Fundamentals of computer graphics

Solomon, J. (2020, December 29). Introduction to Computer Graphics (Lecture 1): Introduction, applications of computer graphics. Youtube. Retrieved from https://www.youtube.com/watch?v=-LqUu61oRdk&list=PLQ3UicqQtfNuBjzJ-KEWmG1yjiRMXYKhh&ab_channel=JustinSolomon

https://www.cs.middlebury.edu/~candrews/classes/cs461/

https://www.cs.unm.edu/~angel/BOOK/INTERACTIVE_COMPUTER_GRAPHICS/SEVENTH_EDITION/

https://www.scratchapixel.com

Fundamentals of Computer Graphics, 4th Edition. ISBN 9781315360201

Interactive Computer Graphics A Top-Down Approach with WebGL Edward Angel and Dave Shreiner Seventh Edition, Addison-Wesley 2015

Acmsiggraph. "Imaging a Black Hole with The Event Horizon Telescope | SIGGRAPH Frontiers." 15 Oct. 2019, www.youtube.com/watch?v=2vUj2_jjSwk&list=PLUPhVMQuDB_aWSKj7L_-3Ot_nxBze_YMy&ab_channel=ACMSIGGRAPH.

https://www.youtube.com/c/InigoQuilez/videos

https://graphtoy.com/

CS 4600 - Fall 2020 - Introduction to Computer Graphics. (2023, January 15). Retrieved from https://graphics.cs.utah.edu/courses/cs4600/fall2020

Yuksel, C. (2021, January 30). Intro to Graphics 00 - Opening. Youtube. Retrieved from https://www.youtube.com/watch?v=vLSphLtKQ0o&list=PLplnkTzzqsZTfYh4UbhLGpI5kGd5oW_Hh&index=1&ab_channel=CemYuksel

Crane, K. (2020, September 01). Computer Graphics (CMU 15-462/662): Welcome Video. Youtube. Retrieved from https://www.youtube.com/watch?v=W6yEALqsD7k&list=PL9_jI1bdZmz2emSh0UQ5iOdT2xRHFHL7E&index=1&ab_channel=KeenanCrane

Computer Graphics : Spring 2023. (2023, January 15). Retrieved from http://15462.courses.cs.cmu.edu/spring2023

Software packages (Blender)

https://cgcookie.com/lesson/intro-to-blender-and-cg-cookie

https://www.youtube.com/watch?v=kSrqpVZ1raY&list=PLn3ukorJv4vuU3ILv3g3xnUyEGOQR-D8J&index=5&ab_channel=GrantAbbitt

https://www.youtube.com/c/GlebAlexandrov/playlists

Libraries

https://learnopengl.com

WebGL: Up and Running
. Tony Parsi. 2012. O'Reilly.

Laboratories

"Chrome Experiments - Experiments with Google." 20 Jan. 2023, experiments.withgoogle.com/collection/chrome.

https://graphics.stanford.edu/

Videogames

Videogames

"Some people think games are kid's stuff, but gamedev
is one of the few areas that uses almost every item of the standard CS
curriculum."- 
Dr. Sepideh Chakaveh

https://www.conted.ox.ac.uk/profiles/sepideh-chakaveh

Meaning

History of Computer Graphics

https://deseng.ryerson.ca/dokuwiki/mec222:brief_history_of_computer_graphics

The world of computer graphics

Research

https://www.youtube.com/watch?v=cw88Y36qgDg&ab_channel=SilviaSellán

CG industry

Actual ecosystem

GitHub Repository

https://github.com/sanchezcarlosjr/computer-graphics/

Examples

https://cg.sanchezcarlosjr.com/

How do I render my models when don’t have enough computational power?

Render farm

https://www.sheepit-renderfarm.com

How Many FPS Can the Human Eye See? and Frame rate

30-60 is an animation.

Description and ecosystem

People

Frank Thomas

Johnston

https://frankandollie.com/

Disney's Nine Old Men

Disney Legends

Computer graphics files

STL

PDF, SVG, ...

3D impression

Visual system

https://www.geogebra.org/calculator/vuvjfafb

https://www.geogebra.org/3d/nvj62eqr

Languages

Penrose: from mathematical notation to beautiful diagrams. (2023, January 01). Retrieved from https://penrose.cs.cmu.edu/siggraph20

Introduction

Math

Bitmap

Raster images

Images are presented on some raster display. So, raster images are the most common way to store and process images.

Raster means converting vector images to pixel images.

Raster displays:

https://en.wikipedia.org/wiki/Bayer_filter

Render means generating from a 3D model, 2D model, or effects to an image by a computer program. Raster displays show images as rectangular arrays of pixels. A raster image is a 2D array that stores the pixel value for each pixel.

Render programs:

Rasterization, Ray Tracing, and Ray Tracing are rendering techniques.

Rendering Equation.

Vector images vs raster images

Rendering

Perspective

Ray Tracing

In computing, Ray Tracing is a process that draws a set of objects producing an array of pixels. From a material way, rendering means converting 3D objects to 2D images into realistic images, which considers how each object contributes to each pixel. So, if you want it, you need an image-order algorithm called Ray Tracing. Reversing reality, it takes an image based on the camera geometry, known as an array of pixels, running through each pixel in the image shoots rays through the normal surface, checking every object of the scene to see if it intersects with any of them. Also, it computes the pixel color based on the results of the ray intersection. My implementation of the algorithm in pseudocode, thanks to Appel:

for each pixel on the scene based on the camera geometry do
	compute the ray direction
	find first object hit by ray and its surface normal
	compute illumination
	calculate color

https://www.desmos.com/calculator/s4zfc085d4

Notes

https://www.khanacademy.org/computing/pixar/rendering

“Ray Tracing in One Weekend.” raytracing.github.io/book/RayTracingInOneWeekend.html (accessed Feb. 21, 2022)

https://en.wikipedia.org/wiki/Netpbm#File_formats

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster

Properties of lighting & Light rays

There are properties of lighting and lights rays. So this lesson is about the spotlight, diffuse reflection, specular reflection, refraction, shadows rays, and how does work light rays with different mediums.


* Spotlight means the intensity of a lamp. When the light comes from directly a source, it's called direct illumination. Otherwise, it's called indirect illumination, that is, either refraction or reflection.

Direct illumination


* Refraction signifies the change in direction of light passing from one medium. For example, a glass with water.


* Ray tracing determines shadows rays from the object intersection to the light source.

https://smartclass4kids.com/refraction-of-light/


* The camera is a factor to determine the brightness and racy tracing -image plane-.

Rasterization and his graphic pipeline

The process of taking a primitive, generally a triangle, and figuring out which pixels it covers is called rasterization

https://www.youtube.com/watch?v=t7Ztio8cwqM

https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-837-computer-graphics-fall-2012/lecture-notes/MIT6_837F12_Lec21.pdf

Notes

https://www.scratchapixel.com/lessons/3d-basic-rendering/rasterization-practical-implementation

Transformations

Geometric transformations and projections in computer graphics are linear transformations such that they are matrices, so we will be able to operate on Linear Algebra ideas. As shown below

Ta=[100vx010vy001vz0011]T_a=\begin{bmatrix} 1 & 0 & 0 & v_x \\ 0 & 1 & 0 & v_y \\ 0 & 0 & 1 & v_z \\ 0 & 0 & 1 & 1 \\ \end{bmatrix}

is called translation.

Tap=Ta[pxpypz1]=[px+vxpy+vypz+vz1]T_ap=T_a \begin{bmatrix} p_x \\ p_y \\ p_z \\ 1 \end{bmatrix} = \begin{bmatrix} p_x+v_x \\ p_y+v_y \\ p_z+v_z \\ 1 \end{bmatrix}
Tb=[x000y0001]T_b=\begin{bmatrix} x & 0 & 0 \\ 0 & y & 0 \\ 0 & 0 & 1 \end{bmatrix}

is called scaling.

Tbp=Tb[pxpy1]=[xpxypy1]T_bp=T_b \begin{bmatrix} p_x \\ p_y \\ 1 \\ \end{bmatrix} = \begin{bmatrix} xp_x \\ yp_y \\ 1\end{bmatrix}
Tc=[cosθ−sinθ0sinθcosθ0001]T_c=\begin{bmatrix} cos \theta & -sin \theta & 0 \\ sin \theta & cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix}

is called rotating.

Tcp=Tc[pxpy1]=[pxcosθ−pxsinθpysinθ+pycosθ1]T_cp=T_c \begin{bmatrix} p_x \\ p_y \\ 1 \\ \end{bmatrix} = \begin{bmatrix} p_x cos \theta - p_x sin \theta \\ p_y sin \theta + p_y cos \theta \\ 1 \end{bmatrix}

We are ready to introduce composite transformations, i.e. multiply matrices. TaTbT_aT_b means applying translation and after scaling. How we can check TaTb≠TbTaT_aT_b \neq T_bT_a, but Ta1Ta2=Ta2Ta1T_{a1}T_{a_2} = T_{a2}T_{a_1} and Tb1Tb2=Tb2Tb1T_{b1}T_{b_2} = T_{b2}T_{b_1}.

https://gist.github.com/sanchezcarlosjr/b80754bc9122727d19d52ca0750f7d1d

How does a low-level library work?

https://github.com/nothings/single_file_libs
https://github.com/nothings/stb

Blender

https://git.blender.org/gitweb/

Storytelling

Color

Camera

Virtual cameras work similar way to real cameras simulating optics and their behavior. The camera lens is about focal length, f-stop, diameter, and their relationship is fstop=focal lengthdiameterf_{stop}=\dfrac{\text{focal length}}{diameter}. Focal length is the distance between the lens and focal point on mm, and it’s possible manipulating in-camera with Lens Curvature. Diameter measures the diameter of the aperture on mm. Focal length classifies as a natural view (~50mm), narrow view (~150mm), and wide view (~28mm).

Another hand, the Depth of field is a region where the objects in a scene are in focus. It determines choosing of a lens, aperture, and f-stop. A narrow depth of field gets by a small f-stop. A wide depth of field gets by a bigger f-stop.

Animation

The techniques used to animate objects consist of artist-directed, data-driven, and procedural methods.

Keyframing

The basic ideas of keyframing are specify important only and computer fills in the rest via interpolation/approximation.

How do you interpolate data?

Data interpolation is a method used to estimate values between two known values in a series of data. There are several methods to perform data interpolation, including:

  1. Linear Interpolation: This is the simplest method of interpolation. In this method, we assume that the rate of change of the function between the two given points is constant. We then use this rate of change to find the value at the desired point.
  1. Polynomial Interpolation: In this method, a polynomial function is fit through the known data points and the value at the desired point is estimated from this polynomial function. The order of the polynomial function is usually one less than the number of known data points.
  1. Spline Interpolation: This is a type of interpolation where we fit a special type of piecewise polynomial, called a spline, through the data points. Each polynomial in the piecewise polynomial matches with the adjacent polynomials at the known data points, which makes the function smooth at these points.
  1. Nearest Neighbor Interpolation: This is a type of interpolation where the value at a new point is set to the value of the closest known point. This method is often used in image processing.

Simulation

Leverage tools from physics + numerical methods.

Any system has a configuration q(t)q(t). It also has a velocity q˙:=ddtq\dot{q}:=\dfrac{d}{dt}q and some kind mass MM with a forces FF and some constraints g(q,q˙,t)=0g(q,\dot{q}, t)=0.

We collect all variables into a single vector of generalized coordinates:

q=(x0,x1,...,xn)q=(x_0,x_1,...,x_n)

We think of qq as a single point moving along a trajectory in RnR^n.

Velocity is the time derivative of the generalized coordinates .

Physically-based animation.

Particle system

P5JS

Subsubsection

Parallax effect

https://www.youtube.com/watch?v=z9tBce8eFqE

https://en.wikipedia.org/wiki/Parallax_scrolling

https://en.wikipedia.org/wiki/Parallax

AABB Collision detection

Alix-aligned bounding boxes

NO rotation.

Detection

Kinematics

https://www.geogebra.org/calculator/rramnueg

Exercises and Projects

Summary

Key decisions

FAQ

Reference Notes

🍎Classic mechanics

https://www.youtube.com/watch?v=XVTw68iHef0&list=PL9_jI1bdZmz2emSh0UQ5iOdT2xRHFHL7E&index=22

Reeves, William (1983). "Particle Systems—A Technique for Modeling a Class of Fuzzy Objects" (PDF). ACM Transactions on Graphics. 2 (2): 91–108. CiteSeerX 10.1.1.517.4835. doi:10.1145/357318.357320. S2CID 181508. Retrieved 2018-06-13.

Bouncing Ball Equation

Raster images

Ray tracing

Linear Algebra

Viewing

Images

What is an image?

A pixel is not a little square! Alvy Ray Smith

CppCon. (2023, January 13). What Is an Image? - Cpp Computer Graphics Tutorial, (GPU, GUI, 2D Graphics and Pixels Explained). Youtube. Retrieved from https://www.youtube.com/watch?v=zi57OkPwzbk&ab_channel=CppCon

Image formation

The elements of image formation are Objects, Viewers —cameras, and Light sources which interdepend on each other. Light is part of the electromagnetic spectrum. Ray Tracing is an algorithm that simulates the interaction between lights and objects —how much complex interaction do we want? But, Ray tracing is not well suited to real-time applications.

Color Image has three attributes hue —color identifier, saturation, and lightness. Three-Color Theory. Additive color forms a color by adding Red (R), Green (G), and Blue (B).

Global vs local lighting.

Human visual system

The human visual system has two types of sensors: Rods and Cones. We have three primary colors.

Pinhole camera

Synthetic Camera Model

We separate objects, viewers, and light sources. Two-dimensional graphics is a special case of three-dimensional graphics.

Image-based rendering

https://www.inf.ufrgs.br/~oliveira/pubs_files/RITA_IBMR.pdf

https://graphics.stanford.edu/courses/cs248-05/IBR/IBR.pdf

https://pages.cs.wisc.edu/~dyer/cs534/papers/ibr-survey.pdf

Animation

Twelve basic principles of animation

Disney Animation: The Illusion of Life

Software architecture

Our concern is building programs device-independent.

Software Process

We program WebGL programs as

Describe page
Define shaders
Compute
Send data to GPU
Render data

You can do operations in CPU or GPU, in software, we say application code or GLSL code —shaders. If you program with application code your program is slower but easy to learn if you program with GLSL code your program is faster but you must start thinking differently.

Hardware

GPU

Graphical models

Camera specification

Lights and Materials

We have different types of lights, Point sources , distributed sources

Near and far sources

Color properties

Material properties are absorption and scattering.

The Graphics Pipeline

Vertices.

put geometric data in an array accepted by GPU
send array to GPU
tell GPU as render (Triangles, Points, ...)

Vertex processor. Object coordinates, Camera coordinates, Screen coordinates. When you program graphics you write this by the Vertex shader. The vertex shader receives a vertex and its attributes.

Primitive assembler. Line segments, Polygons, Curves, and Segmentation.

Clipper. Ignore not visible objects.

Rasterizer. Produce fragments (i.e. potential pixels) into a frame buffer.

Fragment processor. When you program graphics you write this by the fragment shader. The fragment shader receives a vertex and its attributes.

Pixels.

Date:

Topic: Rasterization

Recall

How does a developer write his own animation?

The developer writes vertices and modes -geometric objects, and the computer interpolates.

Curves? Chain of line segments.

Polygons? Break them up into triangles.

Notes

  • INPUT: Geometric primitive by clipper.
  1. It enumerates the pixels.
  1. It interpolates values.
  • OUTPUT: A set of fragments -pixels, with their information, including color, location, and depth- for each primitive in the frame buffer.
  • A raster is a matrix of pixels.
  • Geometric primitive to pixels is called rasterization.
  • Triangles are the most often used primitive.
  • A fragment shader is a shader about fragments.
  • A vertex shader is a shader about vertices.
  • A shader is a program that runs over GPU.
📌
SUMMARY: The computer draws objects converting objects to pixels, so the central operation is rasterization—NO printer algorithm.

Date:

Topic: Clipping

https://www.tutorialandexample.com/clipping-in-computer-graphics

Recall

Square is the computer screen.

Notes

  • It’s implemented to improve rendering performance.
  • ...
📌
SUMMARY:

Clipping is a process to remove o disabling objects within a defined region of interest, generally outside the computer screen or viewing pane.

References

Worked examples

Pipeline

Textures

Data Structures

Curves

Animation

Computer Graphics in Games

Visual perception

Imaging systems, visual science, and computer vision

oPhysics
Description This is a simulation demonstrating the optics of the human eye. It also shows how various lenses can be used to correct for faulty vision. Be aware that it is a simplified version of what actually happens. In the simulation, there is no bending when light moves from the air into the eye (when most of the actual bending happens).
https://ophysics.com/l16.html

https://zillalib.github.io/

WebGL

Project

https://graph-theory.sanchezcarlosjr.com/

Shaders

https://neort.io/popular

https://twigl.app/

https://www.vertexshaderart.com/

https://www.shadertoy.com/

Blender

Projects

https://www.youtube.com/watch?v=8WpAkU5W9Os&ab_channel=CarlosSanchezExplica

https://www.youtube.com/watch?v=tZfIPQg02aU

https://www.youtube.com/watch?v=UwILfseD41M

https://www.youtube.com/watch?v=8NkgmvGzU7I

Videogames

🎡Game development

References

Programming Games Wiki. (2022, October 26). Retrieved from https://programminggames.org/Main_Page

Millar, H. (2006). Videogames: content and responsibility. SIGGRAPH Comput. Graph., 40(3), 7-es. doi: 10.1145/1186743.1186753

Computer graphics. Geometrical computer problems.