第一部分 概念：

1) 引用

OpenGL ES 立方體貼圖本質(zhì)上還是紋理映射，是一種 3D 紋理映射。立方體貼圖所使的紋理稱為立方圖紋理，它是由 6 個(gè)單獨(dú)的 2D 紋理組成，每個(gè) 2D 紋理是立方圖的一個(gè)面。

立方圖紋理的采樣通過一個(gè) 3D 向量（s, t, r）作為紋理坐標(biāo)，這個(gè) 3D 向量只作為方向向量使用，OpenGL ES 獲取方向向量觸碰到立方圖表面上的紋理像素作為采樣結(jié)果。方向向量觸碰到立方圖表面對(duì)應(yīng)的紋理位置作為采樣點(diǎn)，要求立方圖的中心必須位于原點(diǎn)。

立方圖各個(gè)面的指定方法與 2D 紋理基本相同，且每個(gè)面必須為正方形（寬度和高度必須相同）。

2）應(yīng)用

3D紋理跟2D紋理差不多，都是要先生成一個(gè)紋理，再綁定，只是2D的是綁定到GL_TEXTURE_2D，而3D的是綁定到**GL_TEXTURE_CUBE_MAP**

GLuint textureID;
glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);

由于立方圖包含 6 個(gè)紋理，每個(gè)面對(duì)應(yīng)一個(gè)紋理，需要調(diào)用glTexImage2D函數(shù) 6 次，OpenGL ES 為立方圖提供了 6 個(gè)不同的紋理目標(biāo)，對(duì)應(yīng)立方圖的 6 個(gè)面，且 6 個(gè)紋理目標(biāo)按順序依次增 1。

glGenTextures(1, &m_TextureId);
glBindTexture(GL_TEXTURE_CUBE_MAP, m_TextureId);
for (int i = 0; i < m_vcImage.size(); ++i)
{
//6個(gè)面的紋理是挨個(gè)+1glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0,GL_RGBA, m_vcImage[i].width, m_vcImage[i].height, 0, GL_RGBA, GL_UNSIGNED_BYTE,m_vcImage[i].data);LOGD("glTexImage2D %d",i);
}
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
glBindTexture(GL_TEXTURE_CUBE_MAP, 0);

片段著色器也需要修改，采樣器變成了 samplerCube，并且紋理坐標(biāo)變成了三維方向向量。

#version 300 es
precision mediump float;
in vec3 v_texCoord;
layout(location = 0) out vec4 outColor;
uniform samplerCube s_SkyBox;
void main()
{outColor = texture(s_SkyBox, v_texCoord);
}

第二部分 實(shí)踐

天空盒內(nèi)繪制一個(gè)立方體，并讓立方體的表面反射它周圍環(huán)境的屬性

天空之盒的頂點(diǎn)著色器vSkyBox.vs

#version 300 es
precision mediump float;
layout(location = 0) in vec3 a_position;
uniform mat4 u_MVPMatrix;
out vec3 v_texCoord;
void main()
{gl_Position = u_MVPMatrix * vec4(a_position, 1.0);v_texCoord = a_position;
}

天空之盒的片段著色器fSkyBox.fs

#version 300 es
precision mediump float;
in vec3 v_texCoord;
layout(location = 0) out vec4 outColor;
uniform samplerCube s_SkyBox;//3D紋理為samplerCube類型
void main()
{outColor = texture(s_SkyBox, v_texCoord);
}

立方體的頂點(diǎn)著色器vCube.vs

#version 300 es
precision mediump float;
layout(location = 0) in vec3 a_position;
layout(location = 1) in vec3 a_normal;
uniform mat4 u_MVPMatrix;
uniform mat4 u_ModelMatrix;
out vec3 v_texCoord;
out vec3 v_normal;
void main()
{gl_Position = u_MVPMatrix * vec4(a_position, 1.0);v_normal = mat3(transpose(inverse(u_ModelMatrix))) * a_normal;v_texCoord = vec3(u_ModelMatrix * vec4(a_position, 1.0));
}

立方體的片段著色器fCube.fs

#version 300 es
precision mediump float;
in vec3 v_texCoord;
in vec3 v_normal;
layout(location = 0) out vec4 outColor;
uniform samplerCube s_SkyBox;
uniform vec3 u_cameraPos;
void main()
{float ratio = 1.00 / 1.52;vec3 I = normalize(v_texCoord - u_cameraPos);//反射vec3 R = reflect(I, normalize(v_normal));//折射//vec3 R = refract(I, normalize(v_normal), ratio);outColor = texture(s_SkyBox, R);
}

Skybox.h文件

//
// Created by CreatWall_zhouwen on 2023/5/23.
//#ifndef ELEVENSKYBOX_SKYBOX_H
#define ELEVENSKYBOX_SKYBOX_H
#include <GLES3/gl3.h>
#include <detail/type_mat.hpp>
#include <detail/type_mat4x4.hpp>
#include <vector>
#include <map>
#include "Const.h"
#define MATH_PI 3.1415926535897932384626433832802
class Skybox {
public:Skybox(){m_SamplerLoc = GL_NONE;m_MVPMatLoc = GL_NONE;m_TextureId = GL_NONE;m_SkyBoxVaoId = GL_NONE;m_AngleX = 0;m_AngleY = 0;m_ScaleX = 1.0f;m_ScaleY = 1.0f;m_ModelMatrix = glm::mat4(0.0f);};~Skybox(){};void CreateProgram(const char *ver, const char *frag,const char *curver, const char *curfrag);void Draw();static Skybox* GetInstance();static void DestroyInstance();void OnSurfaceChanged(int width, int height);void UpdateTransformMatrix(float rotateX, float rotateY, float scaleX, float scaleY);void UpdateMVPMatrix(glm::mat4 &mvpMatrix, int angleX, int angleY, float scale, float ratio);void getTexturedata(std::vector<struct ImageTyep> vcImagetemp);
private:GLuint m_TextureId;//紋理IDGLuint m_CubeProgramObj;//立方體工程GLuint m_ProgramObj;//天空盒工程GLuint m_VertexShader;GLuint m_FragmentShader;GLint m_SamplerLoc;//天空盒著色器中uinform變量GLint m_MVPMatLoc;GLint m_CubeSamplerLoc;//立方體著色器中uinform變量GLint m_CubeMVPMatLoc;GLint m_CubeModelMatLoc;GLint m_ViewPosLoc;GLuint m_CubeVaoId;GLuint m_CubeVboId;GLuint m_SkyBoxVaoId;GLuint m_SkyBoxVboId;std::vector<struct ImageTyep> m_vcImage;//存放紋理數(shù)據(jù)int srceenWidth, srceenHeight;//屏幕寬高glm::mat4 m_MVPMatrix;glm::mat4 m_ModelMatrix;int m_AngleX;int m_AngleY;float m_ScaleX;float m_ScaleY;
};#endif //ELEVENSKYBOX_SKYBOX_H

Skybox.cpp文件

//
// Created by CreatWall_zhouwen on 2023/5/23.
//#include "Skybox.h"
#include "Util.h"
#include "GLUtil.h"
#include <gtc/matrix_transform.hpp>
Skybox* m_pContext = nullptr;
#define TAG "DRAWTEXTURE"
GLfloat cubeVertices[] = {//position           //normal-0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,0.5f,  0.5f, -0.5f,  0.0f,  0.0f, -1.0f,0.5f,  0.5f, -0.5f,  0.0f,  0.0f, -1.0f,-0.5f,  0.5f, -0.5f,  0.0f,  0.0f, -1.0f,-0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,-0.5f, -0.5f, 0.5f,   0.0f,  0.0f,  1.0f,0.5f, -0.5f, 0.5f,   0.0f,  0.0f,  1.0f,0.5f,  0.5f, 0.5f,   0.0f,  0.0f,  1.0f,0.5f,  0.5f, 0.5f,   0.0f,  0.0f,  1.0f,-0.5f,  0.5f, 0.5f,   0.0f,  0.0f,  1.0f,-0.5f, -0.5f, 0.5f,   0.0f,  0.0f,  1.0f,-0.5f,  0.5f,  0.5f,  1.0f,  0.0f,  0.0f,-0.5f,  0.5f, -0.5f,  1.0f,  0.0f,  0.0f,-0.5f, -0.5f, -0.5f,  1.0f,  0.0f,  0.0f,-0.5f, -0.5f, -0.5f,  1.0f,  0.0f,  0.0f,-0.5f, -0.5f,  0.5f,  1.0f,  0.0f,  0.0f,-0.5f,  0.5f,  0.5f,  1.0f,  0.0f,  0.0f,0.5f,  0.5f,  0.5f,  1.0f,  0.0f,  0.0f,0.5f,  0.5f, -0.5f,  1.0f,  0.0f,  0.0f,0.5f, -0.5f, -0.5f,  1.0f,  0.0f,  0.0f,0.5f, -0.5f, -0.5f,  1.0f,  0.0f,  0.0f,0.5f, -0.5f,  0.5f,  1.0f,  0.0f,  0.0f,0.5f,  0.5f,  0.5f,  1.0f,  0.0f,  0.0f,-0.5f, -0.5f, -0.5f,  0.0f, -1.0f,  0.0f,0.5f, -0.5f, -0.5f,  0.0f, -1.0f,  0.0f,0.5f, -0.5f,  0.5f,  0.0f, -1.0f,  0.0f,0.5f, -0.5f,  0.5f,  0.0f, -1.0f,  0.0f,-0.5f, -0.5f,  0.5f,  0.0f, -1.0f,  0.0f,-0.5f, -0.5f, -0.5f,  0.0f, -1.0f,  0.0f,-0.5f, 0.5f, -0.5f,   0.0f,  1.0f,  0.0f,0.5f, 0.5f, -0.5f,   0.0f,  1.0f,  0.0f,0.5f, 0.5f,  0.5f,   0.0f,  1.0f,  0.0f,0.5f, 0.5f,  0.5f,   0.0f,  1.0f,  0.0f,-0.5f, 0.5f,  0.5f,   0.0f,  1.0f,  0.0f,-0.5f, 0.5f, -0.5f,   0.0f,  1.0f,  0.0f,
};GLfloat skyboxVertices[] = {// Positions-2.0f,  2.0f, -2.0f,-2.0f, -2.0f, -2.0f,2.0f, -2.0f, -2.0f,2.0f, -2.0f, -2.0f,2.0f,  2.0f, -2.0f,-2.0f,  2.0f, -2.0f,-2.0f, -2.0f,  2.0f,-2.0f, -2.0f, -2.0f,-2.0f,  2.0f, -2.0f,-2.0f,  2.0f, -2.0f,-2.0f,  2.0f,  2.0f,-2.0f, -2.0f,  2.0f,2.0f, -2.0f, -2.0f,2.0f, -2.0f,  2.0f,2.0f,  2.0f,  2.0f,2.0f,  2.0f,  2.0f,2.0f,  2.0f, -2.0f,2.0f, -2.0f, -2.0f,-2.0f, -2.0f,  2.0f,-2.0f,  2.0f,  2.0f,2.0f,  2.0f,  2.0f,2.0f,  2.0f,  2.0f,2.0f, -2.0f,  2.0f,-2.0f, -2.0f,  2.0f,-2.0f,  2.0f, -2.0f,2.0f,  2.0f, -2.0f,2.0f,  2.0f,  2.0f,2.0f,  2.0f,  2.0f,-2.0f,  2.0f,  2.0f,-2.0f,  2.0f, -2.0f,-2.0f, -2.0f, -2.0f,-2.0f, -2.0f,  2.0f,2.0f, -2.0f, -2.0f,2.0f, -2.0f, -2.0f,-2.0f, -2.0f,  2.0f,2.0f, -2.0f,  2.0f
};void Skybox::CreateProgram(const char *ver, const char *frag,const char *curver, const char *curfrag) {LOGD("CreateProgram Enter");m_ProgramObj = CreateGLProgram(ver, frag, m_VertexShader, m_FragmentShader);if (m_ProgramObj){m_SamplerLoc = glGetUniformLocation(m_ProgramObj, "s_SkyBox");m_MVPMatLoc = glGetUniformLocation(m_ProgramObj, "u_MVPMatrix");}else{LOGD("SkyBoxSample::Init create m_ProgramObj fail");return;}m_CubeProgramObj = CreateGLProgram(curver, curfrag, m_VertexShader, m_FragmentShader);if (m_CubeProgramObj){m_CubeSamplerLoc = glGetUniformLocation(m_CubeProgramObj, "s_SkyBox");m_CubeMVPMatLoc = glGetUniformLocation(m_CubeProgramObj, "u_MVPMatrix");m_CubeModelMatLoc = glGetUniformLocation(m_CubeProgramObj, "u_ModelMatrix");m_ViewPosLoc = glGetUniformLocation(m_CubeProgramObj, "u_cameraPos");}else{LOGD("SkyBoxSample::Init create m_CubeProgramObj fail");return;}LOGD("CreateProgram Leave");//創(chuàng)建天空盒的VBO 以及綁定VAOglGenBuffers(1, &m_SkyBoxVboId);glBindBuffer(GL_ARRAY_BUFFER, m_SkyBoxVboId);glBufferData(GL_ARRAY_BUFFER, sizeof(skyboxVertices), skyboxVertices, GL_STATIC_DRAW);glGenVertexArrays(1, &m_SkyBoxVaoId);//創(chuàng)建VAOglBindVertexArray(m_SkyBoxVaoId);glBindBuffer(GL_ARRAY_BUFFER, m_SkyBoxVboId);//綁定VBOglEnableVertexAttribArray(0);//綁定VBO數(shù)據(jù)glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (const void *) 0);glBindBuffer(GL_ARRAY_BUFFER, GL_NONE);glBindVertexArray(GL_NONE);//創(chuàng)建立方體的VBO 以及綁定VAOglGenBuffers(1, &m_CubeVboId);glBindBuffer(GL_ARRAY_BUFFER, m_CubeVboId);glBufferData(GL_ARRAY_BUFFER, sizeof(cubeVertices), cubeVertices, GL_STATIC_DRAW);glGenVertexArrays(1, &m_CubeVaoId);//創(chuàng)建VAOglBindVertexArray(m_CubeVaoId);glBindBuffer(GL_ARRAY_BUFFER, m_CubeVboId);//綁定VBOglEnableVertexAttribArray(0);//屬性O(shè)的數(shù)據(jù)glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (const void *) 0);glEnableVertexAttribArray(1);//屬性1的數(shù)據(jù) 對(duì)應(yīng)頂點(diǎn)著色器的location 1glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));glBindBuffer(GL_ARRAY_BUFFER, GL_NONE);glBindVertexArray(GL_NONE);
}void Skybox::Draw() {glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);glClearColor(0.2f, 0.9f, 0.3f, 1.0f);glEnable(GL_DEPTH_TEST);UpdateMVPMatrix(m_MVPMatrix, m_AngleX, m_AngleY, 1.0, (float) srceenWidth / srceenHeight);if (!m_TextureId){//create RGBA textureglGenTextures(1, &m_TextureId);glBindTexture(GL_TEXTURE_CUBE_MAP, m_TextureId);//綁定立體紋理for (int i = 0; i < m_vcImage.size(); ++i){//6個(gè)面的紋理是挨個(gè)+1glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0,GL_RGBA, m_vcImage[i].width, m_vcImage[i].height, 0, GL_RGBA, GL_UNSIGNED_BYTE,m_vcImage[i].data);LOGD("glTexImage2D %d",i);}glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);glBindTexture(GL_TEXTURE_CUBE_MAP, 0);LOGD("sizeof(m_vcImage) / sizeof(ImageTyep) = %d ", sizeof(m_vcImage) / sizeof(ImageTyep));}//畫天空盒g(shù)lUseProgram(m_ProgramObj);glBindVertexArray(m_SkyBoxVaoId);glUniformMatrix4fv(m_MVPMatLoc, 1, GL_FALSE, &m_MVPMatrix[0][0]);glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_CUBE_MAP, m_TextureId);glUniform1i(m_SamplerLoc, 0);glDrawArrays(GL_TRIANGLES, 0, 36);//畫立方體UpdateMVPMatrix(m_MVPMatrix, m_AngleX, m_AngleY, 0.4f, (float) srceenWidth / srceenHeight);glUseProgram(m_CubeProgramObj);glBindVertexArray(m_CubeVaoId);glUniformMatrix4fv(m_CubeMVPMatLoc, 1, GL_FALSE, &m_MVPMatrix[0][0]);glUniformMatrix4fv(m_CubeModelMatLoc, 1, GL_FALSE, &m_ModelMatrix[0][0]);glUniform3f(m_ViewPosLoc,  0.0f, 0.0f, 1.8f);glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_CUBE_MAP, m_TextureId);glUniform1i(m_CubeSamplerLoc, 0);glDrawArrays(GL_TRIANGLES, 0, 36);}Skybox *Skybox::GetInstance() {if (m_pContext == nullptr){m_pContext = new Skybox();}return m_pContext;
}void Skybox::DestroyInstance() {if (m_pContext){delete m_pContext;m_pContext = nullptr;}
}void Skybox::OnSurfaceChanged(int width, int height) {glViewport(0, 0, width, height);srceenWidth = width;srceenHeight = height;LOGD("OnSurfaceChanged Srceenwidth = %d, Srceenheight = %d, ratio = %f", width,height);
}void Skybox::UpdateTransformMatrix(float rotateX, float rotateY, float scaleX, float scaleY) {m_AngleX = static_cast<int>(rotateX);m_AngleY = static_cast<int>(rotateY);m_ScaleX = scaleX;m_ScaleY = scaleY;
}void Skybox::UpdateMVPMatrix(glm::mat4 &mvpMatrix, int angleX, int angleY, float scale, float ratio) {LOGD("SkyBoxSample::UpdateMVPMatrix angleX = %d, angleY = %d, ratio = %f", angleX,angleY, ratio);angleX = angleX % 360;angleY = angleY % 360;//轉(zhuǎn)化為弧度角float radiansX = static_cast<float>(MATH_PI / 180.0f * angleX);float radiansY = static_cast<float>(MATH_PI / 180.0f * angleY);// Projection matrix//glm::mat4 Projection = glm::ortho(-ratio, ratio, -1.0f, 1.0f, 0.0f, 100.0f);//glm::mat4 Projection = glm::frustum(-ratio, ratio, -1.0f, 1.0f, 4.0f, 100.0f);glm::mat4 Projection = glm::perspective(45.0f, ratio, 0.1f, 100.f);// View matrixglm::mat4 View = glm::lookAt(glm::vec3(0, 0, 1.8), // Camera is at (0,0,1), in World Spaceglm::vec3(0, 0, -1), // and looks at the originglm::vec3(0, 1, 0)  // Head is up (set to 0,-1,0 to look upside-down));// Model matrixglm::mat4 Model = glm::mat4(1.0f);Model = glm::scale(Model, glm::vec3(scale, scale, scale));Model = glm::rotate(Model, radiansX, glm::vec3(1.0f, 0.0f, 0.0f));Model = glm::rotate(Model, radiansY, glm::vec3(0.0f, 1.0f, 0.0f));Model = glm::translate(Model, glm::vec3(0.0f, 0.0f, 0.0f));m_ModelMatrix = Model;mvpMatrix = Projection * View * Model;
}void Skybox::getTexturedata(std::vector<struct ImageTyep> vcImagetemp) {m_vcImage = vcImagetemp;
}