图形学实验报告(梅洛瑜)1

图形学实验报告（梅洛瑜）1 本实验报告是计算机图形学课程的报告，报告名称为 "图形学实验报告（梅洛瑜）1"，报告日期为2019年12月31日，学生姓名为梅洛瑜，学生学号为71117408。 一、作品简介 本作品包含三个独立物体：bilibili 小电视、小飞鸡、表情包方块。学生负责部分包括模型设计、模型导入、物体的旋转和移动。 二、设计思路 灵感来源于热门视频网站哔哩哔哩的 logo。设计思路是将相机视为一个对象，最后相机的视角就是对相机矩阵求逆，乘到物体视角上。我们的地图中心放在（0,0,-600）处，所以我们在渲染时需要将物体的矩阵先做转置并移动到地图中心的位置，与相机结合渲染时还需知道相机的位置。 三、实现部分 实现了两种漫游方式，对应两个 tick()状态。物体移动和旋转两种漫游方式按钮背后原理是，设计了两个 tick()函数，一个 tick1()控制物体动+相机动，另一个 tick2()控制物体运动。 物体移动为了实现物体运动，设置了 go()按钮，背后的逻辑是设定相应的运动方程，同时在渲染每一帧时进行计数，设定物体的上下左右边界以及移动速度，在物体达到规定边界时将速度方向反向。 实现对象绕指定轴旋转，需要利用对象的平移和绕坐标原点旋转。由于对象中心不在坐标原点，首先平移坐标轴至对象中心，然后绕坐标轴进行旋转操作，旋转完成之后复原坐标轴。 相机移动同时物体移动相机也是一种对象，把相机想象为一个对象，然后最后相机的视角就是对相机矩阵求逆，乘到物体视角上我们的地图中心我放在（0,0,-600）处，相机做旋转需要用到和物体旋转一样的，确定中心轴，所以用 changematrix 和 unchangematrix 在做变换的前后使用，就可以改变中心位置。 纹理贴图与之前的工作兼容之前直接导入物体的顶点，并通过设置顶点 color 进行上色，尝试以后发现工作量较大。在需要进行纹理处理时，如果逐顶点进行纹理设置可能不太现实。用 color 来上色，工作量还比较大，如果全部改成纹理，比较麻烦，于是设置顶点与纹理两个矩阵，并在渲染时采用矩阵相乘的方式同时考虑顶点颜色以及纹理。 四、实验中遇到的问题和解决方法 相机移动同时物体移动一开始在写好相机运动的函数以后，不知道如何控制相机运动时视野的正确变换，后来我们想到将相机当作物体，相机朝向就是视野方向，有 focus 点以及相应的法相。相机也是一种对象，把相机当作对象操作，事情一下子就简单了。 html5 的帧动画 api 是让动画看着像个样子的基础纹理贴图跨域访问问题两种跨域访问：1.SimpleHTTPServer2.base64由于采用 HTTPServer 对于小项目来说没有必要且客户端需要消耗更多资源来加载素材，我们未搭建 SimpleHTTPServer，反之我们采用 base64 的方法，将对象及纹理资源转为 base64格式并直接写入 js 文件中。 纹理图片处理解决图片不是 2 的幂的方法实际编程时，如果图像边长不是 2 的幂，则会报错并无法显示。解决此问题不需要对图像进行更改，在读入图片以后如果发现图片的边长不是 2 的幂则将边缘以相同 rgb 扩展包裹直到达到 2 的幂。 五、个人总结 在短短的一学期课程内，老师的耐心教学自己的课外学习以及其他组的精彩作品，使我对图形学特别是实时图像渲染技术有了很深的印象。我在课堂上学习了从二维到三维图像渲染以及光源和纹理的设计。同时通过小组合作，了解了通过 webgl 编写实时图像渲染程序的整个过程。在设计场景漫游时，通过一点点尝试最终得出将相机视为物体进行计算和渲染的方法，以及更加高效的图片资源合并。在添加纹理效果时，解决了跨域访问问题以及顶点颜色和纹理的渲染问题，学到了可以通过 SimpleHTTPServer 以及直接将对象转为 base64 来解决跨域访问。同时，也掌握了 js 代码编写的许多小技巧。 在本实验报告中，我们学习了计算机图形学的基本概念和技术，包括图形学的基本概念、图形学的数学基础、三维图形学、光源和纹理、实时图像渲染技术等。在实验报告中，我们学习了如何使用 webgl 实现实时图像渲染，如何使用 JavaScript 和 HTML5 实现交互式图形学应用程序。同时，我们也学习了如何使用各种技术来解决图形学中的问题，如如何解决跨域访问问题、如何实现高效的图片资源合并等。