之前只是用OpenGL ES來渲染出一個很單調的白色三角形, 但生活中卻又千千萬萬種顏色, 還有些東西是由很多顏色組成的, 為了渲染出最逼真的, OpenGL ES提供了一種紋理的圖形技術, 用來渲染沒一個像素的顏色
-
紋理: 用來保存圖像的顏色元素的緩存, 例子中只做2D的緩存
原理大概是OpenGL ES緩存了一張圖片上的像素顏色, 在通過我們定義的幾何圖形一疊加繪制出結果圖形. 幾何圖形多出來的部分, 將不會被著色.如圖:
屏幕快照 2017-06-28 下午8.43.06.png -
紋理渲染過程中的一些概念:
1.視口坐標(和屏幕坐標相反要注意):幀緩存中的像素坐標2.片源: 每個元素像素
3.映射:幾何圖形和紋理疊加,對齊的過程
4.紋理坐標系中的2D軸:S和T軸, 每一條軸的坐標范圍(0-1), 從一個像素到64個紋素 .如圖:
圖片發(fā)自簡書App
-
效果展示:(一個三角形,用紋理渲染)
紋理圖片:
圖片發(fā)自簡書App
最后效果:
圖片發(fā)自簡書App
- 代碼
三角形頂點坐標和紋理坐標
//頂點數據 用浮點類型
static const scene point[] = {
0.5, -0.5, 0.0f, 1.0f, 0.0f, //右下
0.5, 0.5, -0.0f, 1.0f, 1.0f, //右上
-0.5, 0.5, 0.0f, 0.0f, 1.0f, //左上
};
紋理
glEnableVertexAttribArray(GLKVertexAttribTexCoord0); //紋理告訴OpenGL紋理的數據在哪里
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(scene) , NULL);
//紋理貼圖
CGImageRef imageRef = [[UIImage imageNamed:@"11"] CGImage];
GLKTextureInfo *info = [GLKTextureLoader textureWithCGImage:imageRef options:nil error:NULL];
最終的效果圖三角形中的圖片是位置是不是原來圖片的位置, 這是因為視口坐標和屏幕坐標是相反的, 如要修改可以先將紋理的image先做旋轉處理(懶不想搞).
