Chapter 2. Our First OpenGL Program(咱第一個OpenGL程序)

周一到周五，每天一篇，北京時間早上7點準時更新~，中英文對照，一邊學編程一邊彈吉他，做一個奇葩碼農！

請不要懷疑翻譯是否有問題，我們的翻譯工程師是藍翔畢業的呢！

對于書本內容，我們不做任何優化，任何新手無法實現課程效果或者看起來有困難，請吐槽原書作者！
What You’ll Learn in This Chapter(你將會學到啥)

How to create and compile shader code(如何創建和編譯shader代碼)
How to draw with OpenGL(如何使用OpenGL畫畫)
How to use the book’s application framework to initialize your programs and clean up after yourself(如何使用本書的程序框架)
In this chapter, we introduce the simple application framework that is used for almost all of the samples in this book(在本小節，我們將介紹一個簡單的應用程序框架). This shows you how to create the main window with the book’s application framework and how to render simple graphics into it(這里介紹如何創建一個主窗口和渲染簡單的圖像到那上面去). You’ll also see what a very simple GLSL shader looks like(你也將看到簡單的shader長的什么樣子的，如何編譯他們，以及如何使用他們渲染簡單的點), how to compile it, and how to use it to render simple points. The chapter concludes with your very first OpenGL triangle(本章節最后將繪制一個最簡單的OpenGL的三角形)

Creating a Simple Application(創建一個簡單的程序)

To introduce the application framework that’ll be used in the remainder of this book(為了介紹我們要使用的框架，我們將以一個極端簡單的例子為開始), we’ll start with an extremely simple example application. Of course, to write a largescale OpenGL program you don’t have to use our framework(當然，你在寫一個很牛逼的OpenGL程序的時候，你不用使用我們的框架)—in fact, we wouldn’t recommend it, as it’s quite simple(實際上，我們也不推薦你們使用我們的框架，因為它太簡單了). However, it does simplify things a little and allows you to get to writing OpenGL code sooner(不過，它還是讓整個創建OpenGL環境的過程得到簡化，并讓你能更快速的接觸到OpenGL的代碼)

The application framework is brought into your application by including sb7.h in your source code(你只需要包含sb7.h就可以把整個框架引入到你的代碼中). This is a C++ header file that defines a namespace called sb7 that includes the declaration of an application class, sb7::application, from which we can derive our examples(這個頭文件中有一個叫做sb7的命名空間，里面包含了我們的應用程序類的申明，sb7::application可以驅動我們樣本代碼). The framework also includes a number of utility functions and a simple math library called vmath to help you with some of the number crunching involved in OpenGL (這個框架也包含了一些工具函數和簡單的數學庫，因為OpenGL的操作會調用這些東西啦)

To create an application, we simply include sb7.h, derive a class from sb7::application(我們只需要包含sb7.h并且從sb7::application派生出一個類就可以創建一個程序了), and, in exactly one of our source files, include an instance of the DECLARE_MAIN macro(然后隨便挑一個源代碼文件，然后包含一個DECLARE_MAIN的宏的實例就好了). This defines the main entry point of our application(這玩意定義了應用程序的入口), which creates an instance of our class (the type of which is passed as a parameter to the macro) and calls its run() method(這個入口創建了我們的類的實例并調用了run方法), which implements the application’s main loop(在這份run方法中，有我們應用程序主循環的實現). In turn, this performs some initialization by first calling the startup() method(并且這個家伙調用了某種初始化的方法，并第一時間調用startup方法) and then calling the render() method in a loop(然后在主循環中調用render這個函數). In the default implementation, both methods are defined as virtual functions with empty bodies(在缺省的實現中，這倆方法都是一個虛函數，并且函數體什么都不干). We override the render() method in our derived class and write our drawing code inside it(在我們的程序中，我們重寫render函數，然后寫上咱的繪圖代碼). The application framework takes care of creating a window, handling input(應用程序框架會處理創建窗口以及輸入事件), and displaying the rendered results to the user(并且將渲染結果顯示給用戶看). The complete source code for our first example is given in Listing 2.1 and its output is shown in Figure 2.1(第一個例子的完整代碼如listing2.1所示，并且運行程序的結果截圖如圖2.1所示)

// Include the "sb7.h" header file
#include "sb7.h"
// Derive my_application from sb7::application
class my_application : public sb7::application
{
public:
// Our rendering function
void render(double currentTime)
{
// Simply clear the window with red
static const GLfloat red[] = { 1.0f, 0.0f, 0.0f, 1.0f };
glClearBufferfv(GL_COLOR, 0, red);
}
};
// Our one and only instance of DECLARE_MAIN
DECLARE_MAIN(my_application);
Listing 2.1: Our first OpenGL application

The example shown in Listing 2.1 simply clears the whole screen to red(這個例子就如同Listing2.1所示，簡單的使用紅色擦除整個屏幕). This introduces our first OpenGL function(這就使用鳥咱們第一個OpenGL的API:glClearBufferffer), glClearBufferfv(). The prototype of glClearBufferfv() is(該函數的定義如下)

void glClearBufferfv(GLenum buffer,
GLint drawBuffer,
const GLfloat * value);
All OpenGL functions start with gl and follow a number of naming conventions(所有的OpenGL的API都是以gl開頭，后面跟個什么玩意的組合方式), such as encoding some of their parameter types as suffixes on the end of the function names(函數名字的末尾跟著的東西有可能代表著該函數里應該傳入啥類型的參數之類的信息). This allows a limited form of overloading even in languages that don’t directly support this ability(這種命名可以讓函數具備類似于重載的效果，即便那個編程語言本身不支持重載). In this case, the suffix fv means that the function consumes a vector (v) of floating-point (f) values(這種情況下，以fv結尾的函數意味著函數接收的參數是浮點類型的向量), where arrays (generally referenced by pointers in languages like C) and vectors are used interchangeably by OpenGL(在OpenGL數組和向量是一樣的). The glClearBufferfv() function tells OpenGL to clear the buffer specified by the first parameter (in this case GL_COLOR) to the value specified in its third parameter. (glClearBufferfv告訴OpenGL去使用第三個參數指定的那些值去擦除第一個參數指定的類型的緩沖區。) The second parameter, drawBuffer, is used when there are multiple output buffers that could be cleared(第二個參數只有在多目標渲染的時候才用得上，用于指定擦除第幾個輸出緩沖區). Because we’re using only one here and drawBuffer is a zerobased index, we’ll just set it to 0 in this example(由于咱這里只有一個輸出的顏色緩沖區，咱這里寫0就好了). Here, that color is stored in the array red, which contains four floating-point values—one each for red, green, blue, and alpha, in that order(在這里，顏色存放在一個數組里，分別是r、g、b、a)

The red, green, and blue terms should be self-explanatory(這里r、g、b是無需多介紹的). Alpha is a fourth component that is associated with a color and is often used to encode the opacity of a fragment(a分量指的是alpha，控制像素的透明度). When used this way, setting alpha to 0 will make the fragment completely transparent(當設置a為0時，像素為完全透明的狀態), and setting it to 1 will make it completely opaque(當a設置成為1的時候，將變得完全不透明). The alpha value can also be stored in the output image and used in some parts of OpenGL’s calculations(alpha值也可以存儲在輸出的圖像中，并在其他的地方被用來計算，即便你無法看見這個像素), even though you can’t see it. You can see that we set both the red and alpha values to 1 and the others to 0(你可以看到，現在我們把r和a設置成了1，把g、b設置成了0). This specifies an opaque red color(這個設置下，就是一個紅色). The result of running this application is shown in Figure 2.1.(此時程序的運行結果如圖2.1所示) This initial application isn’t particularly interesting(應用程序的初始化并不是怎么有趣),1 as all it does is fill the window with a solid red color. You will notice that our render() function takes a single parameter—currentTime(你也注意到了render函數只有一個參數currentTime). This contains the number of seconds since the application was started(這個參數指代的是從應用程序啟動開始，經歷了多少時間), and we can use it to create a simple animation(有了這個參數，我們就可以制作一些簡單的動畫). In this case, we can use it to change the color that we use to clear the window(我們可以基于這個時間對顏色進行修改，并使用修改后的顏色去擦除窗口). Our modified render() function2 is shown in Listing 2.2(我們修改后的render函數如Listing2.2所示)

This sample is especially uninteresting if you are reading this book in black and white!(如果你讀的書本是非彩色版本的話，這個例子是沒什么卵味的)
If you’re copying this code into your own example, you’ll need to include to get the declarations of sin() and cos()(如果你把咱書本里的代碼拷貝到你的程序里，你還需要包含math.h這個頭文件，因為我們程序中使用了三角函數)
// Our rendering function
void render(double currentTime)
{
const GLfloat color[] = {
(float)sin(currentTime) 0.5f + 0.5f,
(float)cos(currentTime) 0.5f + 0.5f,
0.0f, 1.0f };
glClearBufferfv(GL_COLOR, 0, color);
}
Listing 2.2: Animating color over time

Now our window fades from red through yellow, orange, green, and back to red again. Still not that exciting, but at least it does something.(現在我們的窗口的顏色在變化了，雖然還不是怎么牛叉，但是至少，這個程序還是干了點什么了吧)

本日的翻譯就到這里，明天見，拜拜~~

第一時間獲取最新橋段，請關注東漢書院以及圖形之心公眾號

東漢書院，等你來玩哦