mirrors/LearnOpenGL-CN
1
0
Fork 0
mirror of https://github.com/LearnOpenGL-CN/LearnOpenGL-CN.git synced 2025-08-23 12:45:29 +08:00
Code Activity

Replace all the references with relative links

Browse Source
This commit is contained in:
Meow J
2016-07-22 02:00:57 +08:00
parent ea9d99536d
commit ff320b16b9
18 changed files with 51 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/01 Getting started/06 Textures.md
View File

@@ -6,25 +6,25 @@
翻译 | [Django](http://bullteacher.com/)
校对 | Geequlim, [BLumia](https://github.com/blumia/)
我们已经了解到，我们可以为每个顶点使用颜色来增加图形的细节，从而创建出有趣的图像。但是，如果想让图形看起来更真实我们就必须有足够多的顶点，从而指定足够多的颜色。这将会产生很多额外开销，因为每个模型都会需求更多的顶点和顶点颜色。
我们已经了解到，我们可以为每个顶点添加颜色来增加图形的细节，从而创建出有趣的图像。但是，如果想让图形看起来更真实，我们就必须有足够多的顶点，从而指定足够多的颜色。这将会产生很多额外开销，因为每个模型都会需求更多的顶点，每个顶点又需求一个颜色属性。
艺术家和程序员更喜欢使用**纹理(Texture)**。纹理是一个2D图片(也有1D和3D)，它用来添加物体的细节；这就像有一张绘有砖块的图片贴到你的3D的房子上，你的房子看起来就像一堵砖墙。因为我们可以在一张图片上插入足够多的细节，这样物体就会拥有很多细节而不用增加额外的顶点。
艺术家和程序员更喜欢使用<def>纹理</def>(Texture)。纹理是一个2D图片（甚至也有1D和3D的纹理），它可以用来添加物体的细节；你可以想象纹理是一张绘有砖块的纸，无缝折叠贴合到你的3D的房子上，这样你的房子看起来就像有砖墙外表了。因为我们可以在一张图片上插入非常多的细节，这样就可以让物体非常精细而不用指定额外的顶点。
!!! Important
除了图像以外，纹理也可以储存大量的数据，这些数据用来发送到着色器上，但是这不是我们现在的主题。
下面你会看到之前教程的那个三角形贴上了一张[砖墙](http://learnopengl.com/img/textures/wall.jpg)图片。
除了图像以外，纹理也可以被用来储存大量的数据，这些数据可以发送到着色器上，但是这不是我们现在的主题。
![](http://learnopengl.com/img/getting-started/textures.png)
下面你会看到之前教程的那个三角形贴上了一张[砖墙](../img/01/06/wall.jpg)图片。
为了能够把纹理映射到三角形上，我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会有一个**纹理坐标(Texture Coordinate)**，它指明从纹理图像的哪个地方采样(采集像素颜色)。之后在所有的其他的片段上进行片段插值(Fragment Interpolation)。
![](../img/01/06/textures.png)
纹理坐标是x和y轴上0到1之间的范围(注意我们使用的是2D纹理图片)。使用纹理坐标获取纹理颜色叫做**采样(Sampling)**。纹理坐标起始于(0,0)也就是纹理图片的左下角，终结于纹理图片的右上角(1,1)。下面的图片展示了我们是如何把纹理坐标映射到三角形上的。
为了能够把纹理映射(Map)到三角形上，我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着一个<def>纹理坐标</def>(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样（译注：采集片段颜色）。之后在图形的其它片段上进行片段插值(Fragment Interpolation)。
![](http://learnopengl.com/img/getting-started/tex_coords.png)
纹理坐标在x和y轴上，范围为0到1之间（注意我们使用的是2D纹理图像）。使用纹理坐标获取纹理颜色叫做<def>采样</def>(Sampling)。纹理坐标起始于(0, 0)，也就是纹理图片的左下角，终始于(1, 1)，即纹理图片的右上角。下面的图片展示了我们是如何把纹理坐标映射到三角形上的。
我们为三角形准备了3个纹理坐标点。如上图所示，我们希望三角形的左下角对应纹理的左下角，因此我们把三角左下角的顶点的纹理坐标设置为(0,0)；三角形的上顶点对应于图片的中间所以我们把它的纹理坐标设置为(0.5,1.0)；同理右下方的顶点设置为(1.0,0)。我们只要传递这三个纹理坐标给顶点着色器就行了，接着片段着色器会为每个片段生成纹理坐标的插值。
![](../img/01/06/tex_coords.png)
我们为三角形指定了3个纹理坐标点。如上图所示，我们希望三角形的左下角对应纹理的左下角，因此我们把三角形左下角顶点的纹理坐标设置为(0, 0)；三角形的上顶点对应于图片的上中位置所以我们把它的纹理坐标设置为(0.5, 1.0)；同理右下方的顶点设置为(1, 0)。我们只要给顶点着色器传递这三个纹理坐标就行了，接下来它们会被传片段着色器中，它会为每个片段进行纹理坐标的插值。
纹理坐标看起来就像这样：
@@ -32,26 +32,26 @@
GLfloat texCoords[] = {
0.0f, 0.0f, // 左下角
1.0f, 0.0f, // 右下角
0.5f, 1.0f // 顶部位置
0.5f, 1.0f // 上中
};
```
纹理采样有几种不同的插值方式。我们需要自己告诉OpenGL在纹理中采用哪种采样方式。
对纹理采样的解释非常宽松，它可以采用几种不同的插值方式。所以我们需要自己告诉OpenGL该怎样对纹理**采样**。
## 纹理环绕方式
纹理坐标通常的范围是从(0, 0)到(1, 1)，如果我们把纹理坐标设置为范围以外会发生什么？OpenGL默认的行为是重复这个纹理图像(我们简单地忽略浮点纹理坐标的整数部分)，但OpenGL提供了更多的选择：
纹理坐标的范围通常是从(0, 0)到(1, 1)，那如果我们把纹理坐标设置在范围之外会发生什么？OpenGL默认的行为是重复这个纹理图像（我们基本上忽略浮点纹理坐标的整数部分），但OpenGL提供了更多的选择：
环绕方式(Wrapping) | 描述
---|---
GL_REPEAT | 纹理的默认行为，重复纹理图像
GL_MIRRORED_REPEAT | 和`GL_REPEAT`一样，除了重复的图片是镜像放置的
GL_CLAMP_TO_EDGE | 纹理坐标会在0到1之间，超出的部分会重复纹理坐标的边缘，就是边缘被拉伸
GL_CLAMP_TO_BORDER | 超出的部分是用户指定的边缘的颜色
环绕方式(Wrapping) | 描述
---|---
<var>GL_REPEAT</var> | 对纹理的默认行为。重复纹理图像。
<var>GL_MIRRORED_REPEAT</var> | 和<var>GL_REPEAT</var>一样，但每次重复图片是镜像放置的。
<var>GL_CLAMP_TO_EDGE</var> | 纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果。
<var>GL_CLAMP_TO_BORDER</var> | 超出的坐标为用户指定的边缘颜色。
当纹理坐标超出默认范围时，每个值都有不同的视觉效果输出。我们来看看这些纹理图像的例子：
当纹理坐标超出默认范围时，每个选项都有不同的视觉效果输出。我们来看看这些纹理图像的例子：
![](http://learnopengl.com/img/getting-started/texture_wrapping.png)
![]../img/01/06/texture_wrapping.png)
前面提到的选项都可以使用`glTexParameter`函数单独设置每个坐标轴`s`、`t`(如果是使用3D纹理那么还有一个`r`)它们和`x`、`y`(`z`)是相等的：