基于HTML5 Canvas的双目立体网页的生成研究

作     者：董莹莹 

作者单位：安徽农业大学 

学位级别：硕士

导师姓名：孟浩

授予年度：2017年

学科分类：08[工学] 080203[工学-机械设计及理论] 080402[工学-测试计量技术及仪器] 0804[工学-仪器科学与技术] 0802[工学-机械工程] 

主      题：HTML5 Canvas 3DS MAX 3DTV 双目立体 

摘      要：随着科技的不断进步,近几年双目立体技术正成为人们关注的热点。2010年被称为3D电视元年,2016年被称为VR元年,3D和VR被广泛的应用在电视,电影,游戏,售房和景区旅游等方面,体现了其独特的魅力,成为了一个广受欢迎的崭新技术。现如今,3D和VR显示器制造工艺行业竞争相对激烈,各大公司为增加竞争力而降低显示器售价,3D显示器的市场也逐渐被打开,3D显示器已经成为市场热销的大众电子产品。人们可以通过3D立体显示器观看热映的电影电视,给人们带来了视觉上的极致享受,但是美中不足的是目前还没有能在3D显示器上呈现具有纵深感的立体网页。针对这一空缺,本论文设计了一款基于HTML5 Canvas的双目立体网页。下面即是在本文所研究的几个方面:(1)双目立体成像系统的理论分析:双目立体成像是指通过模拟人眼瞳距,获取相关图像,将图像进行传输后得到具有三维信息的二维图像,最后使生成的目标物能展现出立体效果。因为瞳距的存在,所以人在观看物体时能看到两个视角,双眼看到的图像传输到大脑,通过大脑对物体的重建,最终使看到的物体具有空间立体感。双目立体成像系统的几个组成部分中着重描述了观察显示设备,分析了几种显示设备的优缺点,最后概括了双目立体成像在几个主要领域的应用。(2)基于双目立体的3DS MAX建模及立体标定实验:探讨了双目立体中三种坐标系(图像坐标系、世界坐标系和摄像机坐标系)之间的关系及转化。通过3DS MAX建模,统计在不同基线距离和深度下对应的深度误差大小,通过折线图选出最佳基线距离和深度值,为双目立体网页的制作确定相关参数。为验证建模数据的可行性,根据建模得出的结论及规律,制作立体标定实验,用两台型号参数相同摄像机对黑白棋盘格进行立体图像对取样,根据取样情况对左右两图片进行刚性变换(旋转,平移等),变换后的两摄像机的主点连线平行像素坐标的行线,最后生成的图像对即具备了立体感。(3)设计可在3D显示器上显示的双目立体网页:本文提出了一种基于HTML5Canvas的双目立体网页实现方法,Canvas元素是HTML5中新增加的重要绘制图形元素,在制作网页时使用它就相当于添加了“画布,而javascript就是“画笔,编写javascript脚本即可在Canvas上绘画。普通2D网页只具一般的2D属性,本文设计的3D网页可以将图片、视频和文字等2D信息通过调用Canvas中相关函数将网页显示的2D内容扩展为3D属性,从而使网页具有立体感,且生成的网页能兼容现在主流的一些传统浏览器,用户能根据需要随意在2D页面和3D页面间切换,非常便利。利用此方法本文设计了一款左右拼(SbS)帧兼容视频格式的3DTV点播系统的交互界面,且具有良好的立体成像效果。