试验7太阳系4课时.doc

实验 7 太阳系 (4 课时 ) 一、 实验目的 1. 学会使用 WebGL 变换。 2. 学会使用矩阵栈构建复杂场景。 3. 学会使用 lookAt 。 4. 学会使用透视投影的参数设置。 二、 关于提交 无需实验报告，但程序 (将 .html 、.js 主文件和辅助文件打包，要求解压后可直接点 击 html 文件运行 )需在指定时间内通过泛雅平台提交。 三、 实验步骤 1. 本次实验提供了绘制基本太阳系的程序文件，首先修改 html 和 js 主文件命名为： 00ZK_Solar (00ZK 要替换成自己的学号末两位和姓名拼音首字母 )， html 文件中的 主程序文件名也相应修改，并将页面标题改为自己的学号姓名。 2. 理解 Solar 程序代码 。 该示例程序创建了一个简单的太阳系，包括一个位于中心的太阳，一个地球每 365 天绕太阳转一周，一个月球每年绕地球转 12 周。此外，地球每 24 小时自转一周。 该示例程序使用了缩放、 旋转和平移的组合， 也使用了矩阵栈来保存和恢复模型观 察矩阵，以分离控制地球自转的变换和放置月球和控制其绕地球旋转的变换。 a) 运行程序。测试键盘控制 (按键控制可查看 js 程序最上方的使用说明 )。 Shader 程序很简单，顶点 shader 只是做了一个坐标系变换的操作：通过对输入的顶点坐标应用 u_MVPMatrix 矩阵变换，得到裁剪坐标系下的坐标；而片元 shader 根据应用程序输入的 uniform 颜色变量来设置片元的颜色。 这个程序中的顶点坐标数据是绘制一个单位球体的顶点数据， 由于绘制单一颜色球体的立体感不强，而 WebGL 又不支持线框模式，因此通过绘制线段来实 现与 OpenGL 线框模式相同的效果。 顶点坐标的生成由函数 buildSphere 完成， 关于顶点生成的具体方式可参见讲解视频，另外注意 buildSphere 函数中 var n = vec3(temp); 是为了实现 JavaScript 类型化数组的深拷贝。 理解键盘控制是如何实现的。 关键 ：理解 render 及相关函数中的绘制代码，理解如何使用变换的，具体可参见讲解视频。 将太阳替换为两个恒星 。将目前的单个太阳替换为两个小的太阳， 彼此绕着对方旋转。给它们一个很高的轨道速度。 提示： 两个小太阳实际上是绕着太阳系的中心旋转。 彼此绕着对方旋转实际上是两者到太阳系中心的距离一样，旋转速度一 样，且在旋转中彼此相对，即旋转角度相差 180 度。 站在变换作用于对象的角度思考： 先在世界坐标原点处绘制一个小太阳， 然后将其向左平移一定距离 再在原点处绘制另一个小太阳，然后向右平移一定距离 r。 最后让这两个小太阳旋转起来。 编写代码， 注意代码顺序应与上面的顺序相反， 且对第一个小太阳的变换  r。 不能影响第二个小太阳的变换， 即应用 mvpStack.push 和 mvpStack.pop 将对第一个小太阳的绘制及平移变换代码括起来。 旋转的角度可以参照地球绕太阳的旋转给定，因为要求有很高的轨道速度，可使其一年 (365 天 )转 n 周， n 越大速度越快， n 值自己给定。 对两个小太阳的变换不应影响后面地球和月球的建模， 因此也应使用一对 mvpStack.push 和 mvpStack.pop 将这段关于小太阳的代码括起来。 添加另一个带有 2 个卫星的行星 (“行星 X”)。 a) 让行星 X 以与地球不同的速度绕着太阳旋转。让行星 个小时 (这样行星 X 自转 2 圈的时间等同于地球自转 的一年包含 300 天 (即行星 X 的居民在“一年”内经历 提示 ：  X 的“一天”持续 3 圈的时间 ) 。让行星 300“天” )。  36 X 行星 X 和地球应该是平行的关系，即互不相关，因此可在画地球之前画 行星 X ，也可以在画地球系统 (地球和月球 )之后画行星 X 。但注意要使用 mvpStack.push 和 mvpStack.pop 限制变换的作用范围。 对行星 X 的变换和对地球的变换类似，只是自转和公转的周期不一样， 添加两个新的变量 hourOfDayX 和 dayOfYearX 来控制行星 X 系统的运动，注意 时 间 变 化对 所 有 星 体 都是 一 样 的 ，即 动 画 速 度 控制 也 是 使 用 animationStep。 注意行星 X 的大小和与太阳系中心距离 (即平移变换平移的距离 )的设置不能使行星与小太阳或地球相撞。 给行星 X 一个 同步 卫星，即其始终处于新行星赤道上方某一固定位置，同行 星一起旋转。“行星赤道上方固定位置” 意味着该卫星处于赤道所在的平面上。我们说“上方” ，是指从