先上效果圖
我是android opengl es的初學者银萍,有很多東西還不懂变勇,仍在學習;這里實現(xiàn)全景圖瀏覽的一個思路是贴唇,先使用opengl繪制一個球體搀绣,這個球體中心位置在手機屏幕的中心,球體的半徑為3戳气。默認攝像機的位置在球體正前方半徑為3的位置上链患,看著球體的中心,在收觸摸屏幕的時候瓶您,不斷調整攝像機的位置麻捻,但是保持距離球體中心的位置不變纲仍。
球體繪制成功后,將準備好的全景圖贸毕,貼在球體的表面郑叠,就完成了(不需要對全景圖進行特殊處理,我剛開始的思路是繪制一個正方體天空盒明棍,然后對全景圖進行處理乡革,獲得天空盒六個面的圖像,然后將圖像貼在六個面上摊腋,結果發(fā)現(xiàn)我不會沸版。。兴蒸。视粮。)。
這里涉及到
opengl的繪制橙凳,可以看看android opengl es2.0完全入門這篇文章
繪制球體蕾殴,opengl es2.0只能繪制點,線和三角形岛啸,如果要繪制球體的話区宇,需要將球體表面切分成成千上萬個小矩形,矩形又可以切分成三角形來繪制值戳,只要切分的夠細,看上去就是球體炉爆。
繪制球體需要你掌握一點三維空間和三角函數(shù)的知識
根據(jù)θ和β的角度堕虹,就可以計算球體上一個點的坐標,同時計算另外三個頂點坐標也是比較容易的芬首。
package com.xz.demo;
import android.app.Activity;
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;
import android.view.MotionEvent;
import android.view.ViewGroup;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import java.nio.ShortBuffer;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
/**
* Created by Administrator on 2016/8/31 0031.
*/
public class OPENGLTestActivity extends Activity {
GLSurfaceView glSurfaceView;
public float mAngleX = 0;// 攝像機所在的x坐標
public float mAngleY = 0;// 攝像機所在的y坐標
public float mAngleZ = 3;// 攝像機所在的z坐標
public static String VL = "uniform mat4 uMVPMatrix;" +
"attribute vec4 vPosition;" +
"attribute vec2 a_texCoord;" +
"varying vec2 v_texCoord;" +
"void main() {" +
" gl_Position = uMVPMatrix * vPosition;" +
" v_texCoord = a_texCoord;" +
"}";
public static String FL = "precision mediump float;" +
"varying vec2 v_texCoord;" +
"uniform sampler2D s_texture;" +
"void main() {" +
" gl_FragColor = texture2D( s_texture, v_texCoord );" +
"}";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
glSurfaceView = new GLSurfaceView(this);
glSurfaceView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
setContentView(glSurfaceView);
glSurfaceView.setEGLContextClientVersion(2);
glSurfaceView.setRenderer(new RenderListener());
glSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
}
float startRawX;
float startRawY;
double xFlingAngle;
double xFlingAngleTemp;
double yFlingAngle;
double yFlingAngleTemp;
@Override
public boolean onTouchEvent(MotionEvent me) {
//處理手指滑動事件赴捞,我這里的處理是判斷手指在橫向和豎向滑動的距離
//這個距離隱射到球體上經度和緯度的距離,根據(jù)這個距離計算三維空間的兩個
//夾角郁稍,根據(jù)這個夾角調整攝像機所在位置
if (me.getAction() == MotionEvent.ACTION_DOWN) {
startRawX = me.getRawX();
startRawY = me.getRawY();
} else if (me.getAction() == MotionEvent.ACTION_MOVE) {
float distanceX = startRawX - me.getRawX();
float distanceY = startRawY - me.getRawY();
//這里的0.1f是為了不上攝像機移動的過快
distanceY = 0.1f * (distanceY) / getWindowManager().getDefaultDisplay().getHeight();
yFlingAngleTemp = distanceY * 180 / (Math.PI * 3);
if (yFlingAngleTemp + yFlingAngle > Math.PI / 2) {
yFlingAngleTemp = Math.PI / 2 - yFlingAngle;
}
if (yFlingAngleTemp + yFlingAngle < -Math.PI / 2) {
yFlingAngleTemp = -Math.PI / 2 - yFlingAngle;
}
//這里的0.1f是為了不上攝像機移動的過快
distanceX = 0.1f * (-distanceX) / getWindowManager().getDefaultDisplay().getWidth();
xFlingAngleTemp = distanceX * 180 / (Math.PI * 3);
mAngleX = (float) (3 * Math.cos(yFlingAngle + yFlingAngleTemp) * Math.sin(xFlingAngle + xFlingAngleTemp));
mAngleY = (float) (3 * Math.sin(yFlingAngle + yFlingAngleTemp));
mAngleZ = (float) (3 * Math.cos(yFlingAngle + yFlingAngleTemp) * Math.cos(xFlingAngle + xFlingAngleTemp));
glSurfaceView.requestRender();
} else if (me.getAction() == MotionEvent.ACTION_UP) {
xFlingAngle += xFlingAngleTemp;
yFlingAngle += yFlingAngleTemp;
}
return true;
}
class RenderListener implements GLSurfaceView.Renderer {
FloatBuffer verticalsBuffer;
int CAP = 9;//繪制球體時赦政,每次增加的角度
float[] verticals = new float[(180/CAP) * (360/CAP) * 6 * 3];
private final FloatBuffer mUvTexVertexBuffer;
private final float[] UV_TEX_VERTEX = new float[(180/CAP) * (360/CAP) * 6 * 2];
private int mProgram;
private int mPositionHandle;
private int mTexCoordHandle;
private int mMatrixHandle;
private int mTexSamplerHandle;
int[] mTexNames;
private final float[] mProjectionMatrix = new float[16];
private final float[] mCameraMatrix = new float[16];
private final float[] mMVPMatrix = new float[16];
private int mWidth;
private int mHeight;
public RenderListener() {
float x = 0;
float y = 0;
float z = 0;
float r = 3;//球體半徑
int index = 0;
int index1 = 0;
double d = CAP * Math.PI / 180;//每次遞增的弧度
for (int i = 0; i < 180; i += CAP) {
double d1 = i * Math.PI / 180;
for (int j = 0; j < 360; j += CAP) {
//獲得球體上切分的超小片矩形的頂點坐標(兩個三角形組成,所以有六點頂點)
double d2 = j * Math.PI / 180;
verticals[index++] = (float) (x + r * Math.sin(d1 + d) * Math.cos(d2 + d));
verticals[index++] = (float) (y + r * Math.cos(d1 + d));
verticals[index++] = (float) (z + r * Math.sin(d1 + d) * Math.sin(d2 + d));
//獲得球體上切分的超小片三角形的紋理坐標
UV_TEX_VERTEX[index1++] = (j + CAP) * 1f / 360;
UV_TEX_VERTEX[index1++] = (i + CAP) * 1f / 180;
verticals[index++] = (float) (x + r * Math.sin(d1) * Math.cos(d2));
verticals[index++] = (float) (y + r * Math.cos(d1));
verticals[index++] = (float) (z + r * Math.sin(d1) * Math.sin(d2));
UV_TEX_VERTEX[index1++] = j * 1f / 360;
UV_TEX_VERTEX[index1++] = i * 1f / 180;
verticals[index++] = (float) (x + r * Math.sin(d1) * Math.cos(d2 + d));
verticals[index++] = (float) (y + r * Math.cos(d1));
verticals[index++] = (float) (z + r * Math.sin(d1) * Math.sin(d2 + d));
UV_TEX_VERTEX[index1++] = (j + CAP) * 1f / 360;
UV_TEX_VERTEX[index1++] = i * 1f / 180;
verticals[index++] = (float) (x + r * Math.sin(d1 + d) * Math.cos(d2 + d));
verticals[index++] = (float) (y + r * Math.cos(d1 + d));
verticals[index++] = (float) (z + r * Math.sin(d1 + d) * Math.sin(d2 + d));
UV_TEX_VERTEX[index1++] = (j + CAP) * 1f / 360;
UV_TEX_VERTEX[index1++] = (i + CAP) * 1f / 180;
verticals[index++] = (float) (x + r * Math.sin(d1 + d) * Math.cos(d2));
verticals[index++] = (float) (y + r * Math.cos(d1 + d));
verticals[index++] = (float) (z + r * Math.sin(d1 + d) * Math.sin(d2));
UV_TEX_VERTEX[index1++] = j * 1f / 360;
UV_TEX_VERTEX[index1++] = (i + CAP) * 1f / 180;
verticals[index++] = (float) (x + r * Math.sin(d1) * Math.cos(d2));
verticals[index++] = (float) (y + r * Math.cos(d1));
verticals[index++] = (float) (z + r * Math.sin(d1) * Math.sin(d2));
UV_TEX_VERTEX[index1++] = j * 1f / 360;
UV_TEX_VERTEX[index1++] = i * 1f / 180;
}
}
verticalsBuffer = ByteBuffer.allocateDirect(verticals.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer()
.put(verticals);
verticalsBuffer.position(0);
mUvTexVertexBuffer = ByteBuffer.allocateDirect(UV_TEX_VERTEX.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer()
.put(UV_TEX_VERTEX);
mUvTexVertexBuffer.position(0);
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
mWidth = width;
mHeight = height;
mProgram = GLES20.glCreateProgram();
int vertexShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER);
GLES20.glShaderSource(vertexShader, VL);
GLES20.glCompileShader(vertexShader);
int fragmentShader = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER);
GLES20.glShaderSource(fragmentShader, FL);
GLES20.glCompileShader(fragmentShader);
GLES20.glAttachShader(mProgram, vertexShader);
GLES20.glAttachShader(mProgram, fragmentShader);
GLES20.glLinkProgram(mProgram);
mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
mTexCoordHandle = GLES20.glGetAttribLocation(mProgram, "a_texCoord");
mMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
mTexSamplerHandle = GLES20.glGetUniformLocation(mProgram, "s_texture");
mTexNames = new int[1];
GLES20.glGenTextures(1, mTexNames, 0);
//這里的全景圖需要長寬的比例使2:1耀怜,不然上下頂點會出現(xiàn)形變
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.qj3);
GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTexNames[0]);
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);
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);
GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);
bitmap.recycle();
float ratio = (float) height / width;
Matrix.frustumM(mProjectionMatrix, 0, -1, 1, -ratio, ratio, 3, 7);
}
@Override
public void onDrawFrame(GL10 gl) {
//調整攝像機焦點位置恢着,使畫面滾動
Matrix.setLookAtM(mCameraMatrix, 0, mAngleX, mAngleY, mAngleZ, 0, 0, 0, 0, 1, 0);
Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mCameraMatrix, 0);
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
GLES20.glUseProgram(mProgram);
GLES20.glEnableVertexAttribArray(mPositionHandle);
GLES20.glVertexAttribPointer(mPositionHandle, 3, GLES20.GL_FLOAT, false,
12, verticalsBuffer);
GLES20.glEnableVertexAttribArray(mTexCoordHandle);
GLES20.glVertexAttribPointer(mTexCoordHandle, 2, GLES20.GL_FLOAT, false, 0,
mUvTexVertexBuffer);
GLES20.glUniformMatrix4fv(mMatrixHandle, 1, false, mMVPMatrix, 0);
GLES20.glUniform1i(mTexSamplerHandle, 0);
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, (180/CAP) * (360/CAP) * 6);
GLES20.glDisableVertexAttribArray(mPositionHandle);
}
}
}