Hamza Qattan ⌨️☕/
📒
Study Notes/
Computer Graphics
Search

Computer Graphics

 
Unit 1: Introduction to Graphics
Unit 2: Principles of Graphics Modeling
Unit 3: Color and Blending
Unit 4: Shading
Unit 5: Graphics Pipeline
Unit 6: Animation
Unit 7: Splines and Curves
Unit 8
 
 
 
 
Three.js (1)

Topics

Unit 3

Color Principles
Specifying colors
Specify colors in terms of RGB and hexadecimal values
Luminance
Calculate luminance using the luminance formula and brightness levels for RGB colors
Color Depth
Color blending with the alpha channel
Transparency
Discuss the Alpha channel and how it is used both in color blending and transparency
Color in OpenGL and WebGL
Implement transparency and color blending in a graphic model and graphics API
Mathematics for Modeling
Coordinate systems
Points, lines and line segments
Reflection vectors
Transformations
Polar, cylindrical, and spherical coordinates
Unitized mathematical techniques used in computer graphics including cylindrical and spherical geometry, vector length, reflection vectors, and dot and cross product of vectors.

Resources

Fundamental Math for Game Developers
The range of mathematics we can use as programmers is quite broad; no single course could cover it. This article is a high-level overview of some of the most important math topics we use as gamedevs. We'll discuss math education, review useful math topics in CS, and present methods we can use to improve the way we learn math.
Fundamental Math for Game Developers
https://pikuma.com/blog/math-for-game-developers
Fundamental Math for Game Developers

University of Utah

Clear and comprehensive w/o too much mathematical details
Introduction to Computer Graphics
Recordings of live online lectures for the Introduction to Computer Graphics course in Fall 2020, School of Computing, University of Utah.
Introduction to Computer Graphics
https://www.youtube.com/playlist?list=PLplnkTzzqsZTfYh4UbhLGpI5kGd5oW_Hh
Introduction to Computer Graphics
Interactive Computer Graphics
Recordings of live online lectures for the Interactive Computer Graphics course in Spring 2021, School of Computing, University of Utah.
Interactive Computer Graphics
https://www.youtube.com/playlist?list=PLplnkTzzqsZS3R5DjmCQsqupu43oS9CFN
Interactive Computer Graphics
CS 4600 - Fall 2022 - Introduction to Computer Graphics
Overview This course teaches the fundamental computational techniques in computer graphics. It is a project-based course in which students learn about and implement various methods in modeling, animation, and rendering techniques. The course covers a range of topics in computer graphics, instead of providing a deep and highly detailed analysis of a particular topic.
CS 4600 - Fall 2022 - Introduction to Computer Graphics
https://graphics.cs.utah.edu/courses/cs4600/fall2022/

Universities

Computer Graphics: Computer Graphics
Computer Graphics is a field used extensively in games, movies and applications. Even this text right here is drawn via an computer graphics algorithm executed in the GPU and sent to your screen. All the computer games you play and movies you watch nowadays use a lot of computer graphics.
Computer Graphics: Computer Graphics
https://cglearn.codelight.eu/pub/computer-graphics/computer-graphics
Computer Graphics: Computer Graphics
CS307: Introduction to Computer Graphics
Content will be updated throughout the semester, so please check back often! All assignments are due at 5:00 pm on Friday, unless otherwise noted. Assignment handouts are linked from their due date, and will be posted at least one week before they are due.
CS307: Introduction to Computer Graphics
https://cs.wellesley.edu/~cs307/schedule.html
www.cs.princeton.edu
https://www.cs.princeton.edu/courses/archive/fall00/cs426/
Computer Graphics University of British Columbia (UBC) 2020
Share your videos with friends, family, and the world
Computer Graphics University of British Columbia (UBC) 2020
https://www.youtube.com/playlist?list=PLWwvLH0l25RwwBUPgvlPJQZAY5KAnJjPZ
Computer Graphics University of British Columbia (UBC) 2020
Computer Graphics, Fall 2009
Computer Graphics (ECS175) teaches the basic principles of 3-dimensional computer graphics. The focus will be the elementary mathematics techniques for posit...
Computer Graphics, Fall 2009
https://www.youtube.com/playlist?list=PL_w_qWAQZtAZhtzPI5pkAtcUVgmzdAP8g
Computer Graphics, Fall 2009
UCF Computer Vision Video Lectures 2012
Share your videos with friends, family, and the world
UCF Computer Vision Video Lectures 2012
https://www.youtube.com/playlist?list=PLd3hlSJsX_Imk_BPmB_H3AQjFKZS9XgZm
UCF Computer Vision Video Lectures 2012
Computer Graphics - University of Freiburg
Advanced Computer Graphics Lecture: Monday 10-12, 052 02 017. Tutorial: Tuesday 14-16, 052 02 017. Simulation in Computer Graphics Lecture: Monday 16-18, 052 02 017. Tutorial: Tuesday 12-14, 052 02 017. Advanced Topics in Rendering Seminar: Wednesday 10-12, 052 02 017. Advanced Topics in Animation Seminar: Wednesday 12-14, 052 02 017.
https://cg.informatik.uni-freiburg.de/teaching.htm
CGFreiburgTeaching
Share your videos with friends, family, and the world
CGFreiburgTeaching
https://www.youtube.com/channel/UC61bSY1sj4zTPa38dpqgRhw/videos
CGFreiburgTeaching

MIT

Pure theoretical
6.837: Introduction to Computer Graphics (fall 2020)
Share your videos with friends, family, and the world
6.837: Introduction to Computer Graphics (fall 2020)
https://www.youtube.com/playlist?list=PLQ3UicqQtfNuBjzJ-KEWmG1yjiRMXYKhh
6.837: Introduction to Computer Graphics (fall 2020)
6.837 Computer Graphics
Share your videos with friends, family, and the world
6.837 Computer Graphics
https://www.youtube.com/playlist?list=PLiqmqQ7XKuf4RSEl-ZQsEx4epyqcomx7S
6.837 Computer Graphics

Ray Tracing by NVIDIA

Ray Tracing Essentials
Ray Tracing Essentials is a seven-part video series hosted by the editor of Ray Tracing Gems, NVIDIA's Eric Haines. The aim of this program is to make develo...
Ray Tracing Essentials
https://www.youtube.com/playlist?list=PL5B692fm6--sgm8Uiava0IIvUojjFOCSR
Ray Tracing Essentials
 
Ray Tracing Gems Series
Ray Tracing Gems Series
http://www.realtimerendering.com/raytracinggems/
Ray Tracing Gems Series
 
 
www.youtube.com
www.youtube.com
https://www.youtube.com/watch?v=gsZiJeaMO48

General Courses

How Ray Tracing (Modern CGI) Works And How To Do It 600x Faster
In which we explore ray tracing, the reason modern CGI can look so convincing, and ReSTIR, a recent technique that allows images (and particularly animations) to be rendered hundreds of times faster.
How Ray Tracing (Modern CGI) Works And How To Do It 600x Faster
https://www.youtube.com/watch?v=gsZiJeaMO48
How Ray Tracing (Modern CGI) Works And How To Do It 600x Faster
Scratchapixel
News (August, 31): We are working on Scratchapixel 3.0 at the moment (current version of 2). The idea is to make the project open source by storing the content of the website on GitHub as Markdown files.
Scratchapixel
https://www.scratchapixel.com/index.php?redirect
Computer Graphics
The Math and Concepts behind Computer Graphics.
Computer Graphics
https://www.youtube.com/playlist?list=PL2fqtyC9Wl02ycOM1oXzAcTByTMepnhj_
Computer Graphics
GetIntoGameDev
Hi, my name's Andrew and I'm learning to make games. Join me as I learn, fail, and fail to learn.
GetIntoGameDev
https://www.youtube.com/c/GetIntoGameDev/playlists
GetIntoGameDev
www.youtube.com
https://www.youtube.com/c/Acegikmo
Ask HN: Recommend me a Blender course | Hacker News
Finally, I want to dedicate some time to learn Blender. I'm primarily interested in modeling but will need an intro to Blender concepts, philosophy, and UI idiosyncrasies. I have some professional experience in CAD and Finite Element Analysis modeling, so I'm not a complete noob in that respect.
https://news.ycombinator.com/item?id=33273022

OpenGL & WebGL

OpenGL Course - Create 3D and 2D Graphics With C++
Learn how to use OpenGL to create 2D and 3D vector graphics in this course. Course by Victor Gordan. Check out his channel: https://www.youtube.com/channel/UC8WizezjQVClpWfdKMwtcmw 💻 Code: https://github.com/VictorGordan/opengl-tutorials See top comment for more resources.
OpenGL Course - Create 3D and 2D Graphics With C++
https://www.youtube.com/watch?v=45MIykWJ-C4
OpenGL Course - Create 3D and 2D Graphics With C++
OpenGL Tutorials
OpenGL tutorials that take you from a complete noob in Computer Graphics to an experienced programmer! :)
OpenGL Tutorials
https://www.youtube.com/playlist?list=PLPaoO-vpZnumdcb4tZc4x5Q-v7CkrQ6M-
OpenGL Tutorials
OpenGL
Share your videos with friends, family, and the world
OpenGL
https://www.youtube.com/playlist?list=PLlrATfBNZ98foTJPJ_Ev03o2oq3-GGOS2
OpenGL
Learn OpenGL, extensive tutorial resource for learning Modern OpenGL
Welcome to the online book for learning OpenGL! Whether you are trying to learn OpenGL for academic purposes, to pursue a career or simply looking for a hobby, this book will teach you the basics, the intermediate, and all the advanced knowledge using modern (core-profile) OpenGL.
Learn OpenGL, extensive tutorial resource for learning Modern OpenGL
https://learnopengl.com/
Learn OpenGL, extensive tutorial resource for learning Modern OpenGL
OpenGL
This page contains fundamental OpenGL tutorials and notes. All example programs are written by C++ with Code::Blocks IDE, as well as makefiles for Linux and Mac. I mostly use GLUT/FreeGLUT, and each example project includes FreeGLUT header and library files in it for MinGW environment.
OpenGL
http://www.songho.ca/opengl/index.html
OpenGL
openglexamples
Here are some OpenGL example programs, presented in an order in which new topics are added in each successive example. Many of these are modifications of programs in the OpenGL Red Book. Introductory program; just a static picture of a colored triangle. Shows how to use GLUT.
https://cs.lmu.edu/~ray/notes/openglexamples/

WebGL

WebGL Fundamentals
WebGL from the ground up. No magic. These are a set of articles that teach WebGL from basic principles. They are NOT old rehashed out of date OpenGL articles like many others on the net. They are entirely new, discarding the old out of date ideas and bringing you to a full understanding of what WebGL really is and how it really works.
WebGL Fundamentals
https://webglfundamentals.org/
WebGL Fundamentals
WebGL2 Fundamentals
WebGL2 from the ground up. No magic. These are a set of articles that teach WebGL2 from basic principles. They are NOT old rehashed out of date OpenGL articles like many others on the net. They are entirely new, discarding the old out of date ideas and bringing you to a full understanding of what WebGL really is and how it really works.
WebGL2 Fundamentals
https://webgl2fundamentals.org/
WebGL2 Fundamentals
Learn WebGL
Share your videos with friends, family, and the world
Learn WebGL
https://www.youtube.com/playlist?list=PL2935W76vRNHFpPUuqmLoGCzwx_8eq5yK
Learn WebGL
 
 

Three.js

Three.js Tutorials
Share your videos with friends, family, and the world
Three.js Tutorials
https://www.youtube.com/playlist?list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho
Three.js Tutorials
Getting Started With Your First three.js Project: Part One - The Setup
three.js is a powerful JavaScript library and API allowing developers to create incredible 2D and 3D graphics that are animated in the browser without plugins (using WebGL). To check out some of the amazing projects created by talented developers, you can check them out at the three.js homepage, as well as many advanced guides on getting the most out of the library.
https://medium.com/nerd-for-tech/getting-started-with-your-first-three-js-project-part-one-the-setup-17f18660aecc
Getting Started With Your First three.js Project: Part One - The Setup
Three.js Tutorial Crash Course - 2021
Add star fields, click-activated camera movements, and seamless transitions with the full course at https://chriscourses.com/threejs-bundle Practical three.js development is rarely taught these days, but let's see if we can fix that-this course aims to demystify the process of developing an interactive 3D environment in the browser.
Three.js Tutorial Crash Course - 2021
https://www.youtube.com/watch?v=YK1Sw_hnm58
Three.js Tutorial Crash Course - 2021
Intermediate Three.js Tutorial - Create a Globe with Custom Shaders
Intermediate Three.js Tutorial - Create a Globe with Custom Shaders
https://www.youtube.com/watch?v=vM8M4QloVL0
Intermediate Three.js Tutorial - Create a Globe with Custom Shaders
Getting Started with THREE.JS in 2021!
https://bit.ly/3vveoV6 - Become a frontend developer (50% off limited time!) -- Want to learn UI/UX? https://designcourse.com​ -- Check out Bruno's Three.js Course: https://bit.ly/3qU6elv (30% off for the first 15 students, using my code! Note, this is not a paid sponsorship.) -- Today, marks day #1 that we're going to begin learning Three.js together.
Getting Started with THREE.JS in 2021!
https://www.youtube.com/watch?v=pUgWfqWZWmM
Getting Started with THREE.JS in 2021!
Three.js coding tutorial: how to enhance a website by adding a 3D element? ft Bruno Simon | Prismic
In this tutorial, @Bruno Simon and Alex explains us how to use three.js and how to enhance a website by adding a 3D element to a header. Starting from a standard header section, they swap out the standard image for a cool shape with a matcap.
Three.js coding tutorial: how to enhance a website by adding a 3D element? ft Bruno Simon | Prismic
https://www.youtube.com/watch?v=tVr89249gwM
Three.js coding tutorial: how to enhance a website by adding a 3D element? ft Bruno Simon | Prismic
Bruno Simon
Share your videos with friends, family, and the world
Bruno Simon
https://www.youtube.com/c/BrunoSimon/playlists
Bruno Simon
Three.js Journey - Learn WebGL with Three.js
Joining Three.js Journey will give you lifetime access to a complete and easy to access course with 39 lessons. Want to see what's included? Check out the video down below: Each lesson begins with a starter folder to download. Then, simply follow the tutorial!
Three.js Journey - Learn WebGL with Three.js
https://threejs-journey.com/
Three.js Journey - Learn WebGL with Three.js
hacksnation.com
https://hacksnation.com/d/895-bruno-simon-the-ultimate-threejs-course-updated-11-2021/2
 

Vulkan

computergraphics.stackexchange.com
https://computergraphics.stackexchange.com/questions/3575/should-new-graphics-programmers-be-learning-vulkan-instead-of-opengl
Introduction
This tutorial will teach you the basics of using the Vulkan graphics and compute API. Vulkan is a new API by the Khronos group (known for OpenGL) that provides a much better abstraction of modern graphics cards.
Introduction
https://vulkan-tutorial.com/
The new Vulkan Coordinate System
Vulkan introduces a number of interesting changes over OpenGL with some of the key performance and flexibility changes being mentioned often on the internet. A more subtle yet equally important change to be understood is the that of the coordinate system. The first change of note is that the y axis now points down the screen.
https://matthewwellings.com/blog/the-new-vulkan-coordinate-system/
The new Vulkan Coordinate System
Vulkan Tutorial (Rust)
This tutorial is an adaptation of https://vulkan-tutorial.com to use Rust instead of C++. The majority of the credit for this tutorial should go the author of the original tutorial ( Alexander Overvoorde) and the other contributors. This tutorial also includes several additional chapters that are original creations of the author of this adapted tutorial (starting with the Push Constants chapter).
Vulkan Tutorial (Rust)
https://kylemayes.github.io/vulkanalia/

WebGPU

WebGPU for Beginners
Share your videos with friends, family, and the world
WebGPU for Beginners
https://www.youtube.com/playlist?list=PLn3eTxaOtL2Ns3wkxdyS3CiqkJuwQdZzn
WebGPU for Beginners
WebGPU Tutorial - Advanced Graphics on the Web Course
In this course, you will learn the basics of WebGPU. WebGPU is the next-generation graphics API and future Web standard for graphics and compute. This two-hour video contains 10 WebGPU projects. We create each project based on the previous one from scratch and demonstrate how to add 3D graphics to your web applications.
WebGPU Tutorial - Advanced Graphics on the Web Course
https://www.youtube.com/watch?v=KTFFdZSDiTU
WebGPU Tutorial - Advanced Graphics on the Web Course

Gaming

grantshandy.github.io
https://grantshandy.github.io/posts/raycasting/