2. 程式人生 > >Android OpenGLES2.0（十七）——球形天空盒VR效果實現

Android OpenGLES2.0（十七）——球形天空盒VR效果實現

阿新 • • 發佈：2019-01-01

在3D遊戲中通常都會用到天空盒，在3D引擎中也一般會存在天空盒元件，讓開發者可以直接使用。那麼天空盒是什麼？天空盒又是如何實現的呢？本篇部落格主要介紹如何在Android中利用OpenGLES繪製一個天空盒，並實現VR效果。

天空盒、天空穹、天空球和VR

雖然大多數人知道這些東西是啥，但是我覺得我還是有必要把他們的定義“搬”過來，萬一有人不知道呢。

  • 天空盒（Sky Box）是放到場景中的一個立方體，經常是由六個面組成的立方體，並經常會隨著視點的移動而移動。天空盒將刻畫極遠處人無法達到的位置的景物。
  • 天空穹（Sky Dome）與天空盒類似，只不過它將是天空盒除底面以外的五個面換成了一個曲面，可以理解成一個半球。和古人認為的天圓地方差不多。
  • 天空球（Sky Sphere）就是把天空盒直接換成一個球——聽說沒有天空球這個說法？無所謂了，現在有了。
  • VR（Virtual Reality）虛的定義不說了，本篇部落格所說的VR效果就是手機上顯示的影象由手機的姿態來控制而已。

天空盒的實現應該是最簡單的，但是效果可能會有些瑕疵，尤其是頂著兩面的交點處總能看出點不同。天空穹和天空球效果都差不多，會比天空盒好上很多，但是相對天空盒來說，比較耗效能。

繪製一個球

在之前的部落格中Android OpenGLES2.0（六）——構建圓錐、圓柱和球體有介紹如何繪製一個球，只不過之前的球是沒有貼圖的，現在我們繪製一個球，併為它貼上環境的貼圖。就像繪製一個地球儀一樣。

頂點座標和紋理座標計算

首先，首先我們需要得到球的頂點座標和紋理座標：

//計算頂點座標和紋理座標
private void calculateAttribute(){
    ArrayList<Float> alVertix = new ArrayList<>();
    ArrayList<Float> textureVertix = new ArrayList<>();
    for (double vAngle = 0; vAngle < Math.PI; vAngle = vAngle + angleSpan){

        for
 
 (double hAngle = 0; hAngle < 2*Math.PI; hAngle = hAngle + angleSpan){
            float x0 = (float) (radius* Math.sin(vAngle) * Math.cos(hAngle));
            float y0 = (float) (radius* Math.sin(vAngle) * Math.sin(hAngle));
            float z0 = (float) (radius * Math.cos((vAngle)));

            float x1 = (float) (radius* Math.sin(vAngle) * Math.cos(hAngle + angleSpan));
            float y1 = (float) (radius* Math.sin(vAngle) * Math.sin(hAngle + angleSpan));
            float z1 = (float) (radius * Math.cos(vAngle));

            float x2 = (float) (radius* Math.sin(vAngle + angleSpan) * Math.cos(hAngle + angleSpan));
            float y2 = (float) (radius* Math.sin(vAngle + angleSpan) * Math.sin(hAngle + angleSpan));
            float z2 = (float) (radius * Math.cos(vAngle + angleSpan));

            float x3 = (float) (radius* Math.sin(vAngle + angleSpan) * Math.cos(hAngle));
            float y3 = (float) (radius* Math.sin(vAngle + angleSpan) * Math.sin(hAngle));
            float z3 = (float) (radius * Math.cos(vAngle + angleSpan));

            float s0 = (float) (hAngle / Math.PI/2);
            float s1 = (float) ((hAngle + angleSpan)/Math.PI/2);
            float t0 = (float) (vAngle / Math.PI);
            float t1 = (float) ((vAngle + angleSpan) / Math.PI);

            alVertix.add(x1);
            alVertix.add(y1);
            alVertix.add(z1);
            alVertix.add(x0);
            alVertix.add(y0);
            alVertix.add(z0);
            alVertix.add(x3);
            alVertix.add(y3);
            alVertix.add(z3);

            textureVertix.add(s1);// x1 y1對應紋理座標
            textureVertix.add(t0);
            textureVertix.add(s0);// x0 y0對應紋理座標
            textureVertix.add(t0);
            textureVertix.add(s0);// x3 y3對應紋理座標
            textureVertix.add(t1);

            alVertix.add(x1);
            alVertix.add(y1);
            alVertix.add(z1);
            alVertix.add(x3);
            alVertix.add(y3);
            alVertix.add(z3);
            alVertix.add(x2);
            alVertix.add(y2);
            alVertix.add(z2);

            textureVertix.add(s1);// x1 y1對應紋理座標
            textureVertix.add(t0);
            textureVertix.add(s0);// x3 y3對應紋理座標
            textureVertix.add(t1);
            textureVertix.add(s1);// x2 y3對應紋理座標
            textureVertix.add(t1);
        }
    }
    vCount = alVertix.size() / 3;
    posBuffer = convertToFloatBuffer(alVertix);
    cooBuffer=convertToFloatBuffer(textureVertix);
}

//動態陣列轉FloatBuffer
private FloatBuffer convertToFloatBuffer(ArrayList<Float> data){
    float[] d=new float[data.size()];
    for (int i=0;i<d.length;i++){
        d[i]=data.get(i);
    }

    ByteBuffer buffer=ByteBuffer.allocateDirect(data.size()*4);
    buffer.order(ByteOrder.nativeOrder());
    FloatBuffer ret=buffer.asFloatBuffer();
    ret.put(d);
    ret.position(0);
    return ret;
}

著色器

相應的頂點著色器和片元著色器分別為:

//頂點著色器
uniform mat4 uProjMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uModelMatrix;
uniform mat4 uRotateMatrix;

attribute vec3 aPosition;
attribute vec2 aCoordinate;

varying vec2 vCoordinate;

void main(){
    gl_Position=uProjMatrix*uViewMatrix*uModelMatrix*vec4(aPosition,1);
    vCoordinate=aCoordinate;
}
//片元著色器
precision highp float;

uniform sampler2D uTexture;
varying vec2 vCoordinate;

void main(){
   vec4 color=texture2D(uTexture,vCoordinate);
   gl_FragColor=color;
}

獲取矩陣

準備好了頂點座標、紋理座標和著色器，從頂點著色器中可以看出，我們還需要幾個變換矩陣，變換矩陣求取：

 public void setSize(int width,int height){
        //計算寬高比
        float ratio=(float)width/height;
        //透視投影矩陣/視錐
        MatrixHelper.perspectiveM(mProjectMatrix,0,45,ratio,1f,300);
        //設定相機位置
        Matrix.setLookAtM(mViewMatrix, 0, 0f, 0.0f,5.0f, 0.0f, 0.0f,-1.0f, 0f,1.0f, 0.0f);
        //模型矩陣
        Matrix.setIdentityM(mModelMatrix,0);
    }

渲染

這樣，萬事俱備，我們就可以編譯glprogram，並進行球體的渲染了：

//編譯glprogram並獲取控制控制代碼(onSurfaceCreated時呼叫)
mHProgram=Gl2Utils.createGlProgramByRes(res,"vr/skysphere.vert","vr/skysphere.frag");
mHProjMatrix=GLES20.glGetUniformLocation(mHProgram,"uProjMatrix");
mHViewMatrix=GLES20.glGetUniformLocation(mHProgram,"uViewMatrix");
mHModelMatrix=GLES20.glGetUniformLocation(mHProgram,"uModelMatrix");
mHUTexture=GLES20.glGetUniformLocation(mHProgram,"uTexture");
mHPosition=GLES20.glGetAttribLocation(mHProgram,"aPosition");
mHCoordinate=GLES20.glGetAttribLocation(mHProgram,"aCoordinate");

//使用Program進行渲染（onDrawFrame中呼叫）
GLES20.glUseProgram(mHProgram);
GLES20.glUniformMatrix4fv(mHProjMatrix,1,false,mProjectMatrix,0);
GLES20.glUniformMatrix4fv(mHViewMatrix,1,false,mViewMatrix,0);
GLES20.glUniformMatrix4fv(mHModelMatrix,1,false,mModelMatrix,0);
GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,textureId);

GLES20.glEnableVertexAttribArray(mHPosition);
GLES20.glVertexAttribPointer(mHPosition,3,GLES20.GL_FLOAT,false,0,posBuffer);
GLES20.glEnableVertexAttribArray(mHCoordinate);
GLES20.glVertexAttribPointer(mHCoordinate,2,GLES20.GL_FLOAT,false,0,cooBuffer);
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vCount);

GLES20.glDisableVertexAttribArray(mHCoordinate);
GLES20.glDisableVertexAttribArray(mHPosition);

其中紋理圖片如下：
這裡寫圖片描述

渲染的結果如下：
這裡寫圖片描述

讓球與手機姿態同步

繪製出球體之後，我們需要讓球與手機的姿態進行同步，也就是當手機背面超下時，我們看到的應該是地面，手機背面朝上是，我們看到的應該是天空。很明顯，這就需要用到手機中的感測器了。

感測器

Android中的感測器定義如下：

//加速度感測器
public static final int TYPE_ACCELEROMETER = 1;
//磁場感測器
public static final int TYPE_MAGNETIC_FIELD = 2;
//方向感測器，已廢棄
public static final int TYPE_ORIENTATION = 3;
//陀螺儀
public static final int TYPE_GYROSCOPE = 4;
//光線感測器，接聽電話黑屏
public static final int TYPE_LIGHT = 5;
//壓力感測器
public static final int TYPE_PRESSURE = 6;
//溫度感測器，已廢棄
public static final int TYPE_TEMPERATURE = 7;
//近程感測器（接聽電話黑屏)
public static final int TYPE_PROXIMITY = 8;
//重力感測器
public static final int TYPE_GRAVITY = 9;
//線性加速度感測器
public static final int TYPE_LINEAR_ACCELERATION = 10;
//旋轉向量感測器
public static final int TYPE_ROTATION_VECTOR = 11;
//溼度感測器
public static final int TYPE_RELATIVE_HUMIDITY = 12;
//環境溫度感測器
public static final int TYPE_AMBIENT_TEMPERATURE = 13;
//未校準磁力感測器
public static final int TYPE_MAGNETIC_FIELD_UNCALIBRATED = 14;
//旋轉向量感測器，用來探測運動而不必受到電磁干擾的影響,因為它並不依賴於磁北極
public static final int TYPE_GAME_ROTATION_VECTOR = 15;
//未校準陀螺儀感測器
public static final int TYPE_GYROSCOPE_UNCALIBRATED = 16;
//特殊動作觸發感測器
public static final int TYPE_SIGNIFICANT_MOTION = 17;
//步行探測器
public static final int TYPE_STEP_DETECTOR = 18;
//計步器
public static final int TYPE_STEP_COUNTER = 19;
//地磁旋轉向量感測器
public static final int TYPE_GEOMAGNETIC_ROTATION_VECTOR = 20;
//心率感測器
public static final int TYPE_HEART_RATE = 21;
//傾斜探測器，隱藏的systemApi
public static final int TYPE_TILT_DETECTOR = 22;
//喚醒手勢感測器，隱藏的systemApi
public static final int TYPE_WAKE_GESTURE = 23;
//快速手勢，隱藏的systemApi
public static final int TYPE_GLANCE_GESTURE = 24;
//裝置擡起手勢，隱藏的systemApi
public static final int TYPE_PICK_UP_GESTURE = 25;
//腕關節擡起手勢，隱藏的systemApi
public static final int TYPE_WRIST_TILT_GESTURE = 26;
//裝置方向感測器，隱藏的systemApi
public static final int TYPE_DEVICE_ORIENTATION = 27;
//6自由度姿態感測器
public static final int TYPE_POSE_6DOF = 28;
//靜止探測器
public static final int TYPE_STATIONARY_DETECT = 29;
//手勢感測器
public static final int TYPE_MOTION_DETECT = 30;
//心跳感測器
public static final int TYPE_HEART_BEAT = 31;
//感測器動態新增和刪除，隱藏的systemApi
public static final int TYPE_DYNAMIC_SENSOR_META = 32;

雖然在API中定義了這麼多的感測器，然後實際上絕大多書手機都不會具備所有的感測器。所以當我們在使用某個感測器時，一定要檢測這個感測器是否存在。
根據我們的需求，我們需要獲得的是手機的姿態，所以上面的感測器中，我們能使用的方案如下：

  1. 使用旋轉向量感測器
  2. 使用陀螺儀加上磁場感測器
  3. 使用陀螺儀加上方向感測器
  4. 使用6自由度姿態感測器
  5. 或許還有其他方案

感測器使用

我們直接使用旋轉向量感測器來獲取手機姿態。感測器的使用相對來說比較簡單：

//獲取SensorManager
mSensorManager=(SensorManager)getSystemService(Context.SENSOR_SERVICE);
List<Sensor> sensors=mSensorManager.getSensorList(Sensor.TYPE_ALL);
//todo 判斷是否存在rotation vector sensor
//獲取旋轉向量感測器
mRotation=mSensorManager.getDefaultSensor(Sensor.TYPE_ROTATION_VECTOR);
//註冊感測器  監聽器     mSensorManager.registerListener(this,mRotation,SensorManager.SENSOR_DELAY_GAME);

然後再監聽器中處理資料就可以了：

@Override
public void onSensorChanged(SensorEvent event) {
    SensorManager.getRotationMatrixFromVector(matrix,event.values);
    mSkySphere.setMatrix(matrix);
}

@Override
public void onAccuracyChanged(Sensor sensor, int accuracy) {

}

感測器資料與渲染結合

利用旋轉向量感測器我們很方便的獲得了一個旋轉矩陣，將這個矩陣傳遞到頂點著色器我們就可以讓球體隨著手機的姿態變化而變化了。
修改頂點著色器中頂點的計算為：

gl_Position=uProjMatrix*uViewMatrix*uRotateMatrix*uModelMatrix*vec4(aPosition,1);

然後獲取旋轉矩陣的控制代碼並將旋轉矩陣傳遞進來：

mHRotateMatrix=GLES20.glGetUniformLocation(mHProgram,"uRotateMatrix");
GLES20.glUniformMatrix4fv(mHRotateMatrix,1,false,mRotateMatrix,0);

這樣，球的旋轉就和手機姿態同步了
這裡寫圖片描述這裡寫圖片描述

然而我們需要的，並不是這樣的結果，仔細想想，天空球模式的話，相機應該是在球的內部，我們看天空看大地，左看右看的時候，應該是人相機在動，而不是球在動。而我們現在看到的卻是球自己轉動。問題出在哪兒呢？
從gl_Position=uProjMatrix*uViewMatrix*uRotateMatrix*uModelMatrix*vec4(aPosition,1);中可以看到，頂點的座標計算中，我們是用從感測器獲得的旋轉矩陣在模型矩陣前，這樣我們的旋轉操作的就是球體，修改為：

gl_Position=uProjMatrix*uRotateMatrix*uViewMatrix*uModelMatrix*vec4(aPosition,1);

這樣，我們操作的就是相機了，得到的渲染結果如下，當攝像頭對的方向變話，球在螢幕上的位置也會發生變換，就像我們頭轉動時，看到的東西在我們眼睛中成像的位置也會發生變話。
這裡寫圖片描述這裡寫圖片描述

進入天空球內部

完成上述操作，我們裡成功就剩下一步之遙了。上面的操作，我們始終在球的外面看球，就如同我們在外太空看地球一樣。現在我們需要回到球的內部來看球。在獲取矩陣時，我們的檢視矩陣求法如下：

 //設定相機位置
 //第一個引數為最終的矩陣儲存陣列，第二個引數為陣列的偏移
 //第3-5個引數為相機位置，第6-8個引數為相機視線方向，第9-11個引數為相機的up方向
 Matrix.setLookAtM(mViewMatrix, 0, 0f, 0.0f,5.0f, 0.0f, 0.0f,-1.0f, 0f,1.0f, 0.0f);

根據上面矩陣可以看到，很簡單，我們只需要將相機位置改為球的圓心就可以了，當然也可以是球內的其他位置，但是效果上肯定是不如讓相機和球心重合。

Matrix.setLookAtM(mViewMatrix, 0, 0f, 0.0f,0.0f, 0.0f, 0.0f,-1.0f, 0f,1.0f, 0.0f);

這裡寫圖片描述這裡寫圖片描述

原始碼

相關推薦

Android OpenGLES2.0（十七）——球形天空盒VR效果實現

在3D遊戲中通常都會用到天空盒，在3D引擎中也一般會存在天空盒元件，讓開發者可以直接使用。那麼天空盒是什麼？天空盒又是如何實現的呢？本篇部落格主要介紹如何在Android中利用OpenGLES繪製一個天空盒，並實現VR效果。 天空盒、天空穹、天空球和VR

Android OpenGLES2.0（十六）——3D模型貼圖及光照處理（obj+mtl）

在Android OpenGLES2.0（十四）——Obj格式3D模型載入中實現了Obj格式的3D模型的載入，載入的是一個沒有貼圖，沒有光照處理的帽子，為了呈現出立體效果，“手動”加了光照，擁有貼圖的紋理及光照又該怎麼載入呢？ 模型檔案 本篇部落格例子中

Android OpenGLES2.0（十二）——FBO離屏渲染

之前的部落格我們所做的示例都是直接渲染到螢幕上的，如果我們並不需要渲染到螢幕上，也就是離屏渲染，該怎麼做呢？FBO離屏渲染是一個很好的選擇。在這篇部落格中，我們將以渲染攝像頭資料為例，使用FBO進行離屏渲染。 關於FBO離屏渲染 所謂的FBO就是Fram

Android OpenGLES2.0（十）——OpenGL中的平移、旋轉、縮放

在前面的部落格中，所有的例子都是一個物件，類似繪製圓錐繪製圓柱，我們都是傳入一個引數，然後去控制那個圓面的位置，如果我們要繪製幾個個正方形，它的位置、大小、方向都是不相同的，按照那種方式該多麻煩啊。所以我們需要更好的辦法——矩陣變換。 什麼是矩陣 其實在

Android開發系列（十七）：讀取assets文件夾下的數據庫文件

pack 取數 code ada tracking 編寫 數據庫 sdn where 在做Android應用的時候，不可避免要用到數據庫。可是當我們把應用的apk部署到真機上的時候，已經創建好的數據庫及其裏邊的數據是不能隨著apk一起安裝到真機上的。 （PS:這篇

Android問題集錦（十七）- Error running 'app': Please select Android SDK

在AS中執行專案，提示報錯如下： Error running 'app': Please select Android SDK 其實這個問題之前遇到一次，也解決了，解決方案如下： 開啟Android Studio報錯“Error running ***: Please sel

redis原始碼分析與思考（十七）——有序集合型別的命令實現(t_zset.c)

    有序集合是集合的延伸，它儲存著集合元素的不可重複性，但不同的是，它是有序的，它利用每一個元素的分數來作為有序集合的排序依據，現在列出有序集合的命令： 有序集合命令 命令 對應操作 時

redis原始碼分析與思考（十七）——有序集合型別的命令實現(t_set.c)

    有序集合是集合的延伸，它儲存著集合元素的不可重複性，但不同的是，它是有序的，它利用每一個元素的分數來作為有序集合的排序依據，現在列出有序集合的命令： 有序集合命令 命令 對應操作 時間複

Flask1.0.2系列（十七） 命令列介面

英文原文地址：http://flask.pocoo.org/docs/1.0/cli/ 若有翻譯錯誤或者不盡人意之處，請指出，謝謝~         在你的虛擬環境中安裝Flask的時候會安裝flask指令碼——一個Click命令列

Android Multimedia框架總結（十七）音訊開發基礎知識

近年來，唱吧，全民K歌，QQ音樂，等成為音頻軟體的主流力量，音訊開發一直是多媒體開發中不可或缺的部分，如為什麼這個聲音這麼不清楚，為什麼耳機裡有電流聲，為什麼錄音時，有時會碰到奇怪的回聲，先看下今天的A

Android OpenGLES2.0（五）——繪製立方體

上篇部落格中我們提到了OpenGLES中繪製的兩種方法，頂點法和索引法。之前我們所使用的都是頂點法，這次繪製立方體使用索引法來繪製立方體。 構建立方體 上篇部落格講到正方形的繪製，立方體是是由六個正方形組成，我們將這六個正方形繪製出來，立方體就繪製完畢了

Android學習 （十七） 把GSON庫新增Android studio專案中

在用GSON解析JSON的時候，會用到GSON，GSON 是google解析JSON的一個開源框架。 1）下載得到資源包： 2）把資源包放在專案的libs資料夾下面。 3）在app資料夾上右鍵，選擇Open Module Settings 4）選

Android OpenGLES2.0（十三）——流暢的播放逐幀動畫

在當前很多直播應用中，擁有給主播送禮物的功能，當用戶點選贈送禮物後，視訊介面上會出現比較炫酷的禮物特效。這些特效，有的是用粒子效果做成的，但是更多的時用播放逐幀動畫實現的，本篇部落格將會講解在Android下如何利用OpenGLES流暢的播放逐幀動畫。在本篇部落

Cocos2dx 3.0 過渡篇（十七） std::bind與CC_CALLBACK不得不說的故事

本篇的主題就是揭露CC_CALLBACK 與 std::bind之間不可告人的祕密...... 首先看一段程式碼： //先是建立3個精靈 boy = Sprite::create("boy.png");//建立boy boy->setPosition(Point(v

Android OpenGLES2.0（四）——正方形和圓形

上篇部落格中我們已經使用到了相機和投影，利用變換矩陣，繪製出了等腰直角三角形。在本篇部落格中，我們繪製正方形和圓形同樣少不了變換矩陣。 構建正方形和圓形 前面提到過，在OpenGLES的世界裡面是沒有正方形和圓形的，只有點、線、三角形。三角形就是Open

Android OpenGLES2.0（一）——瞭解OpenGLES2.0

什麼是OpenGL ES？ OpenGL（全寫Open Graphics Library）是指定義了一個跨程式語言、跨平臺的程式設計介面規格的專業的圖形程式介面。它用於三維影象（二維的亦可），是一個功能強大，呼叫方便的底層圖形庫。 OpenGL在不同

​瀏覽網頁下載文件命令（十七）

background 下載工具 version 後臺運行 日誌記錄 下載工具：wget瀏覽網頁：curl，elinks，nslookup13.1.wget功能：非交互式網絡下載語法：wget [option]... [URL]...常用選項：啟動：-b, --background

Android學習路線（十二）Activity生命周期——啟動一個Activity

-c out 方式 下載地址 生命 後臺線程 ring lan debug DEMO下載地址：http://download.csdn.net/detail/sweetvvck/7728735 不像其他的編程模式那樣應用是通過main()函數啟動的。Android系

iOS學習筆記（十七）——文件操作（NSFileManager）

技術分享 append hint pbo -cp fcm object 寫入 rtmp http://blog.csdn.net/xyz_lmn/article/details/8968213 iOS的沙盒機制，應用只能訪問自己應用目錄下的文件。ios不像Androi

python學習（十七） 擴展python

生成 實現 語言 擴展 運行速度 ava python學習 簡單 用c語言實現 c, c++, java比python快幾個數量級。 17.1 考慮哪個更重要 開發速度還是運行速度更重要。 17.2 非常簡單的途徑：Jython和IronPython Jython可以直接訪