第九届国际会计师联合会控制教育进展国际自动控制联合会，俄罗斯下诺夫哥罗德，2012年自动生成的WebGL应用程序与使用Easy Java SimulationsCarlos A. Jara* Francisco A. * * 巴塞罗那旅馆 ** 巴塞罗那东方文华酒店 ** 巴塞罗那东方文华酒店 * 巴塞罗那东方文华酒店 ** 阿利坎特大学，Carretera de San Vicente del Raspeig，s/n，PO Box 03690，AlicanteSpain（电子邮件：{carlos.jara，francisco.candelas，fernando.torres}@ ua.es）。**École Polytechnique Fédérale de Lausanne，CH-1015 LausanneSwitzerland（email：{christophe.salzmann，denis.gillet}@ epfl.ch）* University of Murcia，Campus del Espinardo，PO Box 30003，Murcia Spain（电子邮件：fem@um.es）* 国家远程大学（UNED），C/ Bravo Murillo，nº28，PO Box 28040，Madrid Spain（电子邮件：sdormido@dia.uned.es）翻译后摘要：本文提出了一种新的协作电子学习系统的基础上，虚拟实验室之间的实时同步通信。这种原始的方法提供了一种新的工具，它集成了同步协作电子学习框架内的虚拟实验室。该系统基于从3D Easy Java Simulations的小程序自动生成WebGL模拟。这些创建的WebGL模拟通过互联网同步，以便将它们集成到在线协作环境中。通过这种方式，几个学生可以只使用一个通信设备，使用任何启用WebGL的Web浏览器参加虚拟课堂。本文还介绍了基于这种新的教育工具的软件体系结构。关键词：协同环境，远程教学，Java 3D，虚拟实验室，WebGL1. 介绍计 算 机 支 持 的 协 作 学 习 （ Computer-SupportedCollaborative Learning，CSCL）是一种基于建构主义和协作学习理论的教学方法，它强调学生之间的社会相互依赖，主张学生通过相互教学来巩固学习成果（Alavi，1994）。第一个CSCL环境是为了在协作学习教学方法中使用技术作为中介工具而创建的（Koschmann，1994）。目前，由于网络技术的巨大发展，CSCL正在集成到基于Web的平台。这样，教育过程才能走出传统的课堂。考虑到学生与教师交互发生的时刻，CSCL环境可以分为异步和同步（Bafoustou和Mentzas，2002）。第一种允许在灵活的时间表中进行数据交换，并以异步方式进行远程访问。然而，这可能会导致学生的孤立感，从而降低他/她的动机（Kamel，Taylor和Breton，2005），因为学生不会从他们的问题中得到即时反馈。相比之下，同步环境使电子学习以类似于传统课堂的方式，像面对面的互动一样实时分享经验。然而，目前的CSCL同步环境主要集中在理论课的学习上。当基于网络的工具需要用于实际概念的远程教育时，特别是在工程方面，是虚拟实验室。通过虚拟实验室，学生可以通过互联网以实用的方式学习，从而了解难以仅从理论角度解释的物理现象（Dormido，2004）。他们的互动性鼓励学生在电子学习过程中发挥更积极的作用，并提供了一个现实的动手体验（Dormido等人，2005年a）。然而，大多数网络学习环境中的虚拟实验室都是为个人使用而设计的，它们不允许工作组。在eMersion（Gillet，Nguyen和Rekik ， 2005 年 ） 和 Automatl@bs （ Vargas 等 人 ， 2011年）。这些基于Web的平台包含一系列应用程序，学生可以通过这些应用程序进行实验，并与其他学生或教师分享结果。然而，在这些CSCL环境中的协作是在一个异步的方式。这里提出的工作开发的虚拟实验室与同步CSCL相结合，合并两种范式的功能和优势。基于该想法的第一种方法在早期被提出（Jara等人，2009年），但它假设了一定的实现复杂性，主要是由于所使用的通信协议。本文提出的新解决方案利用新的WebGL（基于Web的图形库）技术，大大简化了启动在线协作类的过程。WebGL基于一个软件库，该软件库扩展了JavaScript编程语言，使其能够在任何兼容的Web浏览器中生成交互式 3D图形。WebGL也© 2012 IFAC 160 10.3182/20120619-3-RU-2024.000392012年6月19日至21日，俄罗斯下诺夫哥罗德，国际会计师联合会第九届研讨会161WebGL 是 一 个 不 使 用 插 件 的 高 级 计 算 机 图 形 扩 展HTML。WebGL由非营利组织Khronos Group管理，其规范1.0于2011年3月3日发布（WebGL - OpenGL ES 2.0 forthe Web，2011）。使用该系统生成的HTML页面可以集成 到 个 人 学 习 环 境 中 ， 其 中 集 成 了 协 作 学 习 服 务（Gillet，2010; Salzmann和Gillet，2011）。本文的其余部分组织如下：第2节解释了协作系统，详细介绍了组件，通信框架和软件体系结构等方面。接下来，描述了从3D Ejs的应用程序自动生成WebGL模拟。之后，一个完整的例子，虚拟协作类的生成将显示在第4节。最后，在第5节中给出了一些重要的结论。2. 系统概述在本节中，将解释详细的系统描述。首先，描述了协同系统的主要组成部分。接下来，将解释实时协作中使用的通信工具以及如何同步模拟。然后给出了各组件的软件体系结构。2.1. 协作环境开发的协作系统的主要目标是提供一个模拟（这是自动生成的3D Ejs的小程序），可以很容易地实时可视化的虚拟类（即学生）的不同成员，只有一个网络浏览器。因此，这个电子学习系统有两个主要组成部分：一个主要的applet，这是创建与Ejs和一些学生的WebGL模拟嵌入在HTML页面。主要的applet是一个3D虚拟实验室，它管理虚拟类实时控制模拟的演变。WebGL模拟无法与共享模拟交互，它们只能显示主applet在虚拟实验室中的操作。2.2. 通信框架所提出的协作系统的通信框架基于JavaScript Web-Sockets（Web-Sockets API，2011），这是一种基于TCP协议的新的强大工具。Web-Socket定义了一个全双工的单套接字连接，通过它可以在客户端和服务器之间发送消息，两者都嵌入在HTML页面上的JavaScript代码中。这项技术大大简化了双向Web通信的复杂性。WebGL模拟连接在使用Web-sockets的对等（P2P）集中式覆盖网络中的主applet周围（图1）。主applet包含一个通信模块，用于管理虚拟类中连接的所有WebGL模拟的同步。该系统集中在一个无服务器的架构。这种通信方法提供了几个优点。一是避免了数据流中web服务器处理造成的延迟。其次，用户不必在Web服务器中安装任何集中式服务器程序，因为通信引擎嵌入在HTML模拟中。第三，网络连接的数量低于在架构中具有Web服务器的系统中。图1.主applet和WebGL模拟要同步共享虚拟实验室（3D applet和学生的WebGL模拟），应用程序必须始终处于模型的相同状态。正如在第3节中将要提到的，WebGL模拟只基于Ejs应用程序的视图部分生成。因此，WebGL模拟没有模型，它们是用Ejs' applet提供的接口数据更新的。这简化了通信框架和WebGL模拟。从3D应用程序发送到WebGL模拟的更新消息仅传输视图或界面元素的状态，例如3D对象的位置和方向。相同的状态意味着模拟必须在同一步骤中。因此，对于在主applet中执行的每个模拟步骤，刷新所有WebGL模拟所需的所有信息都通过建立的Web-Socket发送。为了在虚拟会话中连接的所有仿真之间实现实时同步，在为每个仿真步骤发送新的信息包之后，主小程序暂停仿真演化并等待来自WebGL仿真的响应以验证它们已经更新。在接收到这个响应之后，主applet继续进行系统演化。2.3. 通信引擎上一小节中解释的通信系统嵌入在主applet和WebGL模拟中。本小节描述了同步协同环境的软件层组件--主applet和WebGL仿真通信引擎。2.3.1. 主applet架构2012年6月19日至21日，俄罗斯下诺夫哥罗德，国际会计师联合会第九届研讨会162主applet是线程系统，用于管理连接到虚拟类的不同WebGL模拟之间的同步。组成其通信系统的主要部分如图所示。二、在虚拟会话开始时，教师小程序执行Web-Socket服务器对 象 的 实 例 ， 该 Web-Socket 服 务 器 对 象 在 固 定 端 口（nm）中参与来自WebGL模拟的新Web-Sockets客户端请求。对于每个连接的模拟，都会更新一个Web-Socket连接数组。为了同步共享虚拟实验室的应用程序，主applet将更新消息重新传输到WebGL模拟。如前所述，这些命令基本上是接口数据，以及组成虚拟环境的3D对象的位置和方向。此外，如前所述，有一个接收器模块，负责接收WebGL模拟的响应确认，以验证它们是否已更新。图二.主applet软件体系结构2.3.2. WebGL仿真体系结构WebGL模拟的软件架构如图3所示。这是嵌入在用户下载的HTML页面中。它比主applet的架构简单有一个Web-Socket客户端与主applet连接。WebGL模拟接收主applet的接口数据，并能够在应用程序中执行适当的更改。此外，对于执行的每个更改，向主小程序发送确认，以便同步虚拟类的所有应用程序（参见图3中的文本图三. WebGL仿真软件体系结构3. WebGL生成所有使用Ejs开发的应用程序都有一个软件核心，分为两个主要部分：模型和视图。模型负责计算描述系统的变量的值，视图或界面基于一组标准的Java Swing、Java 2D和Java 3D组件（在本文中，作者只考虑了使用3D组件创建的视图）。生成的WebGL模拟仅基于Ejs应用程序的视图部分。这样，WebGL模拟没有任何模型引擎，它们只使用Ejs' applet提供的接口数据进行更新图4显示了如何从Ejs的应用程序创建WebGL模拟。最初，主小程序通过HTTP协议发送一些关于小程序的3D环境的信息，其中大部分与仿真视图有关：3D对象，灯光，摄像机功能，虚拟对象的初始位置和方向等。这些信息作为POST参数传递给PHP模块，PHP模块在Web服务 器 中 生 成 嵌 入 WebGL 仿 真 的 HTML 网 页 （ 文 件Simulation.js）。这个JavaScript模拟是基于Ejs的相同视图元素从WebGL库创建的。4. 实验例在本节中，将解释从Ejs应用程序创建虚拟协作类的过程。WebGL模拟的生成已经集成到Ejs新测试版的选项中。基本上，该过程由两点组成：使用Ejs的新3D框架生成Java applet（Jara等人，2011年）。在公共Web服务器中自动生成URL地址，学生或用户可以在其中下载他们的WebGL协作模拟。本节将使用一个特定的模拟，一个3D Futura摆来解释。作者认为不适合描述此应用程序的开发，因为这超出了本文的范围。读者可参考Ejs的参考文献（Dormido等人，2005 b; Esquembre，2004; Sanchez等人，2005年）。4.1. 主applet生成在开发3D Ejs应用程序后，用户只需选择“添加WebGL生成支持”选项。为协作而准备的主applet被创建，并且它准备好公开发布到Web服务器上以供共享。图5示出了与Ejs的选项一起提出的主applet的外观。生成的小程序的JavaScript控件4.2. WebGL仿真为了给虚拟类的组件提供一个URL地址，开发了一种在公共Web服务器上生成HTML页面的动态方法。该方法的软件层在第3节中解释。本小节描述如何从用户的角度使用它。2012年6月19日至21日，俄罗斯下诺夫哥罗德，国际会计师联合会第九届研讨会163见图4。从Ejs的应用程序生成WebGL模拟WebGL模拟的URL直接从主applet生成。JavaScript控件第一个是安装主applet的公共Web服务器的URL地址，第二个是生成的WebGL模拟的名称。在填写这些字段后，主applet的通信系统通过HTTP协议将此数据发送到位于公共Web服务器中的PHP模块，并生成嵌入WebGL模拟的HTML文件。WebGL Generated字段将显示学生或用户访问协作模拟所使用的URL（参见图6）。主applet的用户只需通过简单的辅助工具（如电子邮件、论坛或聊天）将URL发送给虚拟班级的其他班级成员。如果上一个过程成功，则对话框中的控件“Start Web-Socket Server”将被启用。激活此控件后，主applet将在打开的端口上侦听WebGL模拟的请求。之后，用户可以连接到一个协作虚拟环境，只有一个URL地址。他们必须连接到提供的URL，并点击控制连接到Ejs-Sim服务器”（图。（六）。WebGL模拟的通信引擎向远程主applet发送Web-Socket请求。然后，WebGL仿真与主applet联机并加入协作虚拟会话。通过这种方式，用户可以按照前面描述的步骤随时随地创建协作环境。他们只需要一个互联网连接和一个支持Java的Web浏览器，就可以创建一个基于Ejs开发的虚拟实验室的虚拟课堂。图五.主applet生成4.3. 协作虚拟课堂从虚拟类中的一个WebGL模拟连接的那一刻起，它的用户界面就被禁用了。WebGL用户不能使用共享的虚拟实验室进行实验，并且主applet实时管理模拟演化。图7示出了所提出的虚拟实验室的虚拟会话，其中主小应用程序包含连接到虚拟会话的所有WebGL模拟。从图7中可以看出，视图或界面处于相同状态，并且主变量是同步的。2012年6月19日至21日，俄罗斯下诺夫哥罗德，国际会计师联合会第九届研讨会164见图6。WebGL仿真图第七章虚拟协作课堂中的同步虚拟实验室（主小程序-WebGL模拟）2012年6月19日至21日，俄罗斯下诺夫哥罗德，国际会计师联合会第九届研讨会1655. 结论和今后的工作本文提出了一种结合三维虚拟实验室和同步协作学习实践两种优秀教育资源的新型网络学习系统。通过这种方法，一种新的方法来共享知识的同步方式的基础上的经验，在虚拟实验室已经实现。这个电子学习系统是一个便携式的协作框架，用于在EJS中开发的模拟。该通信架构已集成在新的EJS版本中，可以以透明和简单的方式应用于该平台上开发的所有3D应用程序。由于新的Ejs版本包含在小程序中的协作功能，用户可以通过WebGL技术随时随地创建协作环境。作为未来的工作，本文提出的这种方法可以扩展到开发一个完整的库WebGL视图应用程序。该框架可以在Ejs环境中实现模型和视图的完全分离。这样，几个WebGL应用程序可以用来自另一台计算机上执行的模型的数据刷新。确认这项工作得到了以下项目和赠款的支持：西班牙教育和科学部的DPI 2008 -02647项目，阿利坎特大学技术和教育创新副校长办公室的GITE赠款，穆尔西亚地区塞涅卡基金会的08667/PI/08项目，西班牙教育和科学部的DPI2007-61068和MTM 2008 -03679/MTM项目 以及 西班 牙CICYT的DPI 2007 -61068赠款项目。引用Alavi，M.（1994年）。计算机辅助协作学习：一项实证评估。MIS Quarterly，18，159-174.Bafoustou，G.，和Mentzas，G.（2002年）的报告。协同系 统 的 回 顾 与 功 能 分 类 。 International Journal onInformation Management，22，281-305.多尔米多湾 （2004年）。 控制学习：现在和未来。Annual Reviews in Control，28，115-136.Dormido ， S. ， 多 尔 米多 河 ， Sanchez ， J.和 Duro ， N.（2005年a）。互动在控制学习中的作用。国际工程教育杂志，21，1122-1133。Dormido，S.，Farias，G.，Sanchez，J.和Esquembre，F.（ 2005 年 b ） 。 使 用 Easy Java Simulations 为 现 有Simulink模型添加交互性。第44届IEEE欧洲决策与控制会议论文集，4163-4168。塞维利亚（西班牙）。Esquembre，F.（2004年）。Easy Java Simulations：一个用Java创建科学模拟的软件工具。Computer PhysicsCommunications，156（2），199-204.Gillet，D.，Nguyen A.V.和Rekik，Y.（2005年）。灵活工程教育中的协作网络实验。IEEE Transactions onEducation，48，696-704.Gillet，D.（2010年）。解决工程教育研究的挑战：个人学习的Web 2.0社交软件。国际工程教育杂志，26（5），1134-1143。Jara ， CA ， 坎 德 拉 斯 ， 佛 罗 里 达 州 ， Torres ， F. ，Dormido，S.，Esquembre，F.和Reinoso，O.（2009年）。通过互联网实现虚拟实验室的实时协作。Computers Education，52（1），126-140.哈 拉 角 一 、 Esquembre ， F. ， 克 里 斯 蒂 安 ， W. ，Candelas，F.一、托雷斯角，澳-地和Dormido，S.（2011年）。一种新的基于物理原理的三维可视化框架 。 计 算 机 物 理 学 通 讯 在 印 刷 中 。 DOI ：10.1016/j.cpc.2011.08.007。Kamel，M.，泰勒，A.和Breton，A.（2005年）。在线远程 学 习 程 序 中 的 同 步 通 信 实 验 ： 案 例 研 究 。Telemedicine Journal and e-Health，11，583-593.Koschmann，K.（1994年）。协作学习的计算机支持理论。Journal of the Learning Sciences，3（3），219-225.萨尔茨曼角和Gillet，D.（2011年）。远程实验室和社交媒体：高等工程教育中的敏捷聚合和开发。第二届IEEE国际工程教育会议论文集，110-115，安曼（约旦）。Sanchez，J.，Esquembre，F.，Martin，C.，Dormido，S.，Dormido-Canto，S.，坎托河，等（2005）。EasyJavaSimulations ： 一 个 开 源 工 具 ， 使 用MATLAB/Simulink开发交互式虚拟实验室。国际工程教育杂志，21（5），789-813。Web-SocketsAPI （ 2011 ） 。 可 在 线 查 阅 ：http://dev.w3.org/html5/websockets/。Vargas，H.; Sánchez，J.; Jara，C.A.; Torres，F.;多尔米多湾Candelas，F.A.（2011年）。自动控制网络实验室 。 IEEE Transactions on Learning Technologies ， 4（3），197-208.WebGL - OpenGL ES 2.0 for the Web（2011）。可上网查阅：http://www.khronos.org/。
