理論

首先是兩個座標系

假如現在有一張圖片,是通過紋理座標系繪製出來的,圖片的左上角(0,0),左下角(0,1),
那麼我需要把紋理座標系和頂點座標系對齊, 那麼要把紋理座標系中(0,0)這個點,放到頂點座標系中的(-1,0)這個點.
相應的要把紋理座標系的(0,1)這個點,放到頂點座標系中(-1,-1)這個點. 後面以此類推

具體做法: 先把OpenGL 需要展示的區域畫出來(就是整個螢幕),再按照上面的做法 把紋理座標系貼到頂點座標系中.

頂點Shader

vertex_shader.glsl

attribute vec4 av_Position;
attribute vec2 af_Position;
varying vec2 v_texPo;
void main() {
    v_texPo = af_Position;
    gl_Position = av_Position;
}


 

注： attribute 只能在vertex中使用
varying 用於vertex和fragment之間傳遞值

1. attribute vec4 av_Position; 這個是之前寫過的 頂點座標系
2. attribute vec2 af_Position; 這個是紋理座標系 vec2 圖片是2d的 就用兩個向量x,y
3. varying vec2 v_texPo; 在頂點座標和片元座標之間傳遞資料 v_texPo 這個值需要在頂點座標和片源座標的檔案中定義一直.

片元Shader

fragment_shader.glsl

precision mediump float;
varying vec2 v_texPo;
uniform sampler2D sTexture;
void main() {
    gl_FragColor=texture2D(sTexture, v_texPo);
}

 

注： uniform 用於在application中向vertex和fragment中傳遞值。

1. precision mediump float; 精度
2. varying vec2 v_texPo; 從頂點Shader 獲取到的值
3. uniform sampler2D sTexture; 紋理的屬性 因為是在片元裡面 所以用uniform修飾 傳值
4. texture2D 把顏色取出來的方法 這裡實際上就是做的兩個座標的轉換

繪製紋理過程

1、載入shader和生成program過程不變

2、建立和繫結紋理：

    GLES20.glGenTextures(1, textureId, 0);
	GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureid);
 

glGenTextures 就是建立紋理 引數.1 是建立多少個紋理 texturId 是個整形的陣列. 0 是從0開始
glBindTexture 繫結紋理 把生成的textrueId 生成的紋理繫結到GL_TEXTURE_2D 上

3、設定環繞和過濾方式
環繞（超出紋理座標範圍）：
（s == x t == y GL_REPEAT 重複）

GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);  
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);

過濾（紋理畫素對映到座標點）：（縮小、放大：GL_LINEAR線性）

GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);  
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);

4、設定圖片
（bitmap）

GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

5、繫結頂點座標和紋理座標

6、繪製圖形

程式碼

按照前面文章

繪製四邊形 實際上的點 按照 v1 v2 v3 v4 繪製

在頂點座標系中就是

//頂點座標
    private final  float[] vertexData={
            -1f,-1f,
            1f,-1f,
            -1f,1f,
            1f,1f
    };

但是紋理座標系和頂點座標系不一樣 需要對應起來所以紋理座標系是

  //紋理座標
    private final float[] textureData={
            0f,1f,
            1f,1f,
            0f,0f,
            0f,1f
    };

其他程式碼:

package com.xyyy.www.opengldemo;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.opengl.GLUtils;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

/**
 * @author liuml
 * @explain  渲染圖片
 * @time 2018/11/15 11:19
 */
public class XYRenderImage implements GLSurfaceView.Renderer {

    private Context context;
    //頂點座標
    private final  float[] vertexData={
            -1f,-1f,
            1f,-1f,
            -1f,1f,
            1f,1f
    };

    //紋理座標  正常
//    private final float[] textureData={
//            0f,1f,
//            1f,1f,
//            0f,0f,
//            1f,0f
//    };
    //紋理座標 倒立
    private final float[] textureData={
            1f,0f,
            0f,0f,
            1f, 1f,
            0f, 1f
    };


    private FloatBuffer vertexBuffer;//頂點buffer
    private FloatBuffer textureBuffer;//紋理buffer
    private int program;
    private int avPosition;//頂點座標
    private int afPosition;//紋理座標
    private int textureId;//紋理id儲存
//    private int afColor;


    public XYRenderImage(Context context){
        this.context = context;
        vertexBuffer = ByteBuffer.allocateDirect(vertexData.length * 4)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer()
                .put(vertexData);
        vertexBuffer.position(0);


        textureBuffer = ByteBuffer.allocateDirect(textureData.length * 4)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer()
                .put(textureData);
        textureBuffer.position(0);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        String vertexSource = XYShaderUtil.readRawText(context, R.raw.img_vertex_shader);
        String fragmentSource = XYShaderUtil.readRawText(context, R.raw.img_fragment_shader);
        program = XYShaderUtil.createProgram(vertexSource, fragmentSource);
        if (program > 0) {
            avPosition = GLES20.glGetAttribLocation(program, "av_Position");
            afPosition = GLES20.glGetAttribLocation(program, "af_Position");

            //建立紋理
            int[] textureIds = new int[1];
            GLES20.glGenTextures(1, textureIds, 0);
            if (textureIds[0] == 0) {
                return;
            }

            textureId = textureIds[0];

            //繫結
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId);

            //設定引數 環繞（超出紋理座標範圍）：
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);

            //過濾（紋理畫素對映到座標點
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);

//            BitmapFactory.Options options = new BitmapFactory.Options();
//            options.inScaled = false;
            Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.test);
            if (bitmap == null) {
                return;
            }
            GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);
            bitmap.recycle();
            bitmap = null;
        }

    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width,int height) {
        //繪製區域
        GLES20.glViewport(0,0,width,height);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        //清屏緩衝區
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
        //利用顏色清屏
        GLES20.glClearColor(1.0f,1.0f,1.0f,1.0f);


        //讓program可用
        GLES20.glUseProgram(program);
        //頂點座標
        GLES20.glEnableVertexAttribArray(avPosition);
        GLES20.glVertexAttribPointer(avPosition, 2, GLES20.GL_FLOAT, false, 8, vertexBuffer);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
        //紋理座標
        GLES20.glEnableVertexAttribArray(afPosition);
        GLES20.glVertexAttribPointer(afPosition, 2, GLES20.GL_FLOAT, false, 8, textureBuffer);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
    }
}

效果: