基于WebGL的三维物理模型设计与开发

何博　王祖源　万昆

摘 要：目前，各种各样的学习平台和学习终端层出不穷。因此，面对多样化的终端设备，我们在开发应用程序时考虑如何实现在不同设备的无差异化移植显得越来越重要。如何运用相关技术保证跨终端、跨平台的统一用户体验，这是值得探索的问题。针对一般的三维物理模型存在跨平台问题，文章通过研究WebGL技术在构建三维物理模型中的应用，提出了利用浏览器对WebGL的支持来解决跨平台问题的方法。该方法通过HTML5中Canvas画布获得三维绘制场景，在该场景中利用WebGL第三方库（three.js）构建三维物理模型，然后由浏览器对模型进行渲染，从而解决跨平台问题。研究结果表明，WebGL技术的应用为三维物理模型的构建提供了新的思路，克服了跨平台问题，极大地支持泛在学习，适应教育新常态——创客教育。

关键词：三维模型；WebGL；跨平台；设计与开发；

中图分类号：G434 文献标志码：A 文章编号：1673-8454（2016）06-0075-05

一、引言

随着计算机技术和网络技术的快速发展，虚拟现实和三维可视化技术已成为时下Web技术的焦点。近年来3D技术因其开发和设计上的突出优势而被广泛应用在软件行业、3D硬件行业、数字娱乐行业、制造业、建筑业、虚拟现实、地理信息GIS以及3D互联网等行业[1]。然而当互联网时代的热潮还未褪去时，移动互联网时代已悄然来临。随着手机、Pad等移动设备的普及，越来越多的学校逐步开始尝试开放移动终端进入课堂，更进一步将移动设备引入教与学的过程。为更好地实现信息化创新教学，实现教师教学方式的改变与学生学习方式的转变，促进学生的知识建构，实现泛在学习、无缝学习，实现创客教育。那么如何使教学资源体现出交互性、移动性、智能化，以更好地适应课堂教学方式的变革？这对我们开发相关应用程序和教学资源提出了更大挑战：如何运用相关技术保证跨终端、跨平台的统一用户体验？

在过去，Web3D技术主要依赖不同的插件，为了展示3D效果，用户不得不安装各种插件，跨平台性较差。随着HTML5技术近年来的迅猛发展[2]，这种状况得到了极大改善。特别是随着HTML5标准的进一步规范和完善，其提供的新特性和新标签能更好地适应现今多终端访问需求。目前，更多的主流浏览器如Chrome、Firefox、Safari、Opera以及IE11等对HTML5和WebGL提供了较好的支持。因此，我们可以在浏览器内部实现3D图形的硬件加速，创建3D游戏或其他高级的3D图形应用程序，从而使其在不同终端运行成为可能。

在此背景下，本文针对一般三维物理模型存在开发复杂、硬件要求高以及移植不便等问题，研究了WebGL技术在构建三维物理模型中的应用，提出了利用浏览器对WebGL的支持来解决跨平台问题的方法。该方法利用图形硬件加速图形绘制，有着较快的调用速度，通过HTML5中Canvas画布获得三维绘制场景，在该场景中利用WebGL第三方库（three.js）构建三维物理模型，然后由浏览器对模型进行渲染和运行。该技术使用方便，不需要任何插件，增加了复用性和灵活性，且更容易得到跨平台的支持，如Windows、Mac OS、Linux、Android和iOS等操作系统的支持。WebGL技术的应用不仅可以克服跨平台问题，为无缝学习提供很好的支持，而且为构建三维物理模型做出了有益的探索和尝试。

二、无缝学习与创客教育

1.学习新常态——无缝学习

无缝学习是以社会学习、情景学习、知识建构为理论基础，在移动设备下进行的一对一数字化学习[3]。

移动终端设备的普及，人们对教与学资源的碎片化、可视化需求，在WebGL技术下能很好地实现三维物理模型的可视化，使学生能更好地理解，符合学生的认知。基于WebGL技术的三维物理模型能适合于各种系统软件和移动设备，在互联网+时代，能更好地适应学生利用碎片化时间进行无缝学习，促进学生学习方式的转变，也能很好地适应翻转课堂教学。

2.教育新常态——创客教育

创客教育是一种融合信息技术、秉承“开放创新、探究体验”教育理念，以“创造中学”为主要学习方式和以培养各类创新人才为目的的新型教育模式[4]。在创客教育中，教师角色的转变，从关注知识技能教学，转向培养学生终身发展能力和思维的教学，学生角色的转变，从知识的灌输到知识建构，在做中学，促进学生知识建构和创造性思维培养。基于WebGL技术开发的三维物理模型能促进学生的知识建构，培养学生高级思维技能，引领学生高级思维的发展，能引导教师从浅层学习走向深层学习的教学策略，有利于学生创造性思维的培养。

随着信息技术的发展、智能手机的普及，面对信息技术与教育教学深度融合的今天，人们对移动学习资源建设越来越重视，能更好地促进学生的无缝学习，在互联网时代，学生对碎片化思维与碎片化知识的需求，有利于学生学习方式的转变。基于WebGL技术开发的三维物理模型在物理课堂中的应用将是信息化教学创新必不可少的，三维物理模型的可视化与交互性能更好地促进学生的知识建构，有利于培养学生的创造性思维，为实现智慧教育提供可能。

三、WebGL技术简介

1.WebGL技术

WebGL是一个用来在Web上生成三维图形效果的应用编程接口，也是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定[5]，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡在浏览器里更流畅地展示3D场景和模型，还能创建更为复杂的导航和数据视觉化。WebGL技术直接利用JavaScript编程创建3D场景和动画，非常复杂且容易出错。框架的应用极大地简化了开发步骤，提高了开发效率，且更易维护和更新。目前已有大量基于WebGL技术的JavaScript库正在开发以加快创建3D图形的速度，如GLGE、SceneJS、Three.js等。本文主要采用Three.js开发框架来实现三维物理模型的开发。Three.js是一个很出色的开发框架，该框架以简单、直观的方式封装了WebGL底层的图形接口，从而降低了WebGL的使用难度，并且完全开源[6]。它提供了一个JavaScript应用程序接口，允许在浏览器端未安装任何插件的情况下进行2D/3D硬件加速渲染。

2.三维场景Web显示设计

在三维场景绘制之前，首先需要获取HTML5的canvas元素，然后通过该元素获得WebGL的绘制环境。在该上下文环境中，由Three.js通过以下6个基本步骤创建三维模型：

（1）设置场景：场景变量是一个三维空间，相当于一个大容器，用于存储和跟踪我们要渲染的所有物体的轨迹。场景设置没有很复杂的操作，只需要进行实例化，然后再依次将相机、灯光、模型等加入场景即可。

（2）设置相机：要渲染一个场景，我们需要一个相机来决定我们在渲染场景时能看到什么。在 Three.js 中能够指定透视投影和正投影两种方式的相机。

（3）设置光源：在一个场景中可以设置多个光源。Three.js中可以设置点光源、聚光灯、平行光源和环境光等。可根据具体场景模型和需求，添加适合的一种光源或几种光源的组合。

（4）设置模型：场景可以添加需要渲染的任何对象。对象主要由几何形状和材质构成。材质定义了对象的样式。我们可以通过编程来控制对象的位置，旋转和缩放。场景中添加的模型可以使用Three.js中的形状类，也可以使用JSON格式或二进制格式文件，也可以使用其它流行的3D建模工具（3DMAX、Maya）导出的obj文件，然后由Three.js的不同加载器对其解析。

（5）设置渲染器：三维空间里的物体映射到二维平面的过程被称为三维渲染。一般来说我们都把进行渲染操作的软件叫做渲染器[7]。具体需要生成渲染器对象、指定渲染器的高宽、设置渲染器的清除色等。通常设置好相机、添加完模型就可以调用渲染器的渲染函数来渲染整个场景了。

（6）设置交互：Web页面最终呈现模型，以及提供用户交互操作。良好的交互设计不仅能够吸引用户，增强用户体验，而且能够使用户对模型有更全面的认识。可以从三个技术模块进行设置：HTML5技术设计界面的结构、CSS技术对显示样式进行设定、DOMEvent处理鼠标键盘事件。

通过以上几个步骤，具有交互功能的三维模型就可以在网页上显示。图1为WebGL的绘图流程。

四、双节摆物理模型的设计与实现

双节摆模型是理论力学的一个基本模型，也是比较重要的一个模型。该模型的运动规律较为复杂，通过模拟双节摆的运动规律，能够使抽象的规律具体化和形象化。该模型主要是两根长度为L1和L2的无质量的细棒的顶端系有质量分别为m1和m2的两个球，初始状态如图2所示。我们将利用WebGL标准下的Three.js框架来模拟该模型从初始状态释放之后的两小球的运动轨迹。

1.双节摆物理模型的设计思路

首先对该模型进行功能分析，该模型需要实现改变两个小球初始位置或者质量观察两个小球的运动轨迹，并能够绘制两个细棒张力的变化曲线图，可以对各物理量变化情况如坐标、速度、能量等进行采集保存。基于以上功能描述，我们可以将本模型的实现归结为以下几点：

（1）画布、灯光、相机和渲染器等基本场景的设置；

（2）两个小球、细杆、固定点等初始状态绘制；

（3）运行过程中小球、细杆位置及变化曲线图的动态绘制；

（4）模型交互功能的实现（模型移动、旋转、缩放、参数改变、数据采集）。

本模型的关键是对小球进行受力分析以及运动轨迹的运算。在运动过程中忽略空气的阻力和细杆的质量。在整个系统中，不断变化的量是杆的张力、小球的速度、位置以及细杆的位置，而细杆的长度则是保持不变的。我们将固定点坐标设为（y，x，z），小球m1的坐标设为（y1，x1，z1），小球m2的坐标设为（y2，x2，z2），在处理小球速度时，我们将其分别沿着三个轴正交分解。

根据双节摆运动的速度、时间、细杆的张力以及系统的能量等来不断获得两个小球的坐标，从而在不同位置绘制小球和细杆来模拟其运动轨迹。细杆L1的绘制用绘制直线方法表示，通过固定点坐标和球m1坐标来确定，细杆L2的绘制通过球m1的坐标和球m2的坐标来确定。

2.双节摆物理模型的实现步骤

首先基于对模型的设计与分析，接下来开始模型的具体实现：

（1）基本场景设置

整个模型的绘制以及实现是基于Canvas画布实现的，Canvas元素有两个属性width和height来定义其大小。我们在Web页面中定义一个div元素，在JavaScript中通过id来获取该容器元素，随后引入Three.js库文件，通过WebGL渲染器来获得Canvas的上下文三维绘制场景。我们可以对renderer的尺寸、颜色等进行更加详细的设置，通过编写initCamera、initScene和initLight三个函数实现相机、场景和灯光的初始化。

（2）双节摆模型初始化设置

在整个模型绘制过程中，其工作主要分为初始化和运行两部分，分别由initObject和loop函数实现。我们将双节摆系统构建成Pendulum对象，主要包括支点对象（Cube）、小球对象（Ball）、细杆张力、长度、夹角余弦、系统能量等属性。小球对象包含的属性主要有质量、坐标和速度等，我们给这些属性设置一定的初始值，也可通过前端用户输入获得。通过封装对象的方式简化了调用过程，也便于灵活操作其相关属性，同时能够扩展相关属性。在创建物体时，需要传入两个参数，一个是形状（Geometry），本文用到的是立方体和球体，另一个是材质（Material），通过设置材质可以改变物体的颜色和纹理。

（3）绘制小球运动轨迹

小球运动轨迹的绘制主要是通过不断更新元素的状态位置等来实现动画。设置一定的时间间隔，不断获取小球的坐标，根据不同位置绘制小球，模拟出小球运动。通过编写loop函数来实现该功能，并调用如下代码实现小球的循环绘制。

window.requestAnimationFrame（） 是由浏览器专门为动画提供的API，该方法将告知浏览器要开始动画效果了，它在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。使用这个函数时需要在下次动画前调用相应方法来更新画面，这个方法就是传递给window.requestAnimationFrame的回调函数。通过递归调用同一方法来不断更新画面以达到动起来的效果。

在绘制细杆时我们使用new THREE.Line（）方法实时绘制，另外需要注意的是，在下次绘制之前需要清除本次绘制的细杆，调用scene.remove（）方法清除。为了使小球运动的轨迹更加符合运动规律，减小绘制误差，我们使用标准4级4阶的龙格库塔法（Runge–Kutta）[8]对小球位置和速度的微分方程进行高精度求解。

至此，双节摆的三维物理模型构建完成，我们需要调用Three.js库中的渲染器对整个场景和模型进行渲染，在渲染之前需要调用renderer的clear（）方法，来清除其颜色、深度和模板绘制缓冲区。随后该双节摆三维物理模型便可在Web上显示。为了能够使两个细杆的张力变化可视化，我们通过引入flotr2.js绘制两个细杆的张力变化曲线图。Flotr2[9]是HTML5绘制图表和图形库，它是一个独立框架，可以扩展，能够自定义图表类型，并且支持移动设备显示。

（4）交互功能实现

该模型对交互功能的实现主要包括三个方面：首先是参数的改变，在Web页面我们设置了可以让用户改变两个小球坐标位置和质量的输入文本框，用户可以输入不同参数以观察不同数据下小球运动的状态；其次是监听鼠标事件，主要包含mousedown、mouseup、mousemove和mousewheel等事件。这些事件是绑定在用于展示三维物理模型的div容器元素上。通过对这些事件的监听，模拟观察者，使用户能够将双节摆模型平移、旋转、缩放，以调整到自己喜欢和所需的角度或方式观看三维模型的每个局部细节；最后是数据采集和保存。在模型运行过程中，用户可以随时开始和暂停动画，我们使用的是按钮形式，有开始、暂停、继续和输出四个按钮。用户可保存任意时刻采集到的速度、张力和能量等数据，该功能利用HTML5新功能实现。

3.测试环境部署和运行

基于上述模型实现关键步骤和技术，我们实现了双节摆模型的构建。接下来需要对其进行部署和测试。WebGL对服务器端没有特殊要求，任意支持HTTP服务的Web服务器都可，我们将其配置在tomcat服务器上，接下来对其在不同操作系统、不同终端设备上进行测试。WebGL对硬件没有太高要求，CPU在1Ghz，内存在512MB以上即可。通过测试我们发现该模型可以通过PC端浏览器浏览，也可以通过手机、平板电脑等浏览器浏览，动画效果较为流畅，模型能够较为真实地模拟物理运动规律（如图3、图4、图5所示）。

五、总结与展望

1.总结

本文针对一般三维图形渲染过程中安装插件的麻烦，提出一种无插件的渲染方法，采用WebGL技术，三维模型可直接在浏览器端绘制和展现，无需安装任何插件。结合利用HTML5与WebGL相关技术，同时利用Three.js框架，在浏览器上构建出三维双节摆物理模型。通过测试实践，我们发现不管在PC端还是移动端，该模型三维动画的实现都较为流畅，在场景中能很好地通过鼠标或者触屏对模型进行移动、旋转、缩放等操作，从而实现多角度、细粒度的与模型进行交互，并且该模型能够进行相关数据采集和保存。研究结果表明，目前的主流浏览器都对WebGL都有较好的支持，这一技术的出现能够很好地解决跨平台问题。我们相信随着标准的进一步完善和相关技术的进一步推动，WebGL技术在网络交互、可视化及虚拟现实等领域都会有较大的推广价值，基于Web的3D仿真系统必将在商业、教育等领域有广阔的应用前景。

2.展望

开发基于WebGL的三维物理模型对开发建设移动学习资源的启示：

（1）开发移动学习资源是信息技术与教育教学深度融合发展的基本要求

教育信息化的大力发展，三通两平台的实现，新技术新媒体等的发展，教育信息化将促进教育的全面改革，建设移动学习新资源能为教师和学生开展移动学习、泛在学习提供可能，能更好的促进课堂教学方式的变革，促进学校的变革，也是促进信息技术与教育教学深度融合的基本要求。

（2）开发移动学习资源是变革教与学方式的基础

随着信息技术的不断发展，教与学也在不断的发生变化，移动学习资源的建设为开展信息化创新教学提供了有利条件，促进学生的知识建构，是更好地实施翻转课堂教学、开展创客教育的基础，也为学生开展泛在学习、移动学习提供方便。

（3）开发移动学习资源为智慧教育的实现提供可能

随着智慧教育的发展，人们对新型教与学资源的智能化需求越来越高，移动学习资源的智能化能进一步满足学生的个性化学习需求，促进学习者知识建构。建设新型优质教与学资源的共建共享，促进优质教育均衡化发展，进一步促进智慧教育的发展与实现。

当然，利用WebGL技术开发三维物理模型不是我们最终的目的，如何利用WebGL技术模拟演示物理现象及原理，将抽象的知识直观化、形象化，以激发学习者的学习兴趣和动机，并通过良好的交互设计来引导学习者进行知识的自我建构，能够给予学习者即时反馈是我们需要深入探究的重要课题。特别是处在移动互联网时代，如何利用这些技术创建出优质的移动学习资源，使学习者能够随时随地，更加灵活地利用技术进行学习是我们下一步研究的方向。我们有理由相信，随着技术的不断发展，必将推动教育融合创新，使教育更加开放灵活。

参考文献：

[1]艾达，乔明明，李敏等.Web 3D技术综述[J].微型机与应用，2014（2）：4-7.

[2]Wikipedia.WebGL[EB/OL]. http：//en.wikipedia.org /wiki/WebGL.

[3]祝智庭，孙妍妍.无缝学习——数字化学习新常态[J].开放教育研究，2015（1）：11-16.

[4]杨现民，李翼红.创客教育的价值潜能及其争议[J].现代远程教育研究，2015（3）：23-34.

[5]Khronos Group[EB/OL].http：//www.khronos.org/webgl.

[6]周敬敬，陈昕等.利用WebGL技术实现机房动态虚拟装配设计的可视化[J].科研信息化技术与应用，2013（2） ：87-92.

[7]况卫飞，彭四伟.三维渲染引擎编辑器的研究[J].电子设计工程，2009（9） ：91-92.

[8]陈哲.捷联惯导系统原理[M].北京：宇航出版社，1986：31-32.

[9]Flotr2 website[EB/OL].http：//www.humblesoftware.com/flotr2/.

（编辑：鲁利瑞）