前言
案例效果如下图
综合案例.gif
这里是例子的链接github
整体流程
下面来详细说说整体的效果的实现，可以大致分为4部分
- 地板
- 大球（自转）
- 小球（包含50个静态小球+1个围绕大球公转的动态小球）
- 移动（特殊键位上下左右触发）
地板
- SetupRC函数：准备地板的顶点数据
-
RenderScene函数：利用平面着色器绘制地板
两个函数此时的流程图大致如下
地板流程.png
大球
在地板绘制完成的基础上，绘制大球，并实现其自转功能，主要步骤如下
- SetupRC函数：利用系统模型类创建大球
- RenderScene函数：分为三部分
- 设置定时器：基于时间的变化，记录当前时间的角度
- 设置大球变换（仅平移一次，并随定时器旋转）及绘制大球
- 开启定时器：通过提交重新渲染请求，实现定时器触发的效果
两个函数的流程图如下，图中红框部分流程均与大球相关
大球变换
大球变换的代码如下
//5.使得大球位置平移(3.0)向屏幕里面
modelViewMatrix.Translate(0.0f, 0.0f, -3.0f);
//6.压栈(复制栈顶)
modelViewMatrix.PushMatrix();
//7.大球自转
modelViewMatrix.Rotate(yRot, 0.0f, 1.0f, 0.0f);
- Translate：目的是为了更好的观察的大球，因为大球创建时默认是在（0，0，0）原点位置，当前的观察者也处于原点位置，不便于观察
- PushMatrix：拷贝矩阵堆栈栈顶并压栈，此时只需要将大球平移一次，然后在平移后坐标基础上围绕y轴旋转，实现自转
- Rotate：大球围绕y轴旋转，实现自转
自转的原理
仅为个人理解：可以将时间看作一个圆，大球映射到xoy平面上其实也是一个圆，然后基于时间的变化所得到的的角度，在大球的映射圆中也是同样的角度，然后大球基于上次的角度，再继续旋转α的角度，每360度是一个循环，以此来实现大球自转
2251862-f32b47f67f6ffacf.png
小球
在绘制完大球的基础上，继续绘制小球
- SetupRC函数：初始化小球数据
- RenderScene函数：绘制静态+动态小球
- 绘制50个静态小球：每绘制一个小球都需要push和pop
- 矩阵堆栈记录平移+旋转的变换
- 绘制动态小球
此时两个函数的流程图如下：
2251862-b47ed812c307dc4c.png
小球公转
其实小球的公转可以理解为： 自转+平移，如果只有rotate变换，那么小球就是在原地围绕y轴自转，但是此时大球跟小球是处于同一个位置的，为了更好的观察，需要将小球平移，与大球之间有一定的间隔，且每次旋转，小球旋转的角度是大球的两倍，意味着小球比大球转的快，公转原理如图所示
移动
到这步，主要的功能都基本实现了，只需要在增加特殊键位的移动即可，此时的移动是作用于所有图形的，所以需要在绘制图形前增加一个观察者，用于记录所有图形的变换
此时，项目中setupRc、RenderScene、SpecialKeys总的流程图如下
