Drawing Our First Triangle(繪制第一個三角形)

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

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

Drawing a single point is not really that impressive (even if it is really big!)(畫個點還不是那么殺改(過癮的意思，湘西土家族方言))—we already mentioned that OpenGL supports many different primitive types(俺們也說過了，OpenGL支持很多類型的圖元), and that the most important are points, lines, and triangles(其中最重要滴就是點、線和三角形). In our toy example, we draw a single point by passing the token GL_POINTS to the glDrawArrays() function(在俺們的例子中，我們給glDrawArrays傳了個GL_POINTS讓OpenGL給畫個點). What we really want to do is draw lines or triangles(要是俺想畫線或者是三角形咋整). As you may have guessed, we could have passed GL_LINES or GL_TRIANGLES to glDrawArrays()(此時給glDrawArrays穿線和三角形不就完事了) but there’s one hitch:The vertex shader in Listing 2.3 places every vertex in the same place, right in the middle of clip space(但是你瞅瞅我們之前的shader，那代碼里面把數據都寫死了，怎么玩啊). For points, that’s fine: OpenGL assigns area to points for you(對于畫點來說，還沒啥，也就能畫一個). But for lines and triangles, having two or more vertices in the exact same place produces a degenerate primitive(但如果是畫別的圖元，你把所有數據都寫死在那一個位置，不還是個點嗎，想象一下，你把三角形和線都擠在一個點的位置，不還是個點？), which is a line with zero length or a triangle with zero area. If we try to draw anything but points with this shader, we won’t get any output at all because all of the primitives will be degenerate(如果我們使用這個shader去畫其他圖元的話，我們什么也畫不出來). To fix this, we need to modify our vertex shader to assign a different position to each vertex(為了修復這個問題，我們需要修改我們的vertex shader，為每個點指定不一樣的坐標)

Fortunately, GLSL includes a special input to the vertex shader called gl_VertexID, which is the index of the vertex that is being processed at the time(幸運滴是有一個內置變量叫gl_VertexID,標記了當下被執行的這個點的索引index). The gl_VertexID input starts counting from the value given by the first parameter of glDrawArrays() and counts upward one vertex at a time for count vertices (the third parameter of glDrawArrays())(gl_VertexID會從你調用glDrawArrays時傳入的起始位置的索引開始，一直迭代到那個位置的索引加上count為止). This input is one of the many built-in variables provided by GLSL, which represent data that is generated by OpenGL or that you should generate in your shader and give to OpenGL(這是GLSL的內置變量，它是由OpenGL直接生成的，你在代碼里面直接用就是了，這些數據可以是OpenGL生成的也可以是你自己生成并提供給OpenGL的). (gl_Position, which we just covered,is another example of a built-in variable.(gl_Position是另外一個內置變量，我們已經在前面講過了)) We can use this index to assign a different position to each vertex (我們可以用這個內置變量，去給每個頂點賦值不同的位置)(see Listing 2.8, which does exactly this)

新手看到這里肯定是一頭霧水，什么鬼。這不是你的智商不行，是書本講的不好，他簡單的文字敘述，且沒有講原理。聽過我們東漢書院的OpenGL進階課程的人，肯定是輕松愉快的學過這一段的。

#version 450 core
void main(void)
{
// Declare a hard-coded array of positions
const vec4 vertices[3] = vec4[3](vec4(0.25, -0.25, 0.5, 1.0),
vec4(-0.25, -0.25, 0.5, 1.0),
vec4(0.25, 0.25, 0.5, 1.0));
// Index into our array using gl_VertexID
gl_Position = vertices[gl_VertexID];
}
Listing 2.8: Producing multiple vertices in a vertex shader

By using the shader of Listing 2.8, we can assign a different position to each of the vertices based on its value of gl_VertexID(我們可以根據gl_VertexID給每個頂點賦值一個位置). The points in the array vertices form a triangle(那些點是以三角形的方式進行組織的), and if we modify our rendering function to pass GL_TRIANGLES to glDrawArrays() instead of GL_POINTS(并且我們修改glDrawArrays的參數，從GL_POINTS變成GL_TRIANGLES，如Listing2.9所示), as shown in Listing 2.9, then we obtain the image shown in Figure 2.4(這樣一來，我們應該會得到如圖2.4的運行結果).

// Our rendering function
void render(double currentTime)
{
const GLfloat color[] = { 0.0f, 0.2f, 0.0f, 1.0f };glClearBufferfv(GL_COLOR, 0, color);
// Use the program object we created earlier for rendering
glUseProgram(rendering_program);
// Draw one triangle
glDrawArrays(GL_TRIANGLES, 0, 3);
}
Listing 2.9: Rendering a single triangle

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

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

東漢書院，等你來玩哦