學習之路系列
上篇文章在最后提了一下, 給立方體添加紋理, 下面就來實現(xiàn)下那個效果蜕提。
本篇主要內(nèi)容
立方體紋理貼圖
效果圖
實現(xiàn)過程
這里把上篇文章的效果拷貝過來，直接在上面進行添加紋理
static const float Texture[] = {
0, 0,
1, 0,
0, 1,
1, 1,
0, 0,
1, 0,
0, 1,
1, 1,
};
上期的頂點坐標為8個, 前面和后面各4個, 紋理坐標我們也對應的設置為前面和后面各4個
在compileShaders方法中新增下面代碼
//獲取著色器中的紋理變量
_textureSlot = glGetAttribLocation(_program, "TexCoordIn");
glEnableVertexAttribArray(_textureSlot);
//獲取紋理單元
_textureUniform = glGetUniformLocation(_program, "ourTexture");
//獲取紋理對象
_texture = [TextureManager getTextureImageName:@"Texture3_1.png"];
在render:中新增下面代碼
//使用紋理單元
glActiveTexture(GL_TEXTURE0);
//綁定紋理對象
glBindTexture(GL_TEXTURE_2D, _texture);
//這里的參數(shù)要對應紋理單元(如果紋理單元為0,這里也要給0)
glUniform1i(_textureUniform, 0);
當然著色器也需要修改一下
Texture3Vertex.glsl如下
attribute vec4 Position;
attribute vec4 InColor;
varying vec4 OutColor;
uniform mat4 ModelView;
attribute vec2 TexCoordIn; //new
varying vec2 TexCoordOut; //new
void main(void){
OutColor = InColor;
gl_Position = ModelView * Position;
TexCoordOut = vec2(TexCoordIn.x, 1. - TexCoordIn.y); //new
}
Texture3Fragment.glsl如下
varying lowp vec4 OutColor;
uniform sampler2D ourTexture; //new
varying lowp vec2 TexCoordOut; //new
void main(void){
// gl_FragColor = OutColor;
gl_FragColor = texture2D(ourTexture, TexCoordOut); //modify
}
如果設置紋理這一塊還有小伙伴不明白的話掘托，可以看下前面的這篇文章
運行看下效果
發(fā)現(xiàn)一個問題了讨，就只有兩面有圖案 前面和后面.
我在前面的文章中提到過紋理坐標是(0,0)到(1,1)
看了下剛才設置的紋理坐標橡伞，只有前面和后面滿足這個要求
為了讓大家更直觀更容易的理解戚长，每個面弄4個坐標批钠，4 x 6 == 24個坐標
將下面頂點數(shù)據(jù)
//4個頂點(分別表示xyz軸)
static const float Vertices[] = {
//前面4個坐標
-0.5, -0.5, 0.5,
0.5, -0.5, 0.5,
-0.5, 0.5, 0.5,
0.5, 0.5, 0.5,
//后面4個坐標
-0.5, -0.5, -0.5,
0.5, -0.5, -0.5,
-0.5, 0.5, -0.5,
0.5, 0.5, -0.5,
};
static const float Texture[] = {
0, 0,
1, 0,
0, 1,
1, 1,
0, 0,
1, 0,
0, 1,
1, 1,
};
修改為
//4個頂點(分別表示xyz軸)
static const float Vertices[] = {
//前面4個坐標
-0.5, -0.5, 0.5,
0.5, -0.5, 0.5,
-0.5, 0.5, 0.5,
0.5, 0.5, 0.5,
//后面4個坐標
-0.5, -0.5, -0.5,
0.5, -0.5, -0.5,
-0.5, 0.5, -0.5,
0.5, 0.5, -0.5,
//左邊4個坐標
-0.5, -0.5, -0.5,
-0.5, -0.5, 0.5,
-0.5, 0.5, -0.5,
-0.5, 0.5, 0.5,
//右邊4個坐標
0.5, -0.5, -0.5,
0.5, -0.5, 0.5,
0.5, 0.5, -0.5,
0.5, 0.5, 0.5,
//上邊4個坐標
0.5, 0.5, -0.5,
-0.5, 0.5, -0.5,
0.5, 0.5, 0.5,
-0.5, 0.5, 0.5,
//下邊4個坐標
0.5, -0.5, -0.5,
-0.5, -0.5, -0.5,
0.5, -0.5, 0.5,
-0.5, -0.5, 0.5,
};
static const float Texture[] = {
0, 0,
1, 0,
0, 1,
1, 1,
0, 0,
1, 0,
0, 1,
1, 1,
0, 0,
1, 0,
0, 1,
1, 1,
0, 0,
1, 0,
0, 1,
1, 1,
0, 0,
1, 0,
0, 1,
1, 1,
0, 0,
1, 0,
0, 1,
1, 1,
};
繪制的索引數(shù)組也需要修改一下
static const GLubyte Indices[] = {
0, 1, 2,
2, 3, 1,
4, 5, 6,
6, 7, 5,
2, 3, 6,
6, 7, 3,
0, 1, 4,
4, 5, 1,
0, 4, 2,
2, 6, 4,
1, 5, 3,
3, 7, 5
};
修改為
static const GLubyte Indices[] = {
//前面
0, 1, 2,
2, 3, 1,
//后面
4, 5, 6,
6, 7, 5,
//左面
8, 9, 10,
10, 11, 9,
//右面
12, 13, 14,
14, 15, 13,
//上面
16, 17, 18,
18, 19, 17,
//下面
20, 21, 22,
22, 23, 21
};
運行看下效果
這樣子6個面的渲染就出來了宇植，就是如此的簡單O(∩_∩)O哈哈~
接下來將6個面渲染成不同的畫面
將compileShaders中的單個紋理對象修改下
//獲取紋理對象
_texture = [TextureManager getTextureImageName:@"Texture3_1.png"];
改成
//獲取紋理對象
for(int i = 0; i < 6; i++) {
NSString *imageName = [NSString stringWithFormat:@"Texture3_%d.png", i + 1];
_texture[i] = [TextureManager getTextureImageName:imageName];
}
渲染里面的代碼也需要修改下
//使用紋理單元
glActiveTexture(GL_TEXTURE0);
//綁定紋理對象
glBindTexture(GL_TEXTURE_2D, _texture);
//這里的參數(shù)要對應紋理單元(如果紋理單元為0,這里也要給0)
glUniform1i(_textureUniform, 0);
glDrawElements(GL_TRIANGLES, sizeof(Indices)/sizeof(Indices[0]), GL_UNSIGNED_BYTE, Indices);
改成
for(int i = 0; i < 6; i++) {
//使用紋理單元
glActiveTexture(GL_TEXTURE0 + i);
//綁定紋理對象
glBindTexture(GL_TEXTURE_2D, _texture[i]);
//這里的參數(shù)要對應紋理單元(如果紋理單元為0,這里也要給0)
glUniform1i(_textureUniform, i);
GLubyte *p = (GLubyte *)&Indices[6*i];
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_BYTE, p);
}
運行看下效果
