OpenGL ES学习之路(7.0) 地球与月亮旋转

作者: velue | 来源:发表于2019-03-05 20:59 被阅读0次

目的

本案例主要实现月亮围绕着地球自转功能，同时可以切换透视投影或正投影，通过GLKit来实现效果

效果

image.png

案例流程图

image.png

案例源码

案例主要分为7个步骤：在viewDidLoad当中设置步骤
步骤的配置


#import "AGLKVertexAttribArrayBuffer.h"
#import "sphere.h"

//场景地球轴倾斜度
static const GLfloat SceneEarthAxialTiltDeg = 23.5f;
//月球轨道日数
static const GLfloat SceneDaysPerMoonOrbit = 28.0f;
//半径
static const GLfloat SceneMoonRadiusFractionOfEarth = 0.25;
//月球距离地球的距离
static const GLfloat SceneMoonDistanceFromEarth = 2.0f;



@interface CCViewController ()

@property(nonatomic,strong)EAGLContext *mContext;

//顶点positionBuffer
@property(nonatomic,strong)AGLKVertexAttribArrayBuffer *vertexPositionBuffer;

//顶点NormalBuffer
@property(nonatomic,strong)AGLKVertexAttribArrayBuffer *vertexNormalBuffer;

//顶点TextureCoordBuffer
@property(nonatomic,strong)AGLKVertexAttribArrayBuffer *vertextTextureCoordBuffer;

//光照、纹理
@property(nonatomic,strong)GLKBaseEffect *baseEffect;

//不可变纹理对象数据,地球纹理对象
@property(nonatomic,strong)GLKTextureInfo *earchTextureInfo;

//月亮纹理对象
@property(nonatomic,strong)GLKTextureInfo *moomTextureInfo;

//模型视图矩阵
//GLKMatrixStackRef CFType 允许一个4*4 矩阵堆栈
@property(nonatomic,assign)GLKMatrixStackRef modelViewMatrixStack;

//地球的旋转角度
@property(nonatomic,assign)GLfloat earthRotationAngleDegress;
//月亮旋转的角度
@property(nonatomic,assign)GLfloat moonRotationAngleDegress;


@end

1.设置新建OpenGl ES上下文

//1.新建OpenGL ES 上下文
    self.mContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];

2.获取GLkView并设置属性，属性分为颜色格式(drawableColorFormat)和深度缓冲区的格式(drawableDepthFormat),并开启深度测试


    //2.获取GLKView
    GLKView *view = (GLKView *)self.view;
    view.context = self.mContext;
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24; //设置深度缓冲区的格式
    
    [EAGLContext setCurrentContext:self.mContext];

    
    //开启深度测试
    glEnable(GL_DEPTH_TEST);

3.创建GLKBaseEffect 光照信息

    self.baseEffect = [[GLKBaseEffect alloc] init];
    //配置baseEffect光照信息
    [self configureLight];

    
-(void)configureLight
{
    //开启light0光照
    self.baseEffect.light0.enabled = GL_TRUE;
    
    /*
     union _GLKVector4
     {
     struct { float x, y, z, w; };
     struct { float r, g, b, a; };
     struct { float s, t, p, q; };
     float v[4];
     } __attribute__((aligned(16)));
     typedef union _GLKVector4 GLKVector4;
     
     union共用体
     有3个结构体，
     比如表示顶点坐标的x,y,z,w
     比如表示颜色的，RGBA;
     表示纹理的stpq
     
     */
    //2.设置漫射光颜色,分别是red，green，blue，alpha
    self.baseEffect.light0.diffuseColor = GLKVector4Make(1.0f, 1.0f, 1.0f, 1.0f);
    
    /*
     The position of the light in world coordinates.
     世界坐标中的光的位置。
     If the w component of the position is 0.0, the light is calculated using the directional light formula. The x, y, and z components of the vector specify the direction the light shines. The light is assumed to be infinitely far away; attenuation and spotlight properties are ignored.
     如果位置的w分量为0，则使用定向光公式计算光。向量的x、y和z分量指定光的方向。光被认为是无限远的，衰减和聚光灯属性被忽略。
     If the w component of the position is a non-zero value, the coordinates specify the position of the light in homogenous coordinates, and the light is either calculated as a point light or a spotlight, depending on the value of the spotCutoff property.
     如果该位置的W组件是一个非零的值，指定的坐标的光在齐次坐标的位置，和光是一个点光源和聚光灯计算，根据不同的spotcutoff属性的值
     The default value is [0.0, 0.0, 1.0, 0.0].
     默认值[0.0f,0.0f,1.0f,0.0f];
     */
    //灯光位置
    self.baseEffect.light0.position = GLKVector4Make(1.0f, 0.0f, 0.2f, 0.0f);
    
    //光的环境部分,分别是red，green，blue，alpha
    self.baseEffect.light0.ambientColor = GLKVector4Make(0.2, 0.2, 0.2, 1.0f);
  
}

4.创建投影矩阵 -> 透视投影矩阵


    //获取屏幕纵横比
    GLfloat aspectRatio = self.view.frame.size.width / self.view.frame.size.height;
    self.baseEffect.transform.projectionMatrix = GLKMatrix4MakeOrtho(-1.0f * aspectRatio, 1.0f * aspectRatio, -1.0, 1.0, 1.0, 120.0f);

5.设置模型矩形 -5.0f 表示往屏幕内移动-5.0f距离

    self.baseEffect.transform.modelviewMatrix = GLKMatrix4MakeTranslation(0.0f, 0.0f, -5.0f);

6.设置清屏颜色


    GLKVector4 colorVector4 = GLKVector4Make(0.0f, 0.0f, 0.0f, 1.0f);
    [self setClearColor:colorVector4];
    
-(void)setClearColor:(GLKVector4)clearColorRGBA
{
    glClearColor(clearColorRGBA.r, clearColorRGBA.g, clearColorRGBA.b, clearColorRGBA.a);
}

7.设置顶点数据


-(void)bufferData
{
    //1、GLKMatrixStackCreate()创建一个新的空矩阵
    self.modelViewMatrixStack = GLKMatrixStackCreate(kCFAllocatorDefault);
    
    //2、为将要缓存区数据开辟空间
    //sphereVerts 在sphere.h文件中存在
    /*
     参数1：数据大小 3个GLFloat类型，x,y,z
     参数2：有多少个数据，count
     参数3：数据大小
     参数4：用途 GL_STATIC_DRAW，
     */
    //顶点数据缓存，顶点数据从sphere.h文件的sphereVerts数组中获取顶点数据x,y,z
    self.vertexPositionBuffer = [[AGLKVertexAttribArrayBuffer alloc]initWithAttribStride:(3 * sizeof(GLfloat)) numberOfVertices:sizeof(sphereVerts)/(3 * sizeof(GLfloat)) bytes:sphereVerts usage:GL_STATIC_DRAW];
    
    //法线，光照坐标 sphereNormals数组 x,y,z
    self.vertexNormalBuffer = [[AGLKVertexAttribArrayBuffer alloc]initWithAttribStride:(3 * sizeof(GLfloat)) numberOfVertices:sizeof(sphereNormals)/(3 * sizeof(GLfloat)) bytes:sphereNormals usage:GL_STATIC_DRAW];
    
    //纹理坐标 sphereTexCoords数组 x,y
    self.vertextTextureCoordBuffer = [[AGLKVertexAttribArrayBuffer alloc]initWithAttribStride:(2 * sizeof(GLfloat)) numberOfVertices:sizeof(sphereTexCoords)/ (2 * sizeof(GLfloat)) bytes:sphereTexCoords usage:GL_STATIC_DRAW];
    
    
    //3.获取地球纹理
    CGImageRef earthImageRef = [UIImage imageNamed:@"Earth512x256.jpg"].CGImage;
    
    //控制图像加载方式的选项
    NSDictionary *earthOptions = [NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithBool:YES],GLKTextureLoaderOriginBottomLeft, nil];
    
    //将纹理图片加载到纹理数据对象earchTextureInfo中
    /*
     参数1:加载的纹理图片
     参数2:控制图像加载的方式的选项-字典
     参数3:错误信息
     */
    self.earchTextureInfo = [GLKTextureLoader textureWithCGImage:earthImageRef options:earthOptions error:NULL];
    
    //4.获取月亮纹理
    CGImageRef moonImageRef = [UIImage imageNamed:@"Moon256x128"].CGImage;
    
    NSDictionary *moonOptions = [NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithBool:YES],GLKTextureLoaderOriginBottomLeft, nil];
    
    self.moomTextureInfo = [GLKTextureLoader textureWithCGImage:moonImageRef options:moonOptions error:NULL];
    
    //矩阵堆
    //用所提供的矩阵替换最顶层矩阵,将self.baseEffect.transform.modelviewMatrix,替换self.modelViewMatrixStack
    GLKMatrixStackLoadMatrix4(self.modelViewMatrixStack, self.baseEffect.transform.modelviewMatrix);
    
    //初始化在轨道上月球位置
    self.moonRotationAngleDegress = -20.0f;
    
    
}

开始代理绘制渲染操作 - GLKViewDelegate

//渲染场景
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect
{
    //设置清屏颜色
    glClearColor(0.3f, 0.3f, 0.3f, 1.0f);
    
    //清空颜色缓存区和深度缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    //地球旋转角度
    _earthRotationAngleDegress += 360.0f/60.0f;
    //月球旋转角度
    _moonRotationAngleDegress += (360.0f/60.0f)/SceneDaysPerMoonOrbit;
    
    //2、准备绘制
    /*
     其实就是把数据传递过去，然后指定读取方式
     参数1：数据是做什么用的
     参数2：数据读取个数
     参数3：数据读取索引
     参数4：是否调用glEnableVertexAttribArray
     
     着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
     
     
     默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的，意味着数据在着色器端是不可见的，哪怕数据已经上传到GPU，由glEnableVertexAttribArray启用指定属性，才可在顶点着色器中访问逐顶点的属性数据。glVertexAttribPointer或VBO只是建立CPU和GPU之间的逻辑连接，从而实现了CPU数据上传至GPU。但是，数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
     
     那么，glEnableVertexAttribArray应该在glVertexAttribPointer之前还是之后调用？答案是都可以，只要在绘图调用（glDraw*系列函数）前调用即可。
     */
    [self.vertexPositionBuffer prepareToDrawWithAttrib:GLKVertexAttribPosition numberOfCoordinates:3 attribOffset:0 shouldEnable:YES];
    [self.vertexNormalBuffer prepareToDrawWithAttrib:GLKVertexAttribNormal numberOfCoordinates:3 attribOffset:0 shouldEnable:YES];
    [self.vertextTextureCoordBuffer prepareToDrawWithAttrib:GLKVertexAttribTexCoord0 numberOfCoordinates:2 attribOffset:0 shouldEnable:YES];
    
    //3.开始绘制
    [self drawEarth];
    [self drawMoon];
}

开始绘制地球


-(void)drawEarth
{
    //获取纹理的name、target
    self.baseEffect.texture2d0.name = self.earchTextureInfo.name;
    self.baseEffect.texture2d0.target = self.earchTextureInfo.target;
    
    /*
     current matrix:
     1.000000 0.000000 0.000000 0.000000
     0.000000 1.000000 0.000000 0.000000
     0.000000 0.000000 1.000000 0.000000
     0.000000 0.000000 -5.000000 1.000000
     
     为什么？因为你在viewDidLoad中设置的
     //5.设置模型矩形 -5.0f表示往屏幕内移动-5.0f距离
     self.baseEffect.transform.modelviewMatrix = GLKMatrix4MakeTranslation(0.0f, 0.0f, -5.0f);
     */
    //将当前的modelViewMatrixStack 压栈
    GLKMatrixStackPush(self.modelViewMatrixStack);
    
    //在指定的轴上旋转最上面的矩阵,围绕x轴旋转
    GLKMatrixStackRotate(self.modelViewMatrixStack, GLKMathDegreesToRadians(SceneEarthAxialTiltDeg), 1.0f, 0.0f, 0.0f);
    
    /*
     current matrix:
     1.000000 0.000000 0.000000 0.000000
     0.000000 0.917060 0.398749 0.000000
     0.000000 -0.398749 0.917060 0.000000
     0.000000 0.000000 -5.000000 1.000000
     
     为什么？
     将矩阵与围绕X旋转的旋转矩阵相乘，即可得上述结果
     */
    self.baseEffect.transform.modelviewMatrix = GLKMatrixStackGetMatrix4(self.modelViewMatrixStack);
    
    //准备绘制
    [self.baseEffect prepareToDraw];
    
    //调用AGLKVertexAttribArrayBuffer，绘制图形
    /*
     参数1：绘制的方式，三角形
     参数2：绘制数据读取的索引
     参数3：绘制数据的大小
     */
    [AGLKVertexAttribArrayBuffer drawPreparedArraysWithMode:GL_TRIANGLES startVertexIndex:0 numberOfVertices:sphereNumVerts];
    
    //绘制完毕，则出栈
    /*
     current matrix:
     0.994522 0.041681 -0.095859 0.000000
     0.000000 0.917060 0.398749 0.000000
     0.104528 -0.396565 0.912036 0.000000
     0.000000 0.000000 -5.000000 1.000000
     */
    GLKMatrixStackPop(self.modelViewMatrixStack);
    
    /*
     current matrix:
     1.000000 0.000000 0.000000 0.000000
     0.000000 1.000000 0.000000 0.000000
     0.000000 0.000000 1.000000 0.000000
     0.000000 0.000000 -5.000000 1.000000
     */
    self.baseEffect.transform.modelviewMatrix = GLKMatrixStackGetMatrix4(self.modelViewMatrixStack);
    
}

绘制月亮


-(void)drawMoon
{
  //获取纹理的name、target
    self.baseEffect.texture2d0.name = self.moomTextureInfo.name;
    self.baseEffect.texture2d0.target = self.moomTextureInfo.target;
    
    //压栈
    GLKMatrixStackPush(self.modelViewMatrixStack);
    
    //围绕Y轴旋转moonRotationAngleDegress角度
    //自转
    GLKMatrixStackRotate(self.modelViewMatrixStack, GLKMathDegreesToRadians(self.moonRotationAngleDegress), 0.0f, 1.0f, 0.0f);
    
    //平移 - 月球距离地球的距离
    GLKMatrixStackTranslate(self.modelViewMatrixStack, 0.0f, 0.0f, SceneMoonDistanceFromEarth);
    
    //缩放，把月球缩放
    GLKMatrixStackScale(self.modelViewMatrixStack, SceneMoonRadiusFractionOfEarth, SceneMoonRadiusFractionOfEarth, SceneMoonRadiusFractionOfEarth);
    
    //旋转 围绕Y轴旋转
    GLKMatrixStackRotate(self.modelViewMatrixStack, GLKMathDegreesToRadians(self.moonRotationAngleDegress), 0.0f, 1.0f, 0.0f);
    
    self.baseEffect.transform.modelviewMatrix = GLKMatrixStackGetMatrix4(self.modelViewMatrixStack);
    
    [self.baseEffect prepareToDraw];
    
    [AGLKVertexAttribArrayBuffer drawPreparedArraysWithMode:GL_TRIANGLES startVertexIndex:0 numberOfVertices:sphereNumVerts];
    
    //设置完毕出栈
    GLKMatrixStackPop(self.modelViewMatrixStack);
    
    self.baseEffect.transform.modelviewMatrix = GLKMatrixStackGetMatrix4(self.modelViewMatrixStack);
    
}

Switch切换正投影或透视投影


#pragma mark -Switch Click
//切换正投影效果或透视投影效果
- (IBAction)switchClick:(UISwitch *)sender {
    
    GLfloat aspect = self.view.bounds.size.width / self.view.bounds.size.height;
    
    if ([sender isOn]) {
        
        //正投影
        self.baseEffect.transform.projectionMatrix = GLKMatrix4MakeFrustum(-1.0f * aspect, 1.0f * aspect, -1.0, 1.0, 2.0f, 120.0);
    
    }else {
        
        //透视投影
        self.baseEffect.transform.projectionMatrix = GLKMatrix4MakeOrtho(-1.0f * aspect, 1.0f * aspect, -1.0, 1.0, 2.0f, 120.0);
    }
}

github地址：YSEarthAndMoon.git

OpenGL ES学习之路(7.0) 地球与月亮旋转

目的

效果

案例流程图

案例源码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Graphics