android 使用opengl es2.0瀏覽全景圖片

先上效果圖


xx.gif

我是android opengl es的初學者银萍,有很多東西還不懂变勇,仍在學習;這里實現(xiàn)全景圖瀏覽的一個思路是贴唇,先使用opengl繪制一個球體搀绣,這個球體中心位置在手機屏幕的中心,球體的半徑為3戳气。默認攝像機的位置在球體正前方半徑為3的位置上链患,看著球體的中心,在收觸摸屏幕的時候瓶您,不斷調整攝像機的位置麻捻,但是保持距離球體中心的位置不變纲仍。

球體繪制成功后,將準備好的全景圖贸毕,貼在球體的表面郑叠,就完成了(不需要對全景圖進行特殊處理,我剛開始的思路是繪制一個正方體天空盒明棍,然后對全景圖進行處理乡革,獲得天空盒六個面的圖像,然后將圖像貼在六個面上摊腋,結果發(fā)現(xiàn)我不會沸版。。兴蒸。视粮。)。

這里涉及到
opengl的繪制橙凳,可以看看android opengl es2.0完全入門這篇文章

繪制球體蕾殴,opengl es2.0只能繪制點,線和三角形岛啸,如果要繪制球體的話区宇,需要將球體表面切分成成千上萬個小矩形,矩形又可以切分成三角形來繪制值戳,只要切分的夠細,看上去就是球體炉爆。


20150413014556970.png

繪制球體需要你掌握一點三維空間和三角函數(shù)的知識


91ef76c6a7efce1b0330108cad51f3deb48f6559.jpg

根據(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);
         
        }
    }
}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市财破,隨后出現(xiàn)的幾起案子掰派,更是在濱河造成了極大的恐慌,老刑警劉巖左痢,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件靡羡,死亡現(xiàn)場離奇詭異系洛,居然都是意外死亡,警方通過查閱死者的電腦和手機略步,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門描扯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人趟薄,你說我怎么就攤上這事绽诚。” “怎么了竟趾?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵憔购,是天一觀的道長。 經常有香客問我岔帽,道長玫鸟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任犀勒,我火速辦了婚禮屎飘,結果婚禮上,老公的妹妹穿的比我還像新娘贾费。我一直安慰自己钦购,他們只是感情好,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布褂萧。 她就那樣靜靜地躺著押桃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪导犹。 梳的紋絲不亂的頭發(fā)上唱凯,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天,我揣著相機與錄音谎痢,去河邊找鬼磕昼。 笑死,一個胖子當著我的面吹牛节猿,可吹牛的內容都是我干的票从。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼滨嘱,長吁一口氣:“原來是場噩夢啊……” “哼峰鄙!你這毒婦竟也來了?” 一聲冷哼從身側響起太雨,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤先馆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后躺彬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體煤墙,經...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡梅惯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了仿野。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铣减。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖脚作,靈堂內的尸體忽然破棺而出葫哗,到底是詐尸還是另有隱情,我是刑警寧澤球涛,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布劣针,位于F島的核電站,受9級特大地震影響亿扁,放射性物質發(fā)生泄漏捺典。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一从祝、第九天 我趴在偏房一處隱蔽的房頂上張望襟己。 院中可真熱鬧,春花似錦牍陌、人聲如沸擎浴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽贮预。三九已至,卻和暖如春契讲,著一層夾襖步出監(jiān)牢的瞬間萌狂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工怀泊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人误趴。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓霹琼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親凉当。 傳聞我的和親對象是個殘疾皇子枣申,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內容