1. 纹理映射
1.1 纹理映射就是将图片贴到绘制的图像上
1.2 纹理坐标的坐标系 横轴为S 纵轴为T
1.3 opengles对纹理做了归一化处理,坐标范围都是0.0~1.0
demo:
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
import android.app.Activity;
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 android.opengl.Matrix;
import android.os.Bundle;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MSur(this));
}
}
class MSur extends GLSurfaceView {
Render render;
public MSur(Context context) {
super(context);
this.setEGLContextClientVersion(2);
render = new Render(context);
setRenderer(render);
this.setRenderMode(GLSurfaceView.RENDERMODE_CONTINUOUSLY);
}
}
class Render implements GLSurfaceView.Renderer {
private int vCount;
private Context ctx;
private FloatBuffer fbv;
private FloatBuffer mTexCoorBuffer;
static float[] mMMatrix = new float[16];
int mProgram;// 自定义渲染管线程序id
int muMVPMatrixHandle;// 总变换矩阵引用id
int maPositionHandle; // 顶点位置属性引用id
int maTexCoorHandle; // 顶点颜色属性引用id
int msTexHandle;//纹理引用id
int textureId;//系统分配的纹理id
public static float[] mProjMatrix = new float[16];// 4x4矩阵 投影用
public static float[] mVMatrix = new float[16];// 摄像机位置朝向9参数矩阵
public static float[] mMVPMatrix;// 最后起作用的总变换矩阵
public Render(Context ctx) {
super();
this.ctx = ctx;
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
GLES20.glClearColor(0, 0, 0, 1.0f);
initVertex();
initShader();
GLES20.glEnable(GLES20.GL_DEPTH_TEST);
initTexture();
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
GLES20.glViewport(0, 0, width, height);
float ratio = (float) width / height;
Matrix.frustumM(mProjMatrix, 0, -ratio, ratio, -1, 1, 1, 10);
Matrix.setLookAtM(mVMatrix, 0, 0, 0, 3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
}
@Override
public void onDrawFrame(GL10 gl) {
GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT | GLES20.GL_COLOR_BUFFER_BIT);
draw();
}
public void draw() {
GLES20.glUseProgram(mProgram);
Matrix.setRotateM(mMMatrix, 0, 0, 0, 1, 0);
mMVPMatrix = new float[16];
Matrix.multiplyMM(mMVPMatrix, 0, mVMatrix, 0, mMMatrix, 0);
Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mMVPMatrix, 0);
GLES20.glUniformMatrix4fv(muMVPMatrixHandle, 1, false, mMVPMatrix, 0);
GLES20.glVertexAttribPointer(maPositionHandle, 3, GLES20.GL_FLOAT,
false, 3 * 4, fbv);
//TODO 5 将纹理坐标传入glsl
GLES20.glVertexAttribPointer(maTexCoorHandle,
2,
GLES20.GL_FLOAT,
false,
2*4,
mTexCoorBuffer);
GLES20.glEnableVertexAttribArray(maPositionHandle);
GLES20.glEnableVertexAttribArray(maTexCoorHandle);
//TODO 6 绑定纹理
GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId);
//如果只有一个纹理 可以不做这一步
GLES20.glUniform1i(msTexHandle, 0/*GLES20.GL_TEXTURE0=0 GLES20.GL_TEXTURE1=1*/);
//TODO 7 显示
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vCount);
}
//初始化数据
private void initVertex() {
float v[] = { 1f, -1f, 0, 0, 1f, 0, -1f, -1f, 0 };
vCount = v.length / 3;
ByteBuffer bb = ByteBuffer.allocateDirect(v.length * 4);
bb.order(ByteOrder.nativeOrder());
fbv = bb.asFloatBuffer();
fbv.put(v);
fbv.position(0);
//TODO 4 初始化纹理坐标
float texCoor[]=new float[]{0, 1, 0.5f, 0, 1, 1};
//创建顶点纹理坐标数据缓冲
ByteBuffer cbb = ByteBuffer.allocateDirect(texCoor.length*4);
cbb.order(ByteOrder.nativeOrder());//设置字节顺序
mTexCoorBuffer = cbb.asFloatBuffer();//转换为Float型缓冲
mTexCoorBuffer.put(texCoor);//向缓冲区中放入顶点着色数据
mTexCoorBuffer.position(0);//设置缓冲区起始位置
}
//初始化纹理
public void initTexture(){
//TODO 2 生成纹理ID
int[] textures = new int[1];
GLES20.glGenTextures
(
1, //产生的纹理id的数量
textures, //纹理id的数组
0 //偏移量
);
textureId=textures[0];
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId);
//纹理采样
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER,GLES20.GL_NEAREST);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR);
//纹理拉伸
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_CLAMP_TO_EDGE);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_CLAMP_TO_EDGE);
//通过输入流加载图片
InputStream is = this.ctx.getResources().openRawResource(R.raw.wall);
Bitmap bitmapTmp;
try
{
bitmapTmp = BitmapFactory.decodeStream(is);
}
finally
{
try
{
is.close();
}
catch(IOException e)
{
e.printStackTrace();
}
}
//TODO 3 实际加载纹理
GLUtils.texImage2D
(
GLES20.GL_TEXTURE_2D, //纹理类型,在OpenGL ES中必须为GL10.GL_TEXTURE_2D
0, //纹理的层次,0表示基本图像层,可以理解为直接贴图
bitmapTmp, //纹理图像
0 //纹理边框尺寸
);
bitmapTmp.recycle(); //纹理加载成功后释放图片
}
//初始化shader
private void initShader() {
String vertex = loadSH("vertex.sh");
String shader = loadSH("frag.sh");
int verS = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER);
if (verS != 0) {
GLES20.glShaderSource(verS, vertex);
GLES20.glCompileShader(verS);
}
int fragS = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER);
if (fragS != 0) {
GLES20.glShaderSource(fragS, shader);
GLES20.glCompileShader(fragS);
}
mProgram = GLES20.glCreateProgram();
if (mProgram != 0) {
GLES20.glAttachShader(mProgram, verS);
GLES20.glAttachShader(mProgram, fragS);
GLES20.glLinkProgram(mProgram);
}
maPositionHandle = GLES20.glGetAttribLocation(mProgram, "aPosition");
//TODO 1 关联glsl的纹理坐标
maTexCoorHandle= GLES20.glGetAttribLocation(mProgram, "aTexCoor");
muMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
msTexHandle = GLES20.glGetUniformLocation(mProgram, "sTexture");
}
//将sh文件加载进来
private String loadSH(String fname) {
String result = null;
try {
InputStream in = ctx.getAssets().open(fname);
int ch = 0;
ByteArrayOutputStream baos = new ByteArrayOutputStream();
while ((ch = in.read()) != -1) {
baos.write(ch);
}
byte[] buff = baos.toByteArray();
baos.close();
in.close();
result = new String(buff, "UTF-8");
result = result.replaceAll("\\r\\n", "\n");
} catch (Exception e) {
e.printStackTrace();
}
return result;
}
}
frag.sh:
precision mediump float;
varying vec2 vTextureCoord; //接收从顶点着色器过来的参数
uniform sampler2D sTexture;//纹理内容数据
void main()
{
//给此片元从纹理中采样出颜色值
gl_FragColor = texture2D(sTexture, vTextureCoord);
}
vertex.sh:
uniform mat4 uMVPMatrix; //总变换矩阵
attribute vec3 aPosition; //顶点位置
attribute vec2 aTexCoor; //顶点纹理坐标
varying vec2 vTextureCoord; //用于传递给片元着色器的变量
void main()
{
gl_Position = uMVPMatrix * vec4(aPosition,1); //根据总变换矩阵计算此次绘制此顶点位置
vTextureCoord = aTexCoor;//将接收的纹理坐标传递给片元着色器
}
2. 纹理拉伸
当设置纹理的s,t大于1.0时,纹理就会产生拉伸现象
拉伸的方式有三种:
2.1 设置S轴的拉伸方式为重复
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_REPEAT);
2.2 设置S轴的拉伸方式为镜像重复
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_MIRRORED_REPEAT);
2.3 设置S轴的拉伸方式为截取
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_CLAMP_TO_EDGE);
s轴与t轴需要分别设置
3. 纹理采样
纹理采样:根据片元的纹理坐标到纹理提取对应位置的颜色
渲染时,通过纹理坐标不一定能在纹理图中找到完全对应的像素,此时需要一些策略,常用的有最近点采样和线性采样
3.1 最近点采样 GLES20.GL_NEAREST
纹理由一个一个像素点组成,最近采样点就是直接获取s,t坐标对应的像素点的颜色值
优点:速度快,简单
缺点:将小纹理图映射到大图元时,会产生锯齿现象 GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_MIN_FILTER,GLES20.GL_NEAREST);
3.2 线性采样 GLES20.GL_LINEAR
对采样范围内的多个像素进行加权平均,使纹理平滑过渡从而避免锯齿现象
优点:有效避免锯齿现象
缺点:运算量变大,虽然解决了锯齿,但是颜色差距过大,会产生颜色边界模糊现象 GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR);
3.3 GLES20.GL_TEXTURE_MAG_FILTER
与GLES20.GL_TEXTURE_MIN_FILTER
大纹理图映射到小图元时 使用GL_TEXTURE_MAG_FILTER
小纹理图映射到大图元时 使用GL_TEXTURE_MIN_FILTER
4. mipmap
若需要设置一个大场景,如地图时,在远处看的很清楚,但是在近处会模糊,因为在近处纹理被拉大。
因此需要在远处使用分辨率低的纹理,在近处使用分辨率大的图元,这就是mipmap。mipmap由系统自动完成,只需要提供一张原始图,加载时系统会自动生成一系列纹理,每个纹理图都是前一个的1/2,直到最后一个1x1像素
GLES20.glGenerateMipmap(GLES20.GL_TEXTURE_2D);
5. 多重纹理与过程纹理
多重纹理:一个图元使用多个纹理,使用GLES20.glUniform1i
过程纹理:多个纹理间的平滑过渡
6. 纹理压缩
常规的纹理是将图片解压后送入纹理缓冲区,图像文件会很大。gles采用压缩的方式,通用的格式为ETC1,不支持透明,gles3.0的通用格式ETC2/EAC开始支持。加载时可以直接将压缩文件送到纹理缓冲区使用。
加载使用:ETC1Util.loadTexture
补充:gles3.0新特性
- 增加了色彩通道,可以对映射到图元的rgba分量进行单独的控制
- 增加3D纹理
- 2D纹理数组,一个着色器中需要多个纹理时,简化开发
- 采样器配置对象sampler,加载每一个纹理时,都需要设置拉伸方式和采样方式,采用采样适配器可以统一设置,避免重复,提高效率
参考《opengles 3.x 游戏开发 上卷》