计算机图形学 · 实验三
WebGL 2.0 · GLSL ES 3.00 · 基本几何变换与交互动画
← 返回实验三首页

Task E · 完整交互动画画布

集成创建对象、独立变换与动画、全局速度、背景与尺寸配置、清屏和PNG截图。

WebGL2 图形画布点击画布添加新对象
您的浏览器不支持Canvas。
正在初始化WebGL2…

基本操作说明

  1. 右侧选择“形状”与“变换方式”;在画布上单击即在点击处添加一个对象,可反复点击添加多个。
  2. “暂停动画/继续动画”与“全局速度”控制播放,速度 0 表示停止。
  3. 修改宽高或背景色后,需点“应用画布设置”才生效。
  4. 点“保存PNG截图”下载当前画面;点“清空画布”清除全部对象(计数归零)。

参数规则:改动菜单只影响之后新添加的对象,已添加的对象保持创建时保存的参数;“全局速度”与“暂停/继续”则作用于全部对象。

最终验收情境(15分)

  1. 添加1个周期缩放的圆、2个方向不同的三角形。
  2. 添加1个绕原点公转、1个绕自身中心旋转的正方形。
  3. 添加1个绕Y轴自转的四面体;共至少6个对象。
  4. 暂停/继续并改变速度;设置Canvas为960×540并改变背景。
  5. 点击“保存PNG截图”,检查尺寸、背景与图形。
  6. 一键清空,计数归零,再创建新对象验证状态。

截图仅保存WebGL Canvas像素,不包括右侧HTML控制面板。

提示:请从 index.html 进入各任务;GLSL ES 3.00 Shader存放在本HTML页面,JavaScript程序位于js/目录。所有图形由WebGL2绘制,无需网络连接。