计算机图形学上机实验课作业。Computer graphics up machine assignments

THIS IS A WORK-IN-PROGRESS

模拟从几何到像素点的全过程

1. 给出场景的几何定义
2. 顶点着色器
3. 图元装配
4. 剪裁
5. 透视除法
6. 栅格化，此步骤之后开始引入 frame buffer。
7. 隐面消除，用背向面消除和 z-buffer 方法
8. 顶点属性插值
9. 片段着色器
10. 点亮像素点

软件系统设计，绘图器

API

• 设置顶点
• 设置顶点着色器和片段着色器

计划从零开始实现。基本思路是用高分辨率的画布模拟低分辨率的画布，使用 setPixel 原语绘图。 点亮屏幕像素时，在高分辨率的画布上绘制无边框的，单色填充的正方形。

题目要求的二维图形绘制较为简单，且相似性很大，绘制多边形、矩形、圆形、贝塞尔曲线其实都是同一个功能。

顶点处理阶段

片段处理阶段

栅格化的目的在于给最终要渲染的像素分配三维坐标和顶点属性，没有这两个信息就没办法决定一片像素的颜色。 每一个图元栅格化之后我们得到一批片段，这些片段的几何数据和顶点属性是通过插值得到的，并且是离散的。 这些片段未必与最后的像素一一对应，对于每个片段，我们至少需要如下信息：

• 在空间中的哪一个点
• 所在图元的每个顶点的顶点属性
• 深度数据

软件系统设计，功能选择菜单

需求

构建如下三个层次结构的菜单

• 图形应用
  • 图形绘制
    • 绘制矩形
    • 绘制圆形
  • 区域填充
    • 绘制多边形，用文字填充
  • 三维变换
    • 绘制一个三维立方体
    • 沿 X 轴方向平移
    • 沿 Y 轴方向平移
    • 沿 Z 轴方向平移
    • 绕 X 轴旋转
    • 绕 Y 轴旋转
    • 绕 Z 轴旋转
  • 绘制曲线
    • 绘制贝塞尔曲线

用超链接和静态页面来实现，要实现下面的这个菜单，注意菜单的三个层次结构：

每个功能的页面

• 当前的功能是哪一项

• 固定的使用说明，由实验课题目给出

  • 例如，点击第一次设置圆心，第二次设置半径
  • 摁a键向 X 轴负方向平移，摁l键向 X 轴正方向平移

• 参数设置，如果有

  • 颜色，绘制矩形、圆形、多边形填充时需要，是一个 RGB 颜色值。
  • 平移步长、旋转度数，是一个实数。

• 画布

  • 用 canvas 绘制
  • 手工模拟像素点，逐像素点上色