📖 Reading Reactions: Principles of Computer Graphics
This document is to record my reading reactions after reading the book Fundamentals of Computer Graphics on the course CSC 570: Principles of Computer Graphics I took in my first semester. I benefited a lot from this course and also programmed some interesting projects. If you find any errors, please feel free to discuss and correct them: biqingsue@[google email].com. 😊 As an introductory Computer Graphics scholar, I would recommend the following resources.
- Fundamentals of Computer Graphics Marshner & Shirley. (2016)
- Interactive 3D Graphics Udacity youtube
09/01/2022 - History
Four decades of computer graphics
As a beginner in this discipline, reading this paper presented me with the challenge of understanding the terminology, so I also spent some extra time searching for it to find a better understanding. Prior to reading it, I simply assumed that computer graphics is primarily driven by the development of rendering techniques and mathematical algorithms. After reading it, I realized that computing power is also an important factor in the widespread and gradual application of computer graphics in many fields. What impresses me most is that computer graphics is still going strong after 40 years of development and various obstacles like cost and memory, and I wonder what the future focus of computer graphics practitioners would be.
09/01/2022 - Ray Casting
Fundamentals of Computer Graphics - Chapter 4 Ray tracing
Chapter 4 introduces the geometric method to calculate ray intersection with sth, it reminds me of a scene when playing a game: the screen shows a 3D cube, when I click on the screen with the mouse, how does the computer determine which side of the cube I am clicking on? I try to substitute the method in the Chapter 4, maybe we can convert the mouse to a ray and then convert the cube to the same spatial coordinate system with it and do the intersection detection. However, the projection on the screen is a 2D coordinate system, how to convert mouse clicked point back to 3D space? Ray tracing seems to be an ideal way to determine it.
09/01/2022 - Viewing
Fundamentals of Computer Graphics - Chapter 7 Viewing
In Chapter 7, I learned how to use matrix transformations to represent the positions of points in different coordinate systems during the rasterization process to complete the 3D to 2D conversion. This process gives me a more concrete understanding of the imaging principles of pinhole cameras, and I also have my own understanding, 1. modeling transformations : I interpret this step as adjusting the objects in the game scene to where they should be. 2. camera transformations: determine the position of objects relative to game perspective. 3. projection transformations: project objects from 3D to 2D according to whether it is a parallel or perspective projection. 4. viewport transformations: Map the 2D plane within screen resolution range.
09/10/2022 - Local Illumination
Fundamentals of Computer Graphics - Chapter 10 Surface shading
In this chapter, I learned about the application of three shading methods. After reading I think the essential difference between these three shading methods is the frequency of sampling, the higher the frequency the more it can reflect the real situation. Theoretically, the frequency of Flat Shading can be higher than Phong Shading as long as the sampled surface is smaller than the pixel.
09/17/2022 - Ray Tracing
An improved illumination model for shaded display
I read this paper in which Turner Whitted proposes a recursive ray-tracing algorithm, and I think the most important change that makes Ray Casting better in this algorithm is to draw and analyze more rays. Unlike rasterization I learned before, this algorithm simulates the real behavior of real rays as it bounces around objects, but as we know, in the real world rays come not only from light sources, but also indirect lighting in most cases. In addition, when I saw that the generation times for drawing the scenes in the paper are so long, it made me very curious about what improvements or optimizations were made to achieve the current rendering speed.
09/20/2022 - WebGL
An introduction to WebGL - Chapter 1 in WebGL: up and running
I read the Chapter 1 this week. In addition to the explanation of some basic concepts, it also introduces the 8 steps of rendering WebGL into a page. For me, there are two points that are not very easy to understand, one is the use of ArrayBuffer, and the other is Shader written in advanced C-like language, but I found that if I use Three.js’ Shader API, I can write it as JS instead. WebGL is an implementation subset of OpenGL. I believe that when using WebGL to render 3D graphics, the overall code size should be much less, and the semantics will be clearer.
09/20/2022 - Modeling
Fundamentals of Computer Graphics - Chapter 12.1 Data Structures for Graphics
I read Chapter 12.1-12.1.2, which is about the underlying part when implementing the graphics code. As we all know, the geometric transformation, detection, animation and rendering shading of 3D Graphics are all based on triangle meshes, so the basic principles and optimization strategies of triangle meshes are very important. The reason for having various data structures for triangle meshes is that we need more than just the basics of vertex position and point-face relationship when dealing with triangle meshes, we also need to obtain properties such as point-edge adjacency, connectivity, etc. In this case, if we just use the most basic data structures, it will make the operation extremely inefficient. The concept of Indexed Mesh Storage is interesting to me, it takes advantage of the shared nature of vertices, and I think it can be interpreted as a graph or a complex chain table.
10/01/2022 - Transformation
Fundamentals of Computer Graphics - Chapter 6.1-6.3 Transformation Matrices
I read Chapter 6.1-6.3, which deepened my understanding of the transformation nature of linear algebra in Computer Graphics, and also let me understand the practicability of linear algebra in complex transformations. The Chapter 6.1 2D Linear Transformations remind me of one of the CSS function I used before — matrix() which can be used with CSS transforms to style elements in a 2D space, and the principle behind it is matrix multiplication. One of the more difficult to understand for me is the content in the Decomposition of Transformations, so it led me to an extensive search to further understand.
10/07/2022 - Projection
Allegory, Realism, and Vermeer’s Use of the Camera Obscuras
The author reconstructed Vermeer’s studio using the camera obscura, proving that the camera obscura was used to project accurate images for painters to outline. In addition, I also learned a little bit about the book Vermeer’s Camera: Uncovering the Truth behind the Masterpieces written by the same author. It reminds me of the pinhole camera exercise I did in the first week, but I didn’t connect it with painting because the imaging results I saw at that time were not particularly clear, and the colors were not particularly restored. I was shocked that Vermeer invented this kind of “pinhole imaging” method that works on the same principle as camera imaging, and I just feel like I was an “artist” myself when programming 3D scenes.
10/13/2022 - Rasterization
Fundamentals of Computer Graphics - Chapter 8.1 The graphics pipeline
I learned the Chapter 8.1 which introduces rasterization and two functions of clipping, pseudocodes in the chapter are really helpful for me. In chapter 4 I learned that ray tracing is a kind of image-order rendering and rasterization in this chapter is a kind of object-order rendering. What I found interesting was that I did have some questions that came up during the reading 8.1.2 Triangle Rasterization, and these questions in detail happened to be memtioned one by one in this chapter, such as the problem when the center of gravity of a pixel falls exactly on the common side of two triangles.
10/13/2022 - Pipeline
Fundamentals of Computer Graphics - Chapter 8.2-8.3 The graphics pipeline
In Chapter 8.2-8.3, I learned about geometry operations before rasterization and pixel operations after rasterization and their purpose based on examples. Personal understanding， briefly, what the vertex processing stage does is to add necessary information to the view based on the conversion, and finally the fragment blending stage combines all the geometric primitive to calculate the final color. Rasterization produces jagged lines and triangular edges as we all know, so the method of antialiasing also deserves attention, SSAA is the simplest antialiasing algorithm, but the performance overhead is also huge, I would like to know which methods are currently the most widely used.
10/18/2022 - Shading
Illumination for computer generated pictures - Bui Tuong Phong 1975
I read this paper where the author effectively simulated diffuse reflections and highlights by a purely geometric approach and proposed Phong reflection model for computing highlights which is still active in the field of real-time rendering nowadays. This model divides the lighting into 3 parts, ambient, diffuse, and specular reflections, however, it required some overhead involved in calculating the light reflection vector, leading to the development of the Blinn-Phong model that commonly we used today.
10/18/2022 - Texture
Fundamentals of Computer Graphics - Chapter 11.1-11.4 Texture mapping
In this Chapter, I read about the traditional texture mapping in graphics. I have to say that the examples given in the text are very vivid and helpful for my understanding. Contrary to what I thought before reading, texture mapping doesn’t change the shape of the surface, it doesn’t add or subtract polygons actually. I learned that the basic idea to make the surface textured in this chapter is to make the texture into a texture map/image, then find the corresponding color from the image and apply it to the vertices of the surface when shading.
10/28/2022 - Hidden Surfaces
Haines, E. Videos 38-44 and 109-110 of Udacity’s Interactive 3D Graphics course
I learned abut z-buffer and z-fighting in this week’s readings. We can know that when the objects are occluded from each other in depth, they cannot be sorted in advance using the painter’s algorithm. Unlike the painter’s algorithm, the z-buffer does not need to sort the objects from far to near, but for each pixel, so only linear complexity is required. And z-fighting is also interesting and easy to understand because of the accuracy error in the computation.
11/04/2022 - Images & displays
Fundamentals of Computer Graphics - Chapter 3.1-3.2 Raster images & Chapter 17.4 Graphics hardware buffers
After reading Chapter 3.1-3.2, I gained a lot of new insights especially nonlinearities of standard display, such as the fact that monitors display the input pixel values non-linearly, and I learned that human perception of color is also non-linear. As a result, the meaning of Gamma is the efficient use of color storage to achieve the effect that the input equals the output. In Chapter 17.4 I learned some basic concepts of Graphics Hardware Programming.
11/10/2022 - Aliasing
Fundamentals of Computer Graphics - Chapter 9 Signal processing
I read Chapter 9 this week, which introduces the principles behind the algorithm that improves image quality, and personally I think this chapter is not easy to understand. I learned that in simple terms, aliasing occurs because it is considered as a low frequency signal due to undersampling, jaggies and moire pattern are two common artifacts in images. This chapter also introduces some important applications of convolution in image processing, and I think is the most difficult part, which led me to an extensive search to further understand.
11/19/2022 - Structures
Fundamentals of Computer Graphics - Chapter 12.1.3-12.2 Data Structures for Graphics
I found that Scene Graphs are an interesting data structure and is not difficult to understand for me. Store by tree structure, use the root node of the scene as the root of the tree, and then continuously expand to the deeper layers of the tree, where each node keeps the information of attributes and its transformation matrix. When render the scene, use the composite matrix in the stack to draw the objects by DFS. In summary, its essence is the use of multiway tree and stack.
11/26/2022 - Curves
Fundamentals of Computer Graphics - Chapter 15 Curves
I read the Chapter 15 this week which discusses three representations of curves. I’m really interested in the Bézier Curves part because it reminds me of the vector editor I wrote before which allows designers to create and modify vector curves, at that time I encountered some interesting questions while programming, such as how the adjacent curve points change when dragging edge, how to compute the nearest point on the curve when mouse hover. And I think that Figma’s Vector Networks that implemented the Bézier Curves are super cool. Anyway, here is a primer on Bézier Curves I would recommend: https://pomax.github.io/bezierinfo/index.html.
11/26/2022 - Color
Fundamentals of Computer Graphics - Chapter 19 Color
The color format I use most often is RGB, the chapter 19 refreshed my perception of color that the RGB color space can only represent a small part of the XYZ color space. Storing linear RGB color values in an 8-bit per image format results in visually low accuracy due to the non-linearity of human color perception, and to improve the visual quality, sRGB is defined with a gamma correction that gives a non-linear distribution of values.
11/29/2022 - Perception
Videos 12 to 17 of Udacity’s Interactive 3D Graphics course
I watched the videos 12 to 17 learning about perception and the difference between camera and human eyes. I found the checker shadow illusion in the video 15 is interesting which shows that the subjective brightness perceived from an object is influenced by the relative relationship between the surrounding environment, it is a kind of compensatory of the human perception, where the visual system makes correction errors when counteracts the variations of light and dark in different backgrounds.