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

使用旋轉矢量傳感器
使用陀螺儀加上磁場傳感器
使用陀螺儀加上方向傳感器
使用6自由度姿態傳感器
或許還有其他方案

傳感器使用

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

//獲取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);

源碼

所有的代碼全部在一個項目中，託管在Github上，歡迎Star和Fork——Android OpenGLES 2.0系列博客的Demo

歡迎轉載，轉載請保留文章出處。湖廣午王的博客[http://blog.csdn.net/junzia/article/details/72803124]

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

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

繪製一個球

頂點座標和紋理座標計算

着色器

獲取矩陣

渲染

讓球與手機姿態同步

傳感器

傳感器使用

傳感器數據與渲染結合

進入天空球內部

源碼

STM32F103+RTT從零開始（三）—— S50門禁卡複製

Android Camera API/Camera2 API 相機預覽及濾鏡、貼紙等處理

Android視頻編碼——RGBA、RGB、BGRA、BGR轉YUV420P、YUV420SP

用RecyclerView實現移動應用中常見的列表菜單

Lua封裝&C++實踐（三）——Lua註冊C++構造函數

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結