OpenGL纹理

2017-07-26 本文已影响77人迷途小书童nb

[toc]

参考文章：
http://blog.csdn.net/a358333644/article/details/50907026
https://zhuanlan.zhihu.com/p/24714986?refer=ry000
https://learnopengl-cn.github.io/01%20Getting%20started/06%20Textures/

使用纹理贴图步骤：

1.启用纹理贴图---纹理贴图同样是状态机，所以启用方法为：gl.glEnable(GL10.GL_TEXTURE_2D);
2.生成纹理ID：因为OpenGL中纹理贴图的工作过程是，先将图片加载进来，而加载纹理当然有可能会加载很多纹理，所以如何判断当前操作的纹理呢？OpenGL在每加载一个纹理的时候都会生成一个整数值的纹理ID，然后每个纹理贴图都会绑定到这个ID上，所以用这个纹理ID就可以操作加载的每一个纹理。gl.glGenTextures(1,texId,0);第一个参数1的意思是，用一个数字来表示纹理ID，第三个参数为偏移量。
3.绑定纹理ID：gl.glBindTexture(GL10.GL_TEXTURE_2D,id);
4.加载纹理：GLUtils.texImage2D(GL10.GL_TEXTURE_2D,0,bitmap,0);第一个参数为什么类型的纹理，第二个参数为等级，第三个参数是要加载的位图，第四个参数为边框。
核心函数：

void glTexImage2D (GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *pixels);

参数GLenum target：目标纹理格式，代码中为2D纹理，故使用GL_TEXTURE_2D
参数GLint level：纹理细致级别，代码中为图像转换为纹理，故设为0；若为mipmap纹理，即可设置级别
参数GLint internalformat：OpenGL显示图像颜色格式，代码中为普通rgb格式，故使用GL_RGB
参数GLsizei width, GLsizei height：图像宽高
参数GLint border：纹理单元的边框，包含边框取值为1，不包含边框取值为0，整体效果差别不大
参数GLenum format：图像格式，代码中为BGR格式(GL_BGR_EXT，OpenCV图像颜色顺序默认为BGR)
参数GLenum type：内存数据种类，代码中为unsigned char(GL_UNSIGNED_BYTE，OpenCV图像像素数据种类默认为unsigned char)
参数const GLvoid *pixels：待显示图像数据，代码中为图像指针pixels

核心内容

1.纹理坐标

为了能够把纹理映射(Map)到三角形上，我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着一个纹理坐标(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样（译注：采集片段颜色）。之后在图形的其它片段上进行片段插值(Fragment Interpolation)。

纹理坐标在x和y轴上，范围为0到1之间（注意我们使用的是2D纹理图像）。使用纹理坐标获取纹理颜色叫做采样(Sampling)。纹理坐标起始于(0, 0)，也就是纹理图片的左下角，终始于(1, 1)，即纹理图片的右上角。下面的图片展示了我们是如何把纹理坐标映射到三角形上的。

image.png

我们为三角形指定了3个纹理坐标点。如上图所示，我们希望三角形的左下角对应纹理的左下角，因此我们把三角形左下角顶点的纹理坐标设置为(0, 0)；三角形的上顶点对应于图片的上中位置所以我们把它的纹理坐标设置为(0.5, 1.0)；同理右下方的顶点设置为(1, 0)。我们只要给顶点着色器传递这三个纹理坐标就行了，接下来它们会被传片段着色器中，它会为每个片段进行纹理坐标的插值。

纹理坐标看起来就像这样：

float texCoords[] = {
    0.0f, 0.0f, // 左下角
    1.0f, 0.0f, // 右下角
    0.5f, 1.0f // 上中
};

我们制定坐标的时候，就可以根据需求自行调节，例如：

image.png

2.纹理环绕方式

纹理坐标的范围通常是从(0, 0)到(1, 1)，那如果我们把纹理坐标设置在范围之外会发生什么？OpenGL默认的行为是重复这个纹理图像（我们基本上忽略浮点纹理坐标的整数部分），但OpenGL提供了更多的选择：

image.png

当纹理坐标超出默认范围时，每个选项都有不同的视觉效果输出。我们来看看这些纹理图像的例子：

image.png
前面提到的每个选项都可以使用glTexParameter*函数对单独的一个坐标轴设置（s、t（如果是使用3D纹理那么还有一个r）它们和x、y、z是等价的）：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT);
第一个参数指定了纹理目标；我们使用的是2D纹理，因此纹理目标是GL_TEXTURE_2D。第二个参数需要我们指定设置的选项与应用的纹理轴。我们打算配置的是WRAP选项，并且指定S和T轴。最后一个参数需要我们传递一个环绕方式(Wrapping)，在这个例子中OpenGL会给当前激活的纹理设定纹理环绕方式为GL_MIRRORED_REPEAT。

如果我们选择GL_CLAMP_TO_BORDER选项，我们还需要指定一个边缘的颜色。这需要使用glTexParameter函数的fv后缀形式，用GL_TEXTURE_BORDER_COLOR作为它的选项，并且传递一个float数组作为边缘的颜色值：

float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };
glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);

3.附代码

public class MyTextureRenderer extends AbstractRenderer{

    private Resources r;

    public MyTextureRenderer(Resources r){
        this.r = r;
    }

    @Override
    public void onDrawFrame(GL10 gl) {

        gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        gl.glColor4f(1, 0, 0, 1);
        gl.glMatrixMode(GL10.GL_MODELVIEW);
        gl.glLoadIdentity();
        GLU.gluLookAt(gl, 0, 0, 5, 0, 0, 0, 0, 1, 0);
        gl.glRotatef(xRotate, 1, 0, 0);
        gl.glRotatef(yRotate, 0, 1, 0);

     /*********************** 纹理 ************************/
        gl.glEnable(GL10.GL_TEXTURE_2D);//启用二维纹理
        int [] texId = new int[1];
        gl.glGenTextures(1,texId,0);//生成纹理id
        int id = texId[0];//取到纹理id
        gl.glBindTexture(GL10.GL_TEXTURE_2D,id);//绑定纹理
        Bitmap bitmap = BitmapFactory.decodeResource(r, R.drawable.a8);
        GLUtils.texImage2D(GL10.GL_TEXTURE_2D,0,bitmap,0);//加载纹理
        //指定纹理过滤器
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);//缩小
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);//放大
        //纹理回绕参数
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT);//S回绕
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT);//T回绕
        bitmap.recycle();
        //纹理坐标
        float [] texCoords = {
                0,1,
                1,1,
                0,0,
                1,0,
        };
        //指定纹理指针
        gl.glTexCoordPointer(2,GL10.GL_FLOAT,0, BufferUtils.arr2FloatBuffer(texCoords));
        float r = 1f;//半径
        float [] coords = {
                -r,-r,0,
                r,-r,0,
                -r,r,0,
                r,r,0,
        };

        gl.glVertexPointer(3, GL10.GL_FLOAT, 0, BufferUtils.array2ByteBuffer(coords));//指定顶点指针

        gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);
    }
}

OpenGL纹理

使用纹理贴图步骤：

核心内容

1.纹理坐标

2.纹理环绕方式

3.附代码

猜你喜欢

热点阅读