基于WebGL的VR留言签到系统

发布时间：2020-05-12 04:49

【摘要】：留言签到系统是商家吸引顾客、增加顾客粘性的营销手段。商户通常设定一个新颖独特的活动场景,通过给参与活动的用户一些奖励达到吸引消费者、宣传自己品牌的目的。传统的留言签到系统是2D展现方式,商家只能通过图片和广告词吸引用户,展现形式单一,容易造成用户的审美疲劳。WebGL技术实现了手机端的3D场景,极大地提高了手机端营销的展示效果。然而,WebGL技术需要手机端下载完整模型,并计算和渲染模型才能呈现3D应用场景,在遇到大模型或增量模型时,由于计算量大和手机端计算能力有限,模型下载和首屏渲染使会导致手机卡顿。针对传统营销方式的缺陷和当前WebGL应用存在的问题,本文提出了构建手机端WebGL应用的解决方案,并设计实现了基于WebGL构建新型手机端留言签到系统。首先,根据留言签到系统的需求分析,从构建留言签到系统架构和手机端WebGL架构两方面进行了总体设计。留言签到系统架构包括商户端站点、用户手机端站点以及服务端。WebGL应用的构建重点阐述了手机端结构设计和用户体验优化策略。其后,本文阐述了留言签到系统的具体实现方案,并对构建手机端快速响应、流畅运行的WebGL应用进行了详细的设计与实现。最后,本文从功能和性能两方面对系统进行了测试和分析,结果表明,WebGL应用作为一种新型的营销展现方式,在手机端流畅的运行成为可能。
【图文】：

坐标,顶点着色,非标准,管线

ＯｐｅｎＧＬ库由不同显卡生产商家开发和升级，对外提供统一邋ＡＰＩ。逡逑ＯｐｅｎＧＬ中的图形渲染管线是将３Ｄ坐标最终渲染成屏幕显示的２Ｄ像素的逡逑过程，图２－１展示了如何从输入的３个空间坐标转为一组屏幕显示有颜色的２Ｄ逡逑像素的过程。逡逑顶点着色器逦形状（图元）装配逦几何着色器逡逑ＶＥＲＴＥＸ邋ＳＨＡＤＥＲ邋ＳＨＡＰＥ邋ＡＳＳＥＭＢＬＹ邋ＧＥＯＭＥＴＲＹ邋ＳＨＡＤＥＲ逡逑顶点数据逡逑ＤＡＴＡｎ邋９邋？逦（４逡逑．：ｉ邋ｗ逦，邋Ｖ逦；逦邋．．逦；逦逡逑ＴＥＳＴ邋ＡＮＤ邋ＢＬＥＮＤＩＮＧ邋ＦＲＡＧＭＥＮＴ邋ＳＨＡＤＥＲ邋ＲＡＳＴＥＲＺＡＴＩＯＮ逡逑测试与混合逦片段着色器逦光栅化逡逑图２－１图形渲染管线［１７〗逡逑首先，三个顶点的３Ｄ坐标最先经过顶点着色器，这里是做简单的坐标变化，逡逑将输入坐标转化为标准化设备坐标，使ｘ、ｙ、ｚ的值都在－１到１之间，将非标准逡逑的坐标转化在ＯｐｅｎＧＬ的可视化区域内，输出为新的３Ｄ坐标。然后，将顶点着逡逑色器输出的坐标作为输入，同时传入装配的形状，如点、线、三角形（本例中是逡逑三角形），将顶点装配成指定的形状。几何着色器会将一个基本的图形转为由不逡逑同顶点构成的新的图形。接着，几何着色器的输出会被光栅化处理，将几何图像逡逑转化成屏幕上显示的像素

视图,顶点着色,变换矩阵,着色器

点着色器和片元着色器的设置，ＴｈｒｅｅＪＳ已经做了相应的转化工作。逡逑使用３Ｄ建模软件会导出３Ｄ模型数据，包括顶点数据、位置信息、灯光属逡逑性、材质信息等数据。如图２－７所示，顶点数据需要与模型矩阵、视图矩阵、投逡逑影矩阵相乘后才能进入顶点着色器，动态澶染时，，还需要引入变换矩阵。可以看逡逑出，模型的加载会有非常庞杂的工作量，而ＴｈｒｅｅＪＳ库提供了加载模型的方法，逡逑即完成顶点数据和着色器之间的矩阵变换。逡逑S缅握溴危咤巍危义蟂缅畏彦蝪|敢珍逦挩逦ｇ逦珍逦黎黎逡逑黎逦沷逦？逦？逦？逦？逸邋＊逦？逦？逦＾－＜４＾逡逑■逦■逦－逦＇逦：逦ｎｍｍ邋！逦￣；＞邋次点厶：逡逑图２－７邋ＷｅｂＧＬ在顶点着色器之前做的工作逡逑总之，ＴｈｒｅｅＪＳ可构建儿何模型、生成变换矩阵、生成材质和灯光、生成顶逡逑点着色器和片元着色器ＧＬＳＬ代码。逡逑２．３．２邋ＴｈｒｅｅＪＳ场景的构建逡逑１、
【学位授予单位】：北京邮电大学
【学位级别】：硕士
【学位授予年份】：2018
【分类号】：TP393.09

【相似文献】