CSE 470家庭课业#3：灯，相机，行动！讲师：D.Hansford博士重要图片：您将开发一个显示两个旋转表面的WebGL应用程序。曲面将使用Phong照明模型进行渲染，使用精确的顶点法线，着色将在片段着色器中进行。该应用程序将允许不同的照明、材质和观看效果。这些程序功能的详细信息如下所述。概念：
构建参数化曲面和曲面法线。
建立三角测量数据结构。
设置Phong照明模型的参数。
在片段着色器中设置Phong着色。
绘制多个对象。
使用LookAt和透视功能。
通过实现移动灯光，获得更多动画体验。
实现交互和事件处理程序。
细节：
旋转表面（SOR）
创建两个SOR，一个圆柱体和一个有趣的形状供您选择。您的设计不能是圆锥体或球体，而且必须具有一定的曲率。（不要使用演示程序中的球体。）设SOR是[0，2*Pi]中的域θ上的s（t，θ）和[a，b]中的t，其中a和b是实数。SOR由生成曲线（母线）定义，g（t）=[f（t），t，0]，它是xy平面中的曲线。（提示：使曲线以x轴为中心。）第一个坐标f（t）是一个函数。曲面定义为s（t，θ）＝R（θ）g（t），其中R是绕y轴的旋转。示例：对于圆柱体，可以选择f（t）=1.0、a=-1和b=1。您将离散化域，评估SOR（创建三维点），并构建三角测量数据结构。在编写曲面求值函数时，将t-和theta方向上的求值次数作为输入变量，以便于测试。除了在SOR上创建三维点外，还将计算这些点的精确法线。（请参见幻灯片37的“照明和着色”ppt。）使用指向顶点和法线阵列的“索引”阵列创建三角测量数据结构。将使用drawElements绘制三角测量。（有关实现示例，请参阅cube.zip和cubev程序。有关数据结构的描述，代 写CSE 470 WebGL应用程序请参阅第5周的几何体第2部分注释。请参阅第4周的“使用drawElements的提示”。）对于每个SOR，创建一个minmax框。这将有助于确定“注视”参数、透视参数和良好的灯光位置。将这些最小最大值框打印到控制台。
小贴士：先把它用于气缸。
组织数据的两个选项：1）将圆柱体和自定义曲面的所有数据放入一组数据结构中。绘制时，可以使用偏移指针访问所需的数据块。OR 2）当用户选择新的SOR时，重新加载缓冲器。使用带有片段着色的Phong照明模型渲染曲面。
表面构造代码必须位于名为lastName_geometry.js的文件中，该文件与初始化和事件处理程序是分开的。材料
光
创建两种不同的材质。
创建用户界面以在材质之间切换。
指定这些材料的名称来表征它们，而不是“材料1”。
材料名称应与用户界面一起显示在HTML页面中。
将灯光颜色设置为白色。
将灯光的初始位置设置为在眼睛处。
为灯光编程两个选项：静止在眼睛处和绕SOR旋转。
建模和查看
使用MV.js中的LookAt函数。
使用MV.js中的透视功能。将纵横比初始化为1，并且的字段视野（fov）为60度。确定合理的远近参数。
滑动器将允许用户调整fov。
您必须使用提供的通过鼠标旋转对象的代码。（这将修改LookAt参数。）用户交互
所有控件（如按钮和滑块）都必须附有描述性文本。根据功能将控件组织到HTML页面中的各个部分，并添加标识这些部分的文本。SOR可以通过点击和鼠标移动进行旋转。
控件允许在两个SOR之间进行选择。
控件允许用户在两种不同设置之间更改材质特性。滑块允许亮度因子从1更改为1000。（有关滑块示例，请参见rotatingSquare3程序。）控件允许用户在10度和100度之间改变中心凹。（您可以选择增量。）打印到
打印的每个值都必须附有描述该值的文本。
控制台
两个SOR的最小-最大盒子尺寸。
最初的Eye、At、Up。
最初的观点论点。
初始灯光位置。
一般指南
SOR的评估次数应能产生光滑的表面，默认光线位置应在眼睛处。气缸应为默认SOR。在画布旁边，显示您的姓名、日期、程序描述和使用的资源。创建（至少）三个文件：lastName_hw3.html、lastName_hw3.js和lastName_geometry.js。在每个文件的顶部添加您的姓名和日期。
将课业交给Canvas。
额外信贷
如果你做了额外的学分，在html页面中的一个单独的部分标记上这个额外功能的控件。让我们知道你做了什么！可以显示曲面法线。如果您为此创建了第二个顶点着色器，请告诉我们。你可以添加更多的灯光。可以使用添加到Phong照明模型的发射颜色来创建灯光对象。你可以设置SOR的动画——创建舞蹈或通过线性贴图应用变形。