忽然就想用英语来写写技术系列之二 – 浅谈计算机图形学。接着上一篇我之前写的《Web 图形学从入门到 “放弃” 指南》的文章，我再来畅谈一下计算机图形学的皮毛。
In last few years, I have been learning computer graphics from 2d Canvas, 2D Svg, Webgl, Three.js, Webgpu and Glsl
shader programs.
As the saying goes, “There are three romantic areas in programming: 1. Operating System 2. Compiler 3. Computer
Graphics”. Aside from the well-known Operating System and Compiler, what makes computer graphics so special? In my opinion, computer graphics is the most beautiful part of programming. It is the part that makes computers more popular, convenient, useful, and interesting to our normal life. Unimaginably, What if we can only use our computers, phones, or pads in a command-line environment? What if there is no games available? What if there is no animated cartoons or 3D Animation Films?
Learning 2D Computer Graphics Through A 2D Animated Cartoon
If you ever watch some classic Japanese 2D cartoons or play some classic 2D animated games, you will find that the
scenes are typically very simple, and one single scene is made up of several 2D elements like some pre-drawn characters, backgrounds, and so on, and most of them are vector graphics(scalable, ease and linear, etc, read more about Vector Graphics). Animation is a very common feature in 2D cartoons. Firstly, the animation is usually done by changing the 2D position(using x and y), scale(using x and y), and rotation(using clockwise rotation or counterclockwise rotation) of the characters or parts of the characters, backgrounds, and so on. Secondly, animation also can be done by changing the color of the elements. Thirdly, animation can be done by changing the opacity of the elements. Fourthly, animation can be done by fading the elements. Fifthly, animation can be done by changing the shape of the elements. Last but not least, animation can be done by switching a series of continuous pictures(named Frame Animation) as time gose by, only in this way, we can finish some faded 3D animations or tricky animations.
As technology has advanced, so has the ability to draw 2d graphics. People have started to use 2D Rendering Engine to draw and render 2D graphics more easily. The 2D rendering engine makes it easy to implement all kinds of 2D animations mentioned above. However, what ever happens does not changing the fact that 2D graphics are looking like 2d and unrealistic.
Learning Computer Graphics Through Our Real World
In a 3D animation film or a 3D video game, the 3D rendering engine is the core part of software in a computer that
is used to draw 3D graphics. Imagine that your eyes are looking at the screen. What makes you feel like you are
looking at the 3D things but not the 2D things? It’s the magic of 3D graphics.
So, what’s the magic of 3D graphics? Actually, it’s not the magic, but the ordinary life. In the ordinary life, what
makes our world look so real, they are colors, lights, shadows, all kinds of materials(like wood, metal, glass,
etc), and so on.
When it comes to colors in our world, we can see the colors in the 3D world are quite different from the colors in
the 2D world. Commonly, the colors of things mostly don’t look the same or purely the same, but mostly the same in
the 2D scene. Why? Assuming that there’s a scene, inside the scene, there are a white light bulb, a grey floor, a
red ball on the floor, a cup of water, and six white walls forming a cube room. What happens? The light bulb casts
the white lights on the floor, the ball, the cup of water, and the walls. And then, you know, it’s not the end.
Something happens infinitely. Ray is marching over the entire room lighting up the whole room(named Global
Illumination and is short for GI). During the ray’s marching periodically, it’s like the ball is bouncing on the
room, that’s what’s called reflection. Meanwhile, when ray reaches that cup of water, some light is reflected,
however, some light is not reflected but refracted and marching on the water. And then, the light is
reflected or refracted inside the water time and time again. When ray hits the white walls, some light is reflected,
and some light is received by the walls, that means the energy is absorbed by the walls. Why we can see the color of
walls is white, but the color of the ball is red? Generally speaking, white light is a combination of violet, green, indigo, orange, blue, yellow, and red lights. When the white light’s marching and is
almost fully reflected by the white walls coming to our eyes, but when the white light hit the red ball, only the
red light is reflected and reaches our eyes, others are absorbed by the red ball. What’s more, if you checkout the
red ball, you will find that colors in the ball are not the same. Some areas of the ball are darker but some areas
are lighter. As a common sense, we all know that when the ray direction is parallel to the surface, it won’t
reflect, but when the ray direction is perpendicular to the surface, there will be strongest reflection, and we will
see the lightest red color in the ball. Meanwhile, on the back side of the ball where ray won’t reach that surface,
because of the global illumination, it won’t be completely black, and we’ll still see some darker red color(called
Ambient Occlusion, short for AO). Besides that, more or less, we can see a dark grey shadow on the grey floor. Let’s
jump into a conclusion, all of these make the 3D world look real.
Let’s come back to the screen. How to build a 3D world? Well, we can just simulate the real world mentioned above.
That is what a 3D render system is doing. Generally speaking, the technology of 3D rendering engine is very similar
to a traditional photographic technology. Suppose you have a camera(just like an eye), and you just took a
picture of a infinite railway from near to far right now. Something strange happened in the picture. The 2 lines in
the railway is not parallel and seems to end up crossing each other far away. That’s what we called a perspective
view. Besides, there are several other views such as orthographic view, parallel view, and so on. Imagine that the
screen is a near cutting out of the frustum to show what’s going on in the 3D world. What we need to do is to
transform the position, scale, and rotation of the 3D world(by x, y and z axis or direction) to the 2D screen.To be specific, we need to do the MVP(Model View Projection) transformation, we can learn more about this transformation here: WebGL Model View Projection. So that we can handle the 3D world just like a 2D world. Luckily, some awesome transformations are available and widely used to build all kinds of 3D rendering systems. More over, lots of papers and books are written about 3D rendering technology. About the lighting model, some excellent papers are written about the Phong’s lighting model, and some of the papers are written about the Blinn’s lighting model. And later, real time 3D rendering & physical based rendering(short for PBR) are also available and widely used in many game engines. Learn more about the 《Fundamentals
of Computer Graphics》, or dive into the GAMES101 or the awesome educational site Scratchapixel.
As a matter of fact, simulating a infinite ray tracing system is a very hard task. In graphics areas, there’s a
Principle of Approximation (PA), “If It Looks Right, It’s Right”. It means that if you draw a shadow for a 3D object,
and it seems to be correct, it’s correct. Whereas if it looks wrong, it’s wrong. So, we need to do some fine tuning to make sure the shadow looks right. So according to the Principle of Approximation, some talented mathematical and
computer scientists had discovered lots of solutions to simulate the ray tracing system. Some of those solutions are:
Phong, Blinn, Fresnel, and so on.
Graphics User Interface
In computer graphics, the Graphics User Interface (GUI) is the part of the computer screen that is used to
interact with the user. It is the part of the screen that is used to display the information, and it is the part
of the screen that is used to interact with the user.
As a front-end application developer, I have to deal with the GUI part of Browsers in the screen every day. There
are several different types of GUI, such as: Web Browser, Desktop, Mobile, and so on. The most common GUI is Web
Browser. It is the most popular GUI in the world.
How to build the GUI in a web browser? There are several ways to build the GUI in a web browser. The most simple way
is to create a HTML file, a CSS file and a JavaScript file. The HTML file is the file that contains the HTML code.
The CSS file is the file that contains the CSS code. The JavaScript file is the file that contains the JavaScript
code that is used to interact with the user. As the technology of the web browser is based on JavaScript, the HTML
and CSS code, we can bundle these three files into one file. That makes it easy to build the GUI in a web browser.
How to makes that happen? Here goes the React, Vue, Angular, and so on. With them you can build the GUI(web pages)
in a web browser very easily.
Let’s take a look at the deeper side of the web page GUI. There are two things that make us more closely connected
to the Computer Graphics: 1. The Canvas 2. The Svg. HTML canvas (used via canvas tag) is an HTML element that is used to draw graphics (lines, bars, graphs, etc.) on the user computer screen on the fly. The canvas element is just a container for the information, though; the drawing is done via JavaScript. It is supported by all modern
web browsers that support HTML5 and can render JavaScript. Read more about HTML5 canvas here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API. While Svg(used via svg tag) is another popular graphics format, it is nearly supported by all modern web browsers. It is used to draw graphics on the web page. It is also known as Scalable Vector Graphics (SVG). Read more about SVG here:
https://developer.mozilla.org/en-US/docs/Web/SVG. SVG is more like a Markup document, and
you can easily manipulate the SVG like HTML. So, we often use SVG to draw graphics like flow charts, UML diagrams,
and so on.
Let’s dive into the WebGL in Canvas API. WebGL is a graphics API that is used to draw graphics on the web page. It
is used to render graphics on the Canvas element. It is supported by all modern web browsers that support HTML5 and
can render JavaScript. Read more about WebGL here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API. We can interact with the GPU through the WebGL API using JavaScript and openGL ES for the web(Glsl). Read more about openGL here: LOW-LEVEL 3D GRAPHICS API BASED ON OPENGL ES. WebGL provides a simple door into the 3D graphics space. Let’s checkout the famous 3D rendering engine called Three.js. It is implemented in JavaScript and WebGL. Read more about Three.js here: THREE.JS. In this article, I won’t show you how to use Three.js to draw 3D graphics, but we
can use it as a fine example to understand some common concepts about computer graphics.
