概述
????360度全景圖是一種虛擬現實技術,它通過對現實場景進行多角度拍攝后,利用計算機軟件將這些照片拼接成一個完整的全景圖像。這種技術能夠讓觀看者在虛擬環境中以交互的方式查看整個周圍環境,就好像他們真的站在那個位置一樣。在Android設備上查看360度全景圖片,可以使用一些專門的app, 不如Google相冊, Google 街景, 第三方的全景圖片查看應用。這些應用程序能夠識別并以交互方式展示360度全景圖像,讓用戶可以旋轉、縮放和平移來探索整個場景。
????360全景圖片渲染可以使用openGLES來輕松實現.
實現
使用OpenGL 創建一個球體, 并將圖片紋理按一定的規則貼到球體的內部. 如上圖, 可以考慮將圖片等比例鋪滿球面展開的面積即可, 方法有很多, 可以按經度, 也可以按維度, 不同順序對結果沒影響.
參考代碼:
主界面
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import com.android.apitester.SphereView;public class SphereViewer extends Activity {SphereView sphereView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);Bitmap bm = BitmapFactory.decodeFile("/sdcard/sphere.jpg");sphereView = new SphereView(this);sphereView.setBitmap(bm);setContentView(sphereView);}
}
自定義GLSurfaceView
import android.content.Context;
import android.graphics.Bitmap;
import android.hardware.SensorManager;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.opengl.GLUtils;
import android.opengl.Matrix;
import android.os.SystemClock;
import android.view.MotionEvent;
import android.view.View;import com.ansondroider.acore.Logger;
import com.ansondroider.acore.opengl.EGLHelper;import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;public class SphereView extends GLSurfaceView implements GLSurfaceView.Renderer {final String TAG = "SphereView";private String vertextShaderSource = "attribute vec4 aPosition;" +"precision mediump float;" +"uniform mat4 uMatrix;" +"attribute vec2 aCoordinate;" +"varying vec2 vCoordinate;" +"attribute float alpha;" +"varying float inAlpha;" +"void main(){" +" gl_Position = uMatrix*aPosition;\n" +//" gl_Position = aPosition;" +" gl_PointSize = 10.0;" +" vCoordinate = aCoordinate;" +" inAlpha = alpha;" +"}";private String fragmentShaderSource = "#extension GL_OES_EGL_image_external : require\n" +"precision mediump float;" +"varying vec2 vCoordinate;" +"varying float inAlpha;" +//"uniform samplerExternalOES uTexture;" +"uniform sampler2D uTexture;" +"uniform bool isPoint;" +"void main() {" +" vec4 color = texture2D(uTexture, vCoordinate);" +" if(isPoint){" +" gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +" }else{" +" gl_FragColor = vec4(color.r, color.g, color.b, inAlpha);" +" }" +"}";//紋理IDprivate int mTextureId = -1;// 定義OpenGL 程序IDprivate int mProgram = -1;//矩陣變換接受者(shader中)private int mVertexMatrixHandler = -1;//頂點坐標接收者private int mVertexPosHandler = -1;//紋理坐標接受者private int mTexturePosHandler = -1;//紋理接受者private int mTextureHandler = -1;//半透明值接受者private int mAlphaHandler = -1;private int mPointHandler = -1;//矩陣private float[] mMatrix = new float[16];private float[] projectionMatrix = new float[16];//透明度private float mAlpha = 1f;public SphereView(Context context) {super(context);//A #16 pc 000000000000d348 [anon:dalvik-classes2.dex extracted in memory from /data/app/~~Kkld4fhSS0RUjHOLDPgB7w==/com.ansondroider.apitester-9-2nRYL85FvddCKlwbFEFw==/base.apk!classes2.dex] (com.ansondroider.apitester.sphere.SphereView.createGLPrg+36)//A #18 pc 000000000000d74a [anon:dalvik-classes2.dex extracted in memory from /data/app/~~Kkld4fhSS0RUjHOLDPgB7w==/com.ansondroider.apitester-9-2nRYL85FvddCKlwbFEFw==/base.apk!classes2.dex] (com.ansondroider.apitester.sphere.SphereView.onDrawFrame+138)setEGLContextClientVersion(2);setRenderer(this);setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {updateRotate(event);return true;}});}//if touching, stop sensor rotate.boolean touching;float dx, dy;float angStartX, angStartY;float angelTouchX, angelTouchY;public void updateRotate(MotionEvent e){if(e.getAction() == MotionEvent.ACTION_DOWN){touching = true;dx = e.getX();dy = e.getY();//float[] rot = {0, 0, 0};//provider.getAngle(rot);angStartX = angelTouchY;//rot[0];angStartY = angelTouchX;//rot[1];}else if(e.getAction() == MotionEvent.ACTION_MOVE){angelTouchY = angStartX + 180f * (e.getX() - dx) / getWidth();angelTouchX = angStartY + 180f * (e.getY() - dy) / getHeight();}else{touching = false;}}Bitmap tmpBm = null;boolean rebindTexture = false;public void setBitmap(Bitmap bm){//check mTextureId is -1, save bm to tmpBm;if(bm == null || bm.isRecycled())return;else tmpBm = bm;if(mTextureId >= 0){rebindTexture = true;}}float ratio = 1;//float frustumSize = 2.5f;float[] NEAR_FAR = {1.7f, 0.5f, 20f, 17f};float[] EYE_Z = {-0.06f, -3f, 3};float[] SCALE = {5f, 0.5f, 10};float[] FRUSTUM = {1, 1, 3};float[] RADIUS = {2.5f, 2, 3};/*** 初始化矩陣變換,主要是防止視頻拉伸變形*/private void initDefMatrix() {//Log.d(TAG, "initDefMatrix");//設置相機位置float[] viewMatrix = new float[16];Matrix.setLookAtM(viewMatrix, 0,0f, 0f, EYE_Z[0],0f, 0f, 0,0f, 1.0f, 0f);float[] rotSensor = new float[16];Matrix.setIdentityM(rotSensor, 0);float[] rotTouch = new float[16];Matrix.setIdentityM(rotTouch, 0);Matrix.rotateM(rotTouch, 0, -angelTouchX, 1, 0, 0);float rotY = -angelTouchY + (vtSphere != null ? vtSphere.getStartRotateY() : 0);Matrix.rotateM(rotTouch, 0, rotY, 0, 1, 0);Matrix.multiplyMM(viewMatrix, 0, rotSensor, 0, rotTouch, 0);// 參數解釋://result: 存儲乘法結果的矩陣數組。//resultOffset: 存儲結果矩陣的數組起始偏移量。//lhs: 左操作數矩陣(left-hand side)的數組。//lhsOffset: 左操作數矩陣的數組起始偏移量。//rhs: 右操作數矩陣(right-hand side)的數組。//rhsOffset: 右操作數矩陣的數組起始偏移量。//Matrix.multiplyMM(mMatrix, 0, projectionMatrix, 0, viewMatrix, 0);Matrix.multiplyMM(mMatrix, 0, projectionMatrix, 0, viewMatrix, 0);Matrix.scaleM(mMatrix, 0, SCALE[0], SCALE[0], SCALE[0]);}@Overridepublic void setAlpha(float alpha) {super.setAlpha(alpha);mAlpha = alpha;}/*** 創建并使用opengles程序*/private void createGLPrg() {//Logger.d(TAG, "createGLPrg");if (mProgram == -1) {int vertexShader = EGLHelper.compileVertexShader(vertextShaderSource);int fragmentShader = EGLHelper.compileFragmentShader(fragmentShaderSource);//創建programe陳谷mProgram = GLES20.glCreateProgram();//將頂點著色器加入程序GLES20.glAttachShader(mProgram, vertexShader);//將片元著色器加入程序GLES20.glAttachShader(mProgram, fragmentShader);GLES20.glLinkProgram(mProgram);//從程序中獲取句柄mVertexMatrixHandler = GLES20.glGetUniformLocation(mProgram, "uMatrix");mVertexPosHandler = GLES20.glGetAttribLocation(mProgram, "aPosition");mTextureHandler = GLES20.glGetUniformLocation(mProgram, "uTexture");mTexturePosHandler = GLES20.glGetAttribLocation(mProgram, "aCoordinate");mAlphaHandler = GLES20.glGetAttribLocation(mProgram, "alpha");mPointHandler = GLES20.glGetUniformLocation(mProgram, "isPoint");}//使用opengl程序if (mProgram != -1) GLES20.glUseProgram(mProgram);}@Overrideprotected void onDetachedFromWindow() {Logger.d(TAG, "onDetachedFromWindow");super.onDetachedFromWindow();GLES20.glDisableVertexAttribArray(mVertexPosHandler);GLES20.glDisableVertexAttribArray(mTexturePosHandler);GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);GLES20.glDeleteTextures(1, new int[]{mTextureId}, 0);GLES20.glDeleteProgram(mProgram);}@Overridepublic void onSurfaceCreated(GL10 gl, EGLConfig config) {Logger.d(TAG, "onSurfaceCreated");}@Overridepublic void onSurfaceChanged(GL10 gl, int width, int height) {Logger.d(TAG, "onSurfaceChanged");GLES20.glViewport(0, 0, width, height);ratio = (float) width / height;//m: 存儲結果矩陣的數組。//offset: 存儲結果矩陣的數組起始偏移量。//left : 近平面左邊界的 X 坐標值。//right : 近平面右邊界的 X 坐標值。//bottom: 近平面下邊界的 Y 坐標值。//top : 近平面上邊界的 Y 坐標值。//near : 近平面的 Z 坐標值(必須為正數)。//far : 遠平面的 Z 坐標值(必須為正數)。Matrix.frustumM(projectionMatrix, 0,-ratio*FRUSTUM[0], ratio*FRUSTUM[0],-FRUSTUM[0], FRUSTUM[0],NEAR_FAR[0], NEAR_FAR[3]);}void prepareTexture(){if((mTextureId < 0 || rebindTexture) && tmpBm != null){Logger.d(TAG, "setBitmap bind bitmap to texture " + mTextureId);if(mTextureId >= 0) {//check texture is bind, unbind.GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);GLES20.glDeleteTextures(1, new int[]{mTextureId}, 0);}//create texture and bind bitmap to itint[] textures = new int[1];GLES20.glGenTextures(1, textures, 0);mTextureId = textures[0];rebindTexture = false;//mTextureId is not -1, then bind Bitmap to mTextureId// 將 Bitmap 加載到紋理GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureId);// 設置紋理參數GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);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);GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, tmpBm, 0);tmpBm.recycle(); // 釋放 Bitmap 資源}}@Overridepublic void onDrawFrame(GL10 gl) {//Logger.d(TAG, "onDrawFrame");GLES20.glClearColor(bgRGBA[0], bgRGBA[1], bgRGBA[2], bgRGBA[3]);long ct = SystemClock.uptimeMillis();if(ct - last_fps > 1000) {last_fps = ct;fps = 0;}fps ++;prepareTexture();//drawBitmap_initBuffer();//清除顏色緩沖和深度緩沖GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);///GLES20.glEnable(GLES20.GL_DEPTH_TEST);if (mTextureId != -1) {initDefMatrix();//2/創建、編譯、啟動opengles著色器createGLPrg();//3.激活并綁定紋理單元///activateTexture();//5.開始繪制渲染doDraw();}}float[] bgRGBA = {0, 0, 0, 1};int fps = 0;long last_fps = SystemClock.uptimeMillis();/*** 開始繪制渲染*/SphereTexture vtSphere;public void doDraw() {//Logger.d(TAG, "doDraw");if(mMatrix == null)return;if(vtSphere == null){vtSphere = new SphereTexture(RADIUS[0], 32, 32,false);}// 綁定紋理GLES20.glActiveTexture(GLES20.GL_TEXTURE0);GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureId);GLES20.glUniform1i(mTextureHandler, 0);GLES20.glUniformMatrix4fv(mVertexMatrixHandler, 1, false, mMatrix, 0);GLES20.glVertexAttrib1f(mAlphaHandler, mAlpha);GLES20.glUniform1i(mPointHandler, vtSphere.isPoint() ? 1 : 0);vtSphere.draw(mVertexPosHandler, mTexturePosHandler);}}//Class SphereView end
球面頂點和紋理坐標的生成與渲染
import android.graphics.RectF;
import android.opengl.GLES20;
import android.opengl.Matrix;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import java.nio.ShortBuffer;public class SphereTexture extends VertexTexture{private float mRadius;private int mLat, mLong;private boolean mIs180;private float[] degreeLongitude;private float[] degreeLatitude;public SphereTexture(float radius, int latitudeBands, int longitudeBands,boolean is180) {mRadius = radius;mLat = latitudeBands;mLong = longitudeBands;mIs180 = is180;init();}@Overridepublic float getStartRotateY() {return 0;//mIs180 ? 180f: -90f;}@Overrideprotected void initVertexTextureCoordinate(){if(degreeLongitude == null) {degreeLongitude = new float[]{-_PI, _PI, _PI * 2};degreeLatitude = new float[]{-0, _PI, _PI};}mVertexCoors = new float[(mLat + 1) * (mLong + 1) * 3];mTextureCoors = new float[(mLat + 1) * (mLong + 1) * 2];mIndices = new short[mLat * mLong * 6];int vIndex = 0;int tIndex = 0;int iIndex = 0;for (int lat = 0; lat <= mLat; lat++) {float theta = degreeLatitude[0] + (float) lat / mLat * degreeLatitude[2];float sinTheta = (float) Math.sin(theta);float cosTheta = (float) Math.cos(theta);for (int lon = 0; lon <= mLong; lon++) {float phi = degreeLongitude[0] + (float) lon / mLong * degreeLongitude[2];//float phi = (float) lon / longitudeBands * 2 * (MAX_DEGREE_X);float sinPhi = (float) Math.sin(phi);float cosPhi = (float) Math.cos(phi);float x = cosPhi * sinTheta;float y = cosTheta;float z = sinPhi * sinTheta;mVertexCoors[vIndex] = mRadius * x;mVertexCoors[vIndex + 1] = mRadius * y;mVertexCoors[vIndex + 2] = mRadius * z;// 生成紋理坐標float u = (float) lon / mLong;float v = (float) lat / mLat;// 生成紋理坐標/*mTextureCoors[tIndex] = u;//xmTextureCoors[tIndex + 1] = v;//y*/RectF r = getTextureArea();mTextureCoors[tIndex] = r.left + r.width() * u;//xmTextureCoors[tIndex + 1] = r.top + r.height() * v;//yif (lat < mLat && lon < mLong) {int first = lat * (mLong + 1) + lon;int second = first + mLong + 1;mIndices[iIndex++] = (short) first;mIndices[iIndex++] = (short) second;mIndices[iIndex++] = (short) (first + 1);mIndices[iIndex++] = (short) second;mIndices[iIndex++] = (short) (second + 1);mIndices[iIndex++] = (short) (first + 1);/*first first + 1 ...|----------|-------------|| | || | |second|----------|-------------|| second + 1 || | || | ||----------|-------------|*/}vIndex += 3;tIndex += 2;}}}@Overridepublic void updateZ(float z) {super.updateZ(z);mRadius = z;initVertexTextureCoordinate();}@Overridepublic void draw(int mVertexPosHandler, int mTexturePosHandler) {// 綁定頂點緩沖區GLES20.glEnableVertexAttribArray(mVertexPosHandler);mVertexBuffer.position(0);GLES20.glVertexAttribPointer(mVertexPosHandler, 3, GLES20.GL_FLOAT, false, 0, mVertexBuffer);// 綁定紋理坐標緩沖區GLES20.glEnableVertexAttribArray(mTexturePosHandler);mTextureBuffer.position(0);GLES20.glVertexAttribPointer(mTexturePosHandler, 2, GLES20.GL_FLOAT, false, 0, mTextureBuffer);// 綁定紋理//if(textureId > -1)GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId);// 繪制球體if(!isPoint()) {GLES20.glDrawElements(GLES20.GL_TRIANGLES, getIndexCount(),GLES20.GL_UNSIGNED_SHORT, mIndexBuffer);}elseGLES20.glDrawArrays(GLES20.GL_POINTS, 0, getVertexCount());GLES20.glDisableVertexAttribArray(mVertexPosHandler);GLES20.glDisableVertexAttribArray(mTexturePosHandler);}}
最終效果:
參考
- Android OpenGLES3繪圖:球形視頻播放器
- Android 使用 OpenGL ES 繪制球面