试验7太阳系4课时.DOCVIP

实验7 太阳系(4课时) 实验目的 学会使用WebGL变换。 学会使用矩阵栈构建复杂场景。 学会使用lookAt。 学会使用透视投影的参数设置。 关于提交 无需实验报告，但程序(将.html、.js主文件和辅助文件打包，要求解压后可直接点击html文件运行)需在指定时间内通过泛雅平台提交。 实验步骤 本次实验提供了绘制基本太阳系的程序文件，首先修改html和js主文件命名为：00ZK_Solar(00ZK要替换成自己的学号末两位和姓名拼音首字母)，html文件中的主程序文件名也相应修改，并将页面标题改为自己的学号姓名。 理解Solar程序代码。 该示例程序创建了一个简单的太阳系，包括一个位于中心的太阳，一个地球每365天绕太阳转一周，一个月球每年绕地球转12周。此外，地球每24小时自转一周。该示例程序使用了缩放、旋转和平移的组合，也使用了矩阵栈来保存和恢复模型观察矩阵，以分离控制地球自转的变换和放置月球和控制其绕地球旋转的变换。 运行程序。测试键盘控制(按键控制可查看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”)。 让行星X以与地球不同的速度绕着太阳旋转。让行星X的“一天”持续36个小时(这样行星X自转2圈的时间等同于地球自转3圈的时间)。让行星X的一年包含300天(即行星X的居民在“一年”内经历300“天”)。提示： 行星X和地球应该是平行的关系，即互不相关，因此可在画地球之前画行星X，也可以在画地球系统(地球和月球)之后画行星X。但注意要使用mvpStack.push和mvpStack.pop限制变换的作用范围。 对行星X的变换和对地球的变换类似，只是自转和公转的周期不一样，添加两个新的变量hourOfDayX和dayOfYearX来控制行星X系统的运动，注意时间变化对所有星体都是一样的，即动画速度控制也是使用animationStep。 注意行星X的大小和与太阳系中心距离(即平移变换平移的距离)的设置不能使行星与小太阳或地球相撞。 给行星X一个同步卫星，即其始终处于新行星赤道上方某一固定位置，同行星一起旋转。“行星赤道上方固定位置”意味着该卫星处于赤道所在的平面上。我们说“上方”，是指从站在行星X赤道上的某人的角度来说的。如果某人站在行星X的赤道上，恰好位于该卫星下方，他抬头观察，会看到该卫星始终保持不动，一直在他头顶。这是真实的地球同步卫星的运动方式，例如电视传输卫星。提示： 卫星是绕行星X旋转的，同步卫星只不过是其绕行星X转一周的时间恰好是行星X自转一周的时间。因此可仿照给地球添加绕其旋转的月球的方式给行星X添加此同步卫星，旋转角度的设置要实现一天转一周(行星X的一天)。 给行星X添加第二个卫星，使其有一个相反的轨道，也即当从太阳系上方看的时候它绕轨道顺时针运动。这