WebGL 技术在粮温监控中的应用

甄 彤，桑俊杰，肖 乐

（河南工业大学 信息科学与工程学院，河南 郑州 450001）

0 前言

在粮食储藏过程中，粮堆内温度是储粮安全的重要指标，然而出于成本考虑以及进出粮的需要，粮堆内的温度传感器设置数量有限，因此在储粮当中测得的温度值只是传感器附近的温度，其他部分则需要利用相应的方法进行数值模拟.随着信息化技术在各行各业的不断普及，计算机可视化技术也得到推广，在工程应用以及科研领域，常常需要计算机依据各种数据以及模型进行处理，画出相应的三维立体图像，以便人们得到直观、有效的结果[1-4].常用的三维可视化技术有OPENGL、Autodesk公司开发的3DMax、开源多平台的Blender 以及Tecplot 公司的Tecplot 360 等.然而面对人们对跨平台，Web 交互等方面的需求越来越强烈以及互联网技术的飞速发展，网络三维技术应运而生.网络三维是一种能实时渲染且具有交互性的网络技术，突破了地域、平面以及空间的限制，使得人们更便捷地处理相应数据.作者采用双B 样条采样方法，利用WebGL 技术实现粮堆温度的可视化.

1 双三次B 样条插值模拟

1.1 B 样条

B 样条曲线一般应用在计算机辅助设计与制造当中，是一种由大量控制点生成曲线的工具，它具有样条曲线的普遍特性：是一条只需要几个点依次指定的光滑曲线，可以通过相应算法找到曲线或者曲面的点，根据人们对近似度的需求，通过迭代计算方法使用线段能足够准确再现曲线的形状.图1 为一简单的三次B 样条曲线.

图1 三次B 样条曲线

由图1 可知，曲线有9 个控制点定义，曲线整体趋向控制点.B 样条曲线按照节点分布的情况，分为均匀B 样条曲线和非均匀B 样条曲线.

1.1.1 均匀三次B 样条

均匀三次B 样条是一种最简单最常用的情况，由n+1 个控制点p0，p1，p2，…，pn定义，结合一组基函数N0（u），N1（u），…，Nn（u），曲线的参数化定义为：

其中3≤u≤n+1，且当u≤i 或i+4≤u 时，Ni（u）=0.由式（1）可以看出，B 样条具有局部控制的性质：当某个控制点pi移动时，曲线q（u）只在u∈（i，i+4）这一部分发生改变，其余部分不受影响.

1.1.2 非均匀三次B 样条[2]

设一组实数u0≤u1≤u2≤…≤ui-1≤ui，［u0，u1，u2，…，ui-1，ui］为节点向量，p0，p1，p2，…，pn为一组控制点，Ni，k（u）为基函数，k 为次数，则由Cox-de Boor 公式定义的相应的基函数为：

其中对于i=0，…，l-1，基函数特性为：

B 样条具有特性为：

（1）递推性.

（3）局部控制性.

在节点内部无限可微，在节点处是k-r 次可微，r 为重复度.相应的B 样条公式为：

1.2 双三次B 样条曲面

为了模拟出相应平面的等温面，采用双三次B样条插值曲面来实现.给定（m+1）×（n+1）个控制点pi，（ji=0，1，…，m；j=0，1，…，n）构造成一张网格.控制点pi，j用行矢量表示为pi，j=［xi，yj，zij］，xi，yj为XY 平面区域上U=［a，b］× ［c，d］被规则矩形网格Δ=Δx×Δy分割后的网格点，其中：

通过对数据点pi，j的插值曲面定义域U=［a，b］× ［c，d］转变为规范定义域u×v=［0，1］×［0，1］，则双三次B 样条插值曲面可写成为:

式中，dij（i=0，1，…，l；j=0，1，…，k；l=s+2；k=r +2）为曲面的控制顶点矢量[5]；p（u，v）=［x（u，v），y（u，v），z（u，v）］.

1.3 插值结果分析

为了检验B 样条插值曲面拟合的实用性，作者结合2008—2009 年山东聊城粮库平方仓小麦实测温度值，从时间和空间域两方面进行分析：首先从该平房仓中随机抽取一传感器位置作为参考点，依据2008 年4 月—12 月中旬期间随机抽取多个时间点的温度值绘制出该点随时间变化的温度曲线R，然后根据双三次B 样条插值曲面算法计算出相应时间点该传感器位置的理论值，绘出相应曲线C，如图2 所示，由图2 可知，由双三次B 样条函数插值的结果与实际值总体变化趋势基本相符.

图2 2008 年4 月—12 月同一测温点的温度情况

在空间域方面，随机选取2008 年9 月20 日某一时间点内10 个不同位置传感器测得的温度值，然后模拟出相应位置的温度值，然后进行分析，N表示温度传感器节点号，T1 表示实测温度值，T2表示模拟温度值，e 表示相应的误差，结果见表1.

表1 不同位置粮食温度误差分析结果

由表1 可知，模拟温度值与实际值差距比较小，一般都在1～2 ℃.而对于储粮温度监测分析来说，这样的误差是可以接受的.因此，采用B 样条插值函数的方法进行温度插值拟合是可行的.

2 WebGL 技术

在WebGL 技术开发之前，人们为了得到真正的3D 体验，开发者不得不要求用户下载或安装各种插件或者应用程序，往往给人们带来不便.于是Khronos 小组在2009 年8 月提出一种可应用于Web 的新的开源的3D 图形绘图技术——WebGL.它是一种基于OPENGL ES 2.0 的一种新的API，在浏览器中与Web 页面的其他元素可以无缝连接；WebGL 具有跨平台的特性，可以运行在从手机、平板到家用电脑的任何主流操作系统当中.目前Chrome、Firefox、Safari 以及Opera 几大主流浏览器都能够支持WebGL，而商业巨头微软曾经坚决反对的态度逐渐缓和，人们在其新一代浏览器IE11当中看到了WebGL 的身影.

2.1 WebGL 工作原理

WebGL 直接工作在计算机的显卡端，因此能够充分利用平时一直闲置的GPU，完成大量计算实现实时的3D 渲染，在渲染场景时，要通过渲染管线（Rendering Pipeline）来实现.跟其他的实时3D 图形相同，WebGL 将三角形用于位置模型的基本元素，利用JavaScript 生成相应的绘制信息，包括目标的位置、结构、颜色、纹理等.GPU 接收这些绘制信息返回绘制结果[6].渲染管线的具体流程如图3 所示.

图3 渲染管线流程

首先将输入的JavaScript 或者自己导入3D 模型文件中的顶点数组及其内部数据，填充到顶点缓冲中后传输到GPU 端，GPU 接收到信息后在顶点着色器中进行处理，顶点着色器是一个程序，可以自己定义，也可以由第三方图形库提供.接着GPU 会连接这些顶点形成三角形，再由光栅器作用于每个三角形，切出并只保留这些三角形部分，细分之后填充到像素大小的片元中，将片元传递给片元着色器.片元着色器跟顶点着色器一样，可以自定义或者引用第三方图形库.片元着色器输出每个像素的颜色和深度值，以便于在帧缓冲里进行绘制.

在试验中，在电脑上是在Chrome 浏览器中运行，手机中是在Firefox 20 中运行.新版本的Chrome 浏览器默认开启WebGL，也可通过添加运行参数开启：--enable-WebGL；而Firefox 浏览器则需在浏览器栏中输入：about：config，然后再出现的首选项设置中将WebGL.force-enabled 和WebGL.disabled 的值分别改为true 和false.以后就可以在这两款浏览器中运行WebGL.

2.2 Three.js

Three.js 是一款开源的WebGL 图形开发框架，由Diego cander 等提出[7].他们提供了一种在3D 图形中简单、直观的建立常见模型的方法，能够高速利用许多最佳图形引擎实践技术，是一种内嵌多种对象类型的便捷工具.

Three.js 与其他的WebGL 图形框架一样，使用流程沿用一般三维世界的基本结构进行定义，主要流程如下：

设置场景（scene）：场景相当于一个三维空间，随后定义的任何元素都要放在场景里.

设置摄像机（camera）：摄像机跟普通意义上的相机一样，视角所覆盖的内容就是生成图像时所看到的景象.

设置灯光（light）：灯光也是三维建模的重要元素，不同的灯光照射到物体上呈现不同的光影效果；不同颜色的灯光与物体自身的纹理相互作用呈现不同的颜色.

设置物体（object）：物体就是在场景中处理的三维对象.

设置渲染器（render）：渲染器的主要作用是将三维空间中的物体映射到二维平面，即将三维数据处理之后在显示器平面显示出来.场景中的物体经过渲染器渲染后，才可以在平面上显示出来.

通过建立一个HTML 页面，在HTML 当中添加canvas 元素以便于WebGL 进行渲染，然后再在body 上添加onload 事件来接收初始化整个WebGL环境.于是在页面加载完成后，调用onload 中的函数，WebGL 开始渲染.

基于Three.js 的传感器模拟如图4 所示，左图为电脑上运行，右侧为手机中运行.某一粮仓当中粮堆内传感器排列如图4 中球体呈8×6×3 矩形排列.每一个球体代表粮堆内相应位置的传感器.当传感器提示温度正常时，球体呈绿色，温度过高或者过低时，球体呈红色；数据显示不正常时呈蓝色.利用鼠标拖动整个矩阵，可以从不同角度观察粮堆内整体情况.

图4 传感器模拟

利用双三次B 样条插值曲面依据各个温度传感器的数值模拟出粮堆温度曲面，然后通过反算得到曲面上各个点的数据，对曲面的点的信息（空间内位置信息，温度值）进行处理，通过Three.js 接收点的平面位置信息以及温度信息，以点的平面位置为相应的X、Y 坐标，温度值为相应的Z 坐标，配以某种颜色逐点渲染生成粮堆内平面温度图.

图5 粮堆内某一平面的温度

粮堆内部某一平面温度如图5 所示，利用鼠标可以从各个角度观察储粮信息.X、Y 代表粮堆内某一平面粮食的实际位置，Z 代表相应点的温度值，Z=0 即XY 面代表一温度基面，高于XY，则该面的粮食温度过高，相反低于该面，说明粮面温度处于警戒线以下.

3 总结

通过B 样条插值曲面的方法对粮堆内部的温度分布进行数值模拟，然后利用WebGL 技术实现温度监控的三维可视化，因为其具有跨平台、免插件以及联网数据交互的特性，比起普通方法更直观、高效，便于相关人员远程监控；鉴于WebGL 的特性，人们还可以通过手机、平板等移动终端访问实时了解粮堆内温度信息，不过由于直接在GPU端渲染，一般的移动终端限于硬件条件只能访问简单的页面，但是在电子技术日新月异的今天，这些问题一定能够得到解决.

［1］Biss S R.3D 计算机图形学（OpenGL 版）［M］.北京:清华大学出版社，2006.

［2］施法中.计算机辅助几何设计与非均匀有理B 样条［M］.北京:高等教育出版社，2001.

［3］李涛，刘浩.B 样条曲面的双向插值造型算法［J］.计算机工程与应用，2012，48（35）：178-181.

［4］王仲东，唐发明.大型粮仓的温度场重建［C］.中国粮油学会第三届学术年会论文选集（下），2004.

［5］Cottrell J A，Bazilevs Y R，Hughes T J R.Isogeometric analysis:toward interation of CAD and FEA［M］.USA：John Wiley &Sons Inc，2009.

［6］Tony Parisi.WebGL：up and running［M］.USA：O'Reilly Media Inc，2012.

［7］Diego Cantor，Brandon Jones.WebGL beginner's guide［M］.UK:packt Publishing，2012.